/* ============================================================================
 * §1  ActionConfirmDialog
 *
 * MudDialog skin that mirrors a confirmation dialog component.
 * Three states selected via [data-state] on the inner panel:
 *   - pending   warning icon, Cancel + primary action
 *   - success   animated tick, no buttons (auto-dismiss)
 *   - error     X icon,        Cancel + Retry (destructive color)
 *
 * Used by: BinaryPlate.BlazorPlate.Shared.Dialog.ActionConfirmDialog
 * ========================================================================== */

/* Force the MudDialog frame to drop Mud's default chrome (no header bar, no
   actions strip, no padding) so the inner panel owns the entire surface. */
.av-confirm-dialog.mud-dialog {
  /* Light: white. Dark: dark-700 directly (matches the confirmation dialog spec
       which uses `dark:bg-dark-700`, NOT --surface-1   → dark-450 which is
       too light). dark-700 is theme-aware via data-theme-dark. */
  background: var(--color-white) !important;
  color: var(--color-gray-700) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow:
    0 10px 40px -8px rgb(from var(--color-gray-900) r g b / 0.18),
    0 4px 16px -4px rgb(from var(--color-gray-900) r g b / 0.12) !important;
  width: 100%;
  max-width: 28rem;
  /* 448px = design max-w-md */
  overflow: hidden;
}

html.dark .av-confirm-dialog.mud-dialog {
  background: var(--color-dark-700) !important;
  color: var(--color-dark-100) !important;
  box-shadow:
    0 10px 40px -8px rgb(0 0 0 / 0.55),
    0 4px 16px -4px rgb(0 0 0 / 0.4) !important;
}

/* Mud renders the dialog content inside .mud-dialog-content. Strip its default
   padding and let the inner panel control it (so px/py match the design
   reference: 16/24, 20/24 at sm+). */
.av-confirm-dialog .mud-dialog-content {
  padding: 0 !important;
}

/* Hide MudDialog's title row entirely — ActionConfirmDialog renders no <TitleContent>
   so this row would otherwise be a thin empty strip with the close button slot
   above the icon. The action row is rendered inline inside __panel, so we also
   hide the dialog-actions slot. */
.av-confirm-dialog .mud-dialog-title,
.av-confirm-dialog .mud-dialog-actions {
  display: none !important;
}

/* The inner panel — text-centered, vertical rhythm matches the React reference. */
.av-confirm-dialog__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 16px;
}

@media (min-width: 640px) {
  .av-confirm-dialog__panel {
    padding: 24px 20px;
  }
}

/*   Icon (96 ם 96)   */
.av-confirm-dialog__icon {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  line-height: 0;
  margin: 0 auto;
}

/* All three state icons are inline stroke-based SVGs (heroicons outline
       for pending/error, custom AnimatedTick for success). They inherit
       `currentColor` from the per-state rules below — no `fill` override
       needed since `fill="none"` is already set on the SVG element. */
.av-confirm-dialog__icon svg {
  width: 96px !important;
  height: 96px !important;
}

/* Per-state tint applied to the icon container. Note: [data-state] lives on
   .av-confirm-dialog__panel (set in the razor), NOT on the .mud-dialog root —
   so the panel is the correct hook. The success state uses .av-confirm-tick
   and falls through to its own rules below. */
.av-confirm-dialog__panel[data-state="pending"] .av-confirm-dialog__icon {
  color: var(--color-warning) !important;
}

.av-confirm-dialog__panel[data-state="error"] .av-confirm-dialog__icon {
  color: var(--color-error) !important;
}

.av-confirm-dialog__panel[data-state="success"] .av-confirm-dialog__icon {
  color: var(--color-success) !important;
}

/*   Title + description   */
.av-confirm-dialog__title {
  margin: 16px 0 0 0;
  font-size: 1.25rem;
  /* text-xl */
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-gray-800);
}

html.dark .av-confirm-dialog__title {
  color: var(--color-dark-100);
}

.av-confirm-dialog__description {
  margin: 8px auto 0 auto;
  max-width: 20rem;
  /* max-w-xs */
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-gray-600);
}

html.dark .av-confirm-dialog__description {
  color: var(--color-dark-200);
}

/* Optional bullet list under the description (ActionConfirmDialog.Items). Left-aligned inside the
   centered panel: a list reads down its bullets, not from the middle. */
.av-confirm-dialog__list {
  margin: 12px auto 0 auto;
  max-width: 22rem;
  padding-left: 1.25rem;
  list-style: disc;
  text-align: left;
  color: var(--color-gray-600);
}

.av-confirm-dialog__list > li + li {
  margin-top: 6px;
}

html.dark .av-confirm-dialog__list {
  color: var(--color-dark-200);
}

/*   Action row   */
.av-confirm-dialog__actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 48px;
  /* mt-12 */
}

/* Buttons share a uniform footprint matching the reference:
   h-9 (36px) min-w-[7rem] (112px). Mud's MudButton defaults overshoot this,
   so we tighten them inside the dialog scope.
   Scoped to .av-confirm-dialog__btn-cancel / -btn-action only — NOT every
   .mud-button-root, since MudSwitch / MudCheckBox internals also use
   .mud-button-root and would inherit the 7rem min-width otherwise. */
.av-confirm-dialog .av-confirm-dialog__btn-cancel.mud-button-root,
.av-confirm-dialog .av-confirm-dialog__btn-action.mud-button-root {
  height: 36px;
  min-width: 7rem;
  padding: 0 16px;
  border-radius: var(--radius-md);
  font-weight: 500;
  text-transform: none;
}

/* Cancel (outlined neutral) */
.av-confirm-dialog .av-confirm-dialog__btn-cancel {
  background: transparent;
  border: 1px solid var(--color-gray-300);
  color: var(--color-gray-700);
}

.av-confirm-dialog .av-confirm-dialog__btn-cancel:hover {
  background: var(--color-gray-100);
  border-color: var(--color-gray-400);
}

html.dark .av-confirm-dialog .av-confirm-dialog__btn-cancel {
  border-color: var(--color-dark-400);
  color: var(--color-dark-100);
}

html.dark .av-confirm-dialog .av-confirm-dialog__btn-cancel:hover {
  background: var(--color-dark-600);
}

/* Pending action — uses the active brand primary so the button reflects the
   user's choice in the Theme Customizer (Rose   → crimson, Indigo   → violet,
   Green   → green, etc.). Mirrors a confirmation dialog (color="primary").
   [data-state] hook lives on .av-confirm-dialog__panel (see razor). */
.av-confirm-dialog__panel[data-state="pending"] .av-confirm-dialog__btn-action {
  background: var(--color-primary-600) !important;
  color: var(--color-white) !important;
  border: 1px solid var(--color-primary-600) !important;
}

.av-confirm-dialog__panel[data-state="pending"]
  .av-confirm-dialog__btn-action:hover {
  background: var(--color-primary-700) !important;
  border-color: var(--color-primary-700) !important;
}

/* Error action = retry — uses the semantic error color (orange-red, fixed)
   regardless of theme primary, so the error state always reads as "danger". */
.av-confirm-dialog__panel[data-state="error"] .av-confirm-dialog__btn-action {
  background: var(--color-error) !important;
  color: var(--color-white) !important;
  border: 1px solid var(--color-error) !important;
}

.av-confirm-dialog__panel[data-state="error"]
  .av-confirm-dialog__btn-action:hover {
  background: var(--color-error-darker) !important;
  border-color: var(--color-error-darker) !important;
}

/* Success state has only a Done button — green pill */
.av-confirm-dialog__panel[data-state="success"] .av-confirm-dialog__btn-action {
  background: var(--color-success) !important;
  color: var(--color-white) !important;
  border: 1px solid var(--color-success) !important;
}

.av-confirm-dialog__panel[data-state="success"]
  .av-confirm-dialog__btn-action:hover {
  background: var(--color-success-darker) !important;
  border-color: var(--color-success-darker) !important;
}

/* Inline spinner aligned to the action text. Mud's progress circular gets
   sized down so it doesn't push the button taller. */
.av-confirm-dialog .av-confirm-dialog__spinner {
  width: 16px;
  height: 16px;
  margin-right: 8px;
}

/* While the async confirm is in flight the action button is disabled visually
   but readable — preserve the colored background, just lower opacity. */
.av-confirm-dialog .mud-button-root.mud-button-disabled,
.av-confirm-dialog .mud-button-root[disabled] {
  opacity: 0.7;
  pointer-events: none;
}

/*   WI #1875 — --unsaved variant (UnsavedChangesDialog): warning icon in a tinted
   circle instead of the 96px glyph, and a third, destructive text action under
   the two buttons. */
.av-confirm-dialog__icon.av-confirm-dialog__icon--soft {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 9999px;
  background: rgb(from var(--color-warning) r g b / 0.14);
}

html.dark .av-confirm-dialog__icon.av-confirm-dialog__icon--soft {
  background: rgb(from var(--color-warning) r g b / 0.22);
}

.av-confirm-dialog__icon.av-confirm-dialog__icon--soft svg {
  width: 32px !important;
  height: 32px !important;
}

.av-confirm-dialog--unsaved .av-confirm-dialog__actions {
  flex-wrap: wrap;
  margin-top: 32px;
}

.av-confirm-dialog .av-confirm-dialog__btn-discard.mud-button-root {
  margin-top: 12px;
  text-transform: none;
  color: var(--color-error);
}

.av-confirm-dialog .av-confirm-dialog__btn-discard.mud-button-root:hover {
  background: rgb(from var(--color-error) r g b / 0.08);
}

html.dark .av-confirm-dialog .av-confirm-dialog__btn-discard.mud-button-root {
  color: var(--color-error-lighter);
}

/*   AnimatedTick (success state)
   Mirrors the animated tick spec: a circle path stroked over
   0.6s, then a check path drawn over 0.25s with a 0.6s delay. Stroke colors
   inherit from currentColor on the parent — color comes from the success
   tint defined above. */
@keyframes av-confirm-tick-checkmark {
  0% {
    stroke-dashoffset: 100px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes av-confirm-tick-circle {
  0% {
    stroke-dashoffset: 480px;
  }

  100% {
    stroke-dashoffset: 960px;
  }
}

.av-confirm-tick {
  width: 96px;
  height: 96px;
  stroke: currentColor;
  fill: none;
}

.av-confirm-tick .av-confirm-tick__circle {
  stroke-dasharray: 480px, 480px;
  stroke-dashoffset: 960px;
  animation: av-confirm-tick-circle 0.6s ease-in-out backwards;
}

.av-confirm-tick .av-confirm-tick__check {
  stroke-dasharray: 100px, 100px;
  stroke-dashoffset: 200px;
  animation: av-confirm-tick-checkmark 0.25s ease-in 0.6s backwards;
}

/* Button styles */
.mud-button-root:not(.mud-icon-button):not(.mud-fab) {
  border-radius: var(--radius-lg) !important;
}

/* ============================================================================
 * §2  FormDialog
 *
 * Skin for any MudDialog that hosts a form (create / edit / settings, etc.).
 * Uses MudBlazor's standard dialog slots — TitleContent, DialogContent,
 * DialogActions — and styles each one to act as a sticky header, scrollable
 * body, and sticky footer respectively. The dialog itself becomes a flex
 * column with a capped max-height so on long forms only the body scrolls;
 * the title and actions stay visible.
 *
 * Canonical HTML structure expected by these styles:
 *
 *     <MudDialog Class="av-form-dialog av-form-dialog--size-medium" Options="@_options">
 *
 *         <TitleContent>
 *             <MudText Typo="Typo.h6" Class="av-form-dialog__title">
 *                 @Resource.Edit_User
 *             </MudText>
 *             <MudIconButton Icon="@CloseIconSvg"
 *                            Class="av-form-dialog__close"
 *                            OnClick="Cancel"
 *                            aria-label="@Resource.Close" />
 *         </TitleContent>
 *
 *         <DialogContent>
 *             <MudText Typo="Typo.body2" Class="av-form-dialog__description">
 *                 @Resource.Some_Intro
 *             </MudText>
 *             <MudElement HtmlTag="div" Class="av-form-fields">
 *                 @* fields — wrap in MudForm if you need validation refs *@
 *                 <MudTextField ... />
 *                 <MudTextField ... />
 *                 ...
 *             </MudElement>
 *         </DialogContent>
 *
 *         <DialogActions>
 *             <MudText Typo="Typo.body2" Class="av-form-dialog__hint">
 *                 @Resource.Some_Hint
 *             </MudText>
 *             <MudElement HtmlTag="div" Class="av-form-dialog__actions">
 *                 <MudButton OnClick="Cancel" Class="av-form-dialog__btn-cancel">@Resource.Cancel</MudButton>
 *                 <MudButton OnClick="Save"   Class="av-form-dialog__btn-action">@Resource.Save</MudButton>
 *             </MudElement>
 *         </DialogActions>
 *
 *     </MudDialog>
 *
 * Required `_options`:
 *     new DialogOptions { CloseButton = false, MaxWidth = MaxWidth.False, FullWidth = false }
 *
 * Size variants — pick ONE modifier on the MudDialog Class:
 *     av-form-dialog--size-small    // 384 px
 *     av-form-dialog--size-medium   // 512 px (default — design max-w-lg)
 *     av-form-dialog--size-large    // 640 px
 *     av-form-dialog--size-xl       // 768 px
 * ========================================================================== */

/* §2.1   Dialog frame (flex column owning the sticky layout)   */
/* The .mud-dialog node IS the flex container — its three children
   (.mud-dialog-title / -content / -actions) stack vertically and are
   distributed via `flex: 0 0 auto` (title + actions) and `flex: 1 1 auto`
   (content). This is what gives the sticky-header / scrollable-body /
   sticky-footer behaviour without an extra wrapper. */
.av-form-dialog.mud-dialog {
  display: flex;
  flex-direction: column;
  /* Light: white. Dark: dark-700 directly (NOT --surface-1, which our token
       map resolves to dark-450 — too light. The reference spec
       uses `dark:bg-dark-700` verbatim, and that token IS theme-aware via
       data-theme-dark in the design tokens stylesheet §4). */
  background: var(--color-white) !important;
  color: var(--color-gray-700) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow:
    0 10px 40px -8px rgb(from var(--color-gray-900) r g b / 0.18),
    0 4px 16px -4px rgb(from var(--color-gray-900) r g b / 0.12) !important;
  width: 100%;
  max-width: 32rem;
  /* default = medium */
  /* Cap the height so on long forms the body becomes scrollable instead of
       pushing the actions off-screen. 90vh leaves a comfortable gutter. */
  max-height: 90vh !important;
  overflow: hidden;
  /* clip child scroll within the rounded corners */
}

html.dark .av-form-dialog.mud-dialog {
  background: var(--color-dark-700) !important;
  color: var(--color-dark-100) !important;
  box-shadow:
    0 10px 40px -8px rgb(0 0 0 / 0.55),
    0 4px 16px -4px rgb(0 0 0 / 0.4) !important;
}

/* Size modifiers — applied alongside .av-form-dialog on the same element. */
.av-form-dialog--size-small.mud-dialog {
  max-width: 24rem;
}

.av-form-dialog--size-medium.mud-dialog {
  max-width: 32rem;
}

.av-form-dialog--size-large.mud-dialog {
  max-width: 40rem;
}

.av-form-dialog--size-xl.mud-dialog {
  max-width: 48rem;
}

/* Mobile fallback — let the dialog use the full viewport width on phones. */
@media (max-width: 480px) {
  .av-form-dialog.mud-dialog {
    max-width: calc(100% - 16px) !important;
    max-height: 95vh;
  }
}

/* §2.2   Header (TitleContent slot, sticky top)   */
/* MudBlazor renders TitleContent inside .mud-dialog-title with default
   padding and typography. We override to get the gray header bar with
   title left + close button right. flex: 0 0 auto prevents it from
   stretching when the body grows. */
.av-form-dialog .mud-dialog-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px !important;
  background: var(--color-gray-200) !important;
  flex: 0 0 auto;
}

@media (min-width: 640px) {
  .av-form-dialog .mud-dialog-title {
    padding: 12px 20px !important;
  }
}

html.dark .av-form-dialog .mud-dialog-title {
  background: var(--color-dark-800) !important;
}

.av-form-dialog__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-gray-800);
  /* Truncate long titles so the close button stays visible. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

html.dark .av-form-dialog__title {
  color: var(--color-dark-100);
}

/* MudBlazor 9 injects its own close button inside .mud-dialog-title even when
   DialogOptions.CloseButton = false (regression vs. v6/v7). Hide any
   icon-button in the title slot that is NOT our custom one — by class
   exclusion: ours has .av-form-dialog__close, Mud's default doesn't. */
.av-form-dialog .mud-dialog-title .mud-icon-button:not(.av-form-dialog__close) {
  display: none !important;
}

/* The close is a MudIconButton — Mud's defaults (height 36px, min-width 7rem,
   padding 0 18px from the §2.5 button rule) need to be overridden to get a
   small 28px round chip. Selectors stack `.av-form-dialog__close` with
   `.mud-icon-button` so we beat both the §2.5 generic .mud-button-root rule
   and Mud's own button styles. */
.av-form-dialog .av-form-dialog__close.mud-icon-button {
  width: 28px;
  min-width: 28px;
  height: 28px;
  flex-shrink: 0;
  margin-right: -6px;
  /* align flush with the right edge of the header */
  padding: 0;
  border: 0;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--color-gray-700);
  transition: background-color 120ms ease;
}

.av-form-dialog .av-form-dialog__close.mud-icon-button:hover {
  background: rgb(from var(--color-gray-900) r g b / 0.06) !important;
}

/* Mud's icon root SVG sits inside the button — size it down to 18px and
       force fill:none so the heroicon's stroke-only path renders correctly
       (Mud defaults the inner SVG's fill to currentColor for material icons). */
.av-form-dialog__close.mud-icon-button .mud-icon-root {
  width: 18px !important;
  height: 18px !important;
  font-size: 18px !important;
  fill: none !important;
  stroke: currentColor;
}

html.dark .av-form-dialog .av-form-dialog__close.mud-icon-button {
  color: var(--color-dark-200);
}

html.dark .av-form-dialog .av-form-dialog__close.mud-icon-button:hover {
  background: rgb(from var(--color-white) r g b / 0.06) !important;
}

/* §2.3   Body (DialogContent slot, the scrollable region)   */
/* MudBlazor renders DialogContent inside .mud-dialog-content. We claim it as
   the scrollable region (flex: 1 1 auto + overflow-y) and set our own
   padding (16 / 20 px on sm+) to match the body padding spec. */
.av-form-dialog .mud-dialog-content {
  flex: 1 1 auto;
  min-height: 0;
  /* required so overflow-y kicks in */
  /* Explicit max-height cap inside the dialog's 90vh, reserving chrome:
       header (~50px) + footer with hint that can wrap to two rows (~120px).
       Ensures the body scrolls internally and never clips the action buttons. */
  max-height: calc(90vh - 180px) !important;
  overflow-y: auto !important;
  padding: 16px !important;
}

/* Opt-in modifier for form dialogs whose content is short and shouldn't
   reserve a scrollbar. The Mud focus-trap wrappers between .mud-dialog and
   .mud-dialog-content break the flex column chain — we re-establish flex
   through them with `flex: 0 1 auto` so the content area sizes to its
   intrinsic height instead of filling the dialog's max-height (which is
   what surfaces the scrollbar gutter on Windows). Apply by adding
   `av-form-dialog--auto-height` alongside `av-form-dialog` on the
   MudDialog Class attribute. */
.mud-dialog.av-form-dialog.av-form-dialog--auto-height .mud-focus-trap,
.mud-dialog.av-form-dialog.av-form-dialog--auto-height
  .mud-focus-trap-child-container {
  display: flex !important;
  flex-direction: column !important;
  flex: 0 1 auto !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: 100% !important;
}

/* `overflow: visible` (shorthand) here is intentional — MudBlazor's
   bundled CSS uses `.mud-dialog .mud-dialog-content { overflow: auto }`
   (also shorthand), so to override both axes cleanly we use the same
   shorthand. The `.mud-dialog` prefix raises specificity to 0,4,0 so
   we beat Mud's `.mud-dialog .mud-dialog-content` (0,2,0). */
.mud-dialog.av-form-dialog.av-form-dialog--auto-height .mud-dialog-content {
  flex: 0 1 auto !important;
  overflow: visible !important;
}

@media (min-width: 640px) {
  .av-form-dialog .mud-dialog-content {
    padding: 20px !important;
  }
}

/* Optional intro paragraph at the top of the body, above the form fields. */
.av-form-dialog__description {
  color: var(--color-gray-600);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

html.dark .av-form-dialog__description {
  color: var(--color-dark-200);
}

/* Form-fields group — direct port of the form-fields wrapper spec
   `<div class="mt-4 space-y-5">`. Sits 16 px below the previous block
   (typically .av-form-dialog__description) and applies a uniform 20 px
   vertical gap between every field inside.

   `display: flex` + `gap` (instead of `> * + * { margin-top }`) guarantees
   the gap is the SAME visual distance regardless of each child's internal
   padding — gaps don't margin-collapse with adjacent box edges. Combined
   with the collapsed helper-container override in §2.7, all fields end at
   their border edge and the rhythm reads uniformly. */
.av-form-fields {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  /* space-y-5   → 20 px */
  margin-top: 1rem;
  /* mt-4         → 16 px */
}

/* §2.3b  Grouped form section (bordered box + eyebrow title). Groups related
   fields (e.g. OAuth app vs inbound forms) so a form dialog doesn't read as a
   flat stack. Title text uses Typo.overline in markup; this class only owns
   layout + color. */
.av-form-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: 14px;
}

html.dark .av-form-section {
  border-color: var(--color-dark-500);
}

.av-form-section__legend {
  margin: 0;
  color: var(--color-gray-500);
}

html.dark .av-form-section__legend {
  color: var(--color-dark-300);
}

/* Connection block: caption + action button, left-aligned, tight gap.
   Uses a caption (non-growing) instead of the footer hint so it never
   expands to fill the dialog's free vertical space. */
.av-form-section__connect {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.av-form-section__connect-hint {
  margin: 0;
  color: var(--color-gray-500);
}

html.dark .av-form-section__connect-hint {
  color: var(--color-dark-300);
}

/* §2.4   Footer (DialogActions slot, sticky bottom)   */
/* MudBlazor renders DialogActions inside .mud-dialog-actions with default
   `padding: 8px` and `justify-content: flex-end`. We override both so the
   slot can host a hint paragraph on the left and an actions group on the
   right, with the actions wrapping to a second line when the hint is long.

   Layout intent:
     [hint .................. Cancel  Save]         short hint, single row
     [hint going on and on and on...     ]
     [                          Cancel  Save]       long hint, wraps above
   Achieved with flex-wrap + margin-left:auto on the actions group, so the
   actions are always flush-right whether they share the row or stand alone. */
.av-form-dialog .mud-dialog-actions {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start !important;
  gap: 12px;
  padding: 12px 16px !important;
  /* Match the dialog frame so the footer reads as part of the same surface.
       Light: white. Dark: dark-700 (matches the frame override above). */
  background: var(--color-white);
  border-top: 1px solid var(--color-gray-100);
  flex: 0 0 auto;
}

@media (min-width: 640px) {
  .av-form-dialog .mud-dialog-actions {
    padding: 14px 20px !important;
  }
}

html.dark .av-form-dialog .mud-dialog-actions {
  background: var(--color-dark-700);
  border-top-color: var(--color-dark-600);
}

/* Hint = icon + copy, side by side. The wrapper flexes as a single unit so
   when the footer collapses to two rows, the icon stays glued to its text. */
.av-form-dialog__hint {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 240px;
  /* min 240 px before wrapping to its own line */
  min-width: 0;
  margin: 0;
  color: var(--color-gray-600);
  font-size: 0.8125rem;
  line-height: 1.4;
}

html.dark .av-form-dialog__hint {
  color: var(--color-dark-200);
}

/* The inner MudText would normally apply mud-typography-body2 (14 px) and a
   default p-tag margin. Force it to inherit from the wrapper so the hint
   reads as one cohesive 13 px line, regardless of the Typo passed in. */
.av-form-dialog__hint .mud-typography {
  margin: 0 !important;
  color: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

/* Hint icon — informational, never tinted with the brand primary. Size is
   fixed at 16 px (smaller than Mud's Size.Small default of 20 px) to match
   the design footer-hint pattern, and flex-shrink:0 keeps it round even if
   the copy gets wide. */
.av-form-dialog__hint-icon.mud-icon-root {
  width: 16px !important;
  height: 16px !important;
  font-size: 16px !important;
  color: var(--color-yellow-500);
  flex-shrink: 0;
}

html.dark .av-form-dialog__hint-icon.mud-icon-root {
  color: var(--color-dark-300);
}

/* Adornment icons in form dialogs render at 18px so the visual weight matches
 the compact rhythm of the dialog. Without this, Heroicons paths fill the
 full 24×24 box and outweigh the surrounding controls. */
.av-form-dialog .mud-input-adornment .mud-icon-root,
.av-form-dialog .mud-input-adornment-icon {
  width: 18px !important;
  height: 18px !important;
  font-size: 18px !important;
}

.av-form-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
  margin-left: auto;
  /* keeps actions right-aligned even when wrapped */
}

/* §2.5   Buttons (rounded-full pill style, matches the design spec)   */
/* Scoped to the two explicit action-button classes only — NOT to every
   .mud-button-root inside .av-form-dialog, because MudSwitch / MudCheckBox
   / MudIconButton internally render `.mud-button-root` too, and a generic
   override would force `min-width: 7rem` and `height: 36px` on those
   primitives, breaking their layout (the switch ended up 112 px wide). */
.av-form-dialog .av-form-dialog__btn-cancel.mud-button-root,
.av-form-dialog .av-form-dialog__btn-action.mud-button-root {
  height: 36px;
  min-width: 7rem;
  padding: 0 18px;
  border-radius: 9999px !important;
  /* override the global radius from §1 */
  font-weight: 500;
  text-transform: none;
}

.av-form-dialog .av-form-dialog__btn-cancel {
  background: transparent;
  border: 1px solid var(--color-gray-300);
  color: var(--color-gray-700);
}

.av-form-dialog .av-form-dialog__btn-cancel:hover {
  background: var(--color-gray-100);
  border-color: var(--color-gray-400);
}

html.dark .av-form-dialog .av-form-dialog__btn-cancel {
  border-color: var(--color-dark-400);
  color: var(--color-dark-100);
}

html.dark .av-form-dialog .av-form-dialog__btn-cancel:hover {
  background: var(--color-dark-600);
}

/* Primary action — uses the active brand primary so the button reflects the
   current theme (Rose / Indigo / Blue / Green / …). */
.av-form-dialog .av-form-dialog__btn-action {
  background: var(--color-primary-600) !important;
  color: var(--color-white) !important;
  border: 1px solid var(--color-primary-600) !important;
}

.av-form-dialog .av-form-dialog__btn-action:hover {
  background: var(--color-primary-700) !important;
  border-color: var(--color-primary-700) !important;
}

/* Inline spinner placed inside the action button while the async submit
   is in flight. Sized down so it doesn't push the button taller. */
.av-form-dialog .av-form-dialog__spinner {
  width: 16px;
  height: 16px;
  margin-right: 8px;
}

.av-form-dialog .mud-button-root.mud-button-disabled,
.av-form-dialog .mud-button-root[disabled] {
  opacity: 0.7;
  pointer-events: none;
}

/* §2.6   Input fields (see §6 Global form primitives)   */
/* Outlined input border / hover / focus / error rules are now applied
   globally in §6 below — every MudTextField / MudNumericField / MudSelect /
   MudAutocomplete / MudDatePicker text input across the app gets the design
   1 px border with primary-tinted focus, regardless of whether it sits in
   a FormDialog. No dialog-scoped override needed; §6 handles it. */

/* §2.7   Field bottom-edge alignment   */
/* MudTextField / MudNumericField reserve a fixed-height slot below the input
   for validation / helper text, even when there is none. That hidden slot
   makes each MudTextField's footprint ~22 px taller than the color picker
   and leaves an uneven visual gap between siblings inside .av-form-fields.
   Collapse the slot when it has no content, so every field's bottom edge =
   its border edge. The slot reappears automatically the moment a validation
   message is shown (the `.mud-input-helper-text` becomes non-empty). */
.av-form-dialog .mud-input-control-helper-container {
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.av-form-dialog
  .mud-input-control-helper-container:not(
    :has(.mud-input-helper-text:not(:empty))
  ) {
  display: none;
}

/* ============================================================================
 * §3  ColorPicker
 *
 * Reusable visual color picker. Swatches grid + live preview (color dot +
 * name). Used by AddLeadStatusDialog and any other place that needs to
 * select from the shared status palette.
 *
 * Canonical HTML structure:
 *
 *     <label class="av-color-picker__label">@Resource.Color *</label>
 *     <div class="av-color-picker">
 *         @foreach (var color in colors)
 *         {
 *             <button type="button"
 *                     class="av-color-swatch @(selected == color ? "av-color-swatch--selected" : "")"
 *                     data-color="@color"
 *                     @onclick="@(() => selected = color)"
 *                     title="@color"
 *                     aria-label="@color"></button>
 *         }
 *     </div>
 *     <div class="av-color-preview">
 *         <span class="av-color-preview__dot" data-color="@selected"></span>
 *         <span class="av-color-preview__name">@selected</span>
 *     </div>
 *
 * The picker recognises 10 status colors via [data-color="<Name>"]:
 *   Purple · Pink · Blue · Green · Orange · Teal · Red · Yellow · Indigo · Cyan
 * ========================================================================== */

/* §3.1   Domain palette   */
/* The 10 lead-status color tokens (--av-status-*) live in the design tokens stylesheet
   §G — single-source-of-truth for every CSS variable. Consumed below via
   var() in the [data-color] rules. */

/* §3.2   Picker grid   */
.av-color-picker__label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-gray-700);
}

html.dark .av-color-picker__label {
  color: var(--color-dark-100);
}

.av-color-picker {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

@media (max-width: 480px) {
  .av-color-picker {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* §3.3   Swatch   */
.av-color-swatch {
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 32px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  background: var(--color-gray-200);
  /* fallback when no [data-color] matched */
  cursor: pointer;
  transition:
    transform 120ms ease,
    box-shadow 120ms ease;
}

.av-color-swatch:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 12px -2px rgb(from var(--color-gray-900) r g b / 0.18);
}

.av-color-swatch:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

.av-color-swatch--selected {
  border-color: var(--color-gray-900);
  transform: scale(1.08);
  box-shadow: 0 4px 12px -2px rgb(from var(--color-gray-900) r g b / 0.25);
}

html.dark .av-color-swatch--selected {
  border-color: var(--color-white);
}

/* §3.4   Preview   */
.av-color-preview {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--color-gray-100);
  border-radius: 9999px;
  font-size: 0.8125rem;
  color: var(--color-gray-700);
}

html.dark .av-color-preview {
  background: var(--color-dark-700);
  color: var(--color-dark-100);
}

.av-color-preview__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-gray-300);
  /* fallback */
  flex-shrink: 0;
}

.av-color-preview__name {
  font-weight: 500;
}

/* §3.5   Per-color rules   */
/* Both the swatch and the preview dot share the same [data-color] hook so a
   single rule per color drives both elements. */
[data-color="Purple"] {
  background-color: var(--av-status-purple) !important;
}

[data-color="Pink"] {
  background-color: var(--av-status-pink) !important;
}

[data-color="Blue"] {
  background-color: var(--av-status-blue) !important;
}

[data-color="Green"] {
  background-color: var(--av-status-green) !important;
}

[data-color="Orange"] {
  background-color: var(--av-status-orange) !important;
}

[data-color="Teal"] {
  background-color: var(--av-status-teal) !important;
}

[data-color="Red"] {
  background-color: var(--av-status-red) !important;
}

[data-color="Yellow"] {
  background-color: var(--av-status-yellow) !important;
}

[data-color="Indigo"] {
  background-color: var(--av-status-indigo) !important;
}

[data-color="Cyan"] {
  background-color: var(--av-status-cyan) !important;
}

/* §3.6   Icon picker   */
/* Mirror of the color picker layout but each cell holds a centred MudIcon
   instead of a solid fill. Used by LeadSourceDialog to pick a brand icon
   (Facebook / Google / Globe / etc.). Uses the SAME swatch dimensions as
   the color picker so both pickers read at the same visual scale. */
.av-icon-picker__label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-gray-700);
}

html.dark .av-icon-picker__label {
  color: var(--color-dark-100);
}

.av-icon-picker {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  /* matches color picker */
  gap: 8px;
  margin-bottom: 12px;
}

@media (max-width: 480px) {
  .av-icon-picker {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.av-icon-swatch {
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 32px;
  /* matches color swatch */
  padding: 0;
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
  background: var(--color-white);
  color: var(--color-gray-700);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 120ms ease,
    border-color 120ms ease,
    background-color 120ms ease;
}

.av-icon-swatch:hover {
  background: var(--color-gray-100);
  border-color: var(--color-gray-300);
  transform: scale(1.05);
}

.av-icon-swatch:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

.av-icon-swatch .mud-icon-root {
  width: 16px !important;
  height: 16px !important;
  font-size: 16px !important;
  color: inherit;
}

.av-icon-swatch--selected {
  border-color: var(--color-primary-600);
  background: var(--color-primary-50);
  color: var(--color-primary-700);
}

html.dark .av-icon-swatch {
  background: var(--color-dark-600);
  border-color: var(--color-dark-500);
  color: var(--color-dark-100);
}

html.dark .av-icon-swatch:hover {
  background: var(--color-dark-500);
  border-color: var(--color-dark-400);
}

html.dark .av-icon-swatch--selected {
  border-color: var(--color-primary-500);
  background: rgb(from var(--color-primary-500) r g b / 0.2);
  color: var(--color-primary-300);
}

/* ============================================================================
 * §4  Form layout helpers
 *
 * Reusable helpers for arranging form fields inside .av-form-dialog__body.
 * ========================================================================== */

/* Two-column layout that collapses to one column on narrow viewports. */
.av-form-row-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 480px) {
  .av-form-row-2 {
    grid-template-columns: 1fr;
  }
}

/* Switch sitting in a .av-form-row-2 cell next to a dense input.
 * A bare MudSwitch (with its ripple touch area) is taller than a dense
 * input, which stretches the grid row and pushes the adjacent input down,
 * breaking the vertical alignment of that column with the rows above/below.
 * Capping the cell to the dense-input height and centering the switch keeps
 * every column aligned across rows. */
.av-form-switch-cell {
  display: flex;
  align-items: center;
  min-height: 40px;
}

.av-form-switch-cell .mud-switch {
  margin: 0;
}

/* Field grid for cards whose number of fields varies (Tools calculators).
 * Cells keep a readable width instead of stretching a lone field to the
 * full card; the control inside always fills its cell. */
.av-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 190px));
  justify-content: start;
  align-items: start;
  gap: 16px;
}

/* Amount + its month/date: two columns that stay together. */
.av-fields--pair {
  grid-template-columns: repeat(2, minmax(170px, 240px));
}

.av-fields > * {
  min-width: 0;
}

.av-fields__full {
  grid-column: 1 / -1;
}

@media (max-width: 480px) {
  .av-fields,
  .av-fields--pair {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================================
 * §5  DatePicker
 *
 * Skin for MudDatePicker (and MudTimePicker — shares the popover) that
 * mirrors the design Flatpickr theme defined in
 * E:\Trabajo\.net\avalme\cursor\CRM\styles\app\vendors\datepicker.css.
 * The popover content lives in a portal at <body> level, OUTSIDE the
 * dialog's DOM, so this skin is applied GLOBALLY — every MudDatePicker
 * in the app picks it up automatically.
 *
 * Visual contract (matches the design Flatpickr reference):
 *   - Day cells: 32 ם 36 px, rounded 8 px, 13 px font, gray-600 / dark-100.
 *   - Today: 1 px gray-200 / dark-450 border (no fill).
 *   - Selected day: solid --color-primary-600 bg, white text.
 *   - Hover: gray-150 / dark-500 fill.
 *   - Out-of-month days: gray-400 / dark-300.
 *   - Weekday labels: --color-primary-600 / --color-primary-400 (dark).
 *   - Header (month / year nav): 16 px font, gray-800 / dark-100.
 *   - Popover frame: white, rounded 8 px, soft shadow.
 *
 * Theme follows: every primary-* token is theme-driven, so changing the
 * Theme Customizer's primary color updates the selected-day fill in real
 * time without any extra wiring.
 * ========================================================================== */

/* §5.1   Popover frame   */
/* Same panel-surface contract as the dialog frames (§1, §2): white in light,
   dark-700 in dark — NOT --surface-1. The design source bypasses surface-1
   for popups / dialogs / modals; surface-1 is reserved for elevated dark
   panels (sidebars, cards). Using dark-700 keeps the datepicker popover
   visually flush with any dialog it opens inside. Theme-aware: dark-700
   redefines per data-theme-dark (navy / mirage / mint / cinder / black). */
/* ── av-form-dialog __banner + __subsection + __mode-radio ─────────────
   Add-ons used by dialogs that mix a primary form with a contextual
   alert/banner (warning disclaimer, info hint, success confirmation),
   a sub-section search/filter card, or a radio mode selector at the
   top of the body. All compose with the existing av-form-dialog skin.
   ───────────────────────────────────────────────────────────────────── */

.av-form-dialog__banner.mud-alert {
  margin-top: 0;
}

.av-form-dialog__banner + .av-form-fields,
.av-form-dialog__banner + .av-form-dialog__mode-radio,
.av-form-dialog__mode-radio + .av-form-fields,
.av-form-dialog__subsection + .av-form-dialog__banner,
.av-form-dialog__subsection + .av-form-fields {
  margin-top: 16px;
}

.av-form-dialog__banner-strong.mud-typography {
  font-weight: 600;
}

.av-form-dialog__banner-italic.mud-typography {
  font-style: italic;
}

.av-form-dialog__banner-list {
  margin: 0;
  padding-left: 20px;
}

.av-form-dialog__banner-list li {
  margin-bottom: 2px;
}

/* Sub-section card (e.g. MLS search) — bg gray-50 + eyebrow pill primary */
.av-form-dialog__subsection.mud-paper {
  padding: 16px;
  border-radius: var(--radius-lg);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-150);
}

html.dark .av-form-dialog__subsection.mud-paper {
  background: var(--color-dark-750);
  border-color: var(--color-dark-500);
}

.av-form-dialog__subsection-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 8px;
  border-radius: 9999px;
  background: rgb(from var(--color-primary-500) r g b / 0.08);
  line-height: 1;
  margin-bottom: 8px;
}

html.dark .av-form-dialog__subsection-eyebrow {
  background: rgb(from var(--color-primary-400) r g b / 0.14);
}

.av-form-dialog__subsection-eyebrow-icon {
  width: 14px;
  height: 14px;
  color: var(--color-primary-600);
  flex-shrink: 0;
}

html.dark .av-form-dialog__subsection-eyebrow-icon {
  color: var(--color-primary-300);
}

.av-form-dialog__subsection-eyebrow-text.mud-typography {
  color: var(--color-primary-700);
  letter-spacing: 0.06em;
  font-weight: 600;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

html.dark .av-form-dialog__subsection-eyebrow-text.mud-typography {
  color: var(--color-primary-300);
}

.av-form-dialog__subsection-hint.mud-typography {
  margin-bottom: 12px;
  line-height: 1.4;
}

.av-form-dialog__subsection-row {
  flex-wrap: wrap;
  align-items: center;
}

.av-form-dialog__subsection-input {
  flex: 1 1 200px;
  min-width: 0;
}

/* Force button to match MudTextField dense outlined height (40px) — sino
   queda 4-5px más bajo y se desalinea visualmente vs el input. */
.av-form-dialog__subsection-cta.mud-button-root {
  flex-shrink: 0;
  height: 40px;
  align-self: auto;
  margin-top: 0;
}

.av-form-dialog__subsection-msg.mud-alert {
  margin-top: 12px;
}

/* Mode radio (radio group at top of dialog body — "Select from realtor" /
   "Add new manually" pattern) */
.av-form-dialog__mode-radio.mud-input-control {
  width: 100%;
}

.av-form-dialog__mode-radio .mud-radio-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mud-picker-popover-paper,
.mud-picker .mud-paper {
  background: var(--color-white) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow:
    0 10px 40px -8px rgb(from var(--color-gray-900) r g b / 0.18),
    0 4px 16px -4px rgb(from var(--color-gray-900) r g b / 0.12) !important;
  border: 1px solid var(--color-gray-150) !important;
}

html.dark .mud-picker-popover-paper,
html.dark .mud-picker .mud-paper {
  background: var(--color-dark-700) !important;
  border-color: var(--color-dark-500) !important;
  box-shadow:
    0 10px 40px -8px rgb(0 0 0 / 0.55),
    0 4px 16px -4px rgb(0 0 0 / 0.4) !important;
}

/* §5.2   Toolbar (the big date display on top)   */
/* Hidden by default — the reference doesn't show one. Consumers that
   need it can opt-in via <MudDatePicker ShowToolbar="true"> — at that point
   the legacy Mud styling will show. */
.mud-picker-toolbar {
  display: none !important;
}

/* Time picker toolbar — neutral, matching the date picker header style */
.mud-picker-timepicker-toolbar {
  display: flex !important;
  background: var(--color-gray-150) !important;
  color: var(--color-gray-800) !important;
  height: auto !important;
  padding: 10px 14px !important;
  justify-content: center !important;
  border-bottom: 1px solid var(--color-gray-200) !important;
}

html.dark .mud-picker-timepicker-toolbar {
  background: var(--color-dark-600) !important;
  color: var(--color-dark-50) !important;
  border-bottom-color: var(--color-dark-500) !important;
}

/* HH:MM digits */
.mud-picker-timepicker-toolbar
  .mud-timepicker-hourminute
  .mud-timepicker-button {
  font-size: 2rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  color: var(--color-gray-500) !important;
}

html.dark
  .mud-picker-timepicker-toolbar
  .mud-timepicker-hourminute
  .mud-timepicker-button {
  color: var(--color-dark-300) !important;
}

/* Active digit (hour or minute currently being edited) */
.mud-picker-timepicker-toolbar
  .mud-timepicker-hourminute
  .mud-timepicker-button:not(.mud-timepicker-toolbar-text) {
  color: var(--color-primary-600) !important;
}

html.dark
  .mud-picker-timepicker-toolbar
  .mud-timepicker-hourminute
  .mud-timepicker-button:not(.mud-timepicker-toolbar-text) {
  color: var(--color-primary-400) !important;
}

/* Colon separator */
.mud-picker-timepicker-toolbar .mud-timepicker-separator {
  font-size: 2rem !important;
  font-weight: 600 !important;
  color: var(--color-gray-800) !important;
  margin: 0 !important;
}

html.dark .mud-picker-timepicker-toolbar .mud-timepicker-separator {
  color: var(--color-dark-100) !important;
}

/* AM/PM pill buttons */
.mud-picker-timepicker-toolbar .mud-timepicker-ampm {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  margin-left: 10px !important;
  margin-right: 0 !important;
  margin-inline-start: 10px !important;
  margin-inline-end: 0 !important;
}

.mud-picker-timepicker-toolbar .mud-timepicker-ampm .mud-timepicker-button {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  line-height: 1 !important;
  padding: 3px 8px !important;
  min-width: unset !important;
  border-radius: 9999px !important;
  color: var(--color-gray-400) !important;
  background: transparent !important;
}

/* Active AM or PM */
.mud-picker-timepicker-toolbar
  .mud-timepicker-ampm
  .mud-timepicker-button:not(.mud-timepicker-toolbar-text) {
  background: var(--color-primary-600) !important;
  color: var(--color-white) !important;
}

html.dark
  .mud-picker-timepicker-toolbar
  .mud-timepicker-ampm
  .mud-timepicker-button:not(.mud-timepicker-toolbar-text) {
  background: var(--color-primary-500) !important;
}

/* Inactive AM or PM */
.mud-picker-timepicker-toolbar
  .mud-timepicker-ampm
  .mud-timepicker-button.mud-timepicker-toolbar-text {
  color: var(--color-gray-400) !important;
}

html.dark
  .mud-picker-timepicker-toolbar
  .mud-timepicker-ampm
  .mud-timepicker-button.mud-timepicker-toolbar-text {
  color: var(--color-dark-300) !important;
}

/* §5.3   Calendar header (month nav arrows + month/year labels)   */
/* The header strip carries the gray-150 fill that frames the whole month-nav
   row + the weekday labels right below. Both the month/year buttons AND the
   prev/next arrow buttons inherit this background visually because they're
   transparent themselves.

   Values mirror estilos.css:
     - .flatpickr-current-month: font-size 110%
     - .flatpickr-prev-month / .flatpickr-next-month: padding-inline 8 px,
       padding-top 10 px, color var(--color-gray-500) / dark-200
     - hover on the SVG: fill var(--color-primary-600) / primary-500           */
.mud-picker-calendar-header {
  padding: 10px 12px !important;
  background: var(--color-gray-150) !important;
  color: var(--color-gray-600) !important;
  font-size: 110% !important;
  font-weight: var(--font-weight-medium) !important;
}

html.dark .mud-picker-calendar-header {
  background: var(--color-dark-600) !important;
  color: var(--color-dark-100) !important;
}

/* Month / year text buttons — same gray-600 as the strip text. */
.mud-picker-calendar-header .mud-button-root {
  color: var(--color-gray-600) !important;
  background: transparent !important;
}

.mud-picker-calendar-header .mud-button-root:hover {
  color: var(--color-gray-800) !important;
  background: transparent !important;
}

html.dark .mud-picker-calendar-header .mud-button-root {
  color: var(--color-dark-100) !important;
}

html.dark .mud-picker-calendar-header .mud-button-root:hover {
  color: var(--color-dark-50) !important;
}

/* Prev / next arrow icon-buttons — slightly muted (gray-500) like the
       design flatpickr nav. SVG fill turns primary on hover. */
.mud-picker-calendar-header .mud-icon-button {
  padding: 0 8px !important;
  background: transparent !important;
  color: var(--color-gray-500) !important;
}

.mud-picker-calendar-header .mud-icon-button .mud-icon-root {
  fill: currentColor !important;
}

.mud-picker-calendar-header .mud-icon-button:hover {
  background: transparent !important;
  color: var(--color-primary-600) !important;
}

html.dark .mud-picker-calendar-header .mud-icon-button {
  color: var(--color-dark-200) !important;
}

html.dark .mud-picker-calendar-header .mud-icon-button:hover {
  color: var(--color-primary-400) !important;
}

/* §5.4   Weekday labels (Sun Mon Tue …)   */
/* The weekday row sits flush below the header on the same gray-150 strip,
   visually fusing the two into a single chrome band above the day grid.
   Labels themselves stay neutral gray to match the reference. */
.mud-picker-calendar-day-week-header,
.mud-picker-calendar-week-header,
.mud-picker-calendar-day-name,
.mud-day-of-week {
  background: var(--color-gray-150) !important;
  color: var(--color-gray-600) !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--font-weight-medium) !important;
}

html.dark .mud-picker-calendar-day-week-header,
html.dark .mud-picker-calendar-week-header,
html.dark .mud-picker-calendar-day-name,
html.dark .mud-day-of-week {
  background: var(--color-dark-600) !important;
  color: var(--color-dark-100) !important;
}

/* §5.5   Day cells   */
/* Day grid container — gives the inside breathing room that the design
   .dayContainer rule provides (padding-block 8 px, padding-inline 4 px).
   We target the common Mud 9 wrappers. */
.mud-picker-calendar-day {
  width: 36px !important;
  height: 32px !important;
  margin: 2px !important;
  padding: 0 !important;
  border-radius: var(--radius-lg) !important;
  font-size: var(--text-xs-plus) !important;
  font-weight: var(--font-weight-normal) !important;
  color: var(--color-gray-600) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  line-height: 2rem !important;
  transition:
    background-color 120ms ease,
    color 120ms ease,
    border-color 120ms ease;
}

html.dark .mud-picker-calendar-day {
  color: var(--color-dark-100) !important;
}

/* Hover (non-selected) */
.mud-picker-calendar-day:hover:not(.mud-selected):not(.mud-disabled) {
  background: var(--color-gray-150) !important;
  color: var(--color-gray-800) !important;
}

html.dark .mud-picker-calendar-day:hover:not(.mud-selected):not(.mud-disabled) {
  background: var(--color-dark-500) !important;
  color: var(--color-dark-50) !important;
}

/* Today — outlined circle, no fill (design). */
.mud-picker-calendar-day.mud-current,
.mud-current.mud-picker-calendar-day {
  border-color: var(--color-gray-200) !important;
  color: var(--color-gray-800) !important;
  font-weight: var(--font-weight-medium) !important;
}

html.dark .mud-picker-calendar-day.mud-current,
html.dark .mud-current.mud-picker-calendar-day {
  border-color: var(--color-dark-450) !important;
  color: var(--color-dark-50) !important;
}

/* Selected — solid fill in active brand primary, white text. Follows
   --color-primary-600 so the Theme Customizer drives it. */
.mud-picker-calendar-day.mud-selected,
.mud-selected.mud-picker-calendar-day {
  background: var(--color-primary-600) !important;
  color: var(--color-white) !important;
  border-color: var(--color-primary-600) !important;
  font-weight: var(--font-weight-medium) !important;
}

.mud-picker-calendar-day.mud-selected:hover,
.mud-selected.mud-picker-calendar-day:hover {
  background: var(--color-primary-700) !important;
  border-color: var(--color-primary-700) !important;
  color: var(--color-white) !important;
}

html.dark .mud-picker-calendar-day.mud-selected,
html.dark .mud-selected.mud-picker-calendar-day {
  background: var(--color-primary-500) !important;
  border-color: var(--color-primary-500) !important;
}

html.dark .mud-picker-calendar-day.mud-selected:hover,
html.dark .mud-selected.mud-picker-calendar-day:hover {
  background: var(--color-primary-600) !important;
  border-color: var(--color-primary-600) !important;
}

/* Out-of-month days (the gray ghost row at top/bottom of the grid). */
.mud-picker-calendar-day.mud-hidden,
.mud-picker-calendar-day-outside-month,
.mud-picker-calendar-day.mud-disabled {
  color: var(--color-gray-400) !important;
}

html.dark .mud-picker-calendar-day.mud-hidden,
html.dark .mud-picker-calendar-day-outside-month,
html.dark .mud-picker-calendar-day.mud-disabled {
  color: var(--color-dark-300) !important;
}

/* Disabled days don't react to hover. */
.mud-picker-calendar-day.mud-disabled {
  pointer-events: none;
  opacity: 0.5;
}

/* §5.6   Year & month picker modes   */
/* When the user clicks the year/month label, MudDatePicker switches to a
   list view. Style each item to match the day-cell aesthetic. */
.mud-picker-year,
.mud-picker-month {
  color: var(--color-gray-700) !important;
  font-size: var(--text-sm) !important;
  border-radius: var(--radius-md) !important;
  transition:
    background-color 120ms ease,
    color 120ms ease;
}

.mud-picker-year:hover,
.mud-picker-month:hover {
  background: var(--color-gray-150) !important;
}

.mud-picker-year.mud-picker-year-selected,
.mud-picker-month.mud-picker-month-selected {
  color: var(--color-primary-600) !important;
  font-weight: var(--font-weight-medium) !important;
}

html.dark .mud-picker-year,
html.dark .mud-picker-month {
  color: var(--color-dark-100) !important;
}

html.dark .mud-picker-year:hover,
html.dark .mud-picker-month:hover {
  background: var(--color-dark-500) !important;
}

html.dark .mud-picker-year.mud-picker-year-selected,
html.dark .mud-picker-month.mud-picker-month-selected {
  color: var(--color-primary-400) !important;
}

/* §5.7   MudTimePicker (shares the popover frame)   */
/* MudTimePicker uses the same .mud-picker-popover-paper frame as the date
   picker, so §5.1 already handles its container. Only the inner clock /
   numeric hour-minute display needs primary-tinted highlights. */
.mud-time-picker .mud-time-picker-clock-hand,
.mud-time-picker .mud-time-picker-hour.mud-active,
.mud-time-picker .mud-time-picker-minute.mud-active {
  background: var(--color-primary-600) !important;
  color: var(--color-white) !important;
}

html.dark .mud-time-picker .mud-time-picker-clock-hand,
html.dark .mud-time-picker .mud-time-picker-hour.mud-active,
html.dark .mud-time-picker .mud-time-picker-minute.mud-active {
  background: var(--color-primary-500) !important;
}

/* ============================================================================
 * §6  Global form primitives
 *
 * App-wide skin for every form input, checkbox, radio, and switch. NOT
 * scoped to .av-form-dialog or any other container — every page that
 * mounts a Mud form primitive picks up the design automatically.
 *
 * Reference values verified against estilos.css §2068 (.form-input /
 * .form-textarea), §2265 (.form-checkbox), §2367 (.form-radio).
 *
 * Theme-aware: the focus / checked colors all resolve through
 * --mud-palette-primary (bridged to --color-primary-* in
 * the design tokens stylesheet §F), so changing the Theme Customizer's primary
 * updates every input's focus tint and every checked checkbox / radio /
 * switch in real time. Dark mode is handled per-rule via html.dark.
 *
 * Section index:
 *   §6.1  Outlined input border (TextField / NumericField / Select / etc.)
 *   §6.2  Checkbox + Radio (size + theme tint)
 *   §6.3  Switch (track tinted to active primary when on)
 * ========================================================================== */

/* §6.1   Outlined input border   */
/* Idle — 1 px var(--color-gray-300), border-radius var(--radius-lg). Scoped
   to:
     • :not(:focus-within) so Mud's focus rule (primary-tinted) takes over the
       moment any descendant input is focused.
     • :not(.mud-input-error) so the design error skin (§LAST-3 of
       the Mud bridge stylesheet) can paint the orange-red border without the
       cursor having to enter the field. Without this guard, this rule's
       (0,4,0) + !important defeats Mud's error rule (0,2,0 + !important)
       AND our §LAST-3 error variants, and the border stays gray until focus
       comes in — exactly the bug previously observed on LeadSourceDialog. */
.mud-input.mud-input-outlined:not(:focus-within):not(.mud-input-error)
  .mud-input-outlined-border {
  border-width: 1px !important;
  border-color: var(--color-gray-300) !important;
  border-radius: var(--radius-lg) !important;
  transition: border-color 120ms ease;
}

html.dark
  .mud-input.mud-input-outlined:not(:focus-within):not(.mud-input-error)
  .mud-input-outlined-border {
  border-color: var(--color-dark-400) !important;
}

/* Hover — bump to gray-400 / dark-300, still 1 px. Same :not(:focus-within)
   + :not(.mud-input-error) guards so hover doesn't shadow focus or error
   states when those apply. */
.mud-input.mud-input-outlined:hover:not(.mud-disabled):not(:focus-within):not(
    .mud-input-error
  )
  .mud-input-outlined-border {
  border-color: var(--color-gray-400) !important;
}

html.dark
  .mud-input.mud-input-outlined:hover:not(.mud-disabled):not(:focus-within):not(
    .mud-input-error
  )
  .mud-input-outlined-border {
  border-color: var(--color-dark-300) !important;
}

/* Focus — pin the width at 1 px (cancels Mud's default 2 px Material jump).
   The border COLOR comes from MudBlazor's own focus rule, which paints
   --mud-palette-primary   → --color-primary-* (theme-aware). */
.mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
  border-width: 1px !important;
}

/* Error — same 1 px discipline. Mud already tints --mud-palette-error on
   .mud-input-error; we only enforce the width. */
.mud-input.mud-input-outlined.mud-input-error .mud-input-outlined-border {
  border-width: 1px !important;
}

/* Error state — border rojo cuando .mud-input-error está en el contenedor padre
 .mud-input-control (caso MudSelect / MudAutocomplete — la clase NO va sobre
 .mud-input mismo) o en .mud-input directo (caso MudTextField). El idle rule
 §886 usa :not(.mud-input-error) que solo chequea el elemento mismo, así que
 ganaba (0,5,0) sobre las reglas del bridge (0,4,0) cuando la clase iba en
 el padre. Specificity 0,5,0 igual al idle + source order posterior → gana. */
.mud-input-control.mud-input-error
  .mud-input.mud-input-outlined
  .mud-input-outlined-border,
.mud-form-control.mud-input-error
  .mud-input.mud-input-outlined
  .mud-input-outlined-border {
  border-color: var(--color-error) !important;
}

html.dark
  .mud-input-control.mud-input-error
  .mud-input.mud-input-outlined
  .mud-input-outlined-border,
html.dark
  .mud-form-control.mud-input-error
  .mud-input.mud-input-outlined
  .mud-input-outlined-border {
  border-color: var(--color-error-lighter) !important;
}

/* §6.2   Checkbox + Radio (design pixel-perfect, CSS-drawn)   */
/* the `.form-checkbox` / `.form-radio` (estilos.css §2266) build the
   visual entirely with CSS on a native <input appearance:none>: 18 ם 18 px,
   1 px solid border, --radius-sm corners (square) or 50 % (radio), filled
   with primary when checked, white check / dot drawn via background-image.

   Mud's MudCheckBox / MudRadio render the visual as a Material SVG icon
   with a baked-in shape — different corner radius, ~25 % internal padding
   around the visible square, fixed checkmark proportions. We can't make
   the SVG match design pixel-for-pixel. Solution: hide the SVG and repaint
   the `.mud-icon-button` itself as a design box via border + background
   + ::after pseudo for the checkmark / dot.

   The native <input> underneath still captures clicks and toggles state;
   `:has(input:checked)` / `:has(input:indeterminate)` drive every state
   without relying on Mud's class-swap timing. */

/* 0 — Wrapper layout — design puts an 8 px gap (`.gap-2` =
   `calc(var(--spacing) * 2)`) between the box and the label. Mud uses an
   ad-hoc margin on the typography element; we cancel it and let `gap`
   own the rhythm so it scales with `--spacing`. */
.mud-checkbox,
.mud-radio {
  display: inline-flex !important;
  align-items: center !important;
  gap: calc(var(--spacing) * 2) !important;
  /* Separacion entre opciones de un mismo grupo: cada radio (icono+label)
       queda agrupado y separado del siguiente radio. Inerte en grupos
       verticales (solo afecta el flujo horizontal). */
  margin-right: 16px !important;
}

/* Spacing between consecutive MudRadios inside a MudRadioGroup. Mud's default
 doesn't gap them, so text from one ends right where the next radio begins.
 Use flex + gap so it adapts to both row and column layouts. */
.mud-radio-group {
  display: inline-flex;
  flex-wrap: wrap;
  column-gap: 16px;
  row-gap: 6px;
  align-items: center;
}

/* Opt-in: a radio group that wraps a full-width block (e.g. a selectable table).
   Overrides the inline-flex shrink so the wrapped content keeps the container width. */
.av-radio-table-group,
.av-radio-table-group .mud-input-control-input-container,
.av-radio-table-group .mud-radio-group {
  display: block;
  width: 100%;
}

.mud-checkbox > .mud-typography {
  margin: 0 0 0 4px !important;
}

.mud-radio > .mud-typography {
  margin: 0 0 0 3px !important;
}

/* 1 — Hide Mud's SVG. `visibility: hidden` keeps the icon-button's flex
   slot intact so the surrounding ripple wrapper collapses cleanly. */
.mud-checkbox .mud-icon-root,
.mud-radio .mud-icon-root {
  visibility: hidden !important;
}

/* 2 — The icon-button IS the visible checkbox / radio.
   - Size 18 ם 18 px (Spec: `--spacing * 4.5`).
   - 1 px solid border, transparent fill in idle.
   - Square (`--radius-sm`) for checkbox, circle (50 %) for radio.
   - `position: relative` so ::after can anchor the checkmark / dot.
   - `box-sizing: border-box` keeps the outer box exactly 18 ם 18 px. */
.mud-checkbox .mud-icon-button,
.mud-radio .mud-icon-button {
  position: relative !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  width: calc(var(--spacing) * 4.5) !important;
  height: calc(var(--spacing) * 4.5) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border-style: solid !important;
  border-width: 1px !important;
  border-color: rgb(from var(--color-gray-400) r g b / 0.7) !important;
  background-color: transparent !important;
  transition:
    background-color 150ms ease,
    border-color 150ms ease;
}

.mud-checkbox .mud-icon-button {
  border-radius: var(--radius-sm) !important;
}

.mud-radio .mud-icon-button {
  border-radius: 50% !important;
}

html.dark .mud-checkbox .mud-icon-button,
html.dark .mud-radio .mud-icon-button {
  border-color: var(--color-dark-400) !important;
}

/* 3 — Hide Mud's ripple bubble — design is flat. */
.mud-checkbox .mud-ripple,
.mud-checkbox .mud-ripple-checkbox,
.mud-radio .mud-ripple,
.mud-radio .mud-ripple-radio {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* 4 — Hover / focus on idle — preview primary tint via the border. The
   `:not(:has(input:checked))` gate keeps checked / indeterminate wrappers
   on their saturated fill regardless of pointer position. The redundant
   `background-color: transparent` cancels Mud's gray hover overlay so the
   box stays flat (the border-color shift alone is enough signal). */
.mud-checkbox:not(:has(input:checked)):not(:has(input:indeterminate)):not(
    .mud-disabled
  ):hover
  .mud-icon-button,
.mud-checkbox:not(:has(input:checked)):not(:has(input:indeterminate)):not(
    .mud-disabled
  ):focus-within
  .mud-icon-button,
.mud-checkbox:not(.mud-checkbox-null):not(:has(input:checked)):not(
    :has(input:indeterminate)
  ):not(:has(.mud-icon-button.mud-checkbox-null)):not(.mud-disabled):hover
  .mud-icon-button,
.mud-checkbox:not(.mud-checkbox-null):not(:has(input:checked)):not(
    :has(input:indeterminate)
  ):not(:has(.mud-icon-button.mud-checkbox-null)):not(
    .mud-disabled
  ):focus-within
  .mud-icon-button,
.mud-radio:not(:has(input:checked)):not(.mud-disabled):hover .mud-icon-button,
.mud-radio:not(:has(input:checked)):not(.mud-disabled):focus-within
  .mud-icon-button {
  border-color: var(--color-primary-600) !important;
  background-color: transparent !important;
}

html.dark
  .mud-checkbox:not(:has(input:checked)):not(:has(input:indeterminate)):not(
    .mud-disabled
  ):hover
  .mud-icon-button,
html.dark
  .mud-checkbox:not(:has(input:checked)):not(:has(input:indeterminate)):not(
    .mud-disabled
  ):focus-within
  .mud-icon-button,
html.dark
  .mud-checkbox:not(.mud-checkbox-null):not(:has(input:checked)):not(
    :has(input:indeterminate)
  ):not(:has(.mud-icon-button.mud-checkbox-null)):not(.mud-disabled):hover
  .mud-icon-button,
html.dark
  .mud-checkbox:not(.mud-checkbox-null):not(:has(input:checked)):not(
    :has(input:indeterminate)
  ):not(:has(.mud-icon-button.mud-checkbox-null)):not(
    .mud-disabled
  ):focus-within
  .mud-icon-button,
html.dark
  .mud-radio:not(:has(input:checked)):not(.mud-disabled):hover
  .mud-icon-button,
html.dark
  .mud-radio:not(:has(input:checked)):not(.mud-disabled):focus-within
  .mud-icon-button {
  border-color: var(--color-primary-400) !important;
}

/* 5 — Checked / indeterminate — fill with primary, border matches. */
.mud-checkbox:has(input:checked) .mud-icon-button,
.mud-checkbox:has(input:indeterminate) .mud-icon-button,
.mud-checkbox.mud-checkbox-null .mud-icon-button,
.mud-checkbox .mud-icon-button.mud-checkbox-null,
.mud-radio:has(input:checked) .mud-icon-button {
  background-color: var(--color-primary-600) !important;
  border-color: var(--color-primary-600) !important;
}

html.dark .mud-checkbox:has(input:checked) .mud-icon-button,
html.dark .mud-checkbox:has(input:indeterminate) .mud-icon-button,
html.dark .mud-checkbox.mud-checkbox-null .mud-icon-button,
html.dark .mud-checkbox .mud-icon-button.mud-checkbox-null,
html.dark .mud-radio:has(input:checked) .mud-icon-button {
  background-color: var(--color-primary-400) !important;
  border-color: var(--color-primary-400) !important;
}

/* 6 — Checked checkmark — Heroicon mini check, drawn via ::after as an
   inline SVG background. White stroke on the primary-filled box. */
.mud-checkbox:has(input:checked) .mud-icon-button::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'><path d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 1 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  pointer-events: none;
}

/* 7 — Indeterminate bar — short horizontal white rectangle, centered.
   Specificity matches rule 6, so when a checkbox is BOTH :checked and
   :indeterminate (rare, tri-state), the later rule (this one) wins —
   that's the conventional priority for indeterminate. */
.mud-checkbox:has(input:indeterminate) .mud-icon-button::after,
.mud-checkbox.mud-checkbox-null .mud-icon-button::after,
.mud-checkbox .mud-icon-button.mud-checkbox-null::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 2px;
  background-color: var(--color-white);
  border-radius: 1px;
  transform: translate(-50%, -50%);
  background-image: none;
  pointer-events: none;
}

/* 8 — Radio dot — 6 px white circle, centered. */
.mud-radio:has(input:checked) .mud-icon-button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  background-color: var(--color-white);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* === Indeterminate native fallback ============================================
 MudBlazor 9.x no expone el indeterminate state via JS prop ni CSS class — solo
 cambia el icono renderizado (IndeterminateCheckBox SVG). El §30 base oculta
 TODOS los iconos nativos de Mud (.mud-icon-root { visibility: hidden }) para
 pintar custom via ::after — pero ese painting solo funciona para checked
 (detectable via :has(input:checked)), no para indeterminate.
 Estrategia: aplicar la clase opt-in `.av-indeterminate` al MudCheckBox (estática
 o dinámicamente vía @bind). Esta clase:
 1. Re-muestra el .mud-icon-root nativo de Mud (filled square + white bar)
 2. Resetea el background/border custom para que el icono nativo sea el visual
 3. Suprime el ::after de checked por si combina con otros selectors
 Limitación conocida: al hover sobre el checkbox, Mud aplica
 .mud-icon-button:hover { background-color: action-default-hover } y pelea el
 cascade contra nuestro override (specificity tie + !important no resolvió
 limpio en pruebas). Aceptable trade-off — el state visible se mantiene en
 reposo, solo se aliviana al hover y vuelve al salir. */
.av-indeterminate .mud-icon-root {
  visibility: visible !important;
  width: calc(var(--spacing) * 4.5) !important;
  height: calc(var(--spacing) * 4.5) !important;
  font-size: calc(var(--spacing) * 4.5) !important;
}

.av-indeterminate .mud-icon-button {
  background-color: var(--color-primary-600) !important;
  border-color: var(--color-primary-600) !important;
  color: var(--color-white) !important;
}

html.dark .av-indeterminate .mud-icon-button {
  background-color: var(--color-primary-400) !important;
  border-color: var(--color-primary-400) !important;
}

.av-indeterminate .mud-icon-button::after {
  content: none !important;
}

/* Apply color-specific overrides cuando el consumer también pasa av-checkbox-color-X. */
.av-indeterminate.av-checkbox-color-error .mud-icon-button {
  background-color: var(--color-error) !important;
  border-color: var(--color-error) !important;
}

.av-indeterminate.av-checkbox-color-warning .mud-icon-button {
  background-color: var(--color-warning) !important;
  border-color: var(--color-warning) !important;
}

.av-indeterminate.av-checkbox-color-success .mud-icon-button {
  background-color: var(--color-success) !important;
  border-color: var(--color-success) !important;
}

.av-indeterminate.av-checkbox-color-info .mud-icon-button {
  background-color: var(--color-info) !important;
  border-color: var(--color-info) !important;
}

.av-indeterminate.av-checkbox-color-secondary .mud-icon-button {
  background-color: var(--color-secondary) !important;
  border-color: var(--color-secondary) !important;
}

.mud-checkbox.mud-disabled,
.mud-radio.mud-disabled {
  opacity: 0.5 !important;
}

/* ----------------------------------------------------------------------------
   av-checkbox-host--error — wrapper that paints the descendant MudCheckBox's
   checked / indeterminate state in the error color instead of the brand
   primary. Use on header "select all" checkboxes of multi-select tables
   when the design calls for a destructive / attention-getting hue (Tailux
   courses-datatable pattern). Anchored on a host span because MudCheckBox's
   `Class` parameter does not land on the .mud-checkbox node in v9, so a
   class directly on the component would not match these selectors. */
/* Filled state — checked, native-indeterminate, OR MudBlazor's `mud-checkbox-null`
   placed on either the wrapper `.mud-checkbox` or the inner `.mud-button-root`
   (varies by MudBlazor minor version). Same multi-target defense as the base
   checkbox rules above. */
.av-checkbox-host--error .mud-button-root:has(input:checked),
.av-checkbox-host--error .mud-button-root:has(input:indeterminate),
.av-checkbox-host--error .mud-button-root.mud-checkbox-null,
.av-checkbox-host--error .mud-checkbox.mud-checkbox-null .mud-button-root {
  background-color: var(--color-error) !important;
  border-color: var(--color-error) !important;
}

.av-checkbox-host--error
  .mud-button-root:not(:has(input:checked)):not(:has(input:indeterminate)):not(
    .mud-checkbox-null
  ):hover,
.av-checkbox-host--error
  .mud-button-root:not(:has(input:checked)):not(:has(input:indeterminate)):not(
    .mud-checkbox-null
  ):focus-within,
.av-checkbox-host--error
  .mud-checkbox:not(.mud-checkbox-null):not(:has(input:checked)):not(
    :has(input:indeterminate)
  )
  .mud-button-root:hover,
.av-checkbox-host--error
  .mud-checkbox:not(.mud-checkbox-null):not(:has(input:checked)):not(
    :has(input:indeterminate)
  )
  .mud-button-root:focus-within {
  border-color: var(--color-error) !important;
}

.mud-checkbox > .mud-typography,
.mud-radio > .mud-typography {
  font-size: 0.875rem !important;
  line-height: 1.4 !important;
}

.mud-switch .mud-switch-thumb-small,
.mud-switch .mud-switch-thumb-medium,
.mud-switch .mud-switch-thumb-large {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

/* Ocultar cualquier glifo/icono que Mud renderice dentro del thumb del switch
   (algunas versiones muestran un check en el estado checked). Nuestro pill se
   dibuja con .mud-switch-track::before, asi que el icono sobra y, al no estar
   oculto, se veia como un "check" sobre el track (sobre todo en disabled-on).
   Mismo criterio que el skin de checkbox/radio, que ya ocultan .mud-icon-root. */
.mud-switch .mud-icon-root {
  display: none !important;
}

.mud-switch .mud-switch-track {
  position: relative !important;
  width: 36px !important;
  height: 20px !important;
  border-radius: 9999px !important;
  opacity: 1 !important;
  background-color: var(--color-gray-300) !important;
  transition: background-color 150ms ease;
}

html.dark .mud-switch .mud-switch-track {
  background-color: var(--color-dark-400) !important;
}

.mud-switch .mud-switch-base.mud-checked + .mud-switch-track,
.mud-switch .mud-switch-track.mud-primary,
.mud-switch:has(.mud-checked) .mud-switch-track {
  background-color: var(--color-primary-500) !important;
}

html.dark .mud-switch .mud-switch-base.mud-checked + .mud-switch-track,
html.dark .mud-switch .mud-switch-track.mud-primary,
html.dark .mud-switch:has(.mud-checked) .mud-switch-track {
  background-color: var(--color-primary-400) !important;
}

.mud-switch .mud-switch-track::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: var(--color-white);
  box-shadow: 0 1px 2px rgb(from var(--color-gray-900) r g b / 0.25);
  transition: transform 150ms ease;
}

.mud-switch .mud-switch-base.mud-checked + .mud-switch-track::before,
.mud-switch .mud-switch-track.mud-primary[class*="mud-checked"]::before,
.mud-switch:has(.mud-checked) .mud-switch-track::before {
  transform: translateX(16px);
}

.mud-switch .mud-ripple,
.mud-switch .mud-ripple-switch {
  background-color: transparent !important;
  box-shadow: none !important;
}

.mud-switch .mud-switch-base {
  background: transparent !important;
}

.mud-switch .mud-switch-base.mud-disabled + .mud-switch-track,
.mud-switch .mud-switch-base.mud-disabled + .mud-switch-track::before {
  opacity: 0.5 !important;
}

:root {
  --mud-appbar-height: 70px;
}

.appbar-landing-style .mud-toolbar-appbar {
  background: var(--mud-palette-appbar-background);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(108, 99, 255, 0.1);
  padding: 0.5rem 1.5rem;
}

.av-appbar__row {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-width: 0;
}

.av-appbar__brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: 24px;
}

.av-appbar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}

/* ============================================================================
 Page toolbar — fila de migas de pan + toggle del menú lateral (MainLayout)

 REGLA DE ALINEACIÓN: esta fila comparte gutter con el @Body y con el slot
 `page-header`. Por eso el MudToolBar va con `Gutters="false"` y las mismas
 clases de padding que el contenido (px-xs-0 px-sm-3 px-md-6): si el gutter
 de la página cambia alguna vez, las migas se mueven con él en vez de quedar
 clavadas a un píxel copiado.

 El botón cuelga hacia fuera con un margen negativo igual a su propio padding
 (3px en Size.Small). Eso es lo que alinea el GLIFO — no la caja del botón —
 con la primera letra del título de la página. Sin ese margen negativo el
 icono queda 3px adentro y el ojo lo lee como desalineado respecto al resto.
 ============================================================================ */

.av-page-toolbar.mud-toolbar {
  gap: 4px;
  min-height: 44px;
  height: auto;
  /* Aire respecto al AppBar. Va como margin y no como padding para que NO
     entre en la caja que alinea el glifo del toggle con el gutter. */
  margin-top: 10px;
}

/* El margen negativo compensa el padding del propio botón (3px en Small),
 de modo que el borde izquierdo del icono cae exactamente sobre el gutter. */
.av-page-toolbar .av-page-toolbar__toggle.mud-icon-button {
  margin-inline-start: -3px;
  margin-inline-end: 0;
}

/* Mud pone padding: 16px 12px en <ul class="mud-breadcrumbs">. El vertical lo
 gobierna la altura del toolbar y el horizontal ya lo pone el gutter de la
 fila, así que aquí sobra entero. */
.av-page-toolbar .mud-breadcrumbs {
  padding: 0;
  margin: 0;
}

/* Separador entre migas: Mud trae 0 12px (= 24px entre elemento y elemento).
 Bajado a 4px por lado (= 8px), en línea con el gap de 8px del resto de los
 clusters de la shell (.av-appbar__actions, .av-page-header__actions). */
.av-page-toolbar .mud-breadcrumb-separator {
  padding: 0 4px;
}

.av-appbar__search {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 240px;
  max-width: 480px;
  height: 38px;
  padding: 0 12px;
  background: var(--color-gray-100, #f1f5f9);
  border: 1px solid var(--color-gray-200, #e2e8f0);
  border-radius: 8px;
  transition:
    border-color 120ms ease,
    background-color 120ms ease;
}

.av-appbar__search:focus-within {
  background: var(--color-white, #fff);
  border-color: var(--color-primary-500, #6c63ff);
  box-shadow: 0 0 0 3px rgb(from var(--color-primary-500, #6c63ff) r g b / 0.1);
}

.av-appbar__search-icon {
  color: var(--color-gray-500, #64748b);
  flex-shrink: 0;
}

.av-appbar__search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--text-sm, 0.875rem);
  letter-spacing: 0.01em;
  color: var(--color-gray-800, #1e293b);
}

.av-appbar__search-input::placeholder {
  color: var(--color-gray-500, #64748b);
  font-weight: 400;
}

.av-appbar__search-shortcut {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 6px;
  background: var(--color-white, #fff);
  border: 1px solid var(--color-gray-200, #e2e8f0);
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: var(--text-tiny-plus, 0.6875rem);
  font-weight: 500;
  color: var(--color-gray-600, #475569);
  flex-shrink: 0;
  white-space: nowrap;
}

.av-appbar__search-trigger {
  flex-shrink: 0;
}

.av-appbar__actions .mud-icon-button {
  width: 36px;
  height: 36px;
  padding: 6px;
}

html.dark .av-appbar__search {
  background: var(--color-dark-700, #1c1d21);
  border-color: var(--color-dark-500, #2a2c32);
}

html.dark .av-appbar__search:focus-within {
  background: var(--color-dark-600, #232429);
  border-color: var(--color-primary-400);
  box-shadow: 0 0 0 3px rgb(from var(--color-primary-400) r g b / 0.15);
}

html.dark .av-appbar__search-input {
  color: var(--color-dark-50, #e6e7eb);
}

html.dark .av-appbar__search-input::placeholder {
  color: var(--color-dark-300, #838794);
}

html.dark .av-appbar__search-icon {
  color: var(--color-dark-300, #838794);
}

html.dark .av-appbar__search-shortcut {
  background: var(--color-dark-600, #232429);
  border-color: var(--color-dark-500, #2a2c32);
  color: var(--color-dark-200, #b7bac4);
}

@media (max-width: 959px) {
  .appbar-landing-style .mud-toolbar-appbar {
    padding: 0.5rem 1rem;
  }

  .av-appbar__row {
    gap: 8px;
  }

  .av-appbar__brand {
    margin-right: 12px;
  }
}

@media (max-width: 599px) {
  :root {
    --mud-appbar-height: 56px;
  }

  .appbar-landing-style .mud-toolbar-appbar {
    padding: 0.5rem 0.75rem;
  }

  .av-appbar__row {
    gap: 4px;
  }

  .av-appbar__brand {
    margin-right: 0;
  }

  .applogo-tagline {
    display: none !important;
  }

  .av-appbar__actions .mud-icon-button {
    width: 34px;
    height: 34px;
  }

  .av-lang-switcher {
    padding: 4px 6px 4px 7px !important;
    height: 32px;
  }

  .av-lang-switcher__code {
    font-size: var(--text-xs-plus, 0.8125rem);
  }

  .av-user-avatar {
    width: 32px !important;
    height: 32px !important;
  }
}

.notification-panel {
  --notif-bg: var(--mud-palette-surface);
  --notif-bg-hover: var(--mud-palette-action-hover);
  --notif-bg-unread: rgba(var(--mud-palette-info-rgb), 0.04);
  --notif-border: var(--mud-palette-divider);
  --notif-text-primary: var(--mud-palette-text-primary);
  --notif-text-secondary: var(--mud-palette-text-secondary);
  --notif-accent: var(--mud-palette-info);
  --notif-accent-rgb: var(--mud-palette-info-rgb);
  --notif-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  --notif-radius: 12px;
}

.notification-badge .mud-badge.mud-badge-dot,
.notification-badge-pulse .mud-badge.mud-badge-dot {
  width: 10px;
  height: 10px;
  min-width: 10px;
  min-height: 10px;
  padding: 0;
  border-radius: 9999px;
  background-color: #ef4444 !important;
  border: 2px solid var(--color-white);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.04);
  animation: badge-pulse 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

html.dark .notification-badge .mud-badge.mud-badge-dot,
html.dark .notification-badge-pulse .mud-badge.mud-badge-dot {
  border-color: var(--color-dark-700);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.4);
}

.notification-badge .mud-badge.mud-badge-dot,
.notification-badge-pulse .mud-badge.mud-badge-dot {
  animation: badge-pulse 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes badge-pulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow:
      0 0 0 0 rgb(239 68 68 / 0.55),
      0 0 0 1px rgb(0 0 0 / 0.04);
  }

  50% {
    transform: scale(1.15);
    box-shadow:
      0 0 0 6px rgb(239 68 68 / 0),
      0 0 0 1px rgb(0 0 0 / 0.04);
  }
}

.notification-bell-btn {
  transition:
    transform 0.2s ease,
    background-color 0.2s ease;
}

.notification-bell-btn:hover {
  transform: scale(1.05);
}

.notification-badge .mud-badge.mud-badge-top.right.mud-badge-overlap,
.notification-badge-pulse .mud-badge.mud-badge-top.right.mud-badge-overlap {
  inset: auto auto calc(100% - 14px) calc(100% - 12px) !important;
}

.notification-panel {
  width: 380px;
  height: min(32rem, calc(100vh - 6rem));
  display: flex;
  flex-direction: column;
  background: var(--notif-bg);
  overflow: hidden;
  border-radius: var(--notif-radius);
  box-shadow: var(--notif-shadow);
}

.notification-header {
  flex-shrink: 0;
  padding: 8px 16px 0;
  background: var(--color-gray-100);
  border-bottom: none;
}

html.dark .notification-header {
  background: var(--color-dark-800);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 4px;
}

.header-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-main-text {
  margin: 0 !important;
  font-family: var(--font-sans);
  font-size: var(--text-sm, 0.875rem) !important;
  font-weight: var(--font-weight-medium, 500) !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  color: var(--color-gray-800);
}

html.dark .header-main-text {
  color: var(--color-dark-100);
}

.notification-badge-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  min-width: 20px;
  padding: 0 6px;
  border-radius: 9999px;
  background: rgb(from var(--color-primary-500) r g b / 0.15);
  color: var(--color-primary-700);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: var(--font-weight-medium, 500);
  line-height: 1;
  white-space: nowrap;
}

html.dark .notification-badge-inline {
  background: rgb(from var(--color-primary-400) r g b / 0.2);
  color: var(--color-primary-300);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

.header-action-btn.mud-icon-button {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  padding: 0 !important;
  border-radius: 9999px !important;
  color: var(--color-gray-600) !important;
  background: transparent !important;
  box-shadow: none !important;
  transition:
    background-color 150ms ease,
    color 150ms ease !important;
}

.header-action-btn.mud-icon-button .mud-icon-root {
  font-size: 16px !important;
  width: 16px !important;
  height: 16px !important;
}

.header-action-btn.mud-icon-button:hover:not(:disabled):not(.mud-disabled) {
  background: rgb(from var(--color-gray-500) r g b / 0.12) !important;
  color: var(--color-gray-900) !important;
  transform: none !important;
}

.header-action-btn.mud-icon-button:disabled,
.header-action-btn.mud-icon-button.mud-disabled {
  opacity: 0.35;
  color: var(--color-gray-500) !important;
}

html.dark .header-action-btn.mud-icon-button {
  color: var(--color-dark-200) !important;
}

html.dark
  .header-action-btn.mud-icon-button:hover:not(:disabled):not(.mud-disabled) {
  background: rgb(from var(--color-dark-400) r g b / 0.4) !important;
  color: var(--color-dark-100) !important;
}

.notification-tabs.mud-tabs,
.notification-tabs {
  margin: 0 !important;
  padding: 0 12px !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.notification-tabs .mud-tabs-toolbar,
.notification-tabs .mud-tabs-toolbar-inner,
.notification-tabs .mud-tabs-toolbar-content,
.notification-tabs .mud-tabs-tabbar,
.notification-tabs .mud-tabs-tabbar-wrapper {
  background: transparent !important;
  border: none !important;
  min-height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;

  justify-content: flex-start !important;

  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}

.notification-tabs .mud-tab-slider {
  display: none !important;
}

.notification-tabs .mud-tabs-panels {
  display: none !important;
}

.notification-tabs.mud-tabs .mud-tab,
.notification-tabs .mud-tab {
  padding: 8px 12px 0px 12px !important;
  margin: 0 !important;
  border-top: none !important;
  border-right: none !important;
  border-left: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--font-weight-medium, 500) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--color-gray-700) !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
  text-decoration: none !important;
  transition:
    color 150ms ease,
    border-color 150ms ease !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.notification-tabs.mud-tabs .mud-tab:hover,
.notification-tabs.mud-tabs .mud-tab:focus,
.notification-tabs.mud-tabs .mud-tab:focus-visible,
.notification-tabs.mud-tabs .mud-tab:active,
.notification-tabs .mud-tab:hover,
.notification-tabs .mud-tab:focus,
.notification-tabs .mud-tab:focus-visible,
.notification-tabs .mud-tab:active {
  color: var(--color-gray-800) !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.notification-tabs .mud-tab .mud-ripple,
.notification-tabs .mud-tab .mud-ripple-visual,
.notification-tabs .mud-tab .mud-ripple-container,
.notification-tabs .mud-tab::before,
.notification-tabs .mud-tab::after {
  display: none !important;
  background: transparent !important;
}

.notification-tabs .mud-tab > *,
.notification-tabs .mud-tab .mud-tab-icon-text,
.notification-tabs .mud-tab .mud-button-label,
.notification-tabs .mud-tab .mud-tab-text-wrapper {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.notification-tabs .mud-tab .mud-badge-root {
  position: relative !important;
  display: inline-block !important;

  flex-direction: initial !important;
  gap: 0 !important;
}

.notification-tabs .mud-tab .mud-badge-root .mud-badge-wrapper,
.notification-tabs .mud-tab .mud-badge-root .mud-badge {
  position: absolute !important;
  top: 0 !important;
  bottom: auto !important;
  right: auto !important;
  left: 0 !important;

  transform: scale(1) translate(-76%, -85%) !important;
  transform-origin: 0% 0% !important;
}

.notification-tabs.mud-tabs .mud-tab.mud-tab-active,
.notification-tabs.mud-tabs .mud-tab.mud-tab-active:hover,
.notification-tabs.mud-tabs .mud-tab.mud-tab-active:focus,
.notification-tabs .mud-tab.mud-tab-active,
.notification-tabs .mud-tab.mud-tab-active:hover,
.notification-tabs .mud-tab.mud-tab-active:focus {
  color: var(--color-primary-600) !important;
  border-bottom-color: var(--color-primary-600) !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.notification-tabs .mud-tab.mud-tab-active .mud-ripple {
  color: rgb(from var(--color-primary-600) r g b / 0.18) !important;
}

html.dark .notification-tabs.mud-tabs .mud-tab,
html.dark .notification-tabs .mud-tab {
  color: var(--color-dark-200) !important;
}

html.dark .notification-tabs .mud-tab:hover,
html.dark .notification-tabs .mud-tab:focus {
  color: var(--color-dark-100) !important;
}

html.dark .notification-tabs.mud-tabs .mud-tab.mud-tab-active,
html.dark .notification-tabs.mud-tabs .mud-tab.mud-tab-active:hover,
html.dark .notification-tabs.mud-tabs .mud-tab.mud-tab-active:focus,
html.dark .notification-tabs .mud-tab.mud-tab-active,
html.dark .notification-tabs .mud-tab.mud-tab-active:hover,
html.dark .notification-tabs .mud-tab.mud-tab-active:focus {
  color: var(--color-primary-400) !important;
  border-bottom-color: var(--color-primary-500) !important;
}

.notification-skeleton {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 20px;
}

.skeleton-item {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  animation: skeleton-fade-in 0.3s ease-out both;
}

@keyframes skeleton-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.skeleton-item:not(:last-child) {
  border-bottom: 1px solid var(--notif-border);
}

.skeleton-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.empty-state {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
  text-align: center;
}

.empty-state-icon {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    rgba(var(--notif-accent-rgb), 0.1) 0%,
    rgba(var(--notif-accent-rgb), 0.02) 100%
  );
  border-radius: 50%;
  margin-bottom: 16px;
}

.empty-state-icon .mud-icon-root {
  opacity: 0.5;
}

.empty-state-title {
  font-weight: 500 !important;
  color: var(--notif-text-primary);
  margin-bottom: 4px;
}

.empty-state-subtitle {
  color: var(--notif-text-secondary);
  opacity: 0.7;
  font-size: 0.85rem;
  max-width: 200px;
}

.notification-list-container {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scroll-behavior: smooth;
  padding: 16px;
}

.notification-list-container::-webkit-scrollbar {
  width: 6px;
}

.notification-list-container::-webkit-scrollbar-track {
  background: transparent;
}

.notification-list-container::-webkit-scrollbar-thumb {
  background-color: var(--notif-border);
  border-radius: 3px;
  transition: background-color 0.2s ease;
}

.notification-list-container::-webkit-scrollbar-thumb:hover {
  background-color: var(--notif-text-secondary);
}

.date-header {
  display: none;
}

.date-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.date-group + .date-group {
  margin-top: 16px;
}

.notification-item {
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
  gap: 12px;
  position: relative;
  border: none;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  transition: opacity 150ms ease;
}

.notification-item:hover {
  background: transparent;
  transform: none;
}

.notification-item.unread,
.notification-item.read {
  background: transparent;
  opacity: 1;
}

.notification-item.new-notification {
  animation: slide-in-highlight 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes slide-in-highlight {
  0% {
    opacity: 0;
    transform: translateY(-12px) scale(0.98);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.notification-item.deleting {
  animation: fade-out-slide 0.3s cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes fade-out-slide {
  0% {
    opacity: 1;
    transform: translateX(0) scale(1);
    max-height: 100px;
  }

  100% {
    opacity: 0;
    transform: translateX(30px) scale(0.95);
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
  }
}

.unread-indicator,
.mention-indicator {
  display: none;
}

.notification-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--mud-palette-action-disabled);
  transition: none;
}

.notification-icon .mud-icon-root {
  color: #fff !important;
  font-size: 18px !important;
  width: 18px !important;
  height: 18px !important;
}

.notification-icon.type-default {
  background: var(--mud-palette-grey-default, var(--color-gray-400));
}

.notification-icon.type-info {
  background: var(--mud-palette-info);
}

.notification-icon.type-success {
  background: var(--mud-palette-success);
}

.notification-icon.type-warning {
  background: var(--mud-palette-warning);
}

.notification-icon.type-error {
  background: var(--mud-palette-error);
}

.notification-icon.mention-icon {
  background: var(--mud-palette-primary);
}

.notification-item:hover .notification-icon {
  transform: none;
}

.notification-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.notification-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.notification-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  line-height: 1.25;
  color: var(--color-gray-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 150ms ease;
}

html.dark .notification-title {
  color: var(--color-dark-100);
}

.unread-title {
  font-weight: 600 !important;
}

.read-title {
  font-weight: var(--font-weight-medium, 500) !important;
  color: var(--color-gray-800) !important;
}

html.dark .read-title {
  color: var(--color-dark-100) !important;
}

.notification-type-chip {
  height: 18px !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  padding: 0 6px !important;
  border-radius: 9999px !important;
}

.notification-type-chip .mud-chip-content {
  padding: 0 !important;
}

.notification-message {
  margin-top: 2px;
  font-family: var(--font-sans);
  font-size: var(--text-xs, 0.75rem);
  line-height: 1.4;
  color: var(--color-gray-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
}

html.dark .notification-message {
  color: var(--color-dark-200);
}

.notification-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}

.notification-time-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
}

.time-icon {
  display: none !important;
}

.notification-time {
  font-family: var(--font-sans);
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-gray-400);
  line-height: 1;
  opacity: 1;
}

html.dark .notification-time {
  color: var(--color-dark-300);
}

.notification-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(4px);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.notification-item:hover .notification-actions,
.notification-item:focus-within .notification-actions {
  opacity: 1;
  transform: translateX(0);
}

.action-btn.mud-icon-button {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  padding: 0 !important;
  border-radius: 9999px !important;
  color: var(--color-gray-500) !important;
  background: transparent !important;
  box-shadow: none !important;
  transition:
    background-color 150ms ease,
    color 150ms ease !important;
}

.action-btn.mud-icon-button .mud-icon-root {
  font-size: 16px !important;
  width: 16px !important;
  height: 16px !important;
  color: inherit !important;
}

.action-btn.mud-icon-button:hover {
  background: rgb(from var(--color-gray-500) r g b / 0.12) !important;
  color: var(--color-gray-800) !important;
  transform: none !important;
}

.action-btn:not(.delete-btn).mud-icon-button:hover {
  background: rgb(from var(--color-primary-500) r g b / 0.14) !important;
  color: var(--color-primary-600) !important;
}

.delete-btn.mud-icon-button:hover {
  background: rgb(from var(--mud-palette-error) r g b / 0.12) !important;
  color: var(--mud-palette-error) !important;
}

html.dark .action-btn.mud-icon-button {
  color: var(--color-dark-300) !important;
}

html.dark .action-btn.mud-icon-button:hover {
  background: rgb(from var(--color-dark-400) r g b / 0.4) !important;
  color: var(--color-dark-100) !important;
}

html.dark .action-btn:not(.delete-btn).mud-icon-button:hover {
  background: rgb(from var(--color-primary-400) r g b / 0.22) !important;
  color: var(--color-primary-300) !important;
}

html.dark .delete-btn.mud-icon-button:hover {
  background: rgb(from var(--mud-palette-error) r g b / 0.18) !important;
  color: var(--mud-palette-error) !important;
}

.notification-footer {
  flex-shrink: 0;
  padding: 0;
  border-top: none;
  background: var(--color-gray-100);
}

html.dark .notification-footer {
  background: var(--color-dark-800);
}

.view-all-btn.mud-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 8px 20px !important;
  border: none !important;
  border-radius: 0 !important;
  outline: none !important;
  background: var(--color-gray-150) !important;
  background-image: none !important;
  box-shadow: none !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm, 0.875rem) !important;
  font-weight: 500 !important;
  line-height: 1.25rem !important;
  letter-spacing: 0.025em !important;
  color: var(--color-gray-900) !important;
  text-transform: none !important;
  text-align: center !important;
  transition: all 200ms !important;
}

.view-all-btn.mud-button:hover,
.view-all-btn.mud-button:focus,
.view-all-btn.mud-button:focus-visible {
  background: var(--color-gray-200) !important;
  color: var(--color-gray-900) !important;
  outline: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.view-all-btn.mud-button:active {
  background: rgb(from var(--color-gray-200) r g b / 0.8) !important;
  outline: none !important;
  box-shadow: none !important;
}

.view-all-btn.mud-button .mud-ripple,
.view-all-btn.mud-button .mud-ripple-visual {
  display: none !important;
}

html.dark .view-all-btn.mud-button {
  background: var(--surface-2) !important;
  color: var(--color-dark-50) !important;
}

html.dark .view-all-btn.mud-button:hover,
html.dark .view-all-btn.mud-button:focus,
html.dark .view-all-btn.mud-button:focus-visible {
  background: var(--surface-1) !important;
  color: var(--color-dark-50) !important;
}

html.dark .view-all-btn.mud-button:active {
  background: rgb(from var(--surface-1) r g b / 0.9) !important;
}

.notification-item.mention-notification,
.notification-item.mention-notification.unread,
.notification-item.mention-notification:hover {
  background: transparent;
  border-left: none;
}

.notification-action-btn {
  font-size: 0.7rem !important;
  min-width: auto !important;
  height: 24px !important;
  text-transform: none !important;
  padding: 0 8px !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
}

.notification-action-btn .mud-button-label {
  font-size: 0.7rem !important;
}

.notification-badge-pulse .notification-bell-btn {
  animation: icon-ring 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes icon-ring {
  0%,
  100% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(-12deg);
  }

  30% {
    transform: rotate(12deg);
  }

  45% {
    transform: rotate(-8deg);
  }

  60% {
    transform: rotate(8deg);
  }

  75% {
    transform: rotate(-4deg);
  }

  90% {
    transform: rotate(4deg);
  }
}

@media (max-width: 420px) {
  .notification-panel {
    width: calc(100vw - 16px);
    max-height: 80vh;
  }

  .notification-header {
    padding: 14px 16px 10px;
  }

  .notification-item {
    padding: 12px 16px;
    margin: 0 4px;
  }

  .notification-icon {
    width: 36px;
    height: 36px;
  }
}

.mud-theme-dark .notification-panel {
  --notif-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  --notif-bg-unread: rgba(var(--mud-palette-info-rgb), 0.08);
}

.mud-theme-dark .notification-icon {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.02) 100%
  );
}

.mud-theme-dark .notification-icon.unread-icon {
  background: linear-gradient(
    135deg,
    rgba(var(--notif-accent-rgb), 0.2) 0%,
    rgba(var(--notif-accent-rgb), 0.08) 100%
  );
}

.av-orbit-loader {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.av-orbit-loader__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.av-orbit-loader--sm,
.av-orbit-loader--sm .av-orbit-loader__svg {
  width: 32px;
  height: 32px;
}

.av-orbit-loader--md,
.av-orbit-loader--md .av-orbit-loader__svg {
  width: 64px;
  height: 64px;
}

.av-orbit-loader--lg,
.av-orbit-loader--lg .av-orbit-loader__svg {
  width: 128px;
  height: 128px;
}

.av-orbit-loader__ring {
  fill: none;
  stroke: var(--color-primary-500, #0a6bff);
  stroke-width: 1;
}

.av-orbit-loader__ring--outer {
  opacity: 0.22;
}

.av-orbit-loader__ring--middle {
  opacity: 0.28;
}

.av-orbit-loader__ring--inner {
  opacity: 0.34;
}

.av-orbit-loader__dot--primary {
  fill: var(--color-primary-500, #0a6bff);
}

.av-orbit-loader__dot--info {
  fill: var(--color-info, #00a3c7);
}

.av-orbit-loader__dot--success {
  fill: var(--color-success, #25c16f);
}

.av-orbit-loader__group--outer {
  transform-origin: 50% 50%;
  animation: av-orbit-spin-cw 4s linear infinite;
}

.av-orbit-loader__group--middle {
  transform-origin: 50% 50%;
  animation: av-orbit-spin-ccw 2.5s linear infinite;
}

.av-orbit-loader__group--inner {
  transform-origin: 50% 50%;
  animation: av-orbit-spin-cw 1.7s linear infinite;
}

@keyframes av-orbit-spin-cw {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes av-orbit-spin-ccw {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-360deg);
  }
}

.av-orbit-loader__label {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--color-gray-700, #475569);
  text-align: center;
  max-width: 200px;
}

html.dark .av-orbit-loader__label {
  color: var(--color-dark-200);
}

@media (prefers-reduced-motion: reduce) {
  .av-orbit-loader__group--outer,
  .av-orbit-loader__group--inner,
  .av-orbit-loader__dot {
    animation: none;
  }
}

.dv1-page {
  --dv1-amber: #f59e0b;
  --dv1-amber-bg: rgb(254 243 199 / 1);
  --dv1-amber-text: #b45309;
  --dv1-green-bg: rgb(from var(--color-success-light) r g b / 0.12);
  --dv1-green-text: var(--color-success-darker);
  --dv1-blue-bg: rgb(from var(--color-primary-500) r g b / 0.1);
  --dv1-blue-text: var(--color-primary-700);
  --dv1-gray-bg: var(--color-gray-100);
  --dv1-gray-text: var(--color-gray-700);
  --dv1-surface: var(--color-white);
  --dv1-page-bg: transparent;
  --dv1-border: var(--color-gray-200);
  --dv1-ink: var(--color-gray-900);
  --dv1-ink-soft: var(--color-gray-600);

  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 4px 0 32px;
  font-family: var(--font-sans);
  color: var(--dv1-ink);
}

.dv1-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 4px 0;
}

.dv1-hero-left {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex-wrap: wrap;
}

.dv1-breadcrumbs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: var(--text-sm-plus);
  line-height: 1.2;
}

.dv1-breadcrumbs__link {
  color: var(--color-gray-500);
  font-weight: 400;
  text-decoration: none;
  transition: color 120ms ease;
}

.dv1-breadcrumbs__link:hover {
  color: var(--color-gray-700);
}

.dv1-breadcrumbs__sep.mud-icon-root {
  width: 14px;
  height: 14px;
  color: var(--color-gray-300);
}

.dv1-breadcrumbs__current {
  color: var(--color-gray-800);
  font-weight: 500;
}

html.dark .dv1-breadcrumbs__link {
  color: var(--color-dark-300);
}

html.dark .dv1-breadcrumbs__link:hover {
  color: var(--color-dark-100);
}

html.dark .dv1-breadcrumbs__sep.mud-icon-root {
  color: var(--color-dark-400);
}

html.dark .dv1-breadcrumbs__current {
  color: var(--color-dark-50);
}

.dv1-hero-divider {
  display: inline-block;
  width: 1px;
  height: 16px;
  background: var(--color-gray-200);
}

html.dark .dv1-hero-divider {
  background: var(--color-dark-500);
}

.dv1-sync-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-gray-500);
  line-height: 1.2;
  white-space: nowrap;
}

.dv1-sync-status__icon.mud-icon-root {
  width: 14px;
  height: 14px;
  color: var(--color-gray-400);
}

html.dark .dv1-sync-status {
  color: var(--color-dark-300);
}

html.dark .dv1-sync-status__icon.mud-icon-root {
  color: var(--color-dark-400);
}

.dv1-hero-title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--dv1-ink-soft);
}

.dv1-hero-title .dv1-hero-name {
  font-weight: 600;
  color: var(--color-primary-600);
}

.dv1-hero-date {
  color: var(--dv1-ink);
  font-weight: 500;
}

.dv1-hero-subtitle {
  margin: 6px 0 0;
  font-size: var(--text-sm);
  color: var(--dv1-ink-soft);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.dv1-hero-emph {
  color: var(--dv1-amber-text);
  font-weight: 500;
}

.dv1-hero-sep {
  color: var(--color-gray-400);
}

.dv1-hero-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dv1-action-btn.mud-icon-button {
  width: 36px;
  height: 36px;
  border: 1px solid var(--dv1-border);
  border-radius: 9999px;
  color: var(--dv1-ink-soft);
  background: var(--dv1-surface);
  transition:
    border-color 120ms ease,
    color 120ms ease,
    background-color 120ms ease;
}

.dv1-action-btn.mud-icon-button:hover {
  border-color: var(--color-primary-400);
  color: var(--color-primary-600);
  background: var(--dv1-blue-bg);
}

html.dark .dv1-action-btn.mud-icon-button:hover {
  color: var(--color-primary-300);
}

.dv1-card {
  background: var(--dv1-surface);
  border: 1px solid var(--dv1-border);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
}

.dv1-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.dv1-card-title {
  margin: 0;
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm-plus) !important;
  font-weight: 500 !important;
  letter-spacing: 0.025em !important;
  line-height: 1.4 !important;
  color: var(--color-gray-800);
}

html.dark .dv1-card-title {
  color: var(--color-dark-100);
}

.dv1-card-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 8px;
  border-radius: 9999px;
  background: var(--dv1-blue-bg);
  color: var(--dv1-blue-text);
  font-size: 12px;
  font-weight: 600;
}

.dv1-card-subtitle {
  font-size: 12px;
  color: var(--dv1-ink-soft);
  font-weight: 500;
}

.dv1-card-footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed var(--dv1-border);
}

.dv1-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-primary-600);
  text-decoration: none;
}

.dv1-link:hover {
  color: var(--color-primary-700);
  text-decoration: underline;
}

.dv1-link--muted {
  color: var(--dv1-ink-soft);
}

.dv1-link--muted:hover {
  color: var(--dv1-ink);
}

.dv1-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.dv1-kpi {
  position: relative;
  overflow-wrap: break-word;
  word-break: normal;
  background: var(--color-white);
  border-radius: 0.5rem;
  box-shadow:
    rgba(145, 158, 171, 0.2) 0px 0px 2px 0px,
    rgba(145, 158, 171, 0.12) 0px 12px 24px -4px;
  padding: 1.25rem;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease;
}

.dv1-kpi:hover {
  transform: translateY(-1px);
}

html.dark .dv1-kpi {
  background: var(--color-dark-700);
  box-shadow: none;
}

@media print {
  .dv1-kpi {
    border: 1px solid var(--color-gray-200);
    box-shadow: none;
  }
}

.dv1-kpi-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.dv1-kpi-label {
  font-size: 13px;
  color: var(--dv1-ink-soft);
  font-weight: 400;
  line-height: 1.4;
}

.dv1-kpi-value {
  margin-top: 2px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.dv1-kpi--blue .dv1-kpi-value {
  color: #0ea5e9;
}

.dv1-kpi--amber .dv1-kpi-value {
  color: #f59e0b;
}

.dv1-kpi--green .dv1-kpi-value {
  color: var(--color-success);
}

.dv1-kpi--rose .dv1-kpi-value {
  color: #ec4899;
}

.dv1-kpi--gray .dv1-kpi-value {
  color: var(--color-gray-700);
}

html.dark .dv1-kpi--blue .dv1-kpi-value {
  color: #38bdf8;
}

html.dark .dv1-kpi--amber .dv1-kpi-value {
  color: #fbbf24;
}

html.dark .dv1-kpi--green .dv1-kpi-value {
  color: var(--color-success-lighter);
}

html.dark .dv1-kpi--rose .dv1-kpi-value {
  color: #f472b6;
}

html.dark .dv1-kpi--gray .dv1-kpi-value {
  color: var(--color-dark-100);
}

.dv1-kpi-delta {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-success);
}

html.dark .dv1-kpi-delta {
  color: var(--color-success-lighter);
}

.dv1-kpi-delta .mud-icon-root {
  width: 14px;
  height: 14px;
}

.dv1-kpi-icon {
  width: 48px;
  height: 48px;
  border-radius: 28%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: flex-start;
}

.dv1-kpi-icon .mud-icon-root {
  width: 24px;
  height: 24px;
}

.dv1-kpi--blue .dv1-kpi-icon {
  background: rgb(14 165 233 / 0.12);
  color: #0284c7;
}

.dv1-kpi--amber .dv1-kpi-icon {
  background: rgb(245 158 11 / 0.14);
  color: #d97706;
}

.dv1-kpi--green .dv1-kpi-icon {
  background: rgb(34 197 94 / 0.12);
  color: var(--color-success);
}

.dv1-kpi--rose .dv1-kpi-icon {
  background: rgb(236 72 153 / 0.12);
  color: #db2777;
}

.dv1-kpi--gray .dv1-kpi-icon {
  background: var(--dv1-gray-bg);
  color: var(--dv1-gray-text);
}

html.dark .dv1-kpi--blue .dv1-kpi-icon {
  background: rgb(14 165 233 / 0.2);
  color: #38bdf8;
}

html.dark .dv1-kpi--amber .dv1-kpi-icon {
  background: rgb(245 158 11 / 0.22);
  color: #fbbf24;
}

html.dark .dv1-kpi--green .dv1-kpi-icon {
  background: rgb(34 197 94 / 0.2);
  color: var(--color-success-lighter);
}

html.dark .dv1-kpi--rose .dv1-kpi-icon {
  background: rgb(236 72 153 / 0.2);
  color: #f472b6;
}

.dv1-kpi-delta--bad {
  color: var(--color-error);
}

.dv1-op-grid {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: 20px;
}

.dv1-app-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dv1-app-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
  border-radius: 8px;
  transition: background-color 120ms ease;
}

.dv1-app-row:hover {
  background-color: var(--color-gray-100);
}

html.dark .dv1-app-row:hover {
  background-color: var(--color-dark-600);
}

.dv1-avatar {
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-sans);
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.dv1-app-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.dv1-app-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--dv1-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dv1-app-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--dv1-ink-soft);
}

.dv1-app-meta-dot {
  color: var(--color-gray-400);
}

.dv1-app-meta-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dv1-status-pill {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 8px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
}

.dv1-status-pill--draft {
  background: var(--color-gray-100);
  color: var(--color-gray-700);
}

.dv1-status-pill--sent {
  background: var(--dv1-blue-bg);
  color: var(--dv1-blue-text);
}

html.dark .dv1-status-pill--draft {
  background: var(--color-dark-500);
  color: var(--color-dark-100);
}

.dv1-app-days {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 9999px;
  line-height: 1;
}

.dv1-app-days--critical {
  color: var(--color-error-darker);
  background: rgb(from var(--color-error-light) r g b / 0.1);
}

.dv1-app-days--warning {
  color: var(--dv1-amber-text);
  background: var(--dv1-amber-bg);
}

.dv1-app-days--info {
  color: var(--dv1-blue-text);
  background: var(--dv1-blue-bg);
}

html.dark .dv1-app-days--critical {
  color: #fca5a5;
  background: rgb(from var(--color-error-light) r g b / 0.2);
}

.dv1-officer-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dv1-officer-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 4px;
  border-radius: 8px;
  transition: background-color 120ms ease;
}

.dv1-officer-row:hover {
  background-color: var(--color-gray-100);
}

html.dark .dv1-officer-row:hover {
  background-color: var(--color-dark-600);
}

.dv1-officer-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.dv1-officer-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--dv1-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dv1-officer-bar {
  height: 6px;
  background: var(--color-gray-100);
  border-radius: 9999px;
  overflow: hidden;
}

.dv1-officer-bar-fill {
  display: block;
  height: 100%;
  min-width: 3px;
  border-radius: 9999px;
}

.dv1-officer-bar-fill--light {
  background: linear-gradient(
    90deg,
    var(--color-success-lighter),
    var(--color-success)
  );
}

.dv1-officer-bar-fill--medium {
  background: linear-gradient(
    90deg,
    var(--color-primary-400),
    var(--color-primary-600)
  );
}

.dv1-officer-bar-fill--heavy {
  background: linear-gradient(90deg, #fb923c, #ea580c);
}

html.dark .dv1-officer-bar {
  background: var(--color-dark-500);
}

.dv1-workload-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 22px;
  padding: 0 8px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.dv1-workload-chip--light {
  background: var(--dv1-green-bg);
  color: var(--dv1-green-text);
}

.dv1-workload-chip--medium {
  background: var(--dv1-blue-bg);
  color: var(--dv1-blue-text);
}

.dv1-workload-chip--heavy {
  background: rgb(254 215 170 / 1);
  color: #9a3412;
}

html.dark .dv1-workload-chip--heavy {
  background: rgb(154 52 18 / 0.3);
  color: #fed7aa;
}

.dv1-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.dv1-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 28px 16px;
  text-align: center;
}

.dv1-empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  background: var(--dv1-green-bg);
  color: var(--dv1-green-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.dv1-empty-icon .mud-icon-root {
  width: 28px;
  height: 28px;
}

.dv1-empty-title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--dv1-ink);
}

.dv1-empty-subtitle {
  margin: 0;
  font-size: 12px;
  color: var(--dv1-ink-soft);
}

.dv1-doc-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.dv1-doc-stat {
  background: var(--color-gray-50);
  border-radius: 8px;
  padding: 12px 8px;
  text-align: center;
}

.dv1-doc-stat-value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
}

.dv1-doc-stat-value--amber {
  color: var(--dv1-amber-text);
}

.dv1-doc-stat-value--blue {
  color: var(--dv1-blue-text);
}

.dv1-doc-stat-value--green {
  color: var(--dv1-green-text);
}

.dv1-doc-stat-label {
  margin-top: 4px;
  font-size: 11px;
  color: var(--dv1-ink-soft);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dv1-doc-progress {
  height: 6px;
  background: var(--color-gray-100);
  border-radius: 9999px;
  overflow: hidden;
}

.dv1-doc-progress-fill {
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--color-success-lighter),
    var(--color-success)
  );
  border-radius: 9999px;
  transition: width 240ms ease;
}

.dv1-highlights-grid {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: 20px;
}

.dv1-hero-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 22px 24px;
  color: var(--color-white);
  background:
    radial-gradient(
      circle at 100% 100%,
      rgb(255 255 255 / 0.15) 0%,
      transparent 50%
    ),
    linear-gradient(135deg, #0050d4 0%, #0a6bff 55%, #2e7cff 100%);
  box-shadow: 0 6px 24px rgb(10 107 255 / 0.2);
  display: flex;
  gap: 18px;
  align-items: stretch;
  min-height: 168px;
}

.dv1-hero-card__icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: rgb(255 255 255 / 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: center;
}

.dv1-hero-card__icon .mud-icon-root {
  width: 30px;
  height: 30px;
  color: var(--color-white);
}

.dv1-hero-card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.dv1-hero-card__label {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgb(255 255 255 / 0.85);
}

.dv1-hero-card__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-white);
}

.dv1-hero-card__footnote {
  font-size: 12px;
  color: rgb(255 255 255 / 0.8);
  line-height: 1.4;
}

.dv1-hero-card__progress {
  position: relative;
  height: 24px;
  margin-top: 10px;
}

.dv1-hero-card__progress-track {
  position: absolute;
  inset: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 4px;
  background: rgb(255 255 255 / 0.2);
  border-radius: 9999px;
}

.dv1-hero-card__progress-fill {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 4px;
  max-width: 100%;
  background: rgb(255 255 255 / 0.95);
  border-radius: 9999px;
  transition: width 800ms cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 8px rgb(255 255 255 / 0.3);
}

.dv1-hero-card__progress-thumb {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  min-width: 38px;
  height: 22px;
  border-radius: 9999px;
  background: rgb(15 23 42 / 0.45);
  backdrop-filter: blur(6px);
  color: var(--color-white);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid rgb(255 255 255 / 0.3);
  transition: left 800ms cubic-bezier(0.4, 0, 0.2, 1);
}

.dv1-sale-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.dv1-sale-card .dv1-card-header {
  width: 100%;
}

.dv1-progress-ring-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 0 4px;
}

.dv1-progress-ring {
  width: 140px;
  height: 140px;
}

.dv1-progress-ring__track {
  fill: none;
  stroke: var(--color-gray-100);
  stroke-width: 10;
}

html.dark .dv1-progress-ring__track {
  stroke: var(--color-dark-500);
}

.dv1-progress-ring__fill {
  fill: none;
  stroke: url(#dv1-progress-grad);
  stroke: var(--color-primary-600);
  stroke-width: 10;
  stroke-linecap: round;
  transition: stroke-dashoffset 420ms cubic-bezier(0.4, 0, 0.2, 1);
}

.dv1-progress-ring__pct {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  fill: var(--dv1-ink);
}

html.dark .dv1-progress-ring__pct {
  fill: var(--color-dark-50);
}

.dv1-sales-row {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: 20px;
  align-items: stretch;
}

.dv1-mini-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(140px, 1fr) auto minmax(140px, 1fr);
  gap: 20px;
}

.dv1-mini-card--tall {
  grid-row: span 2;
}

.dv1-mini-card--horiz {
  grid-row: span 1;
}

.dv1-mini-card {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dv1-mini-card--tall {
  justify-content: flex-start;
}

.dv1-mini-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  color: var(--dv1-ink);
  letter-spacing: -0.01em;
}

.dv1-mini-bar-chart {
  margin: 6px -8px -6px;
  flex: 1;
  min-height: 110px;
}

.dv1-mini-area-chart {
  margin: 6px -16px -16px;
  flex: 1;
  min-height: 130px;
}

.dv1-mini-card--horiz {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
}

.dv1-mini-ring {
  position: relative;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dv1-mini-ring svg {
  width: 100%;
  height: 100%;
}

.dv1-mini-ring__track {
  fill: none;
  stroke: var(--color-gray-100);
  stroke-width: 4;
}

html.dark .dv1-mini-ring__track {
  stroke: var(--color-dark-500);
}

.dv1-mini-ring__fill {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
}

.dv1-mini-ring--success .dv1-mini-ring__fill {
  stroke: var(--color-success);
}

.dv1-mini-ring--primary .dv1-mini-ring__fill {
  stroke: var(--color-primary-600);
}

.dv1-mini-ring__pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--dv1-ink);
}

.dv1-mini-ring-label {
  font-size: var(--text-sm-plus);
  font-weight: 500;
  color: var(--dv1-ink);
  line-height: 1.3;
}

@media (max-width: 1199px) {
  .dv1-sales-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 599px) {
  .dv1-mini-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }

  .dv1-mini-card--tall,
  .dv1-mini-card--horiz {
    grid-row: auto;
  }
}

.dv1-card--chart {
  gap: 12px;
}

.dv1-metric-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--color-gray-100);
  border-radius: 9999px;
  padding: 3px;
  gap: 2px;
}

html.dark .dv1-metric-toggle {
  background: var(--color-dark-600);
}

.dv1-toggle-btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 5px 14px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--dv1-ink-soft);
  border-radius: 9999px;
  cursor: pointer;
  transition:
    background-color 120ms ease,
    color 120ms ease;
  line-height: 1.2;
}

.dv1-toggle-btn:hover {
  color: var(--dv1-ink);
}

.dv1-toggle-btn--active {
  background: var(--dv1-surface);
  color: var(--color-primary-700);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
}

html.dark .dv1-toggle-btn--active {
  background: var(--color-dark-500);
  color: var(--color-primary-300);
}

.dv1-sales-chart {
  width: 100%;
  margin: 4px -8px 0;
  min-height: 280px;
}

.dv1-sales-chart .apexcharts-canvas {
  width: 100% !important;
}

.dv1-card-footnote {
  font-size: 12px;
  color: var(--dv1-ink-soft);
  padding-top: 8px;
  border-top: 1px dashed var(--dv1-border);
}

.dv1-funnel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.dv1-funnel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 0;
}

.dv1-funnel-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 12px;
}

.dv1-funnel-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--dv1-ink);
}

.dv1-funnel-bar-wrap {
  height: 24px;
  background: var(--color-gray-100);
  border-radius: 6px;
  overflow: hidden;
}

html.dark .dv1-funnel-bar-wrap {
  background: var(--color-dark-600);
}

.dv1-funnel-bar {
  display: block;
  height: 100%;
  min-width: 6px;
  border-radius: 6px;
}

.dv1-funnel-bar--blue {
  background: linear-gradient(
    90deg,
    var(--color-primary-500),
    var(--color-primary-600)
  );
}

.dv1-funnel-bar--amber {
  background: linear-gradient(90deg, #f59e0b, #d97706);
}

.dv1-funnel-bar--green {
  background: linear-gradient(
    90deg,
    var(--color-success-light),
    var(--color-success)
  );
}


.dv1-funnel-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--dv1-ink);
  text-align: right;
}

.dv1-donut-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.dv1-donut-chart {
  min-height: 220px;
}

.dv1-donut-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dv1-donut-legend-item {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.dv1-donut-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.dv1-donut-legend-label {
  color: var(--dv1-ink-soft);
}

.dv1-donut-legend-value {
  font-weight: 600;
  color: var(--dv1-ink);
}

.dv1-closings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.dv1-closing-card {
  display: flex;
  align-items: stretch;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--dv1-border);
  border-radius: 12px;
  background: var(--dv1-surface);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.dv1-closing-card:hover {
  transform: translateY(-1px);
  border-color: var(--color-primary-300);
  box-shadow: 0 4px 12px rgb(from var(--color-primary-500) r g b / 0.08);
}

.dv1-closing-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 48px;
  border-radius: 10px;
  background: var(--dv1-blue-bg);
  color: var(--dv1-blue-text);
  flex-shrink: 0;
}

.dv1-closing-day-num {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

.dv1-closing-day-name {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 3px;
}

.dv1-closing-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.dv1-closing-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.dv1-avatar--sm {
  width: 24px;
  height: 24px;
  font-size: 10px;
}

.dv1-closing-borrower {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--dv1-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dv1-closing-foot {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.dv1-closing-amount {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-success-darker);
}

html.dark .dv1-closing-amount {
  color: var(--color-success-lighter);
}

.dv1-closing-tag {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dv1-ink-soft);
  padding: 3px 8px;
  border-radius: 9999px;
  background: var(--color-gray-100);
}

html.dark .dv1-closing-tag {
  background: var(--color-dark-600);
}

.dv1-customize-hint {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--dv1-ink-soft);
}

.dv1-customize-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 20px;
}

.dv1-customize-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 120ms ease;
}

.dv1-customize-row:hover {
  background: var(--color-gray-100);
}

html.dark .dv1-customize-row:hover {
  background: var(--color-dark-600);
}

.dv1-customize-label {
  font-size: var(--text-sm);
  color: var(--dv1-ink);
  font-weight: 500;
}

.dv1-customize-reset.mud-button {
  text-transform: none;
}

.dv1-page-footer {
  display: flex;
  justify-content: flex-end;
  padding: 0 4px;
}

html.dark .dv1-page {
  --dv1-amber-bg: rgb(146 64 14 / 0.25);
  --dv1-amber-text: #fcd34d;
  --dv1-green-bg: rgb(from var(--color-success-light) r g b / 0.18);
  --dv1-green-text: var(--color-success-lighter);
  --dv1-blue-bg: rgb(from var(--color-primary-500) r g b / 0.18);
  --dv1-blue-text: var(--color-primary-300);
  --dv1-gray-bg: var(--color-dark-600);
  --dv1-gray-text: var(--color-dark-100);
  --dv1-surface: var(--color-dark-700);
  --dv1-border: var(--color-dark-500);
  --dv1-ink: var(--color-dark-50);
  --dv1-ink-soft: var(--color-dark-200);
}

html.dark .dv1-app-row:hover,
html.dark .dv1-doc-stat {
  background-color: var(--color-dark-600);
}

html.dark .dv1-officer-bar,
html.dark .dv1-doc-progress {
  background-color: var(--color-dark-500);
}

@media (max-width: 1199px) {
  .dv1-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 899px) {
  .dv1-op-grid,
  .dv1-detail-grid,
  .dv1-funnel-grid,
  .dv1-highlights-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .dv1-donut-wrap {
    grid-template-columns: minmax(0, 1fr);
  }

  .dv1-hero {
    flex-direction: column;
    align-items: stretch;
  }

  .dv1-funnel-row {
    grid-template-columns: 90px minmax(0, 1fr) 32px;
  }

  .dv1-hero-card__value {
    font-size: 36px;
  }
}

@media (max-width: 599px) {
  .dv1-kpi-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .dv1-hero-title {
    font-size: 22px;
  }
}

.av-user-menu {
  min-width: 256px !important;
  max-width: 256px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  border: 1px solid var(--color-gray-150, #e9eef5);
  box-shadow:
    rgba(145, 158, 171, 0.2) 0 0 2px 0,
    rgba(145, 158, 171, 0.12) 0 12px 24px -4px;
}

.av-user-menu .mud-list,
.av-user-menu .mud-menu-list,
.av-user-menu .mud-popover-content {
  padding: 0 !important;
  background: var(--color-white, #fff) !important;
}

.av-user-menu__header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 16px;
  background: var(--color-gray-100, #f1f5f9);
}

.av-user-menu__avatar {
  width: 56px !important;
  height: 56px !important;
  flex-shrink: 0;
}

/* Initials fallback — shown inside the user MudAvatar when there is no profile
   photo (LoginLinks). Branded soft surface + readable text; the avatar size and
   the initials font come from MudBlazor / the per-instance size. When a photo
   exists the nested MudImage covers this background. */
.av-user-avatar,
.av-nav-user-card__avatar,
.av-user-menu__avatar {
  position: relative;
  overflow: hidden;
  background-color: var(--color-primary-100);
  color: var(--color-primary-700);
}

html.dark .av-user-avatar,
html.dark .av-nav-user-card__avatar,
html.dark .av-user-menu__avatar {
  background-color: rgb(from var(--color-primary-400) r g b / 0.20);
  color: var(--color-primary-200);
}

/* Native <img> inside the user MudAvatar, overlaid on top of the always-present
   initials. While the image loads (or if it 404s and is removed via onerror),
   the initials underneath stay visible; once the image loads it covers them. */
.av-user-avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.av-user-menu__user-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.av-user-menu__user-name {
  font-family: var(--font-sans);
  font-size: var(--text-base, 1rem);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-gray-700, #475569);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.av-user-menu__user-role {
  font-family: var(--font-sans);
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-gray-400, #94a3b8);
  line-height: 1.3;
  margin-top: 2px;
  word-break: break-word;
}

.av-user-menu__items {
  display: flex;
  flex-direction: column;
  padding: 8px 0 8px;
}

.av-user-menu .av-user-menu__item.mud-menu-item,
.av-user-menu .av-user-menu__item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 16px !important;
  border-radius: 0 !important;
  letter-spacing: 0.025em;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition:
    background-color 200ms ease,
    color 200ms ease;
}

.av-user-menu .av-user-menu__item:hover {
  background-color: var(--color-gray-100, #f1f5f9) !important;
}

.av-user-menu .av-user-menu__item > *:not(.av-user-menu__item-row),
.av-user-menu .av-user-menu__item .mud-list-item-text,
.av-user-menu .av-user-menu__item .mud-menu-item-text,
.av-user-menu .av-user-menu__item .mud-button-label,
.av-user-menu .av-user-menu__item .mud-typography {
  display: contents !important;
}

.av-user-menu__item-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100%;
  min-width: 0;
}

.av-user-menu__item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
  color: #fff;
}

.av-user-menu__item-icon .mud-icon-root {
  color: #fff !important;
  width: 18px;
  height: 18px;
}

.av-user-menu__item-icon--warning {
  background: var(--color-warning, #f59200);
}

.av-user-menu__item-icon--info {
  background: var(--color-info, #0284c7);
}

.av-user-menu__item-icon--secondary {
  background: var(--color-secondary, #e000ad);
}

.av-user-menu__item-icon--error {
  background: var(--color-error, #ff4f1a);
}

.av-user-menu__item-icon--success {
  background: var(--color-success, #16a34a);
}

.av-user-menu__item-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.av-user-menu__item-title {
  font-family: var(--font-sans);
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-gray-800, #1e293b);
  line-height: 1.25;
  transition: color 200ms ease;
}

.av-user-menu .av-user-menu__item:hover .av-user-menu__item-title {
  color: var(--color-primary-600);
}

.av-user-menu__item-subtitle {
  font-family: var(--font-sans);
  font-size: var(--text-xs, 0.75rem);
  font-weight: 400;
  color: var(--color-gray-400, #94a3b8);
  line-height: 1.3;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.av-user-menu__item-count {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 8px;
  border-radius: 9999px;
  background: rgb(from var(--color-primary-500) r g b / 0.12);
  color: var(--color-primary-700);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  flex-shrink: 0;
}

.av-user-menu__footer {
  padding: 16px;
}

.av-user-menu .av-user-menu__logout.mud-button {
  background: var(--color-gray-100, #f1f5f9) !important;
  color: var(--color-gray-800, #1e293b) !important;
  font-family: var(--font-sans);
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  text-transform: none !important;
  border-radius: 8px !important;
  height: 36px;
  border: 1px solid var(--color-gray-150, #e9eef5) !important;
  box-shadow: none !important;
  gap: 8px;
}

.av-user-menu .av-user-menu__logout.mud-button:hover {
  background: var(--color-gray-200, #e2e8f0) !important;
}

.av-user-menu .av-user-menu__logout .mud-button-icon-start {
  color: var(--color-gray-600, #475569);
}

html.dark .av-user-menu {
  border-color: var(--color-dark-600, #232429);
  box-shadow: 0 3px 10px 0 rgb(25 25 25 / 30%);
}

html.dark .av-user-menu .mud-list,
html.dark .av-user-menu .mud-menu-list,
html.dark .av-user-menu .mud-popover-content {
  background: var(--color-dark-700, #1c1d21) !important;
}

html.dark .av-user-menu__header {
  background: var(--color-dark-800, #15161a);
}

html.dark .av-user-menu__user-name {
  color: var(--color-dark-100, #d0d2db);
}

html.dark .av-user-menu__user-role {
  color: var(--color-dark-300, #838794);
}

/* WI #1745 — the tenant the user is in, under the role in the menu header.
   Typography comes from Typo.caption; this block only sets layout and color. */
.av-user-menu__user-location {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  margin-top: 4px;
  color: var(--color-gray-500);
}

.av-user-menu__user-location-icon {
  flex: 0 0 auto;
  width: 14px !important;
  height: 14px !important;
  margin-top: 1px;
}

.av-user-menu__user-location-text {
  overflow-wrap: anywhere;
}

html.dark .av-user-menu__user-location {
  color: var(--color-dark-300);
}

html.dark .av-user-menu .av-user-menu__item:hover {
  background-color: var(--color-dark-600, #232429) !important;
}

html.dark .av-user-menu__item-title {
  color: var(--color-dark-100, #d0d2db);
}

html.dark .av-user-menu .av-user-menu__item:hover .av-user-menu__item-title {
  color: var(--color-primary-400);
}

html.dark .av-user-menu__item-subtitle {
  color: var(--color-dark-300, #838794);
}

html.dark .av-user-menu__item-count {
  background: rgb(from var(--color-primary-400) r g b / 0.2);
  color: var(--color-primary-300);
}

html.dark .av-user-menu .av-user-menu__logout.mud-button {
  background: var(--color-dark-600, #232429) !important;
  color: var(--color-dark-100, #d0d2db) !important;
  border-color: var(--color-dark-500, #2a2c32) !important;
}

html.dark .av-user-menu .av-user-menu__logout.mud-button:hover {
  background: var(--color-dark-500, #2a2c32) !important;
}

html.dark .av-user-menu .av-user-menu__logout .mud-button-icon-start {
  color: var(--color-dark-300, #838794);
}

.av-lang-trigger {
  transition:
    transform 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease;
}

.av-lang-trigger:hover {
  transform: scale(1.1);
  background-color: rgb(from var(--color-primary-500) r g b / 0.12);
  color: var(--color-primary-600);
}

html.dark .av-lang-trigger:hover {
  background-color: rgb(from var(--color-primary-400) r g b / 0.18);
  color: var(--color-primary-300);
}

.av-mode-toggle {
  margin-right: 10px;
}

.av-lang-popover .mud-list {
  padding: 4px;
  min-width: 200px;
  max-height: 280px;
  overflow-y: auto;
  border-radius: 8px;

  scrollbar-width: thin;
  scrollbar-color: var(--color-gray-300) transparent;
}

.av-lang-popover .mud-list::-webkit-scrollbar {
  width: 4px;
}

.av-lang-popover .mud-list::-webkit-scrollbar-track {
  background: transparent;
}

.av-lang-popover .mud-list::-webkit-scrollbar-thumb {
  background: rgb(from var(--color-gray-300) r g b / 0.6);
  border-radius: 4px;
}

html.dark .av-lang-popover .mud-list::-webkit-scrollbar-thumb {
  background: rgb(from var(--color-dark-400) r g b / 0.6);
}

.av-lang-item.mud-list-item,
.av-lang-item.mud-menu-item {
  padding: 0 12px !important;
  margin: 1px 0;
  background-color: transparent !important;
}

.av-lang-item.mud-list-item:hover,
.av-lang-item.mud-list-item:focus,
.av-lang-item.mud-list-item:focus-visible,
.av-lang-item.mud-list-item.mud-selected-item,
.av-lang-item.mud-menu-item:hover,
.av-lang-item.mud-menu-item:focus,
.av-lang-item.mud-menu-item:focus-visible,
.av-lang-item.mud-menu-item.mud-selected-item {
  background-color: transparent !important;
}

.av-lang-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.2;
  transition:
    background-color 120ms ease,
    color 120ms ease;
}

.av-lang-item.mud-list-item:hover .av-lang-row:not(.av-lang-row--active),
.av-lang-item.mud-menu-item:hover .av-lang-row:not(.av-lang-row--active) {
  background-color: var(--color-gray-100);
}

html.dark
  .av-lang-item.mud-list-item:hover
  .av-lang-row:not(.av-lang-row--active),
html.dark
  .av-lang-item.mud-menu-item:hover
  .av-lang-row:not(.av-lang-row--active) {
  background-color: var(--color-dark-600);
}

.av-lang-row--active {
  background-color: var(--color-primary-600);
}

html.dark .av-lang-row--active {
  background-color: var(--color-primary-500);
}

.av-lang-flag {
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  object-fit: cover;
  flex-shrink: 0;
  opacity: 1 !important;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.06);
}

html.dark .av-lang-flag {
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1);
}

.av-lang-label {
  color: var(--color-gray-800);
}

html.dark .av-lang-label {
  color: var(--color-dark-100);
}

.av-lang-row--active .av-lang-label {
  color: var(--color-white);
}

.av-conn__group.mud-paper {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow:
    rgba(145, 158, 171, 0.2) 0 0 2px 0,
    rgba(145, 158, 171, 0.12) 0 12px 24px -4px;
}

.av-conn__group.mud-paper:last-child {
  margin-bottom: 0;
}

html.dark .av-conn__group.mud-paper {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
  box-shadow: none;
}

.av-conn__group-header {
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--color-gray-100);
}

html.dark .av-conn__group-header {
  border-bottom-color: var(--color-dark-600);
}

.av-conn__group-icon.mud-icon-root {
  color: var(--color-primary-600);
  width: 18px;
  height: 18px;
}

html.dark .av-conn__group-icon.mud-icon-root {
  color: var(--color-primary-300);
}

.av-conn__group-title.mud-typography {
  color: var(--color-gray-800);
}

html.dark .av-conn__group-title.mud-typography {
  color: var(--color-dark-100);
}

.av-conn__group-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 8px;
  border-radius: 9999px;
  background: rgb(from var(--color-primary-500) r g b / 0.12);
  color: var(--color-primary-700);
  flex-shrink: 0;
}

html.dark .av-conn__group-count {
  background: rgb(from var(--color-primary-400) r g b / 0.2);
  color: var(--color-primary-300);
}

/* ── Collapsible group header + chevron ──────────────────────────────────── */
.av-conn__group-header--toggle {
  cursor: pointer;
  user-select: none;
}

.av-conn__group-chevron.mud-icon-root {
  width: 18px;
  height: 18px;
  color: var(--color-gray-500);
  transition: transform 150ms ease;
  flex-shrink: 0;
}

html.dark .av-conn__group-chevron.mud-icon-root {
  color: var(--color-dark-300);
}

.av-conn__group-chevron--collapsed.mud-icon-root {
  transform: rotate(-90deg);
}

/* ── Clickable case card + topline (case pill + status badge) ────────────── */
.av-conn-case--clickable.mud-paper {
  cursor: pointer;
}

.av-conn-case__topline {
  width: 100%;
  margin-bottom: 12px;
}

.av-conn-case__topline .av-conn-case__head {
  margin-bottom: 0;
}

.av-conn-case__status.av-badge {
  flex-shrink: 0;
}

/* ── Case created-on meta row ────────────────────────────────────────────── */
.av-conn-case__meta {
  margin-top: 10px;
}

.av-conn-case__meta-icon.mud-icon-root {
  width: 14px;
  height: 14px;
  color: var(--color-gray-500);
}

html.dark .av-conn-case__meta-icon.mud-icon-root {
  color: var(--color-dark-300);
}

.av-conn-case__meta-label.mud-typography {
  color: var(--color-gray-500);
}

html.dark .av-conn-case__meta-label.mud-typography {
  color: var(--color-dark-300);
}

.av-conn-case__meta-value.mud-typography {
  color: var(--color-gray-700);
}

html.dark .av-conn-case__meta-value.mud-typography {
  color: var(--color-dark-100);
}

.av-conn-avatar.mud-avatar {
  width: 36px;
  height: 36px;
  background: rgb(from var(--color-primary-500) r g b / 0.12);
  color: var(--color-primary-700);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  flex-shrink: 0;
}

html.dark .av-conn-avatar.mud-avatar {
  background: rgb(from var(--color-primary-400) r g b / 0.2);
  color: var(--color-primary-300);
}

.av-conn__cards {
  width: 100%;
}

.av-conn-case.mud-paper {
  border: 1px solid var(--color-gray-200) !important;
  border-radius: 10px !important;
  padding: 12px;
  background: var(--color-gray-50);
  transition:
    border-color 120ms ease,
    background-color 120ms ease;
}

.av-conn-case.mud-paper:hover {
  border-color: var(--color-gray-300) !important;
  background: var(--color-white);
}

html.dark .av-conn-case.mud-paper {
  background: var(--color-dark-600);
  border-color: var(--color-dark-500) !important;
}

html.dark .av-conn-case.mud-paper:hover {
  border-color: var(--color-dark-400) !important;
  background: var(--color-dark-700);
}

.av-conn-case__head {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgb(from var(--color-primary-500) r g b / 0.1);
  color: var(--color-primary-700);
  margin-bottom: 12px;
  width: auto;
  align-self: flex-start;
}

html.dark .av-conn-case__head {
  background: rgb(from var(--color-primary-400) r g b / 0.18);
  color: var(--color-primary-300);
}

.av-conn-case__head-icon.mud-icon-root {
  color: inherit;
  width: 14px;
  height: 14px;
}

.av-conn-case__head-label.mud-typography {
  color: inherit;
  opacity: 0.85;
}

.av-conn-case__head-number.mud-typography {
  color: inherit;
}

.av-conn-case__officer-role.mud-typography {
  color: var(--color-gray-500);
}

html.dark .av-conn-case__officer-role.mud-typography {
  color: var(--color-dark-300);
}

.av-conn-case__officer-name.mud-typography {
  color: var(--color-gray-800);
  margin-top: 2px;
}

html.dark .av-conn-case__officer-name.mud-typography {
  color: var(--color-dark-100);
}

.av-conn-case__assistants {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--color-gray-200);
}

html.dark .av-conn-case__assistants {
  border-top-color: var(--color-dark-500);
}

.av-conn-case__assistants-label.mud-typography {
  display: block;
  color: var(--color-gray-500);
  margin-bottom: 8px;
}

html.dark .av-conn-case__assistants-label.mud-typography {
  color: var(--color-dark-300);
}

.av-conn-chip {
  height: 28px;
  padding: 0 12px 0 4px;
  border-radius: 9999px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  transition: border-color 120ms ease;
}

.av-conn-chip:hover {
  border-color: var(--color-primary-300);
}

html.dark .av-conn-chip {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

html.dark .av-conn-chip:hover {
  border-color: var(--color-primary-400);
}

.av-conn-chip__avatar.mud-avatar {
  width: 22px;
  height: 22px;
  background: rgb(from var(--color-primary-500) r g b / 0.12);
  color: var(--color-primary-700);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
}

html.dark .av-conn-chip__avatar.mud-avatar {
  background: rgb(from var(--color-primary-400) r g b / 0.2);
  color: var(--color-primary-300);
}

.av-conn-chip__name.mud-typography {
  color: var(--color-gray-700);
}

html.dark .av-conn-chip__name.mud-typography {
  color: var(--color-dark-100);
}

.av-conn-user {
  padding: 8px;
  border-radius: 8px;
  transition: background-color 120ms ease;
}

.av-conn-user:hover {
  background-color: var(--color-gray-100);
}

html.dark .av-conn-user:hover {
  background-color: var(--color-dark-600);
}

.av-conn-user__name.mud-typography {
  color: var(--color-gray-800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.dark .av-conn-user__name.mud-typography {
  color: var(--color-dark-100);
}

.av-conn-user__role.mud-typography {
  color: var(--color-gray-500);
  margin-top: 1px;
}

html.dark .av-conn-user__role.mud-typography {
  color: var(--color-dark-300);
}

.av-conn-user__tenant {
  padding: 4px 10px;
  border-radius: 9999px;
  background: var(--color-gray-100);
  color: var(--color-gray-700);
  white-space: nowrap;
  flex-shrink: 0;
}

html.dark .av-conn-user__tenant {
  background: var(--color-dark-600);
  color: var(--color-dark-200);
}

.av-conn-user__tenant .mud-icon-root {
  width: 12px;
  height: 12px;
  opacity: 0.75;
  color: inherit;
}

.av-conn-user__tenant .mud-typography {
  color: inherit;
}

/* ── av-conn-tenant ─────────────────────────────────────────────────────────
   One card per tenant where the contact's user is registered. Replaces the old
   "Connected Users" rows. Scope modifier (--host / --current / --external)
   tints the left edge so the user can scan at a glance which scope they are
   looking at. The scope chip inside the card carries the textual label.
*/

.av-conn__tenants {
  width: 100%;
}

.av-conn-tenant.mud-paper {
  padding: 12px 16px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  transition:
    background 150ms ease,
    border-color 150ms ease;
  position: relative;
}

html.dark .av-conn-tenant.mud-paper {
  border-color: var(--color-dark-500);
  background: var(--color-dark-700);
}

/* Left-edge accent — scope at a glance. */
.av-conn-tenant.mud-paper::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 0 9999px 9999px 0;
  background: var(--color-gray-300);
}

html.dark .av-conn-tenant.mud-paper::before {
  background: var(--color-dark-400);
}

.av-conn-tenant--host.mud-paper::before {
  background: var(--color-info);
}

.av-conn-tenant--current.mud-paper::before {
  background: var(--color-success);
}

.av-conn-tenant--host.mud-paper:hover,
.av-conn-tenant--current.mud-paper:hover,
.av-conn-tenant--external.mud-paper:hover {
  background: var(--color-gray-50);
}

html.dark .av-conn-tenant--host.mud-paper:hover,
html.dark .av-conn-tenant--current.mud-paper:hover,
html.dark .av-conn-tenant--external.mud-paper:hover {
  background: var(--color-dark-600);
}

.av-conn-tenant__head {
  width: 100%;
  padding-left: 4px;
  margin-bottom: 10px;
}

.av-conn-tenant__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-100);
  color: var(--color-gray-600);
  flex-shrink: 0;
}

html.dark .av-conn-tenant__icon {
  background: var(--color-dark-600);
  color: var(--color-dark-200);
}

.av-conn-tenant__icon--host {
  background: rgb(from var(--color-info) r g b / 0.12);
  color: var(--color-info);
}

.av-conn-tenant__icon--current {
  background: rgb(from var(--color-success) r g b / 0.12);
  color: var(--color-success);
}

.av-conn-tenant__icon--external {
  background: var(--color-gray-100);
  color: var(--color-gray-600);
}

html.dark .av-conn-tenant__icon--external {
  background: var(--color-dark-600);
  color: var(--color-dark-200);
}

.av-conn-tenant__head-text {
  flex: 1 1 auto;
  min-width: 0;
}

.av-conn-tenant__name.mud-typography {
  font-weight: 600;
  color: var(--color-gray-900);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html.dark .av-conn-tenant__name.mud-typography {
  color: var(--color-dark-50);
}

.av-conn-tenant__scope {
  align-self: flex-start;
  margin-top: 2px;
}

.av-conn-tenant__roles-label .mud-typography {
  color: var(--color-gray-500);
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  display: block;
}

html.dark .av-conn-tenant__roles-label .mud-typography {
  color: var(--color-dark-300);
}

.av-conn-tenant__roles {
  width: 100%;
  padding-left: 4px;
}

.av-status__group.mud-paper {
  padding: 16px 20px;
  margin-bottom: 16px;
}

.av-status__grid {
  width: 100%;
  align-items: stretch;
}

.av-status__cell {
  flex: 1 1 0;
  min-width: 0;
  padding: 4px 12px;
  justify-content: center;
}

.av-status__cell:first-child {
  padding-left: 0;
}

.av-status__cell:last-child {
  padding-right: 0;
}

.av-status__divider.mud-divider {
  margin: 0 4px;
  border-color: var(--color-gray-200);
}

html.dark .av-status__divider.mud-divider {
  border-color: var(--color-dark-500);
}

.av-status__cell-label.mud-typography {
  color: var(--color-gray-500);
}

html.dark .av-status__cell-label.mud-typography {
  color: var(--color-dark-300);
}

.av-status__cell-value.mud-typography {
  color: var(--color-gray-800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.dark .av-status__cell-value.mud-typography {
  color: var(--color-dark-100);
}

.av-status__actions-block {
  margin-top: 16px;
}

.av-status__actions-block--secondary {
  margin-top: 12px;
  padding-top: 16px;
  border-top: 1px dashed var(--color-gray-200);
}

html.dark .av-status__actions-block--secondary {
  border-top-color: var(--color-dark-500);
}

.av-status__actions-title.mud-typography {
  margin: 0 0 10px;
  color: var(--color-gray-500);
}

html.dark .av-status__actions-title.mud-typography {
  color: var(--color-dark-300);
}

.av-status__actions-row {
  align-items: center;
  row-gap: 8px;
}

/* Last Activity block — sits below the status grid, before the actions block.
   The card uses MudPaper Outlined as the base; this block tweaks the avatar tint,
   text colors, and meta-row spacing so it reads as one cohesive "what happened
   most recently" panel without inventing a whole new component skin. */
.av-status__activity-card.mud-paper {
  border-color: var(--color-gray-200);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

html.dark .av-status__activity-card.mud-paper {
  border-color: var(--color-dark-500);
  background: var(--color-dark-700);
}

.av-status__activity-avatar.mud-avatar {
  background: rgb(from var(--color-primary-500) r g b / 0.1);
  color: var(--color-primary-600);
}

html.dark .av-status__activity-avatar.mud-avatar {
  background: rgb(from var(--color-primary-400) r g b / 0.18);
  color: var(--color-primary-300);
}

.av-status__activity-text {
  flex: 1 1 auto;
  min-width: 0;
}

.av-status__activity-headline.mud-typography {
  color: var(--color-gray-800);
  font-weight: 500;
}

html.dark .av-status__activity-headline.mud-typography {
  color: var(--color-dark-50);
}

.av-status__activity-meta {
  row-gap: 4px;
}

.av-status__activity-actor.mud-typography,
.av-status__activity-time.mud-typography {
  color: var(--color-gray-500);
}

html.dark .av-status__activity-actor.mud-typography,
html.dark .av-status__activity-time.mud-typography {
  color: var(--color-dark-300);
}

.av-status__activity-reference {
  color: var(--color-gray-600);
}

.av-status__activity-reference .mud-typography {
  color: inherit;
  font-weight: 500;
}

.av-status__activity-reference .mud-icon-root {
  color: var(--color-primary-600);
}

html.dark .av-status__activity-reference {
  color: var(--color-dark-200);
}

html.dark .av-status__activity-reference .mud-icon-root {
  color: var(--color-primary-400);
}

@media (max-width: 640px) {
  .av-status__grid {
    flex-direction: column !important;
    gap: 12px;
  }

  .av-status__divider.mud-divider {
    display: none;
  }

  .av-status__cell {
    padding: 0;
  }
}

/* ============================================================
   AVALME Status — Invitations table
   ============================================================ */
.av-inv {
  margin-top: 20px;
  border: 1px solid var(--color-gray-200);
  border-radius: 10px;
  overflow: hidden;
}

.av-inv__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-gray-200);
}

.av-inv__scroll {
  overflow-x: auto;
}

.av-inv__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.av-inv__th {
  text-align: left;
  padding: 9px 14px;
  color: var(--color-gray-500);
  border-bottom: 1px solid var(--color-gray-200);
  background: var(--color-gray-100);
}

.av-inv__td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--color-gray-200);
  vertical-align: middle;
}

.av-inv__row:hover > .av-inv__td {
  background: var(--color-gray-100);
}

.av-inv__c-type { width: 30%; }
.av-inv__c-stat { width: 120px; text-align: center; }
.av-inv__c-dest { width: 200px; }
.av-inv__c-sent { width: 140px; }
.av-inv__c-exp  { width: 140px; }
.av-inv__c-act  { width: 160px; text-align: right; }

/* centered status chip */
.av-inv__stat.av-chip {
  width: fit-content;
  margin-inline: auto;
}

.av-inv__type { min-width: 0; }

.av-inv__glyph {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 8px;
  background: var(--color-gray-100);
  display: grid;
  place-items: center;
}

.av-inv__glyph .mud-icon-root {
  color: var(--color-gray-600);
}

.av-inv__sub {
  color: var(--color-gray-600);
}

.av-inv__dest {
  color: var(--color-gray-700);
  word-break: break-word;
}

.av-inv__chan {
  color: var(--color-gray-400);
}

.av-inv__mono {
  font-variant-numeric: tabular-nums;
  color: var(--color-gray-600);
}

.av-inv__exp--warn {
  color: var(--color-warning);
}

.av-inv__exp--danger {
  color: var(--color-error);
}

.av-inv__acts {
  flex-wrap: wrap;
}

/* disclosure chevron */
.av-inv__disclose.mud-button-root {
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 5px;
  color: var(--color-gray-400);
  flex: none;
}

.av-inv__disclose.mud-button-root:hover {
  background: var(--color-gray-100);
  color: var(--color-gray-700);
}

.av-inv__disclose .mud-icon-root {
  transition: transform 0.15s ease;
}

.av-inv__disclose--open .mud-icon-root {
  transform: rotate(90deg);
}

/* expandable history */
.av-inv__hist-cell {
  padding: 0 14px;
  background: var(--color-gray-100);
  border-bottom: 1px solid var(--color-gray-200);
}

.av-inv__hist-inner {
  padding: 14px 0 14px 66px;
}

.av-inv__timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}

.av-inv__tl-item {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 0 0 14px 22px;
}

.av-inv__tl-item:last-child {
  padding-bottom: 0;
}

/* connector line running through the dots */
.av-inv__tl-item::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 0;
  width: 2px;
  background: var(--color-gray-200);
}

.av-inv__tl-item:last-child::before {
  display: none;
}

.av-inv__tl-dot {
  position: absolute;
  left: 0;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-gray-300);
  box-shadow: 0 0 0 3px var(--color-gray-100);
}

.av-inv__tl-item:first-child .av-inv__tl-dot {
  background: var(--color-primary-500);
}

.av-inv__tl-what {
  color: var(--color-gray-800);
}

.av-inv__tl-when {
  color: var(--color-gray-400);
  font-variant-numeric: tabular-nums;
}

/* roll-up (summary strip) */
.av-inv__rollup-text {
  color: var(--color-gray-700);
}

.av-inv__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}

.av-inv__dot--w { background: var(--color-warning); }
.av-inv__dot--o { background: var(--color-success); }
.av-inv__dot--n { background: var(--color-gray-300); }

/* dark mode */
html.dark .av-inv {
  border-color: var(--color-dark-600);
}

html.dark .av-inv__head,
html.dark .av-inv__td {
  border-color: var(--color-dark-600);
}

html.dark .av-inv__th {
  color: var(--color-dark-300);
  background: var(--color-dark-700);
  border-color: var(--color-dark-600);
}

html.dark .av-inv__row:hover > .av-inv__td {
  background: var(--color-dark-700);
}

html.dark .av-inv__hist-cell {
  background: var(--color-dark-700);
  border-color: var(--color-dark-600);
}

html.dark .av-inv__glyph {
  background: var(--color-dark-600);
}

html.dark .av-inv__glyph .mud-icon-root,
html.dark .av-inv__sub,
html.dark .av-inv__mono,
html.dark .av-inv__rollup-text {
  color: var(--color-dark-200);
}

html.dark .av-inv__dest {
  color: var(--color-dark-100);
}

html.dark .av-inv__chan,
html.dark .av-inv__tl-when {
  color: var(--color-dark-300);
}

html.dark .av-inv__tl-what {
  color: var(--color-dark-50);
}

html.dark .av-inv__tl-item::before {
  background: var(--color-dark-500);
}

html.dark .av-inv__tl-dot {
  background: var(--color-dark-400);
  box-shadow: 0 0 0 3px var(--color-dark-700);
}

html.dark .av-inv__tl-item:first-child .av-inv__tl-dot {
  background: var(--color-primary-400);
}

html.dark .av-inv__disclose.mud-button-root:hover {
  background: var(--color-dark-600);
  color: var(--color-dark-100);
}

.av-btn.mud-button-root {
  height: 36px;
  padding: 0 20px;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  box-shadow: none !important;
  gap: 6px;
  white-space: nowrap;
}

.av-btn .mud-button-label {
  text-transform: none !important;
}

.av-btn.mud-button-root:hover,
.av-btn.mud-button-root:focus,
.av-btn.mud-button-root:focus-visible,
.av-btn.mud-button-root:active {
  box-shadow: none !important;
}

.av-btn--filled.mud-button-root {
  background: var(--color-primary-600) !important;
  color: var(--color-white) !important;
  border: 1px solid var(--color-primary-600) !important;
}

.av-btn--filled.mud-button-root:hover {
  background: var(--color-primary-700) !important;
  border-color: var(--color-primary-700) !important;
}

.av-btn--outline.mud-button-root {
  background: transparent !important;
  border: 1px solid var(--color-gray-300) !important;
  color: var(--color-gray-700) !important;
}

.av-btn--outline.mud-button-root:hover {
  background: var(--color-gray-100) !important;
  border-color: var(--color-gray-400) !important;
}

html.dark .av-btn--outline.mud-button-root {
  border-color: var(--color-dark-400) !important;
  color: var(--color-dark-100) !important;
}

html.dark .av-btn--outline.mud-button-root:hover {
  background: var(--color-dark-600) !important;
}

.av-btn--ghost.mud-button-root {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--color-gray-700) !important;
}

.av-btn--ghost.mud-button-root:hover {
  background: var(--color-gray-100) !important;
}

html.dark .av-btn--ghost.mud-button-root {
  color: var(--color-dark-100) !important;
}

html.dark .av-btn--ghost.mud-button-root:hover {
  background: var(--color-dark-600) !important;
}

.av-btn--danger.av-btn--filled.mud-button-root {
  background: var(--color-error) !important;
  border-color: var(--color-error) !important;
}

.av-btn--danger.av-btn--filled.mud-button-root:hover {
  background: var(--color-error-darker) !important;
  border-color: var(--color-error-darker) !important;
}

.av-btn--danger.av-btn--outline.mud-button-root,
.av-btn--danger.av-btn--ghost.mud-button-root {
  color: var(--color-error) !important;
}

.av-btn--danger.av-btn--outline.mud-button-root {
  border-color: rgb(from var(--color-error) r g b / 0.5) !important;
}

.av-btn--pill.mud-button-root {
  min-width: 7rem;
  padding: 0 18px;
  border-radius: 9999px !important;
}

/* Sizes — ladder Guía Visual completa (xs / sm / default / lg / xl). El default
 vive en .av-btn.mud-button-root (36px / 13px). Los modifiers --xs y --xl
 extienden el ladder al rango extremo del demo Guía Visual (ButtonSize). */

.av-btn--xs.mud-button-root {
  height: 24px;
  padding: 0 10px;
  font-size: 11px;
}

.av-btn--sm.mud-button-root {
  height: 30px;
  padding: 0 12px;
  font-size: 12px;
}

.av-btn--lg.mud-button-root {
  height: 42px;
  padding: 0 22px;
  font-size: 14px;
}

.av-btn--xl.mud-button-root {
  height: 52px;
  padding: 0 28px;
  font-size: 16px;
}

.av-btn.mud-button-root.mud-button-disabled,
.av-btn.mud-button-root[disabled] {
  opacity: 0.7;
  pointer-events: none;
}

.av-btn__text.mud-typography {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: 1;
  color: inherit;
  text-transform: none;
}

.av-btn__spinner.mud-progress-circular {
  width: 16px !important;
  height: 16px !important;
  margin-right: 4px;
}

/* — av-btn extended modifiers (Guía Visual variants soft / bordered / glow /
 gradient / outlined-gradient / group / segment). Todos opt-in, scope
 restringido a .av-btn-X o composiciones explicitas con .mud-button-root.
 Pixel-perfect contra demo Guía Visual components/button/. */

/* — Soft color variant (Guía Visual variant="soft") — — — — — — — — — — — — */

.av-btn-soft.mud-button-root {
  background-color: rgb(from var(--color-gray-700) r g b / 0.08) !important;
  color: var(--color-gray-700) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.av-btn-soft.mud-button-root:hover {
  background-color: rgb(from var(--color-gray-700) r g b / 0.15) !important;
}

.av-btn-soft.av-btn-soft-primary.mud-button-root {
  background-color: rgb(from var(--color-primary-700) r g b / 0.1) !important;
  color: var(--color-primary-700) !important;
}

.av-btn-soft.av-btn-soft-primary.mud-button-root:hover {
  background-color: rgb(from var(--color-primary-700) r g b / 0.18) !important;
}

.av-btn-soft.av-btn-soft-secondary.mud-button-root {
  background-color: rgb(from var(--color-secondary) r g b / 0.12) !important;
  color: var(--color-secondary) !important;
}

.av-btn-soft.av-btn-soft-secondary.mud-button-root:hover {
  background-color: rgb(from var(--color-secondary) r g b / 0.2) !important;
}

.av-btn-soft.av-btn-soft-info.mud-button-root {
  background-color: rgb(from var(--color-info) r g b / 0.12) !important;
  color: var(--color-info) !important;
}

.av-btn-soft.av-btn-soft-info.mud-button-root:hover {
  background-color: rgb(from var(--color-info) r g b / 0.2) !important;
}

.av-btn-soft.av-btn-soft-success.mud-button-root {
  background-color: rgb(from var(--color-success) r g b / 0.12) !important;
  color: var(--color-success) !important;
}

.av-btn-soft.av-btn-soft-success.mud-button-root:hover {
  background-color: rgb(from var(--color-success) r g b / 0.2) !important;
}

.av-btn-soft.av-btn-soft-warning.mud-button-root {
  background-color: rgb(from var(--color-warning) r g b / 0.12) !important;
  color: var(--color-warning) !important;
}

.av-btn-soft.av-btn-soft-warning.mud-button-root:hover {
  background-color: rgb(from var(--color-warning) r g b / 0.2) !important;
}

.av-btn-soft.av-btn-soft-error.mud-button-root {
  background-color: rgb(from var(--color-error) r g b / 0.12) !important;
  color: var(--color-error) !important;
}

.av-btn-soft.av-btn-soft-error.mud-button-root:hover {
  background-color: rgb(from var(--color-error) r g b / 0.2) !important;
}

html.dark .av-btn-soft.mud-button-root {
  background-color: rgb(from var(--color-gray-300) r g b / 0.12) !important;
  color: var(--color-dark-100) !important;
}

html.dark .av-btn-soft.av-btn-soft-primary.mud-button-root {
  background-color: rgb(from var(--color-primary-400) r g b / 0.18) !important;
  color: var(--color-primary-300) !important;
}

html.dark .av-btn-soft.av-btn-soft-secondary.mud-button-root {
  background-color: rgb(from var(--color-secondary) r g b / 0.22) !important;
}

html.dark .av-btn-soft.av-btn-soft-info.mud-button-root {
  background-color: rgb(from var(--color-info) r g b / 0.22) !important;
}

html.dark .av-btn-soft.av-btn-soft-success.mud-button-root {
  background-color: rgb(from var(--color-success) r g b / 0.22) !important;
}

html.dark .av-btn-soft.av-btn-soft-warning.mud-button-root {
  background-color: rgb(from var(--color-warning) r g b / 0.22) !important;
}

html.dark .av-btn-soft.av-btn-soft-error.mud-button-root {
  background-color: rgb(from var(--color-error) r g b / 0.22) !important;
}

/* — Bordered modifier (additive on soft, Guía Visual SoftBordered) — — — — — */

.av-btn-soft.av-btn-bordered.mud-button-root {
  border: 1px solid rgb(from var(--color-gray-700) r g b / 0.3) !important;
}

.av-btn-soft.av-btn-bordered.av-btn-soft-primary.mud-button-root {
  border-color: rgb(from var(--color-primary-700) r g b / 0.4) !important;
}

.av-btn-soft.av-btn-bordered.av-btn-soft-secondary.mud-button-root {
  border-color: rgb(from var(--color-secondary) r g b / 0.4) !important;
}

.av-btn-soft.av-btn-bordered.av-btn-soft-info.mud-button-root {
  border-color: rgb(from var(--color-info) r g b / 0.4) !important;
}

.av-btn-soft.av-btn-bordered.av-btn-soft-success.mud-button-root {
  border-color: rgb(from var(--color-success) r g b / 0.4) !important;
}

.av-btn-soft.av-btn-bordered.av-btn-soft-warning.mud-button-root {
  border-color: rgb(from var(--color-warning) r g b / 0.4) !important;
}

.av-btn-soft.av-btn-bordered.av-btn-soft-error.mud-button-root {
  border-color: rgb(from var(--color-error) r g b / 0.4) !important;
}

html.dark .av-btn-soft.av-btn-bordered.mud-button-root {
  border-color: rgb(from var(--color-gray-300) r g b / 0.3) !important;
}

/* — Glow modifier (halo box-shadow per color — Guía Visual isGlow) — — — — — */

.av-btn-glow.mud-button-root {
  box-shadow: 0 8px 24px rgb(from var(--color-gray-500) r g b / 0.4) !important;
}

.av-btn-glow-primary.mud-button-root {
  box-shadow: 0 8px 24px rgb(from var(--color-primary-500) r g b / 0.5) !important;
}

.av-btn-glow-secondary.mud-button-root {
  box-shadow: 0 8px 24px rgb(from var(--color-secondary) r g b / 0.5) !important;
}

.av-btn-glow-info.mud-button-root {
  box-shadow: 0 8px 24px rgb(from var(--color-info) r g b / 0.5) !important;
}

.av-btn-glow-success.mud-button-root {
  box-shadow: 0 8px 24px rgb(from var(--color-success) r g b / 0.5) !important;
}

.av-btn-glow-warning.mud-button-root {
  box-shadow: 0 8px 24px rgb(from var(--color-warning) r g b / 0.5) !important;
}

.av-btn-glow-error.mud-button-root {
  box-shadow: 0 8px 24px rgb(from var(--color-error) r g b / 0.5) !important;
}

/* — Gradient bg variants (Guía Visual Gradient — 6 paletas) — — — — — — — — */

/* Doble selector (plain + compound .mud-button-root) para que las gradient
 classes funcionen tanto en MudButton como en <button> nativo (caso del
 wrapper de Outlined Gradient — av-btn-outlined-gradient-wrapper). */

.av-btn-gradient-fuchsia-pink,
.av-btn-gradient-fuchsia-pink.mud-button-root {
  background: linear-gradient(to right, #c026d3, #db2777) !important;
  color: var(--color-white) !important;
}

.av-btn-gradient-purple-indigo,
.av-btn-gradient-purple-indigo.mud-button-root {
  background: linear-gradient(to bottom right, #a855f7, #4f46e5) !important;
  color: var(--color-white) !important;
}

.av-btn-gradient-sky-blue,
.av-btn-gradient-sky-blue.mud-button-root {
  background: linear-gradient(to right, #38bdf8, #2563eb) !important;
  color: var(--color-white) !important;
}

.av-btn-gradient-amber-orange,
.av-btn-gradient-amber-orange.mud-button-root {
  background: linear-gradient(to right, #fbbf24, #ea580c) !important;
  color: var(--color-white) !important;
}

.av-btn-gradient-pink-indigo,
.av-btn-gradient-pink-indigo.mud-button-root {
  background: linear-gradient(to left, #f9a8d4, #818cf8) !important;
  color: var(--color-white) !important;
}

.av-btn-gradient-green-blue,
.av-btn-gradient-green-blue.mud-button-root {
  background: linear-gradient(to right, #4ade80, #2563eb) !important;
  color: var(--color-white) !important;
}

.av-btn-gradient-fuchsia-pink.mud-button-root:hover,
.av-btn-gradient-purple-indigo.mud-button-root:hover,
.av-btn-gradient-sky-blue.mud-button-root:hover,
.av-btn-gradient-amber-orange.mud-button-root:hover,
.av-btn-gradient-pink-indigo.mud-button-root:hover,
.av-btn-gradient-green-blue.mud-button-root:hover {
  opacity: 0.85;
}

/* — Outlined Gradient wrapper pattern — — — — — — — — — — — — — — — — */

.av-btn-outlined-gradient-wrapper {
  display: inline-flex;
  height: 40px;
  padding: 2px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 100ms ease-out;
  font: inherit;
}

.av-btn-outlined-gradient-wrapper:active {
  transform: translateY(1px);
}

.av-btn-outlined-gradient-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 20px;
  border-radius: 6px;
  background-color: var(--color-white);
  color: var(--color-gray-800);
  transition:
    background-color 150ms ease,
    color 150ms ease;
  font-size: 13px;
  font-weight: 500;
}

.av-btn-outlined-gradient-wrapper:hover .av-btn-outlined-gradient-inner,
.av-btn-outlined-gradient-wrapper:focus-within .av-btn-outlined-gradient-inner {
  background-color: transparent;
  color: var(--color-white);
}

html.dark .av-btn-outlined-gradient-inner {
  background-color: var(--color-dark-700);
  color: var(--color-dark-100);
}

/* — Button Group (Guía Visual ButtonGroup — flex con bordes mergeados) — — — */

.av-btn-group {
  display: inline-flex;
  flex-wrap: wrap;
}

.av-btn-group > .mud-button-root:not(:first-child) {
  margin-inline-start: -1px !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.av-btn-group > .mud-button-root:not(:last-child) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* — Segment Buttons (Guía Visual Segment — toggle group con checked) — — — — */

.av-btn-segment {
  display: inline-flex;
  flex-wrap: wrap;
}

/* Doble target — MudButton (.mud-button-root) y MudIconButton
 (.mud-icon-button-root). Specificity 0,3,0 (con :not(.mud-fab)) para
 batirle a mud-bridge.css §62 que pinta var(--radius-lg) sobre todo
 MudButton. */
.av-btn-segment > .mud-button-root:not(.mud-fab),
.av-btn-segment > .mud-icon-button-root {
  border-radius: 0 !important;
  border: 1px solid var(--color-gray-300) !important;
  background-color: transparent !important;
  color: var(--color-gray-800) !important;
  margin-inline-start: -1px !important;
}

.av-btn-segment > .mud-button-root:not(.mud-fab):first-child,
.av-btn-segment > .mud-icon-button-root:first-child {
  margin-inline-start: 0 !important;
  border-top-left-radius: 8px !important;
  border-bottom-left-radius: 8px !important;
}

.av-btn-segment > .mud-button-root:not(.mud-fab):last-child,
.av-btn-segment > .mud-icon-button-root:last-child {
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
}

.av-btn-segment > .mud-button-root.av-segment-active,
.av-btn-segment > .mud-icon-button-root.av-segment-active {
  background-color: var(--color-gray-200) !important;
}

html.dark .av-btn-segment > .mud-button-root:not(.mud-fab),
html.dark .av-btn-segment > .mud-icon-button-root {
  border-color: var(--color-dark-500) !important;
  color: var(--color-dark-100) !important;
}

html.dark .av-btn-segment > .mud-button-root.av-segment-active,
html.dark .av-btn-segment > .mud-icon-button-root.av-segment-active {
  background-color: var(--color-dark-500) !important;
}

/* — Color chain `av-color-X` + variantes consumidoras (filled/outlined/flat)
 Replica el patrón `setThisClass` + `bg-this`/`text-this-darker` del demo
 Guía Visual (components/ui/Button/index.jsx §variants). El color modifier setea
 los tokens --av-this / --av-this-darker / --av-this-lighter / --av-this-light
 sobre el botón; la variante los consume.

 Diferencia con `Color="Color.X"` de MudBlazor: aquellos pintan con la
 paleta MudTheme (que no matchea Guía Visual para Secondary/Info/etc.). Estos
 pintan con los tokens semánticos del proyecto (--color-secondary = #e000ad,
 --color-info = sky-600, etc., declarados en design-tokens.css §A).

 Opt-in al 100 %: producción sigue intacta con `Color="Color.Primary"`
 etc. Estas clases son para showcases pixel-perfect y nuevos usos donde
 el equipo quiera la paleta saturada Guía Visual. */

.av-color-primary {
  --av-this: var(--color-primary-600);
  --av-this-darker: var(--color-primary-700);
  --av-this-lighter: var(--color-primary-400);
  --av-this-light: var(--color-primary-500);
}

.av-color-secondary {
  --av-this: var(--color-secondary);
  --av-this-darker: var(--color-secondary-darker);
  --av-this-lighter: var(--color-secondary-lighter);
  --av-this-light: var(--color-secondary-light);
}

.av-color-info {
  --av-this: var(--color-info);
  --av-this-darker: var(--color-info-darker);
  --av-this-lighter: var(--color-info-lighter);
  --av-this-light: var(--color-info-light);
}

.av-color-success {
  --av-this: var(--color-success);
  --av-this-darker: var(--color-success-darker);
  --av-this-lighter: var(--color-success-lighter);
  --av-this-light: var(--color-success-light);
}

.av-color-warning {
  --av-this: var(--color-warning);
  --av-this-darker: var(--color-warning-darker);
  --av-this-lighter: var(--color-warning-lighter);
  --av-this-light: var(--color-warning-light);
}

.av-color-error {
  --av-this: var(--color-error);
  --av-this-darker: var(--color-error-darker);
  --av-this-lighter: var(--color-error-lighter);
  --av-this-light: var(--color-error-light);
}

/* — av-btn-filled — bg-this + text-white + hover bg-this-darker.
 Aplica a MudButton y MudIconButton. Cuando no hay av-color-X, cae al
 neutralVariants.filled de Guía Visual (gray-150 bg + gray-900 text). */

.av-btn-filled.mud-button-root,
.av-btn-filled.mud-icon-button-root {
  background-color: var(--av-this, var(--color-gray-150)) !important;
  color: var(--color-white) !important;
  border: 1px solid var(--av-this, var(--color-gray-150)) !important;
}

.av-btn-filled.mud-button-root:hover,
.av-btn-filled.mud-icon-button-root:hover {
  background-color: var(--av-this-darker, var(--color-gray-200)) !important;
  border-color: var(--av-this-darker, var(--color-gray-200)) !important;
}

/* Neutral fallback — sin av-color-X. text gray-900 (no white). */
.av-btn-filled:not([class*="av-color-"]).mud-button-root,
.av-btn-filled:not([class*="av-color-"]).mud-icon-button-root {
  color: var(--color-gray-900) !important;
  border-color: transparent !important;
}

html.dark .av-btn-filled:not([class*="av-color-"]).mud-button-root,
html.dark .av-btn-filled:not([class*="av-color-"]).mud-icon-button-root {
  background-color: var(--color-dark-500) !important;
  color: var(--color-dark-50) !important;
}

html.dark .av-btn-filled:not([class*="av-color-"]).mud-button-root:hover,
html.dark .av-btn-filled:not([class*="av-color-"]).mud-icon-button-root:hover {
  background-color: var(--color-dark-400) !important;
}

/* — av-btn-outlined — border + text-this-darker (light mode) o
 text-this-lighter (dark mode). hover bg-this-darker/[.05]. */

.av-btn-outlined.mud-button-root,
.av-btn-outlined.mud-icon-button-root {
  background-color: transparent !important;
  color: var(--av-this-darker, var(--color-gray-900)) !important;
  border: 1px solid var(--av-this-darker, var(--color-gray-300)) !important;
}

.av-btn-outlined.mud-button-root:hover,
.av-btn-outlined.mud-icon-button-root:hover {
  background-color: rgb(
    from var(--av-this-darker, var(--color-gray-300)) r g b / 0.05
  ) !important;
}

html.dark .av-btn-outlined.mud-button-root,
html.dark .av-btn-outlined.mud-icon-button-root {
  color: var(--av-this-lighter, var(--color-dark-50)) !important;
  border-color: var(--av-this-lighter, var(--color-dark-450)) !important;
}

html.dark .av-btn-outlined.mud-button-root:hover,
html.dark .av-btn-outlined.mud-icon-button-root:hover {
  background-color: rgb(
    from var(--av-this-lighter, var(--color-dark-300)) r g b / 0.05
  ) !important;
}

/* — av-btn-flat — sin border. text-this-darker (light) / text-this-lighter (dark).
 hover bg-this-darker/[.08]. */

.av-btn-flat.mud-button-root,
.av-btn-flat.mud-icon-button-root {
  background-color: transparent !important;
  color: var(--av-this-darker, var(--color-gray-700)) !important;
  border: 1px solid transparent !important;
}

.av-btn-flat.mud-button-root:hover,
.av-btn-flat.mud-icon-button-root:hover {
  background-color: rgb(
    from var(--av-this-darker, var(--color-gray-300)) r g b / 0.08
  ) !important;
}

html.dark .av-btn-flat.mud-button-root,
html.dark .av-btn-flat.mud-icon-button-root {
  color: var(--av-this-lighter, var(--color-dark-200)) !important;
}

html.dark .av-btn-flat.mud-button-root:hover,
html.dark .av-btn-flat.mud-icon-button-root:hover {
  background-color: rgb(
    from var(--av-this-lighter, var(--color-dark-300)) r g b / 0.1
  ) !important;
}

/* — Disabled state — Guía Visual pattern (opt-in via .av-btn-disabled-colored)
 Mud default reemplaza el bg saturado por gray-tint cuando disabled.
 Guía Visual preserva el color saturado pero baja opacity al 50%. Opt-in
 por clase para evitar cambiar el comportamiento de todos los MudButton
 disabled de producción (Save buttons, etc.). */

.av-btn-disabled-colored.mud-button-root.mud-disabled,
.av-btn-disabled-colored.mud-button-root[disabled],
.av-btn-disabled-colored.mud-icon-button-root.mud-disabled,
.av-btn-disabled-colored.mud-icon-button-root[disabled] {
  opacity: 0.5 !important;
}

.av-card.mud-paper {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 12px;
  box-shadow:
    rgba(145, 158, 171, 0.2) 0 0 2px 0,
    rgba(145, 158, 171, 0.12) 0 12px 24px -4px;
}

html.dark .av-card.mud-paper {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
  box-shadow:
    rgb(0 0 0 / 0.2) 0 0 2px 0,
    rgb(0 0 0 / 0.4) 0 12px 24px -4px;
}

.av-card--flat.mud-paper {
  box-shadow: none;
}

.av-card--bordered.mud-paper {
  box-shadow: none;
  border-width: 1px;
}

.av-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 9999px;
  border: 1px solid transparent;
  width: fit-content;
  line-height: 1;
}

.av-chip__icon.mud-icon-root {
  width: 14px;
  height: 14px;
  font-size: 14px;
}

.av-chip__text.mud-typography {
  color: inherit;
}

.av-chip--success {
  background: rgb(from var(--color-success) r g b / 0.12);
  color: var(--color-success-darker);
  border-color: rgb(from var(--color-success) r g b / 0.25);
}

html.dark .av-chip--success {
  background: rgb(from var(--color-success) r g b / 0.18);
  color: var(--color-success-light);
  border-color: rgb(from var(--color-success) r g b / 0.35);
}

.av-chip--warning {
  background: rgb(from var(--color-warning) r g b / 0.12);
  color: var(--color-warning-darker);
  border-color: rgb(from var(--color-warning) r g b / 0.25);
}

html.dark .av-chip--warning {
  background: rgb(from var(--color-warning) r g b / 0.18);
  color: var(--color-warning-light);
  border-color: rgb(from var(--color-warning) r g b / 0.35);
}

.av-chip--danger {
  background: rgb(from var(--color-error) r g b / 0.12);
  color: var(--color-error-darker);
  border-color: rgb(from var(--color-error) r g b / 0.25);
}

html.dark .av-chip--danger {
  background: rgb(from var(--color-error) r g b / 0.18);
  color: var(--color-error-light);
  border-color: rgb(from var(--color-error) r g b / 0.35);
}

.av-chip--neutral {
  background: var(--color-gray-100);
  color: var(--color-gray-600);
  border-color: var(--color-gray-200);
}

html.dark .av-chip--neutral {
  background: rgb(from var(--color-dark-500) r g b / 0.4);
  color: var(--color-dark-200);
  border-color: var(--color-dark-500);
}

/* Tailux info recipe — `bg-this-darker/10 text-this-darker` light,
   flip to `lighter` ramp in dark mode. Matches `.av-address-form__notice`. */
.av-chip--info {
  background: rgb(from var(--color-info-darker) r g b / 0.1);
  color: var(--color-info-darker);
  border-color: rgb(from var(--color-info-darker) r g b / 0.22);
}

html.dark .av-chip--info {
  background: rgb(from var(--color-info-lighter) r g b / 0.1);
  color: var(--color-info-lighter);
  border-color: rgb(from var(--color-info-lighter) r g b / 0.3);
}

.av-chip--lg {
  padding: 6px 12px;
}

.av-avatar.mud-avatar {
  background: rgb(from var(--color-primary-600) r g b / 0.1);
  color: var(--color-primary-700);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  width: 36px;
  height: 36px;
  border: none;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

html.dark .av-avatar.mud-avatar {
  background: rgb(from var(--color-primary-400) r g b / 0.18);
  color: var(--color-primary-300);
}

/* Semantic color modifiers (Guía Visual InitialSoft — 5 colores extra del primary).
 El default .av-avatar ya cubre primary; estos agregan secondary/info/success/
 warning/error con el mismo patrón (10% bg + color para texto). */

.av-avatar.av-avatar-secondary.mud-avatar {
  background: rgb(from var(--color-secondary) r g b / 0.12);
  color: var(--color-secondary);
}

.av-avatar.av-avatar-info.mud-avatar {
  background: rgb(from var(--color-info) r g b / 0.12);
  color: var(--color-info);
}

.av-avatar.av-avatar-success.mud-avatar {
  background: rgb(from var(--color-success) r g b / 0.12);
  color: var(--color-success);
}

.av-avatar.av-avatar-warning.mud-avatar {
  background: rgb(from var(--color-warning) r g b / 0.12);
  color: var(--color-warning);
}

.av-avatar.av-avatar-error.mud-avatar {
  background: rgb(from var(--color-error) r g b / 0.12);
  color: var(--color-error);
}

html.dark .av-avatar.av-avatar-secondary.mud-avatar {
  background: rgb(from var(--color-secondary) r g b / 0.2);
  color: var(--color-secondary-light);
}

html.dark .av-avatar.av-avatar-info.mud-avatar {
  background: rgb(from var(--color-info) r g b / 0.2);
  color: var(--color-info-light);
}

html.dark .av-avatar.av-avatar-success.mud-avatar {
  background: rgb(from var(--color-success) r g b / 0.2);
  color: var(--color-success-light);
}

html.dark .av-avatar.av-avatar-warning.mud-avatar {
  background: rgb(from var(--color-warning) r g b / 0.2);
  color: var(--color-warning-light);
}

html.dark .av-avatar.av-avatar-error.mud-avatar {
  background: rgb(from var(--color-error) r g b / 0.2);
  color: var(--color-error-light);
}

/* Bordered modifier — agrega un border 1px del mismo color al ~20% opacity.
 Replica el patrón Guía Visual InitialSoftBordered (border border-this-darker/20). */

.av-avatar.av-avatar-bordered.mud-avatar {
  border: 1px solid rgb(from var(--color-primary-700) r g b / 0.2);
}

.av-avatar.av-avatar-bordered.av-avatar-secondary.mud-avatar {
  border-color: rgb(from var(--color-secondary) r g b / 0.3);
}

.av-avatar.av-avatar-bordered.av-avatar-info.mud-avatar {
  border-color: rgb(from var(--color-info) r g b / 0.3);
}

.av-avatar.av-avatar-bordered.av-avatar-success.mud-avatar {
  border-color: rgb(from var(--color-success) r g b / 0.3);
}

.av-avatar.av-avatar-bordered.av-avatar-warning.mud-avatar {
  border-color: rgb(from var(--color-warning) r g b / 0.3);
}

.av-avatar.av-avatar-bordered.av-avatar-error.mud-avatar {
  border-color: rgb(from var(--color-error) r g b / 0.3);
}

html.dark .av-avatar.av-avatar-bordered.mud-avatar {
  border-color: rgb(from var(--color-primary-300) r g b / 0.25);
}

.av-avatar--sm.mud-avatar {
  width: 28px;
  height: 28px;
  font-size: 11px;
}

.av-avatar--lg.mud-avatar {
  width: 44px;
  height: 44px;
  font-size: 15px;
}

/* Color variants for initials avatars in tables. Strong pattern (Guía Visual parity):
 color-500 saturated background + white text. High contrast — initials always
 legible regardless of name length or zoom level. */

.av-avatar.avatar-pink.mud-avatar {
  background: var(--color-rose-500);
  color: var(--color-white);
}

.av-avatar.avatar-blue.mud-avatar {
  background: var(--color-blue-500);
  color: var(--color-white);
}

.av-avatar.avatar-green.mud-avatar {
  background: var(--color-emerald-500);
  color: var(--color-white);
}

.av-avatar.avatar-purple.mud-avatar {
  background: var(--color-violet-500);
  color: var(--color-white);
}

.av-avatar.avatar-orange.mud-avatar {
  background: var(--color-amber-500);
  color: var(--color-white);
}

.av-avatar.avatar-teal.mud-avatar {
  background: var(--color-teal-500);
  color: var(--color-white);
}

html.dark .av-avatar.avatar-pink.mud-avatar {
  background: var(--color-rose-400);
  color: var(--color-white);
}

html.dark .av-avatar.avatar-blue.mud-avatar {
  background: var(--color-blue-400);
  color: var(--color-white);
}

html.dark .av-avatar.avatar-green.mud-avatar {
  background: var(--color-emerald-400);
  color: var(--color-white);
}

html.dark .av-avatar.avatar-purple.mud-avatar {
  background: var(--color-violet-400);
  color: var(--color-white);
}

html.dark .av-avatar.avatar-orange.mud-avatar {
  background: var(--color-amber-400);
  color: var(--color-white);
}

html.dark .av-avatar.avatar-teal.mud-avatar {
  background: var(--color-teal-400);
  color: var(--color-white);
}

/* View dropdown — table view options menu (Guía Visual TableSettings parity).
 Triggered by the "View" button in the toolbar; contains a Row Dense toggle,
 a column visibility checklist (overline label with horizontal divider line),
 and a full-width "Show All Columns" action button with a top border. */

.av-view-menu.mud-popover {
  min-width: 260px;
  max-width: 320px;
  border-radius: var(--radius-md);
  padding: 0;
  box-shadow: 0 4px 16px rgb(from var(--color-gray-900) r g b / 0.1);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  overflow: hidden;
}

html.dark .av-view-menu.mud-popover {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.3);
}

.av-view-menu__inner {
  display: flex;
  flex-direction: column;
}

.av-view-menu__title.mud-typography {
  color: var(--color-gray-900);
  padding: 12px 12px 4px;
  font-weight: 600;
}

html.dark .av-view-menu__title.mud-typography {
  color: var(--color-dark-50);
}

/* Switches stack with consistent left padding */
.av-view-menu__inner .mud-switch {
  padding: 3px 12px;
  margin: 0;
}

/* MudSwitch label renders as a single span carrying both .mud-switch and
   .mud-typography classes on the SAME element (not parent/child), so the
   selector combines them without a space. */
.av-view-menu .mud-switch.mud-typography {
  color: var(--color-gray-700);
}

html.dark .av-view-menu .mud-switch.mud-typography {
  color: var(--color-dark-100);
}

/* COLUMN VISIBILITY label + horizontal divider line (matches Guía Visual <hr> pattern) */
.av-view-menu__section-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 12px 4px;
}

.av-view-menu__section.mud-typography {
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

html.dark .av-view-menu__section.mud-typography {
  color: var(--color-dark-300);
}

.av-view-menu__hr {
  flex: 1 1 auto;
  height: 1px;
  border: none;
  background: var(--color-gray-300);
  margin: 0;
}

html.dark .av-view-menu__hr {
  background: var(--color-dark-500);
}

.av-view-menu__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 12px;
  max-height: 50vh;
  overflow-y: auto;
}

/* Give each column-visibility checkbox row a touch of internal padding so
   the click area is comfortable AND the label has space from the row above
   without depending solely on the parent `gap`. */
.av-view-menu__list .mud-checkbox {
  padding: 2px 0;
}

/* Match the filter popover item typography (.av-filter-popover__item-name):
   13 px / 400 / gray-800. Applied to the Switch labels (Full Screen, Row Dense)
   and to the column-visibility Checkbox labels so the View menu reads with the
   same letter as the Filter menu. */
.av-view-menu__inner .mud-switch .mud-typography,
.av-view-menu__list .mud-checkbox .mud-typography {
  font-size: var(--text-xs-plus);
  font-weight: 400;
  color: var(--color-gray-800);
}

/* Gap entre el pill del switch y su label (sólo popover View). */
.av-view-menu__inner .mud-switch .mud-typography {
  margin-left: 6px;
}

html.dark .av-view-menu__inner .mud-switch .mud-typography,
html.dark .av-view-menu__list .mud-checkbox .mud-typography {
  color: var(--color-dark-100);
}

/* Show All Columns — botón outlined inset (no edge-to-edge), auto-sized al
 contenido y centrado horizontalmente. width:auto + align-self:center batean
 el FullWidth="true" del MudButton (que aplica width:100%) que combinado con
 las márgenes laterales producía un scroll horizontal en el popover. */
.av-view-menu__action.mud-button-root {
  width: auto;
  align-self: center;
  height: 32px;
  text-transform: none;
  letter-spacing: 0;
  border-radius: var(--radius-md);
  color: var(--color-gray-700);
  font-weight: 500;
  background: transparent;
  box-shadow: none;
  border: 1px solid var(--color-gray-300);
  margin: 8px 0 12px;
  padding: 0 16px;
  font-size: var(--text-xs-plus);
}

.av-view-menu__action.mud-button-root:hover {
  background: var(--color-gray-100);
  border-color: var(--color-gray-400);
}

html.dark .av-view-menu__action.mud-button-root {
  color: var(--color-dark-100);
  border-color: var(--color-dark-500);
}

html.dark .av-view-menu__action.mud-button-root:hover {
  background: var(--color-dark-600);
  border-color: var(--color-dark-400);
}

.av-section-title.mud-typography {
  margin: 0 0 16px;
  color: var(--color-gray-800);
}

html.dark .av-section-title.mud-typography {
  color: var(--color-dark-100);
}

.av-info-section__header .av-section-title.mud-typography {
  margin: 0;
}

.av-empty,
.av-empty.mud-typography {
  color: var(--color-gray-400);
  font-style: italic;
  font-weight: 400;
}

html.dark .av-empty,
html.dark .av-empty.mud-typography {
  color: var(--color-dark-400);
}

.av-info-section.mud-paper {
  padding: 16px 20px;
  margin-bottom: 16px;
}

.av-info-section__header {
  margin-bottom: 16px;
  width: 100%;
}

.av-info-section__body.mud-grid {
  margin: 0;
  width: 100%;
}

.av-info-field {
  min-width: 0;
}

.av-info-field__label.mud-typography {
  color: var(--color-gray-500);
}

html.dark .av-info-field__label.mud-typography {
  color: var(--color-dark-300);
}

.av-info-field__value.mud-typography {
  color: var(--color-gray-800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.dark .av-info-field__value.mud-typography {
  color: var(--color-dark-100);
}

.av-info-section__group + .av-info-section__group {
  margin-top: 20px;
}

.av-info-section__group--secondary {
  padding-top: 20px;
  border-top: 1px dashed var(--color-gray-200);
}

html.dark .av-info-section__group--secondary {
  border-top-color: var(--color-dark-500);
}

.av-info-section__subheader.mud-typography {
  display: block;
  margin: 0 0 12px;
  color: var(--color-gray-500);
}

html.dark .av-info-section__subheader.mud-typography {
  color: var(--color-dark-300);
}

/* ── av-info-list — pretty row list inside an .av-info-section ────────────
   For repeating items (emails, phones, addresses) when a flat field grid
   isn't the right shape. Each item is an icon disc + primary text + meta
   below + optional state chip on the right. The hover lift is subtle so
   the section reads as a list, not a clickable card grid. */
.av-info-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.av-info-list__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--color-gray-100);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  transition:
    background-color 150ms ease,
    border-color 150ms ease;
}

.av-info-list__item:hover {
  background: var(--color-gray-50);
  border-color: var(--color-gray-200);
}

html.dark .av-info-list__item {
  background: var(--color-dark-700);
}

html.dark .av-info-list__item:hover {
  background: var(--color-dark-600);
  border-color: var(--color-dark-500);
}

/* Primary item — tinted with the brand primary; reads as the "default"
   row of the list. */
.av-info-list__item--primary {
  background: rgb(from var(--color-primary-500) r g b / 0.06);
  border-color: rgb(from var(--color-primary-500) r g b / 0.2);
}

.av-info-list__item--primary:hover {
  background: rgb(from var(--color-primary-500) r g b / 0.1);
  border-color: rgb(from var(--color-primary-500) r g b / 0.3);
}

html.dark .av-info-list__item--primary {
  background: rgb(from var(--color-primary-400) r g b / 0.12);
  border-color: rgb(from var(--color-primary-400) r g b / 0.25);
}

html.dark .av-info-list__item--primary:hover {
  background: rgb(from var(--color-primary-400) r g b / 0.18);
  border-color: rgb(from var(--color-primary-400) r g b / 0.4);
}

/* Icon disc — 36 × 36 rounded square with neutral tint. The primary
   variant flips the icon disc to the brand primary. */
.av-info-list__icon-wrap {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  color: var(--color-gray-600);
  border: 1px solid var(--color-gray-200);
}

html.dark .av-info-list__icon-wrap {
  background: var(--color-dark-800);
  color: var(--color-dark-200);
  border-color: var(--color-dark-500);
}

.av-info-list__item--primary .av-info-list__icon-wrap {
  background: var(--color-primary-600);
  color: var(--color-white);
  border-color: var(--color-primary-600);
}

html.dark .av-info-list__item--primary .av-info-list__icon-wrap {
  background: var(--color-primary-400);
  border-color: var(--color-primary-400);
}

.av-info-list__icon-wrap .mud-icon-root {
  width: 18px !important;
  height: 18px !important;
  font-size: 18px !important;
}

/* Text column — primary value above, meta caption below. min-width:0 so
   long emails truncate via ellipsis instead of overflowing the row. */
.av-info-list__content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.av-info-list__value.mud-typography {
  color: var(--color-gray-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.dark .av-info-list__value.mud-typography {
  color: var(--color-dark-50);
}

/* Extension suffix that sits inline after the phone number — same line,
   slightly faded so it reads as a secondary detail without breaking the
   visual rhythm of the primary number. */
.av-info-list__extension.mud-typography {
  color: var(--color-gray-500);
  margin-left: 2px;
}

html.dark .av-info-list__extension.mud-typography {
  color: var(--color-dark-300);
}

/* Allow multi-line wrap for content that can legitimately span 2+ lines
   (addresses with a long street + city/state/zip footer). Drops the
   single-line ellipsis clamp set above. */
.av-info-list__item--wrap .av-info-list__value.mud-typography,
.av-info-list__item--wrap .av-info-list__meta.mud-typography {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.av-info-list__meta.mud-typography {
  color: var(--color-gray-500);
  text-transform: capitalize;
}

html.dark .av-info-list__meta.mud-typography {
  color: var(--color-dark-300);
}

/* ── av-address-form ─────────────────────────────────────────────────────
   Skin for the shared `AddressForm` component (Shared/AddressForm.razor).
   The component renders inside any consumer surface (dialog body, page
   tab, section); this skin only owns the bits the form itself paints:
   status chip row, foreign notice spacing, search toggle bar, search
   panel, suggestions list, validation summary, row layouts, action row.
   Field rhythm comes from `.av-form-fields` (canonical 20 px gap). */

.av-address-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 10px;
}

.av-address-form__status {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

/* Foreign-address info banner — Tailux info-alert pattern.
   Light: 10 % tint of --color-info-darker on bg + same color on text/icon.
   Dark : 10 % tint of --color-info-lighter on bg + same color on text/icon.
   Padding 16 px on mobile, 16/20 on sm+ to match Tailux's `sm:px-5`. */
.av-address-form__notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius-lg);
  background: rgb(from var(--color-info-darker) r g b / 0.1);
  color: var(--color-info-darker);
}

.av-address-form__notice .mud-typography {
  color: inherit;
}

.av-address-form__notice-icon {
  flex-shrink: 0;
}

html.dark .av-address-form__notice {
  background: rgb(from var(--color-info-lighter) r g b / 0.1);
  color: var(--color-info-lighter);
}

@media (min-width: 640px) {
  .av-address-form__notice {
    padding: 16px 20px;
  }
}

/* WI #1180 — tenant guard notice. Reuses the `__notice` layout but swaps the info tint for warning:
   it reports a restriction ("locked until verified"), not a fact about the address. */
.av-address-form__tenant-notice {
  background: rgb(from var(--color-warning-darker) r g b / 0.1);
  color: var(--color-warning-darker);
}

html.dark .av-address-form__tenant-notice {
  background: rgb(from var(--color-warning-lighter) r g b / 0.1);
  color: var(--color-warning-lighter);
}

/* Locked field group — Mud greys each disabled input on its own; this only makes the gaps between
   them read as locked too. */
.av-form-fields--locked {
  cursor: not-allowed;
}

/* WI #1180 — previously used addresses. The rows themselves come from the `av-address-picker__*` skin
   (§ address picker); this only stacks the eyebrow, the list and the divider. */
.av-address-form__recent {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* WI #1180 — confirmation map. The map sets its own height; the wrapper clips the tiles to the
   card radius. */
.av-address-form__map {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Search toggle bar — Tailux helper strip with a tinted icon disc on the
   left, hint text in the middle, primary-outlined button on the right.
   Background gray so it reads as a helper, not a form field. */
.av-address-form__search-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  background: var(--color-gray-100);
}

html.dark .av-address-form__search-bar {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

.av-address-form__search-bar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-white);
  color: var(--color-primary-600);
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
}

html.dark .av-address-form__search-bar-icon {
  background: var(--color-dark-600);
  color: var(--color-primary-400);
}

.av-address-form__search-bar-icon .mud-icon-root {
  width: 16px;
  height: 16px;
  color: inherit;
}

.av-address-form__search-bar-text.mud-typography {
  color: var(--color-gray-700);
  flex: 1 1 auto;
  min-width: 0;
}

html.dark .av-address-form__search-bar-text.mud-typography {
  color: var(--color-dark-200);
}

.av-address-form__search-toggle-btn.mud-button-root {
  flex-shrink: 0;
  text-transform: none;
  letter-spacing: 0;
  border-radius: var(--radius-full);
  padding: 4px 14px;
  min-height: 32px;
}

.av-address-form__search-toggle-btn .mud-icon-root {
  width: 14px;
  height: 14px;
}

/* Search panel — expanded section under the bar (wrapped in MudCollapse). */
.av-address-form__search-panel {
  padding: 12px 14px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

html.dark .av-address-form__search-panel {
  background: var(--color-dark-800);
  border-color: var(--color-dark-500);
}

.av-address-form__search-helper.mud-typography {
  color: var(--color-gray-500);
}

html.dark .av-address-form__search-helper.mud-typography {
  color: var(--color-dark-300);
}

.av-address-form__search-empty.mud-typography {
  color: var(--color-gray-500);
  padding: 8px 4px;
}

html.dark .av-address-form__search-empty.mud-typography {
  color: var(--color-dark-300);
}

/* Autocomplete result row inside the MudAutocomplete dropdown. Mirrors the
   suggestion-item visual: icon disc + primary line + secondary line. */
.av-address-form__result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  min-width: 0;
  width: 100%;
}

.av-address-form__result-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: rgb(from var(--color-primary-500) r g b / 0.12);
  color: var(--color-primary-600);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

html.dark .av-address-form__result-icon {
  background: rgb(from var(--color-primary-400) r g b / 0.18);
  color: var(--color-primary-300);
}

.av-address-form__result.is-complete .av-address-form__result-icon {
  background: rgb(from var(--color-success) r g b / 0.14);
  color: var(--color-success);
}

.av-address-form__result-icon .mud-icon-root {
  width: 16px;
  height: 16px;
  color: inherit;
}

.av-address-form__result-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.av-address-form__result-primary.mud-typography {
  color: var(--color-gray-800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.dark .av-address-form__result-primary.mud-typography {
  color: var(--color-dark-50);
}

.av-address-form__result-secondary.mud-typography {
  color: var(--color-gray-500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.dark .av-address-form__result-secondary.mud-typography {
  color: var(--color-dark-300);
}

/* Validation summary — adopted style from MudAlert outlined error. The
   bullet list inside gets list-styled normally (don't reset). */
.av-address-form__errors.mud-alert {
  margin: 0;
}

.av-address-form__error-list {
  margin: 4px 0 0;
  padding-left: 20px;
}

/* Row grid templates. Each row is a CSS grid that lays out its children
   side-by-side at desktop widths and collapses to a single column below
   640 px. Naming mirrors the col-N share of a 12-col grid. */
.av-address-form__row-6-3-3 {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 16px;
}

.av-address-form__row-6-6 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.av-address-form__row-3-9 {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 16px;
}

@media (max-width: 640px) {
  .av-address-form__row-6-3-3,
  .av-address-form__row-6-6,
  .av-address-form__row-3-9 {
    grid-template-columns: 1fr;
  }
}

/* Action row — Clear left, Save right. Uses the same canonical 12 px gap
   as `.av-form-dialog__actions` so the buttons read as part of the same
   family even when the form sits outside a dialog. */
.av-address-form__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}

/* Address-edit dialog rows. The dialog hosts N editable address cards, each
   with its own avatar + type chip + actions on top, then the field grid
   below. Sits inside .av-form-fields so the 20 px vertical rhythm between
   cards comes from the form-dialog scope; this block only owns the row's
   inner padding, border and per-row grids. */
.av-address-edit__list {
  /* extends .av-form-fields — keep the 20 px row gap from the parent */
}

.av-address-edit__row {
  background: var(--surface-1);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

html.dark .av-address-edit__row {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

.av-address-edit__row.is-primary {
  border-color: var(--color-primary-400);
  box-shadow: 0 0 0 1px rgb(from var(--color-primary-500) r g b / 0.18);
}

.av-address-edit__row-head {
  width: 100%;
}

.av-address-edit__row-avatar {
  flex-shrink: 0;
}

.av-address-edit__row-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.av-address-edit__row-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 12px;
}

.av-address-edit__row-grid--2 {
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 640px) {
  .av-address-edit__row-grid,
  .av-address-edit__row-grid--2 {
    grid-template-columns: 1fr;
  }
}

.av-address-edit__add-more {
  /* MudButton FullWidth covers the layout; CSS only nudges visual weight */
  border-style: dashed;
}

.av-address-edit__empty {
  padding: 24px 12px;
  text-align: center;
}

.av-address-edit__empty-icon {
  background: rgb(from var(--color-primary-500) r g b / 0.1);
  color: var(--color-primary-600);
}

/* ── Card action buttons ──────────────────────────────────────────────────
 Icon / chip buttons used in the actions group of contact cards (grid and
 table views). Three tokens:

 .av-card-action icon-only, neutral default (used for "More" kebab)
 .av-card-action--primary icon-only, primary tint (used for "Briefing")
 .av-google-chip icon + label chip with two states:
 · default (not synced) → outlined neutral, label "Push"
 · .is-synced → success tint, label "Synced"

 Replaces the previous mix of MudBadge + Variant.Outlined MudIconButton +
 bare brand icon — eliminates the dot-badge, gives the Google control a
 readable verb, and unifies the visual rhythm of the three buttons.
*/

.av-card-action.mud-icon-button {
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  border-radius: var(--radius-lg);
  background-color: transparent;
  color: var(--color-gray-500);
  border: 1px solid transparent;
  transition:
    background-color 150ms ease,
    color 150ms ease,
    border-color 150ms ease;
}

.av-card-action.mud-icon-button:hover {
  background-color: var(--color-gray-100);
  color: var(--color-gray-800);
}

html.dark .av-card-action.mud-icon-button {
  color: var(--color-dark-200);
}

html.dark .av-card-action.mud-icon-button:hover {
  background-color: var(--color-dark-600);
  color: var(--color-dark-50);
}

.av-card-action.mud-icon-button svg {
  width: 18px;
  height: 18px;
}

/* Normalise icon size inside the kebab popover. HeroIcons outline icons
 have different content bounding boxes (Trash is tall, PencilSquare and
 Eye are wider but shorter), so at the default 24 px they appear visually
 uneven. The selector targets every icon-bearing element MudBlazor may
 render — MudMenuItem can use either .mud-list-item-icon (list mode) or
 .mud-button-icon-start (button mode) depending on Dense/version — plus a
 defensive blanket on all SVGs inside the popover. */
.av-card-action-menu .mud-list-item-icon,
.av-card-action-menu .mud-button-icon-start {
  min-width: 28px;
}

.av-card-action-menu .mud-list-item-icon .mud-icon-root,
.av-card-action-menu .mud-list-item-icon svg,
.av-card-action-menu .mud-button-icon-start .mud-icon-root,
.av-card-action-menu .mud-button-icon-start svg,
.av-card-action-menu .mud-menu-item .mud-icon-root,
.av-card-action-menu .mud-menu-item svg,
.av-card-action-menu .mud-list-item .mud-icon-root,
.av-card-action-menu .mud-list-item svg {
  width: 18px !important;
  height: 18px !important;
  font-size: 18px !important;
}

.av-card-action--primary.mud-icon-button {
  color: var(--color-primary-600);
}

.av-card-action--primary.mud-icon-button:hover {
  background-color: rgb(from var(--color-primary-500) r g b / 0.1);
  color: var(--color-primary-700);
}

html.dark .av-card-action--primary.mud-icon-button {
  color: var(--color-primary-400);
}

html.dark .av-card-action--primary.mud-icon-button:hover {
  background-color: rgb(from var(--color-primary-400) r g b / 0.18);
  color: var(--color-primary-300);
}

/* ── Briefing action button ───────────────────────────────────────────────
 Icon-only circular chip in line with the card's quiet visual rhythm — no
 gradient, no shimmer. The Sparkles glyph carries the "AI insight" meaning
 on a soft primary tint, scaling slightly on hover. Pairs visually with the
 neighbouring av-tag chips (same alpha pattern) without competing with the
 tinted Google or Priority chips. */

.av-briefing-btn {
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: rgb(from var(--color-primary-600) r g b / 0.1);
  color: var(--color-primary-700);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:
    background-color 200ms ease,
    color 200ms ease,
    transform 150ms ease;
}

.av-briefing-btn svg {
  width: 14px;
  height: 14px;
}

.av-briefing-btn:hover {
  background-color: rgb(from var(--color-primary-600) r g b / 0.18);
  color: var(--color-primary-800);
  transform: scale(1.08);
}

.av-briefing-btn:active {
  transform: scale(0.96);
}

.av-briefing-btn:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

html.dark .av-briefing-btn {
  background-color: rgb(from var(--color-primary-400) r g b / 0.14);
  color: var(--color-primary-300);
}

html.dark .av-briefing-btn:hover {
  background-color: rgb(from var(--color-primary-400) r g b / 0.22);
  color: var(--color-primary-200);
}

/* ── Swap mechanism (Guía Visual .swap / .swap-flip) ───────────────────────────
 Two layered children — one with [data-swap-off], one with [data-swap-on]
 — share the same grid cell and 3D-flip when the parent toggles
 .swap-active. Used on the avatar slot to flip between the photo /
 initials and the selected check overlay. Replicates exactly the Guía Visual
 `.swap .swap-flip` compiled rules from estilos.css. */

.swap {
  position: relative;
  display: inline-grid;
  place-content: center;
  user-select: none;
  cursor: pointer;
}

.swap > [data-swap-on],
.swap > [data-swap-off] {
  grid-column-start: 1;
  grid-row-start: 1;
  transition:
    opacity 300ms ease,
    transform 300ms ease;
}

.swap > [data-swap-on] {
  opacity: 0;
}

.swap.swap-active > [data-swap-off] {
  opacity: 0;
}

.swap.swap-active > [data-swap-on] {
  opacity: 1;
}

.swap-flip {
  transform-style: preserve-3d;
  perspective: 16em;
}

.swap-flip > [data-swap-on] {
  backface-visibility: hidden;
  opacity: 1;
  transform: rotateY(180deg);
  z-index: 11;
}

.swap-flip.swap-active > [data-swap-off] {
  backface-visibility: hidden;
  opacity: 1;
  transform: rotateY(-180deg);
}

.swap-flip.swap-active > [data-swap-on] {
  transform: rotateY(0);
}

/* ── Tag (Guía Visual .badge-base.badge.rounded-full) ──────────────────────────
 One mold for every "state pill" in the app: Google sync status, Briefing
 pointer, Priority level, and any future status chip. Mirrors Guía Visual's
 `.badge-base.badge.rounded-full` exactly — same padding (4/8), font-size
 (text-xs / 12 px), font-weight medium (500), line-height 1, tracking-wide
 (0.025em). Alpha is 0.07 light / 0.10 dark for every tinted variant,
 matching `bg-this-darker/[0.07]` and `dark:bg-this-lighter/10`.

 Like `.av-btn` and `.av-avatar`, this class declares typography metrics
 directly — the canonical scale has no `Typo.X` that maps to a 12 px
 medium-weight tracked-wide line-height-1 pill.

 Mounts on either MudElement HtmlTag="span" (read-only label) or MudButton
 (clickable action). Both share the same shape via the .mud-button-root
 reset below. */

/* ────────────────────────────────────────────────────────────────────────
   av-edit-btn — soft-primary icon-only button (36 × 36, icon 20 × 20).
   Mirrors the Tailux <Button color="primary" variant="soft" isIcon size-9>
   recipe: primary text/icon on a low-opacity primary background, no
   border, generous rounded-square radius. Hidden by default and revealed
   when the parent card (.av-info-section or legacy .pi-section-card) is
   hovered or contains keyboard focus. Gated by `(hover: hover)` so touch
   devices keep the button visible — there's no hover affordance there.
   ──────────────────────────────────────────────────────────────────────── */

.av-soft-btn-primary.mud-icon-button,
.av-edit-btn.mud-icon-button {
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  border-radius: var(--radius-lg);
  background-color: rgb(from var(--color-primary-600) r g b / 0.1);
  color: var(--color-primary-600);
  transition:
    background-color 150ms ease,
    color 150ms ease,
    opacity 150ms ease;
}

.av-soft-btn-primary.mud-icon-button:hover,
.av-edit-btn.mud-icon-button:hover {
  background-color: rgb(from var(--color-primary-600) r g b / 0.18);
  color: var(--color-primary-700);
}

.av-soft-btn-primary.mud-icon-button .mud-icon-root,
.av-soft-btn-primary.mud-icon-button svg,
.av-edit-btn.mud-icon-button .mud-icon-root,
.av-edit-btn.mud-icon-button svg {
  width: 20px;
  height: 20px;
}

html.dark .av-soft-btn-primary.mud-icon-button,
html.dark .av-edit-btn.mud-icon-button {
  background-color: rgb(from var(--color-primary-400) r g b / 0.15);
  color: var(--color-primary-400);
}

html.dark .av-soft-btn-primary.mud-icon-button:hover,
html.dark .av-edit-btn.mud-icon-button:hover {
  background-color: rgb(from var(--color-primary-400) r g b / 0.25);
  color: var(--color-primary-300);
}

@media (hover: hover) {
  .av-info-section .av-edit-btn.mud-icon-button,
  .pi-section-card .av-edit-btn.mud-icon-button {
    opacity: 0;
    pointer-events: none;
  }

  .av-info-section:hover .av-edit-btn.mud-icon-button,
  .av-info-section:focus-within .av-edit-btn.mud-icon-button,
  .pi-section-card:hover .av-edit-btn.mud-icon-button,
  .pi-section-card:focus-within .av-edit-btn.mud-icon-button {
    opacity: 1;
    pointer-events: auto;
  }
}

/* ────────────────────────────────────────────────────────────────────────
   av-social-grid / av-social-card — Tailux soft card grid for social
   profiles and messaging apps. Each card is a white surface with a brand
   icon disc on the top-left, platform name + verified badge, the user's
   handle (or URL) with a small copy button, and an action group on the
   top-right (visit / edit / delete) that reveals on hover. The icon disc
   stays neutral gray — differentiation comes from the brand SVG inside,
   which carries its own multi-color fills (Facebook blue, Instagram pink
   gradient, etc.), so we don't need per-platform hex overrides anywhere.
   ──────────────────────────────────────────────────────────────────────── */

.av-social-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.av-social-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow:
    0 0 2px rgb(145 158 171 / 0.15),
    0 8px 18px -6px rgb(145 158 171 / 0.1);
  transition:
    border-color 120ms ease,
    box-shadow 120ms ease;
  min-width: 0;
}

html.dark .av-social-card {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
  box-shadow: none;
}

.av-social-card:hover {
  border-color: var(--color-gray-300);
}

html.dark .av-social-card:hover {
  border-color: var(--color-dark-400);
}

.av-social-card__top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.av-social-card__icon-disc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-lg);
  background: var(--color-gray-100);
  color: var(--color-gray-700);
  flex-shrink: 0;
}

html.dark .av-social-card__icon-disc {
  background: var(--color-dark-500);
  color: var(--color-dark-100);
}

.av-social-card__icon-disc .mud-icon-root,
.av-social-card__icon-disc svg {
  width: 22px;
  height: 22px;
}

.av-social-card__actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

@media (hover: hover) {
  .av-social-card .av-social-card__actions {
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease;
  }

  .av-social-card:hover .av-social-card__actions,
  .av-social-card:focus-within .av-social-card__actions {
    opacity: 1;
    pointer-events: auto;
  }
}

.av-social-card__action-btn.mud-icon-button {
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
  border-radius: var(--radius-md);
  color: var(--color-gray-500);
  transition:
    background-color 120ms ease,
    color 120ms ease;
}

.av-social-card__action-btn.mud-icon-button:hover {
  background-color: var(--color-gray-100);
  color: var(--color-gray-800);
}

html.dark .av-social-card__action-btn.mud-icon-button {
  color: var(--color-dark-200);
}

html.dark .av-social-card__action-btn.mud-icon-button:hover {
  background-color: var(--color-dark-600);
  color: var(--color-dark-50);
}

.av-social-card__action-btn.mud-icon-button .mud-icon-root,
.av-social-card__action-btn.mud-icon-button svg {
  width: 16px;
  height: 16px;
}

.av-social-card__action-btn--danger.mud-icon-button:hover {
  background-color: rgb(from var(--color-error) r g b / 0.1);
  color: var(--color-error);
}

.av-social-card__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.av-social-card__platform-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.av-social-card__platform.mud-typography {
  color: var(--color-gray-900);
}

html.dark .av-social-card__platform.mud-typography {
  color: var(--color-dark-50);
}

.av-social-card__verified-icon.mud-icon-root {
  width: 16px;
  height: 16px;
  color: var(--color-success-darker);
}

html.dark .av-social-card__verified-icon.mud-icon-root {
  color: var(--color-success-lighter);
}

.av-social-card__handle-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.av-social-card__handle.mud-typography {
  color: var(--color-gray-600);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}

html.dark .av-social-card__handle.mud-typography {
  color: var(--color-dark-200);
}

.av-social-card__copy-btn.mud-icon-button {
  width: 24px;
  height: 24px;
  min-width: 24px;
  padding: 0;
  border-radius: var(--radius-md);
  color: var(--color-gray-400);
  flex-shrink: 0;
  transition:
    background-color 120ms ease,
    color 120ms ease;
}

.av-social-card__copy-btn.mud-icon-button:hover {
  color: var(--color-primary-600);
  background-color: rgb(from var(--color-primary-600) r g b / 0.08);
}

html.dark .av-social-card__copy-btn.mud-icon-button {
  color: var(--color-dark-300);
}

html.dark .av-social-card__copy-btn.mud-icon-button:hover {
  color: var(--color-primary-400);
  background-color: rgb(from var(--color-primary-400) r g b / 0.14);
}

.av-social-card__copy-btn.mud-icon-button .mud-icon-root,
.av-social-card__copy-btn.mud-icon-button svg {
  width: 14px;
  height: 14px;
}

.av-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 8px;
  border: none;
  border-radius: 9999px;
  background-color: transparent;
  color: var(--color-gray-700);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.025em;
  cursor: default;
  flex-shrink: 0;
  white-space: nowrap;
  vertical-align: baseline;
  transition:
    background-color 150ms ease,
    color 150ms ease;
}

html.dark .av-tag {
  color: var(--color-dark-100);
}

/* MudButton reset when it carries .av-tag — strip default button geometry */
.av-tag.mud-button-root {
  min-width: 0;
  height: auto;
  text-transform: none;
  cursor: pointer;
}

.av-tag.mud-button-root .mud-button-label {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.025em;
  line-height: 1;
}

.av-tag .mud-button-icon-start {
  margin: 0;
}

.av-tag svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* Variant — neutral (used for Google "Push", not synced yet) */
.av-tag--neutral {
  background-color: var(--color-gray-100);
  color: var(--color-gray-700);
}

.av-tag.av-tag--neutral.mud-button-root:hover {
  background-color: var(--color-gray-200);
}

html.dark .av-tag--neutral {
  background-color: var(--color-dark-500);
  color: var(--color-dark-100);
}

html.dark .av-tag.av-tag--neutral.mud-button-root:hover {
  background-color: var(--color-dark-400);
}

/* Variant — success (Google "Synced") */
.av-tag--success {
  background-color: rgb(from var(--color-success-darker) r g b / 0.07);
  color: var(--color-success-darker);
}

.av-tag.av-tag--success.mud-button-root:hover {
  background-color: rgb(from var(--color-success-darker) r g b / 0.15);
}

html.dark .av-tag--success {
  background-color: rgb(from var(--color-success-lighter) r g b / 0.1);
  color: var(--color-success-lighter);
}

html.dark .av-tag.av-tag--success.mud-button-root:hover {
  background-color: rgb(from var(--color-success-lighter) r g b / 0.18);
}

/* Variant — primary (Briefing) */
.av-tag--primary {
  background-color: rgb(from var(--color-primary-600) r g b / 0.07);
  color: var(--color-primary-700);
}

.av-tag.av-tag--primary.mud-button-root:hover {
  background-color: rgb(from var(--color-primary-600) r g b / 0.15);
}

html.dark .av-tag--primary {
  background-color: rgb(from var(--color-primary-400) r g b / 0.1);
  color: var(--color-primary-300);
}

html.dark .av-tag.av-tag--primary.mud-button-root:hover {
  background-color: rgb(from var(--color-primary-400) r g b / 0.18);
}

/* Priority variants — 5 tints spanning 10 levels (paired 1-2, 3-4, ..., 9-10).
 Same 7% light / 10% dark alpha as the rest, color carries the level. */

.av-tag--priority-1,
.av-tag--priority-2 {
  background-color: rgb(from var(--color-error-darker) r g b / 0.07);
  color: var(--color-error-darker);
}

.av-tag--priority-3,
.av-tag--priority-4 {
  background-color: rgb(from var(--color-warning-darker) r g b / 0.07);
  color: var(--color-warning-darker);
}

.av-tag--priority-5,
.av-tag--priority-6 {
  background-color: rgb(from var(--color-amber-700) r g b / 0.07);
  color: var(--color-amber-700);
}

.av-tag--priority-7,
.av-tag--priority-8 {
  background-color: rgb(from var(--color-emerald-500) r g b / 0.07);
  color: var(--color-emerald-700);
}

.av-tag--priority-9,
.av-tag--priority-10 {
  background-color: rgb(from var(--color-success-darker) r g b / 0.07);
  color: var(--color-success-darker);
}

html.dark .av-tag--priority-1,
html.dark .av-tag--priority-2 {
  background-color: rgb(from var(--color-error-lighter) r g b / 0.1);
  color: var(--color-error-lighter);
}

html.dark .av-tag--priority-3,
html.dark .av-tag--priority-4 {
  background-color: rgb(from var(--color-warning-lighter) r g b / 0.1);
  color: var(--color-warning-lighter);
}

html.dark .av-tag--priority-5,
html.dark .av-tag--priority-6 {
  background-color: rgb(from var(--color-amber-400) r g b / 0.1);
  color: var(--color-amber-400);
}

html.dark .av-tag--priority-7,
html.dark .av-tag--priority-8 {
  background-color: rgb(from var(--color-emerald-400) r g b / 0.1);
  color: var(--color-emerald-400);
}

html.dark .av-tag--priority-9,
html.dark .av-tag--priority-10 {
  background-color: rgb(from var(--color-success-lighter) r g b / 0.1);
  color: var(--color-success-lighter);
}

/* ── Contact card v1 ──────────────────────────────────────────────────────
 Guía Visual-inspired grid card for the contact list. Replaces the legacy
 .clp-contact-card. Three horizontal bands separated by a hairline rule:

 1. Hero avatar (squircle) + name + ContactType + kebab
 2. Channels one row per phone / email, action pills on the right
 3. Status three rows (Google / Briefing / Priority) with chips

 The checkbox lives inside the avatar slot: avatar visible by default,
 checkbox fades in on hover or when the card is selected. When ANY card in
 the grid is selected, every card switches into "selection mode" (avatars
 hidden, checkboxes always visible) — keeps multi-select fluid.
*/

.av-contacts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  padding: 0px;
}

/* Loading skeleton: keep the same responsive columns, but pin the row height and clip to exactly
   two full rows so it always reads as N+N (3+3 / 4+4 / 2+2…) regardless of how many columns fit. */
.av-contacts-grid--skeleton {
  grid-auto-rows: 176px;
  max-height: calc(176px * 2 + 16px);
  overflow: hidden;
}

.av-contact-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  box-shadow: 0 1px 2px rgb(from var(--color-gray-900) r g b / 0.04);
  cursor: pointer;
  overflow: hidden;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}

.av-contact-card:hover {
  border-color: var(--color-gray-300);
  box-shadow:
    0 4px 12px -4px rgb(from var(--color-gray-900) r g b / 0.08),
    0 2px 4px -2px rgb(from var(--color-gray-900) r g b / 0.04);
  transform: translateY(-1px);
}

.av-contact-card.is-selected {
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px rgb(from var(--color-primary-500) r g b / 0.12);
}

html.dark .av-contact-card {
  background-color: var(--color-dark-700);
  border-color: var(--color-dark-500);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
}

html.dark .av-contact-card:hover {
  border-color: var(--color-dark-400);
  box-shadow:
    0 4px 12px -4px rgb(0 0 0 / 0.4),
    0 2px 4px -2px rgb(0 0 0 / 0.3);
}

html.dark .av-contact-card.is-selected {
  border-color: var(--color-primary-400);
  box-shadow: 0 0 0 3px rgb(from var(--color-primary-400) r g b / 0.18);
}

/* Sharing state — colored LEFT accent bar to differentiate at a glance: green = public,
   blue = shared (selection always wins). */
.av-contact-card--public:not(.is-selected) {
  border-left: 4px solid var(--color-success);
}

.av-contact-card--shared:not(.is-selected) {
  border-left: 4px solid var(--color-blue-600);
}

html.dark .av-contact-card--shared:not(.is-selected) {
  border-left-color: var(--color-blue-500);
}

/* Band 1 — Hero */

.av-contact-card__hero {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
}

/* Top-right cluster — sharing badges (Public / Shared) sit inline with the kebab
   menu, all vertically centered so the globe/share icons align with the 3-dots. */
.av-contact-card__hero-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* Transparent wrapper hosting @onclick:stopPropagation on a separate element
 from the inner button's @onclick — dodges Blazor RZ10010 (the directive
 modifier conflicts with @onclick when both sit on the same element). */
.av-contact-card__avatar-wrap {
  display: inline-flex;
  flex-shrink: 0;
}

/* Avatar slot is a clickable <button>: the avatar stays visible always,
 a dashed primary ring fades in on hover (indicating "click to select"),
 and a solid primary circle with a white check replaces the avatar when
 the contact is selected. The legacy MudCheckBox overlay is gone. */
.av-contact-card__avatar-slot {
  position: relative;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
}

.av-contact-card__avatar-slot:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 3px;
}

.av-contact-card__avatar,
.av-contact-card__avatar-img {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 600;
  color: var(--color-gray-700);
  background: var(--color-gray-100);
  overflow: hidden;
}

.av-contact-card__avatar-img {
  object-fit: cover;
}

/* Override the legacy gradient avatar classes when they appear inside the slot,
 replacing saturated gradients with the soft Guía Visual tint. */
.av-contact-card__avatar.avatar-pink {
  background: var(--color-rose-100) !important;
  color: var(--color-rose-700);
}

.av-contact-card__avatar.avatar-blue {
  background: var(--color-blue-100) !important;
  color: var(--color-blue-700);
}

.av-contact-card__avatar.avatar-green {
  background: var(--color-emerald-100) !important;
  color: var(--color-emerald-700);
}

.av-contact-card__avatar.avatar-purple {
  background: var(--color-violet-100) !important;
  color: var(--color-violet-700);
}

.av-contact-card__avatar.avatar-orange {
  background: var(--color-amber-100) !important;
  color: var(--color-amber-800);
}

html.dark .av-contact-card__avatar.avatar-pink {
  background: rgb(from var(--color-rose-400) r g b / 0.22) !important;
  color: var(--color-rose-200);
}

html.dark .av-contact-card__avatar.avatar-blue {
  background: rgb(from var(--color-blue-400) r g b / 0.22) !important;
  color: var(--color-blue-200);
}

html.dark .av-contact-card__avatar.avatar-green {
  background: rgb(from var(--color-emerald-400) r g b / 0.22) !important;
  color: var(--color-emerald-200);
}

html.dark .av-contact-card__avatar.avatar-purple {
  background: rgb(from var(--color-violet-400) r g b / 0.22) !important;
  color: var(--color-violet-200);
}

html.dark .av-contact-card__avatar.avatar-orange {
  background: rgb(from var(--color-amber-400) r g b / 0.22) !important;
  color: var(--color-amber-200);
}

/* Hover ring — dashed primary border around the avatar slot when the card is
 hovered (and not already selected), or globally when the grid is in
 selection mode. Painted via outline so it does not push layout. */
.av-contact-card:hover .av-contact-card__avatar-slot,
.av-contacts-grid.is-in-selection-mode
  .av-contact-card:not(.is-selected)
  .av-contact-card__avatar-slot {
  outline: 2px dashed var(--color-primary-500);
  outline-offset: 3px;
}

html.dark .av-contact-card:hover .av-contact-card__avatar-slot,
html.dark
  .av-contacts-grid.is-in-selection-mode
  .av-contact-card:not(.is-selected)
  .av-contact-card__avatar-slot {
  outline-color: var(--color-primary-400);
}

/* Check overlay — solid primary circle with white check, painted via the
 .swap-flip mechanism. The visibility / 3D rotation is driven by [data-swap-on]
 and the parent .swap-active toggle (declared in the global swap block);
 this rule only owns geometry and color. */
.av-contact-card__check-overlay {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-primary-600);
  color: var(--color-white);
}

html.dark .av-contact-card__check-overlay {
  background: var(--color-primary-500);
}

.av-contact-card__check-overlay .mud-icon-root,
.av-contact-card__check-overlay svg {
  width: 26px;
  height: 26px;
  color: var(--color-white);
}

/* Hero-meta owns the open-detail click. Cursor pointer signals that
 clicking the name / type opens the contact, while the avatar slot
 keeps its own selection click and the kebab opens the menu. */
.av-contact-card__hero-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 2px;
  cursor: pointer;
}

.av-contact-card__name.mud-typography {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-gray-900);
  min-width: 0;
}

.av-contact-card__name-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.dark .av-contact-card__name.mud-typography {
  color: var(--color-dark-50);
}

.av-contact-card__org-pill {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 6px;
  border-radius: 9999px;
  background: var(--color-primary-100);
  color: var(--color-primary-700);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex-shrink: 0;
}

html.dark .av-contact-card__org-pill {
  background: rgb(from var(--color-primary-400) r g b / 0.2);
  color: var(--color-primary-200);
}

/* Sharing markers next to the contact name — circular tinted badges: Public (globe, green) and
   Shared (share, blue). Matches the icon-badge style used elsewhere. */
.av-contact-card__share-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  flex-shrink: 0;
}

/* Shrink the icon so it sits comfortably inside the 24px chip (no XSmall Size enum in Mud). */
.av-contact-card__share-badge .mud-icon-root {
  width: 14px;
  height: 14px;
  font-size: 14px;
}

.av-contact-card__share-badge--public {
  background: rgb(from var(--color-success) r g b / 0.14);
  color: var(--color-success);
}

.av-contact-card__share-badge--shared {
  background: rgb(from var(--color-blue-600) r g b / 0.14);
  color: var(--color-blue-600);
}

html.dark .av-contact-card__share-badge--shared {
  color: var(--color-blue-500);
}

.av-contact-card__type.mud-typography {
  color: var(--color-gray-500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.dark .av-contact-card__type.mud-typography {
  color: var(--color-dark-300);
}

/* Owner line — muted icon + owner name under the contact type. */
.av-contact-card__owner {
 display: flex;
 align-items: center;
 gap: 4px;
 margin-top: 2px;
 min-width: 0;
 color: var(--color-gray-500);
}

.av-contact-card__owner .mud-icon-root {
 width: 14px;
 height: 14px;
 flex-shrink: 0;
}

.av-contact-card__owner-name.mud-typography {
 color: var(--color-gray-500);
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

html.dark .av-contact-card__owner {
 color: var(--color-dark-300);
}

html.dark .av-contact-card__owner-name.mud-typography {
 color: var(--color-dark-300);
}

.av-contact-card__kebab.mud-icon-button {
  flex-shrink: 0;
}

/* Band 2 — Channels */

.av-contact-card__channels {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-gray-100);
  padding: 12px 16px;
  gap: 8px;
}

html.dark .av-contact-card__channels {
  border-top-color: var(--color-dark-600);
}

.av-contact-card__channel {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Channel value (phone / email text).
 MudLink applies `.mud-link.mud-primary-text` which has high specificity
 AND ships in MudBlazor's main CSS that loads before avalme-v1.css —
 `!important` is the cleanest way to keep this color contract regardless
 of where the bundle order ends up. Same exception pattern as `av-btn`
 and `av-avatar`: the channel value carries domain-specific typography
 that does not map to a `Typo.X` in the canonical scale. */
.av-contact-card__channel-value,
.av-contact-card__channel-value.mud-link,
.av-contact-card__channel-value.mud-typography,
.av-contact-card__channel-value.mud-link.mud-primary-text {
  flex: 1;
  min-width: 0;
  color: var(--color-gray-700) !important;
  font-size: var(--text-sm) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none !important;
}

.av-contact-card__channel-value:hover,
.av-contact-card__channel-value.mud-link:hover,
.av-contact-card__channel-value.mud-link.mud-primary-text:hover {
  color: var(--color-primary-600) !important;
  text-decoration: none !important;
}

html.dark .av-contact-card__channel-value,
html.dark .av-contact-card__channel-value.mud-link,
html.dark .av-contact-card__channel-value.mud-typography,
html.dark .av-contact-card__channel-value.mud-link.mud-primary-text {
  color: var(--color-dark-200) !important;
}

html.dark .av-contact-card__channel-value:hover,
html.dark .av-contact-card__channel-value.mud-link:hover,
html.dark .av-contact-card__channel-value.mud-link.mud-primary-text:hover {
  color: var(--color-primary-300) !important;
}

/* RTL — the flex row reverses (icon to the left), so the value must align to
   the start (right) edge. The phone carries dir="ltr" (keeps digit order),
   which would otherwise left-align its text against the icon. */
[dir="rtl"] .av-contact-card__channel-value,
[dir="rtl"] .av-contact-card__channel-value.mud-link {
  text-align: right;
}

.av-contact-card__channel-pills {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.av-contact-card__channel-pill.mud-icon-button {
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
  border-radius: 9999px;
  flex-shrink: 0;
  transition:
    background-color 200ms ease,
    color 200ms ease;
}

.av-contact-card__channel-pill.mud-icon-button svg {
  width: 16px;
  height: 16px;
}

/* Call pill — success tint */
.av-contact-card__channel-pill--call.mud-icon-button {
  background-color: rgb(from var(--color-success-darker) r g b / 0.08);
  color: var(--color-success-darker);
}

.av-contact-card__channel-pill--call.mud-icon-button:hover,
.av-contact-card__channel-pill--call.mud-icon-button:focus {
  background-color: rgb(from var(--color-success-darker) r g b / 0.15);
}

.av-contact-card__channel-pill--call.mud-icon-button:active {
  background-color: rgb(from var(--color-success-darker) r g b / 0.2);
}

html.dark .av-contact-card__channel-pill--call.mud-icon-button {
  background-color: rgb(from var(--color-success-lighter) r g b / 0.1);
  color: var(--color-success-lighter);
}

html.dark .av-contact-card__channel-pill--call.mud-icon-button:hover,
html.dark .av-contact-card__channel-pill--call.mud-icon-button:focus {
  background-color: rgb(from var(--color-success-lighter) r g b / 0.2);
}

html.dark .av-contact-card__channel-pill--call.mud-icon-button:active {
  background-color: rgb(from var(--color-success-lighter) r g b / 0.25);
}

/* Mail pill — info tint */
.av-contact-card__channel-pill--mail.mud-icon-button {
  background-color: rgb(from var(--color-info-darker) r g b / 0.08);
  color: var(--color-info-darker);
}

.av-contact-card__channel-pill--mail.mud-icon-button:hover,
.av-contact-card__channel-pill--mail.mud-icon-button:focus {
  background-color: rgb(from var(--color-info-darker) r g b / 0.15);
}

.av-contact-card__channel-pill--mail.mud-icon-button:active {
  background-color: rgb(from var(--color-info-darker) r g b / 0.2);
}

html.dark .av-contact-card__channel-pill--mail.mud-icon-button {
  background-color: rgb(from var(--color-info-lighter) r g b / 0.1);
  color: var(--color-info-lighter);
}

html.dark .av-contact-card__channel-pill--mail.mud-icon-button:hover,
html.dark .av-contact-card__channel-pill--mail.mud-icon-button:focus {
  background-color: rgb(from var(--color-info-lighter) r g b / 0.2);
}

html.dark .av-contact-card__channel-pill--mail.mud-icon-button:active {
  background-color: rgb(from var(--color-info-lighter) r g b / 0.25);
}

/* Band 3 — Status */

.av-contact-card__status {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-gray-100);
  padding: 12px 16px 16px;
  gap: 10px;
}

html.dark .av-contact-card__status {
  border-top-color: var(--color-dark-600);
}

.av-contact-card__status-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.av-contact-card__status-label.mud-typography {
  flex: 1;
  min-width: 0;
  color: var(--color-gray-700);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.dark .av-contact-card__status-label.mud-typography {
  color: var(--color-dark-200);
}

/* ============================================================================
 Per-tenant External Integrations list (EditTenant → Settings tab)

 Layout: single column capped at 880px, one card per provider. Used by
 TenantIntegrationsSettings.razor + each <Provider>IntegrationDialog.razor.
 Typography is owned entirely by Typo.X on MudText (doctrine §Typography) —
 only color, spacing, layout and state classes live here.
 ============================================================================ */

.av-integrations {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 880px;
  width: 100%;
}

.av-integrations__header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.av-integrations__subtitle.mud-typography {
  color: var(--color-gray-600);
}

html.dark .av-integrations__subtitle.mud-typography {
  color: var(--color-dark-200);
}

.av-integrations__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* — card per provider — — — — — — — — — — — — — — — — — — — — — — — — — — */

.av-integration-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 24px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.av-integration-card:hover {
  border-color: var(--color-gray-300);
  box-shadow: 0 1px 2px rgb(from var(--color-gray-900) r g b / 0.04);
}

html.dark .av-integration-card {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

html.dark .av-integration-card:hover {
  border-color: var(--color-dark-400);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
}

.av-integration-card__head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.av-integration-card__avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-gray-100);
  color: var(--color-gray-700);
}

.av-integration-card__avatar .mud-icon-root {
  width: 22px;
  height: 22px;
}

html.dark .av-integration-card__avatar {
  background: var(--color-dark-600);
  color: var(--color-dark-100);
}

.av-integration-card__title {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.av-integration-card__description.mud-typography {
  color: var(--color-gray-600);
}

html.dark .av-integration-card__description.mud-typography {
  color: var(--color-dark-200);
}

.av-integration-card__status {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.av-integration-card__status .mud-typography-overline {
  color: var(--color-gray-700);
}

html.dark .av-integration-card__status .mud-typography-overline {
  color: var(--color-dark-100);
}

.av-integration-card__dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  flex-shrink: 0;
}

.av-integration-card__dot--on {
  background: var(--color-success);
  box-shadow: 0 0 0 3px rgb(from var(--color-success) r g b / 0.16);
}

.av-integration-card__dot--off {
  background: var(--color-gray-300);
}

html.dark .av-integration-card__dot--off {
  background: var(--color-dark-400);
}

/* — meta (Client ID / masked Secret) when configured — — — — — — — — — — — */

.av-integration-card__meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 0;
  padding: 12px 16px;
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
}

html.dark .av-integration-card__meta {
  background: var(--color-dark-800);
}

@media (min-width: 640px) {
  .av-integration-card__meta {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px 24px;
  }
}

.av-integration-card__meta-pair {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.av-integration-card__meta-key.mud-typography {
  color: var(--color-gray-500);
}

html.dark .av-integration-card__meta-key.mud-typography {
  color: var(--color-dark-300);
}

.av-integration-card__meta-value.mud-typography {
  color: var(--color-gray-800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.dark .av-integration-card__meta-value.mud-typography {
  color: var(--color-dark-50);
}

.av-integration-card__meta-value--mono.mud-typography {
  font-variant-numeric: tabular-nums;
}

/* — actions row — — — — — — — — — — — — — — — — — — — — — — — — — — — — — */

.av-integration-card__actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.av-integration-card__btn.mud-button-root {
  color: var(--color-primary-600);
  background: transparent;
  border: 1px solid var(--color-gray-200);
  border-radius: 9999px;
  padding: 6px 14px;
}

.av-integration-card__btn.mud-button-root:hover {
  background: var(--color-gray-50);
  border-color: var(--color-gray-300);
}

html.dark .av-integration-card__btn.mud-button-root {
  color: var(--color-primary-300);
  border-color: var(--color-dark-500);
}

html.dark .av-integration-card__btn.mud-button-root:hover {
  background: var(--color-dark-600);
  border-color: var(--color-dark-400);
}

/* — Danger zone inside the provider dialog — — — — — — — — — — — — — — — — */

.av-form-dialog__danger-zone {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px dashed var(--color-gray-200);
  display: flex;
  justify-content: flex-start;
}

html.dark .av-form-dialog__danger-zone {
  border-top-color: var(--color-dark-500);
}

.av-form-dialog__danger-btn.mud-button-root {
  color: var(--color-error);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9999px;
  padding: 6px 14px;
}

.av-form-dialog__danger-btn.mud-button-root:hover {
  background: rgb(from var(--color-error) r g b / 0.08);
  border-color: rgb(from var(--color-error) r g b / 0.32);
}

html.dark .av-form-dialog__danger-btn.mud-button-root:hover {
  background: rgb(from var(--color-error) r g b / 0.12);
}

/* — Mobile (≤640) collapses the head into stacked rows — — — — — — — — — — */

@media (max-width: 640px) {
  .av-integration-card__head {
    flex-wrap: wrap;
  }

  .av-integration-card__status {
    width: 100%;
    justify-content: flex-start;
    padding-left: 56px;
    /* matches avatar width + gap so it aligns under the title */
  }
}

/* ============================================================================
 Generic page-level tabs (.av-page-tabs)

 Underline tabs with icon+label inline, primary-colored active state and a
 single hairline divider under the tab row. Adapted from .notification-tabs
 (compact, no panels) for full-page edit/settings layouts that DO render
 MudTabPanel content below. Icon comes from HeroIcons / LucideIcons.

 Used by EditTenant.razor. Reusable for any other multi-tab edit page that
 needs the same "Stripe Settings" feel without the Material pill chrome.

 Typography lives inside .mud-tab .mud-button-label — Mud doesn't surface a
 .mud-typography-* class on tab labels, so this falls under the exception
 list of §Typography (same carve-out as MudButton / MudAvatar).
 ============================================================================ */

.av-page-tabs.mud-tabs,
.av-page-tabs {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  border-bottom: 1px solid var(--color-gray-200);
}

html.dark .av-page-tabs {
  border-bottom-color: var(--color-dark-500);
}

.av-page-tabs .mud-tabs-toolbar,
.av-page-tabs .mud-tabs-toolbar-inner,
.av-page-tabs .mud-tabs-toolbar-content,
.av-page-tabs .mud-tabs-tabbar,
.av-page-tabs .mud-tabs-tabbar-wrapper {
  background: transparent !important;
  border: none !important;
  min-height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.av-page-tabs .mud-tab-slider {
  display: none !important;
}

.av-page-tabs.mud-tabs .mud-tab,
.av-page-tabs .mud-tab {
  padding: 10px 16px !important;
  margin: 0 4px !important;
  min-height: 44px !important;
  border-top: none !important;
  border-right: none !important;
  border-left: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  color: var(--color-gray-600) !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition:
    color 150ms ease,
    border-color 150ms ease !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.av-page-tabs .mud-tab .mud-button-label {
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--font-weight-medium, 500) !important;
  line-height: 1.2 !important;
}

.av-page-tabs.mud-tabs .mud-tab:hover,
.av-page-tabs.mud-tabs .mud-tab:focus,
.av-page-tabs.mud-tabs .mud-tab:focus-visible,
.av-page-tabs.mud-tabs .mud-tab:active,
.av-page-tabs .mud-tab:hover,
.av-page-tabs .mud-tab:focus,
.av-page-tabs .mud-tab:focus-visible,
.av-page-tabs .mud-tab:active {
  color: var(--color-gray-900) !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Icon + text inline (Mud renders them stacked by default) */
.av-page-tabs .mud-tab .mud-tab-icon-text {
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
}

.av-page-tabs .mud-tab .mud-icon-root,
.av-page-tabs .mud-tab .mud-tab-icon {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
}

/* Strip Mud ripples / hover halos */
.av-page-tabs .mud-tab .mud-ripple,
.av-page-tabs .mud-tab .mud-ripple-visual,
.av-page-tabs .mud-tab .mud-ripple-container,
.av-page-tabs .mud-tab::before,
.av-page-tabs .mud-tab::after {
  display: none !important;
  background: transparent !important;
}

.av-page-tabs .mud-tab > *,
.av-page-tabs .mud-tab .mud-tab-icon-text,
.av-page-tabs .mud-tab .mud-button-label,
.av-page-tabs .mud-tab .mud-tab-text-wrapper {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Active tab — color + underline */
.av-page-tabs.mud-tabs .mud-tab.mud-tab-active,
.av-page-tabs.mud-tabs .mud-tab.mud-tab-active:hover,
.av-page-tabs.mud-tabs .mud-tab.mud-tab-active:focus,
.av-page-tabs .mud-tab.mud-tab-active,
.av-page-tabs .mud-tab.mud-tab-active:hover,
.av-page-tabs .mud-tab.mud-tab-active:focus {
  color: var(--color-primary-600) !important;
  border-bottom-color: var(--color-primary-600) !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Disabled tab (e.g. Manager disabled when IsTemplate) */
.av-page-tabs .mud-tab.mud-disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

/* Panel content gets a breath after the underline */
.av-page-tabs .mud-tabs-panels {
  padding-top: 20px;
}

/* Dark mode */
html.dark .av-page-tabs.mud-tabs .mud-tab,
html.dark .av-page-tabs .mud-tab {
  color: var(--color-dark-200) !important;
}

html.dark .av-page-tabs .mud-tab:hover,
html.dark .av-page-tabs .mud-tab:focus {
  color: var(--color-dark-50) !important;
}

html.dark .av-page-tabs.mud-tabs .mud-tab.mud-tab-active,
html.dark .av-page-tabs.mud-tabs .mud-tab.mud-tab-active:hover,
html.dark .av-page-tabs.mud-tabs .mud-tab.mud-tab-active:focus,
html.dark .av-page-tabs .mud-tab.mud-tab-active,
html.dark .av-page-tabs .mud-tab.mud-tab-active:hover,
html.dark .av-page-tabs .mud-tab.mud-tab-active:focus {
  color: var(--color-primary-400) !important;
  border-bottom-color: var(--color-primary-400) !important;
}

/* Mobile (≤640): horizontal scroll instead of wrapping — tabs stay on one line */
@media (max-width: 640px) {
  .av-page-tabs .mud-tabs-toolbar,
  .av-page-tabs .mud-tabs-tabbar,
  .av-page-tabs .mud-tabs-tabbar-wrapper {
    overflow-x: auto !important;
  }

  .av-page-tabs.mud-tabs .mud-tab,
  .av-page-tabs .mud-tab {
    padding: 10px 12px !important;
  }
}

/* ============================================================================
   .av-view-toggle — segmented icon-button group (Grid / Table). Shares the
   visual language of .av-boxed-tabs (gray rounded container + white pill on
   the active button) so the toolbar reads as one family. Two child <button>s
   wrap a MudIcon each; the active one carries `.av-view-toggle__btn--active`.
   No internal divider — the active white pill is the only visual cue.
   ============================================================================ */
.av-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: var(--color-gray-200);
  border-radius: var(--radius-md);
  border: none;
  padding: 3px;
}

html.dark .av-view-toggle {
  background: var(--color-dark-900);
}

.av-view-toggle__btn {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: var(--color-gray-600);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition:
    background 150ms ease,
    color 150ms ease,
    box-shadow 150ms ease;
}

.av-view-toggle__btn:hover {
  color: var(--color-gray-900);
}

.av-view-toggle__btn--active,
.av-view-toggle__btn--active:hover {
  background: var(--color-white);
  color: var(--color-gray-800);
  box-shadow: 0 1px 2px rgb(from var(--color-gray-900) r g b / 0.1);
}

.av-view-toggle__btn .mud-icon-root {
  width: 16px;
  height: 16px;
  font-size: 16px;
  color: inherit;
}

html.dark .av-view-toggle__btn {
  color: var(--color-dark-200);
}

html.dark .av-view-toggle__btn:hover {
  color: var(--color-dark-50);
}

html.dark .av-view-toggle__btn--active,
html.dark .av-view-toggle__btn--active:hover {
  background: var(--surface-2);
  color: var(--color-dark-100);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
}

/* ============================================================================
   Boxed Tabs (.av-boxed-tabs)

   Pill-style tab strip: gray rounded container with each tab as an inline pill;
   active tab fills with white + soft shadow; inactive tabs are transparent and
   only change text color on hover/focus. Mirrors the Tailux "boxed" tab pattern
   (the JSX form is `bg-gray-200 rounded-lg p-1` container + `bg-white shadow-sm`
   per active button).

   Apply as the Class on a <MudTabs> — works alongside MudTabPanel exactly like
   .av-page-tabs (same Mud-internal selectors). Reusable anywhere a compact
   segment-control reads better than an underline tab row: sub-navigation inside
   cards, filter mode switches, list-view selectors.
   ============================================================================ */

.av-boxed-tabs.mud-tabs,
.av-boxed-tabs {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* The gray bar that holds the buttons. Mud names this layer
   `.mud-tabs-toolbar` (outer flex) / `.mud-tabs-tabbar` (inner row) /
   `.mud-tabs-tabbar-inner` (the actual flex row that hosts the .mud-tab
   buttons — Mud sets min-height:48px on this one, so it's the layer that
   makes the pill look tall if we miss it).

   Renders FULL-WIDTH (width: 100%, no rounded corners). When the strip sits
   inside .av-page-card, the card's overflow:hidden + radius:--radius-xl
   clip the top corners cleanly so the strip reads as the card's head. For
   the floating standalone variant (`fit-content` rounded pill from Tailux)
   we'd add a modifier — leaving that as a follow-up if/when needed. */
.av-boxed-tabs .mud-tabs-toolbar,
.av-boxed-tabs .mud-tabs-tabbar,
.av-boxed-tabs .mud-tabs-tabbar-wrapper {
  background: var(--color-gray-200) !important;
  color: var(--color-gray-600);
  border: none !important;
  border-radius: 0 !important;
  padding: 4px !important;
  margin: 0 !important;
  min-height: auto !important;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  box-shadow: none !important;
}

/* tabbar-inner is the actual flex row — Mud hardcodes min-height:48px here.
   Override AND let the .mud-tab paddings drive the final height. */
.av-boxed-tabs .mud-tabs-tabbar-inner,
.av-boxed-tabs .mud-tabs-tabbar-content {
  min-height: auto !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

.av-boxed-tabs .mud-tabs-toolbar::-webkit-scrollbar,
.av-boxed-tabs .mud-tabs-tabbar::-webkit-scrollbar,
.av-boxed-tabs .mud-tabs-tabbar-wrapper::-webkit-scrollbar {
  display: none;
}

html.dark .av-boxed-tabs .mud-tabs-toolbar,
html.dark .av-boxed-tabs .mud-tabs-tabbar,
html.dark .av-boxed-tabs .mud-tabs-tabbar-wrapper {
  background: var(--color-dark-900) !important;
  color: var(--color-dark-200);
}

/* Each tab — pill geometry, transparent at rest, no border. */
.av-boxed-tabs.mud-tabs .mud-tab,
.av-boxed-tabs .mud-tab {
  padding: 6px 12px !important;
  margin: 0 !important;
  min-height: auto !important;
  border: none !important;
  border-radius: var(--radius-lg) !important;
  color: var(--color-gray-600) !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition:
    background-color 150ms ease,
    color 150ms ease,
    box-shadow 150ms ease !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* Pending Transfers tab — brand UserTransfer glyph rendered at a fixed 25px.
   Uses .mud-tab.av-tab-transfers (4 classes) so it outranks the generic
   .av-boxed-tabs .mud-tab .mud-icon-root 18px rule below (3 classes). */
.av-boxed-tabs .mud-tab.av-tab-transfers .mud-icon-root,
.av-boxed-tabs .mud-tab.av-tab-transfers .mud-tab-icon {
  width: 25px !important;
  height: 25px !important;
}

/* Tab count badge (Pending transfers): MudTabPanel's BadgeData overlaps the bottom-right
   corner (default MudBadge origin), which reads as "hanging below" the pill. Lift it to the
   top-right corner instead. Scoped to .av-tab-transfers so no other boxed-tab badge changes. */
.av-boxed-tabs .mud-tab.av-tab-transfers .mud-badge-root .mud-badge {
  top: -18px !important;
  bottom: auto !important;
  margin-left: -12px !important;
}

html.dark .av-boxed-tabs.mud-tabs .mud-tab,
html.dark .av-boxed-tabs .mud-tab {
  color: var(--color-dark-200) !important;
}

/* Hover / focus on an INACTIVE tab — only the text darkens; no background fill
   (that's reserved for the active state). */
.av-boxed-tabs.mud-tabs .mud-tab:hover,
.av-boxed-tabs.mud-tabs .mud-tab:focus,
.av-boxed-tabs.mud-tabs .mud-tab:focus-visible,
.av-boxed-tabs.mud-tabs .mud-tab:active,
.av-boxed-tabs .mud-tab:hover,
.av-boxed-tabs .mud-tab:focus,
.av-boxed-tabs .mud-tab:focus-visible,
.av-boxed-tabs .mud-tab:active {
  color: var(--color-gray-800) !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: none !important;
}

html.dark .av-boxed-tabs .mud-tab:hover,
html.dark .av-boxed-tabs .mud-tab:focus,
html.dark .av-boxed-tabs .mud-tab:focus-visible {
  color: var(--color-dark-100) !important;
}

/* Active tab — white pill, soft shadow, dark text. The hover/focus variants
   are repeated so the active pill never loses its fill when the user mouses
   over or focuses it again. */
.av-boxed-tabs.mud-tabs .mud-tab.mud-tab-active,
.av-boxed-tabs.mud-tabs .mud-tab.mud-tab-active:hover,
.av-boxed-tabs.mud-tabs .mud-tab.mud-tab-active:focus,
.av-boxed-tabs .mud-tab.mud-tab-active,
.av-boxed-tabs .mud-tab.mud-tab-active:hover,
.av-boxed-tabs .mud-tab.mud-tab-active:focus {
  color: var(--color-gray-800) !important;
  background: var(--color-white) !important;
  box-shadow: 0 1px 2px rgb(from var(--color-gray-900) r g b / 0.1) !important;
}

html.dark .av-boxed-tabs.mud-tabs .mud-tab.mud-tab-active,
html.dark .av-boxed-tabs.mud-tabs .mud-tab.mud-tab-active:hover,
html.dark .av-boxed-tabs.mud-tabs .mud-tab.mud-tab-active:focus,
html.dark .av-boxed-tabs .mud-tab.mud-tab-active,
html.dark .av-boxed-tabs .mud-tab.mud-tab-active:hover,
html.dark .av-boxed-tabs .mud-tab.mud-tab-active:focus {
  color: var(--color-dark-100) !important;
  background: var(--surface-2) !important;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.3) !important;
}

/* The boxed design fills the active tab with background, so the underline
   slider Mud draws between tabs has to go. */
.av-boxed-tabs .mud-tab-slider {
  display: none !important;
}

/* Icon + label rendered inline (Mud stacks them by default). 18px icon
   matches the av-page-tabs sibling so the family reads consistent. */
.av-boxed-tabs .mud-tab .mud-tab-icon-text {
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
}

.av-boxed-tabs .mud-tab .mud-icon-root,
.av-boxed-tabs .mud-tab .mud-tab-icon {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
}

/* Strip Mud's ripple + hover halos — the pill's bg + shadow IS the feedback. */
.av-boxed-tabs .mud-tab .mud-ripple,
.av-boxed-tabs .mud-tab .mud-ripple-visual,
.av-boxed-tabs .mud-tab .mud-ripple-container,
.av-boxed-tabs .mud-tab::before,
.av-boxed-tabs .mud-tab::after {
  display: none !important;
  background: transparent !important;
}

/* avalme-legacy.css and avalme.css ship a legacy rule
   `.mud-tabs .mud-tooltip-root.mud-tooltip-inline { margin: 0 4px 10px; }`
   that adds 4 px horizontal + 10 px bottom margin to each MudTabPanel's
   tooltip wrapper. That margin is what pushes the boxed pills apart from
   the gray bar edges and adds extra height at the bottom. Reset it here so
   the boxed strip sits flush with the card and the pills only have the
   internal padding we control. */
.av-boxed-tabs .mud-tabs-tabbar .mud-tooltip-root.mud-tooltip-inline,
.av-boxed-tabs .mud-tabs-tabbar-inner .mud-tooltip-root.mud-tooltip-inline,
.av-boxed-tabs .mud-tooltip-root.mud-tooltip-inline {
  margin: 0 !important;
}

.av-boxed-tabs .mud-tab > *,
.av-boxed-tabs .mud-tab .mud-tab-icon-text,
.av-boxed-tabs .mud-tab .mud-button-label,
.av-boxed-tabs .mud-tab .mud-tab-text-wrapper {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Label typography — same scale as av-page-tabs for visual continuity. */
.av-boxed-tabs .mud-tab .mud-button-label {
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--font-weight-medium, 500) !important;
  line-height: 1.2 !important;
}

/* Disabled — same opacity hint as av-page-tabs */
.av-boxed-tabs .mud-tab.mud-disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

/* Breathing room above the panel content. */
.av-boxed-tabs .mud-tabs-panels {
  padding-top: 16px;
}

/* Overflow navigation (MudBlazor 9.2 tab DOM) — keep Mud's side arrows working.
   The block above forces width:100% + overflow-x:auto on the whole bar, which also
   hits `.mud-tabs-tabbar-wrapper` — the element Mud translateX-es to page the tabs.
   Mud needs it at its natural `width: max-content` (wider than the mask) so the
   arrow paging can slide whole tabs under the `.mud-tabs-tabbar-content` mask.
   Pinning it to 100% breaks that model and clips a tab at the edge. Restore it. */
.av-boxed-tabs .mud-tabs-tabbar-wrapper {
  width: max-content !important;
  max-width: none !important;
  overflow: visible !important;
}
/* The mask that clips the sliding row — must stay hidden for the arrows to reveal
   whole tabs cleanly (it is Mud's default; re-assert it over the bar's overflow). */
.av-boxed-tabs .mud-tabs-tabbar-content {
  overflow: hidden !important;
}

/* When the boxed strip is the FIRST child of .av-page-card it acts as the
   card's head: the gray bar fills width 100 %, hugs the top + side edges of
   the card, and the card's overflow:hidden + radius round its top corners
   automatically. Cancel the card's default top padding (10 px) so the strip
   is flush with the top border — but ONLY when it's the first child. Cards
   that still use .av-page-tabs (underline) keep their top breath because the
   `:has()` selector doesn't match them. */
.av-page-card:has(> .av-boxed-tabs:first-child),
.av-page-card:has(> .mud-tabs.av-boxed-tabs:first-child) {
  padding-top: 0;
}

/* ============================================================================
   Page Card (.av-page-card)

   Reusable page-level card surface — hosts a .av-page-tabs row at the top
   and the panel content below. Consumed by tab-based pages (EditTenant,
   AddTenant, Contacts dashboard, and any future multi-tab
   list / edit / wizard view). Replaces the "floating-on-app-background"
   look with a proper card surface that visually scopes the content.

   Previously named .av-page-card — renamed to .av-page-card so the
   name matches the family (.av-page-header, .av-page-filters, .av-page-card)
   and stops misleading readers into thinking it's edit-only.
   ============================================================================ */

.av-page-card.mud-paper,
.av-page-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  padding: 0;
  padding-top: 10px;
  overflow: hidden;
}

html.dark .av-page-card.mud-paper,
html.dark .av-page-card {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

/* Tab toolbar sits flush with the card top, divider matches card border */
.av-page-card .av-page-tabs {
  padding: 0 12px;
  border-bottom-color: var(--color-gray-200);
}

html.dark .av-page-card .av-page-tabs {
  border-bottom-color: var(--color-dark-500);
}

/* Panel body — generous padding for the form sections */
.av-page-card .mud-tabs-panels {
  padding: 24px;
}

@media (max-width: 640px) {
  .av-page-card .mud-tabs-panels {
    padding: 16px;
  }
}

/* Footer divider + actions row inside the card */
.av-page-card__divider {
  margin: 0 !important;
  border-color: var(--color-gray-200) !important;
}

html.dark .av-page-card__divider {
  border-color: var(--color-dark-500) !important;
}

.av-page-card__actions {
  padding: 16px 24px !important;
  justify-content: flex-end !important;
  background: var(--surface-1);
}

html.dark .av-page-card__actions {
  background: var(--color-dark-750);
}

@media (max-width: 640px) {
  .av-page-card__actions {
    padding: 12px 16px !important;
  }
}

/* Footer (divider + actions) rendered INSIDE a tab panel — used by self-saving
   tab components (Account/Manage: Avatar, Profile, ...) where each tab owns its
   own submit, so the footer can't live at card level like EditTenant. The panel
   adds 24px padding (16px ≤640); this wrapper bleeds out of that padding so the
   divider touches the card edges and the actions bar spans full width, with a
   24px breath above the divider — visually identical to the card-level footer. */
.av-page-card .mud-tabs-panels .av-page-card__footer {
  margin: 24px -24px -24px;
}

@media (max-width: 640px) {
  .av-page-card .mud-tabs-panels .av-page-card__footer {
    margin: 16px -16px -16px;
  }
}

/* Page-level submit/cancel buttons — visually identical to the dialog skin
   (pill outline + pill solid primary) so the editing language stays consistent
   between modal and full-page flows. */
.av-page-card__btn-cancel.mud-button-root,
.av-page-card__btn-action.mud-button-root {
  height: 38px;
  min-width: 7rem;
  padding: 0 18px;
  border-radius: 9999px !important;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: none;
}

.av-page-card__btn-cancel.mud-button-root .mud-button-label,
.av-page-card__btn-action.mud-button-root .mud-button-label {
  font-weight: 500;
}

.av-page-card__btn-cancel.mud-button-root {
  background: transparent;
  border: 1px solid var(--color-gray-300);
  color: var(--color-gray-700);
}

.av-page-card__btn-cancel.mud-button-root:hover {
  background: var(--color-gray-100);
  border-color: var(--color-gray-400);
  box-shadow: none;
}

html.dark .av-page-card__btn-cancel.mud-button-root {
  background: transparent;
  border-color: var(--color-dark-400);
  color: var(--color-dark-100);
}

html.dark .av-page-card__btn-cancel.mud-button-root:hover {
  background: var(--color-dark-600);
}

.av-page-card__btn-action.mud-button-root {
  background: var(--color-primary-600) !important;
  color: var(--color-white) !important;
  border: 1px solid var(--color-primary-600) !important;
}

.av-page-card__btn-action.mud-button-root:hover {
  background: var(--color-primary-700) !important;
  border-color: var(--color-primary-700) !important;
  box-shadow: none;
}

html.dark .av-page-card__btn-action.mud-button-root {
  background: var(--color-primary-500) !important;
  border-color: var(--color-primary-500) !important;
}

html.dark .av-page-card__btn-action.mud-button-root:hover {
  background: var(--color-primary-400) !important;
  border-color: var(--color-primary-400) !important;
}

.av-page-card__btn-cancel.mud-button-root.mud-button-disabled,
.av-page-card__btn-action.mud-button-root.mud-button-disabled,
.av-page-card__btn-cancel.mud-button-root[disabled],
.av-page-card__btn-action.mud-button-root[disabled] {
  opacity: 0.7;
  pointer-events: none;
}

.av-page-card__btn-spinner {
  width: 16px;
  height: 16px;
  margin-right: 8px;
}

/* ============================================================================
 Edit Page Card (.av-edit-page-card)

 Reusable container for multi-tab edit pages (EditTenant, future
 EditContact, EditUser, etc.). Provides the surface that hosts a
 .av-page-tabs row at the top and the panel content below. Replaces the
 "floating-on-app-background" look with a proper card surface that scopes
 the form visually.
 ============================================================================ */

.av-edit-page-card.mud-paper,
.av-edit-page-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  padding: 0;
  padding-top: 10px;
  overflow: hidden;
}

html.dark .av-edit-page-card.mud-paper,
html.dark .av-edit-page-card {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

/* Tab toolbar sits flush with the card top, divider matches card border */
.av-edit-page-card .av-page-tabs {
  padding: 0 12px;
  border-bottom-color: var(--color-gray-200);
}

html.dark .av-edit-page-card .av-page-tabs {
  border-bottom-color: var(--color-dark-500);
}

/* Panel body — generous padding for the form sections */
.av-edit-page-card .mud-tabs-panels {
  padding: 24px;
}

@media (max-width: 640px) {
  .av-edit-page-card .mud-tabs-panels {
    padding: 16px;
  }
}

/* Footer divider + actions row inside the card */
.av-edit-page-card__divider {
  margin: 0 !important;
  border-color: var(--color-gray-200) !important;
}

html.dark .av-edit-page-card__divider {
  border-color: var(--color-dark-500) !important;
}

.av-edit-page-card__actions {
  padding: 16px 24px !important;
  justify-content: flex-end !important;
  background: var(--surface-1);
}

html.dark .av-edit-page-card__actions {
  background: var(--color-dark-750);
}

@media (max-width: 640px) {
  .av-edit-page-card__actions {
    padding: 12px 16px !important;
  }
}

/* Page-level submit/cancel buttons — visually identical to the dialog skin
 (pill outline + pill solid primary) so the editing language stays consistent
 between modal and full-page flows. */
.av-edit-page-card__btn-cancel.mud-button-root,
.av-edit-page-card__btn-action.mud-button-root {
  height: 38px;
  min-width: 7rem;
  padding: 0 18px;
  border-radius: 9999px !important;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: none;
}

.av-edit-page-card__btn-cancel.mud-button-root .mud-button-label,
.av-edit-page-card__btn-action.mud-button-root .mud-button-label {
  font-weight: 500;
}

.av-edit-page-card__btn-cancel.mud-button-root {
  background: transparent;
  border: 1px solid var(--color-gray-300);
  color: var(--color-gray-700);
}

.av-edit-page-card__btn-cancel.mud-button-root:hover {
  background: var(--color-gray-100);
  border-color: var(--color-gray-400);
  box-shadow: none;
}

html.dark .av-edit-page-card__btn-cancel.mud-button-root {
  background: transparent;
  border-color: var(--color-dark-400);
  color: var(--color-dark-100);
}

html.dark .av-edit-page-card__btn-cancel.mud-button-root:hover {
  background: var(--color-dark-600);
}

.av-edit-page-card__btn-action.mud-button-root {
  background: var(--color-primary-600) !important;
  color: var(--color-white) !important;
  border: 1px solid var(--color-primary-600) !important;
}

.av-edit-page-card__btn-action.mud-button-root:hover {
  background: var(--color-primary-700) !important;
  border-color: var(--color-primary-700) !important;
  box-shadow: none;
}

html.dark .av-edit-page-card__btn-action.mud-button-root {
  background: var(--color-primary-500) !important;
  border-color: var(--color-primary-500) !important;
}

html.dark .av-edit-page-card__btn-action.mud-button-root:hover {
  background: var(--color-primary-400) !important;
  border-color: var(--color-primary-400) !important;
}

.av-edit-page-card__btn-cancel.mud-button-root.mud-button-disabled,
.av-edit-page-card__btn-action.mud-button-root.mud-button-disabled,
.av-edit-page-card__btn-cancel.mud-button-root[disabled],
.av-edit-page-card__btn-action.mud-button-root[disabled] {
  opacity: 0.7;
  pointer-events: none;
}

.av-edit-page-card__btn-spinner {
  width: 16px;
  height: 16px;
  margin-right: 8px;
}

/* ============================================================================
 Form sections (.av-form-section)

   Grouped fields inside a form-hosting surface (.av-page-card OR a plain
   page). Each section has an eyebrow title and a responsive 2-column field
   grid. Add a single full-width row with .av-form-section__fields--single.
   ============================================================================
    Grouped fields inside a form-hosting surface (.av-edit-page-card OR a plain page). Each section has an eyebrow title and a responsive 2-column field grid. Add a single full-width row with .av-form-section__fields--single.============================================================================*/
.av-form-sections {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 880px;
  width: 100%;
}

.av-form-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.av-form-section__title.mud-typography {
  color: var(--color-gray-500);
}

html.dark .av-form-section__title.mud-typography {
  color: var(--color-dark-300);
}

.av-form-section__fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px 20px;
}

/* Spans the whole row when a field needs the full width */
.av-form-section__fields > .av-form-section__field--full {
  grid-column: 1 / -1;
}

/* Variant: single-column layout (Address-only sections) */
.av-form-section__fields--single {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 640px) {
  .av-form-section__fields {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
}

/* Optional thin divider between sections (used selectively) */
.av-form-section + .av-form-section {
  padding-top: 24px;
  border-top: 1px solid var(--color-gray-100);
}

html.dark .av-form-section + .av-form-section {
  border-top-color: var(--color-dark-600);
}

/* In-section divider between two sub-groups sharing one card header. */
.av-form-section__divider.mud-divider {
  border-color: var(--color-gray-100);
  margin: 4px 0;
}

html.dark .av-form-section__divider.mud-divider {
  border-color: var(--color-dark-600);
}

/* Header row for a form section (icon + title). Sits above the section body
   with the section's own 12 px gap; the title is rendered as Typo.subtitle2
   in markup so this block only owns the icon color. */
.av-form-section__head .mud-icon-root {
  color: var(--color-gray-500);
}

html.dark .av-form-section__head .mud-icon-root {
  color: var(--color-dark-300);
}

/* ============================================================================
   Form regions (.av-form-region)

   A titled container that groups a set of fields inside a step/form. The
   header shows a leading icon, a title (Typo.h6 in markup) and a short
   description (Typo.body2 in markup); the body holds the fields. Visual
   sibling of .av-crm-vle-card — adds the description line. Header + body are
   fixed paddings so every region reads identically regardless of field count.
   Typography (size/weight/line-height) comes from the Typo.* in markup; this
   block only owns color/layout/spacing per the typography doctrine.
   ============================================================================ */
.av-form-region {
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

html.dark .av-form-region {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

.av-form-region__header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--color-gray-100);
  border-bottom: 1px solid var(--color-gray-200);
}

html.dark .av-form-region__header {
  background: var(--color-dark-600);
  border-bottom-color: var(--color-dark-500);
}

.av-form-region__icon.mud-icon-root {
  color: var(--color-primary-600);
  flex-shrink: 0;
  margin-top: 2px;
}

html.dark .av-form-region__icon.mud-icon-root {
  color: var(--color-primary-400);
}

.av-form-region__heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.av-form-region__title.mud-typography {
  color: var(--color-gray-900);
}

html.dark .av-form-region__title.mud-typography {
  color: var(--color-dark-50);
}

.av-form-region__description.mud-typography {
  color: var(--color-gray-500);
}

html.dark .av-form-region__description.mud-typography {
  color: var(--color-dark-300);
}

.av-form-region__body {
  padding: 16px;
}

/* 3-column row used inside .av-form-fields. Collapses to 1 col below 640 px
   so the form behaves on phones. */
.av-form-row-3 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

@media (max-width: 640px) {
  .av-form-row-3 {
    grid-template-columns: 1fr;
  }
}

/* — Compact adornment icons inside form-section inputs — — — — — — — — — — */
/* Mud renders adornment icons at 24x24 by default which feels heavy inside
 Dense+Outlined inputs. We scale them to 18x18 and dim the color a touch. */

.av-form-section .mud-input-adornment .mud-icon-root,
.av-form-section .mud-input-adornment-end .mud-icon-root,
.av-form-section .mud-input-adornment-start .mud-icon-root {
  width: 18px !important;
  height: 18px !important;
  font-size: 18px !important;
}

.av-form-section .mud-input-adornment-icon-button {
  padding: 4px !important;
}

.av-form-section .mud-input-adornment .mud-icon-default {
  color: var(--color-gray-500);
}

html.dark .av-form-section .mud-input-adornment .mud-icon-default {
  color: var(--color-dark-300);
}

/* PhoneInputIntl visual parity — see canonical section below
   (`.av-phone-input`), which now owns ALL the phone-input styles using
   Avalme tokens (theme-customizer aware). This stub is intentionally empty;
   the old `.phone-input-shrink` / `.phone-margin-*` selectors were retired. */
/* — PhoneInputIntl visual parity with sibling MudTextField (Outlined+Dense) — */
/* The shared phone-input-shrink CSS lives in PhoneInputIntl.razor with mud-palette
 variables. These extras align its outlined border with our Outlined inputs and
 bring the country flag column to the same height as Dense rows. */

/* Force the outlined floating label to the shrunk (floated) position for EVERY phone
 input. intl-tel-input always occupies the field with the flag + dial code (and an auto
 example placeholder), so a resting label would overlap them — the broken look seen when
 the field still has no value. This mirrors Mud's own outlined label shrink transform and
 is scoped to .av-phone-input, so only phone inputs are affected. */
.av-phone-input.mud-input-control .mud-input-label-outlined {
 transform: translate(14px, -6px) scale(0.75) !important;
 background-color: var(--mud-palette-surface);
 padding: 0 4px;
}

.av-form-section .phone-input .iti__tel-input {
  font-size: var(--text-sm) !important;
  line-height: 1.4375 !important;
}

.av-form-section .phone-input.phone-margin-dense .iti__tel-input {
  padding-top: 9px !important;
  padding-bottom: 9px !important;
}

/* The native <input> rendered by intl-tel-input draws its own focus outline
 on top of Mud's outlined border, producing a thicker / darker double border
 compared to sibling MudTextFields. Suppress the native outline so only Mud's
 outlined-border state machine paints the focus ring. */
.av-form-section .phone-input .iti__tel-input:focus,
.av-form-section .phone-input .iti__tel-input:focus-visible,
.av-form-section .phone-input .iti__tel-input:focus-within {
  outline: none !important;
  box-shadow: none !important;
}

/* Same for the intl-tel-input container that sometimes paints a thin border. */
.av-form-section .phone-input .iti {
  outline: none !important;
}

/* ============================================================================
 Address card (.av-address-card)

 Read-only display card for an address, with an inline Edit affordance that
 opens the address picker dialog. Visual parity with the legacy crm-prop-section
 addresses card but rebuilt on top of design tokens — no --mud-palette-* vars,
 no inline font sizes. Typography is owned by Typo.X (overline / body1 / body2).
 ============================================================================ */

.av-address-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  box-shadow: 0 1px 2px rgb(from var(--color-gray-900) r g b / 0.04);
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.av-address-card:hover {
  border-color: var(--color-gray-300);
}

html.dark .av-address-card {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
}

html.dark .av-address-card:hover {
  border-color: var(--color-dark-400);
}

/* Required/validation error state (Bug #985) — red border + inline message when the address
   field is required and missing. Color only; no typography (the message uses Typo.caption). */
.av-address-card--error {
  border-color: var(--color-error);
}

.av-address-card--error:hover {
  border-color: var(--color-error);
}

html.dark .av-address-card--error,
html.dark .av-address-card--error:hover {
  border-color: var(--color-error-lighter);
}

.av-address-card__error {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-error);
}

html.dark .av-address-card__error {
  color: var(--color-error-lighter);
}

.av-address-card__error .mud-typography {
  color: inherit;
}

.av-address-card__error-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.av-address-card__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--color-gray-200);
}

html.dark .av-address-card__head {
  border-bottom-color: var(--color-dark-500);
}

.av-address-card__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: rgb(from var(--color-primary-600) r g b / 0.12);
  color: var(--color-primary-600);
}

.av-address-card__icon .mud-icon-root {
  width: 18px;
  height: 18px;
}

html.dark .av-address-card__icon {
  background: rgb(from var(--color-primary-400) r g b / 0.18);
  color: var(--color-primary-300);
}

.av-address-card__head-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Field grid: City / State / Postal / Country laid out side-by-side (responsive),
 instead of stacked one below another. Wraps to fewer columns on narrow widths. */
.av-address-card__grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
 gap: 12px 20px;
}

.av-address-card__field {
 display: flex;
 flex-direction: column;
 gap: 2px;
 min-width: 0;
}

.av-address-card__field .av-address-card__label.mud-typography {
 color: var(--color-gray-500);
}

html.dark .av-address-card__field .av-address-card__label.mud-typography {
 color: var(--color-dark-300);
}

.av-address-card__field .av-address-card__value.mud-typography {
 color: var(--color-gray-800);
}

html.dark .av-address-card__field .av-address-card__value.mud-typography {
 color: var(--color-dark-50);
}

/* ============================================================================
 Section header icon (lo-section-icon) — GLOBAL

 Tinted square that precedes a card/section title (soft primary background +
 primary-colored icon), as used by Personal/Contact. Promoted from the
 per-section <style> blocks to global scope so EVERY Form section renders the
 same blue-tinted icon, regardless of which section is mounted.
 ============================================================================ */
.lo-section-icon {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 38px;
 height: 38px;
 border-radius: 10px;
 background: rgb(from var(--color-primary-600) r g b / 0.10);
 color: var(--color-primary-600);
 flex-shrink: 0;
}

html.dark .lo-section-icon {
 background: rgb(from var(--color-primary-400) r g b / 0.16);
 color: var(--color-primary-400);
}

.lo-section-icon .mud-icon-root {
 width: 20px;
 height: 20px;
}

.lo-section-icon--sm {
 width: 32px;
 height: 32px;
 border-radius: 8px;
}

.lo-section-icon--sm .mud-icon-root {
 width: 18px;
 height: 18px;
}

.av-address-card__title.mud-typography {
  color: var(--color-gray-900);
}

html.dark .av-address-card__title.mud-typography {
  color: var(--color-dark-50);
}

.av-address-card__hint.mud-typography {
  color: var(--color-gray-600);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

html.dark .av-address-card__hint.mud-typography {
  color: var(--color-dark-200);
}

/* County pill — surfaces the working-jurisdiction metadata in the head so
 users see it before scrolling to the grid. Compact, primary-tinted. */
.av-address-card__county-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 6px;
  margin-top: 6px;
  border-radius: 9999px;
  background: rgb(from var(--color-primary-600) r g b / 0.08);
  color: var(--color-primary-700);
  align-self: flex-start;
  max-width: 100%;
}

.av-address-card__county-pill .mud-icon-root {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.av-address-card__county-pill .mud-typography {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.av-address-card__county-pill .av-address-card__county-label.mud-typography {
  color: var(--color-primary-600);
  margin-right: 2px;
}

.av-address-card__county-pill .av-address-card__county-value.mud-typography {
  color: var(--color-primary-800);
  font-weight: 500;
}

html.dark .av-address-card__county-pill {
  background: rgb(from var(--color-primary-400) r g b / 0.18);
  color: var(--color-primary-200);
}

html.dark
  .av-address-card__county-pill
  .av-address-card__county-label.mud-typography {
  color: var(--color-primary-300);
}

html.dark
  .av-address-card__county-pill
  .av-address-card__county-value.mud-typography {
  color: var(--color-primary-100);
}

/* ============================================================================
 Logo upload — Brand identity tab inside EditTenant

 A two-zone container: a centered preview (rectangle 200×200 with subtle
 border, or dashed empty state when no logo) and a hints column with the
 format / size / dimensions guidance. The BpFileUpload component sits in the
 middle untouched — we just give it a nicer frame.
 ============================================================================ */

.av-logo-upload {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  max-width: 880px;
  width: 100%;
  position: relative;
  /* anchor for the progress bar overlay */
}

@media (max-width: 880px) {
  .av-logo-upload {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}

/* — Preview column — — — — — — — — — — — — — — — — — — — — — — — — — — — */

.av-logo-upload__preview-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.av-logo-upload__preview {
  width: 220px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  background: var(--color-gray-50);
  overflow: hidden;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.av-logo-upload__preview:hover {
  border-color: var(--color-gray-300);
  box-shadow: 0 1px 2px rgb(from var(--color-gray-900) r g b / 0.04);
}

html.dark .av-logo-upload__preview {
  background: var(--color-dark-800);
  border-color: var(--color-dark-500);
}

html.dark .av-logo-upload__preview:hover {
  border-color: var(--color-dark-400);
}

/* Variant: dashed empty drop-zone feel when there's no logo yet */
.av-logo-upload__preview--empty {
  border-style: dashed;
  border-width: 2px;
}

/* MudImage renders an inner <img>. Without explicit sizing the img can render
 as 0×0 inside a flex parent until the image loads, so the preview reads as
 empty. Forcing display:block + max-width/max-height keeps the natural
 aspect ratio while filling the 220×220 frame on load. */
.av-logo-upload__preview img,
.av-logo-upload__preview .mud-image,
.av-logo-upload__preview .mud-image img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Small padding so the logo doesn't kiss the frame edges. */
.av-logo-upload__preview:not(.av-logo-upload__preview--empty) {
  padding: 12px;
}

/* Empty placeholder content (icon + label) */
.av-logo-upload__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  text-align: center;
  color: var(--color-gray-500);
}

.av-logo-upload__empty .mud-icon-root {
  width: 56px;
  height: 56px;
}

html.dark .av-logo-upload__empty {
  color: var(--color-dark-300);
}

.av-logo-upload__empty-title.mud-typography {
  color: var(--color-gray-700);
}

html.dark .av-logo-upload__empty-title.mud-typography {
  color: var(--color-dark-100);
}

.av-logo-upload__empty-hint.mud-typography {
  color: var(--color-gray-500);
  max-width: 200px;
}

html.dark .av-logo-upload__empty-hint.mud-typography {
  color: var(--color-dark-300);
}

/* — Tips column — — — — — — — — — — — — — — — — — — — — — — — — — — — — */

.av-logo-upload__tips {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.av-logo-upload__tips-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.av-logo-upload__tip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0;
  margin: 0;
}

.av-logo-upload__tip-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: rgb(from var(--color-primary-600) r g b / 0.1);
  color: var(--color-primary-600);
  margin-top: 1px;
}

.av-logo-upload__tip-icon .mud-icon-root {
  width: 14px;
  height: 14px;
}

html.dark .av-logo-upload__tip-icon {
  background: rgb(from var(--color-primary-400) r g b / 0.18);
  color: var(--color-primary-300);
}

.av-logo-upload__tip-text {
  flex: 1 1 auto;
  min-width: 0;
}

.av-logo-upload__tip-text .av-logo-upload__tip-label.mud-typography {
  color: var(--color-gray-800);
  display: block;
}

html.dark .av-logo-upload__tip-text .av-logo-upload__tip-label.mud-typography {
  color: var(--color-dark-50);
}

.av-logo-upload__tip-text .av-logo-upload__tip-value.mud-typography {
  color: var(--color-gray-600);
}

html.dark .av-logo-upload__tip-text .av-logo-upload__tip-value.mud-typography {
  color: var(--color-dark-200);
}

/* — Selected file panel (below the tips list, right column) — — — — — — — */

.av-logo-upload__file {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  padding: 12px 14px;
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
}

html.dark .av-logo-upload__file {
  background: var(--color-dark-800);
  border-color: var(--color-dark-500);
}

.av-logo-upload__file-title.mud-typography {
  color: var(--color-gray-500);
}

html.dark .av-logo-upload__file-title.mud-typography {
  color: var(--color-dark-300);
}

.av-logo-upload__file-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
}

.av-logo-upload__file-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.av-logo-upload__file-icon.mud-icon-root {
  width: 14px;
  height: 14px;
  color: var(--color-gray-500);
  flex-shrink: 0;
}

html.dark .av-logo-upload__file-icon.mud-icon-root {
  color: var(--color-dark-300);
}

.av-logo-upload__file-value.mud-typography {
  color: var(--color-gray-800);
  font-family: var(--font-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.dark .av-logo-upload__file-value.mud-typography {
  color: var(--color-dark-100);
}

/* Frame for the BpFileUpload — collapses the component's default heavy
 spacing into something that lives nicely below the preview. */
.av-logo-upload__uploader {
  width: 100%;
  max-width: 320px;
  display: flex;
  justify-content: center;
}

.av-logo-upload__uploader .mud-list-item {
  padding-top: 0;
  padding-bottom: 0;
}

/* Progress bar — sits directly below the preview frame, matching its width.
 Only visible while an upload is in flight (HideProgressBarWhenIdle="true"
 on the BpFileUpload). Lives inline in the preview-col flex stack — no
 absolute positioning so it never overlaps the toolbar above. */
.av-logo-upload .bp-file-upload-progress.mud-progress-linear {
  width: 220px;
  margin: -8px auto 4px !important;
  /* pull up a touch so it kisses the preview */
  height: 6px !important;
  border-radius: 9999px !important;
  overflow: hidden;
}

.av-logo-upload
  .bp-file-upload-progress.mud-progress-linear
  .mud-progress-linear-bar {
  background: var(--color-primary-600) !important;
}

html.dark .av-logo-upload .bp-file-upload-progress.mud-progress-linear {
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.4);
}

html.dark
  .av-logo-upload
  .bp-file-upload-progress.mud-progress-linear
  .mud-progress-linear-bar {
  background: var(--color-primary-400) !important;
}

/* — Uploader buttons (Upload / Clear / Remove) styled with the new tokens.
 We don't touch the BpFileUpload component to keep its 12+ other call-sites
 intact; instead we override its Mud buttons only when they live inside
 .av-logo-upload__uploader. */

.av-logo-upload__uploader .mud-button-root {
  border-radius: 9999px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 6px 16px !important;
  min-height: 36px !important;
  box-shadow: none !important;
  margin: 0 4px !important;
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    color 150ms ease;
}

.av-logo-upload__uploader .mud-button-root .mud-button-label {
  font-weight: 500;
}

/* Upload logo button — primary outlined */
.av-logo-upload__uploader .mud-button-root.mud-button-outlined-primary {
  color: var(--color-primary-600) !important;
  border: 1px solid var(--color-primary-200) !important;
  background: rgb(from var(--color-primary-600) r g b / 0.04) !important;
}

.av-logo-upload__uploader .mud-button-root.mud-button-outlined-primary:hover {
  background: rgb(from var(--color-primary-600) r g b / 0.1) !important;
  border-color: var(--color-primary-300) !important;
}

html.dark
  .av-logo-upload__uploader
  .mud-button-root.mud-button-outlined-primary {
  color: var(--color-primary-300) !important;
  border-color: rgb(from var(--color-primary-400) r g b / 0.35) !important;
  background: rgb(from var(--color-primary-400) r g b / 0.06) !important;
}

html.dark
  .av-logo-upload__uploader
  .mud-button-root.mud-button-outlined-primary:hover {
  background: rgb(from var(--color-primary-400) r g b / 0.14) !important;
  border-color: var(--color-primary-400) !important;
}

/* Clear button — error outlined */
.av-logo-upload__uploader .mud-button-root.mud-button-outlined-error {
  color: var(--color-error) !important;
  border: 1px solid rgb(from var(--color-error) r g b / 0.32) !important;
  background: transparent !important;
}

.av-logo-upload__uploader .mud-button-root.mud-button-outlined-error:hover {
  background: rgb(from var(--color-error) r g b / 0.08) !important;
  border-color: var(--color-error) !important;
}

/* Remove / cancel button — warning outlined */
.av-logo-upload__uploader .mud-button-root.mud-button-outlined-warning {
  color: var(--color-warning) !important;
  border: 1px solid rgb(from var(--color-warning) r g b / 0.32) !important;
  background: transparent !important;
}

.av-logo-upload__uploader .mud-button-root.mud-button-outlined-warning:hover {
  background: rgb(from var(--color-warning) r g b / 0.08) !important;
  border-color: var(--color-warning) !important;
}

/* The BpFileUpload uses MudButton with HtmlTag="label" and the ma-2 utility.
 Reset the extra margin so our spacing rules win. */
.av-logo-upload__uploader .ma-2 {
  margin: 0 4px !important;
}

/* Inline file-info list rendered after a successful pick — make it compact
 and align with the rest of the card. */
.av-logo-upload__uploader .mud-list-item .mud-list-item-icon {
  min-width: 24px !important;
}

.av-logo-upload__uploader .mud-list-item .mud-icon-root {
  width: 14px !important;
  height: 14px !important;
}

.av-logo-upload__uploader .mud-list-item code {
  font-size: var(--text-xs);
  color: var(--color-gray-700);
  background: transparent;
  padding: 0;
}

html.dark .av-logo-upload__uploader .mud-list-item code {
  color: var(--color-dark-200);
}

/* ============================================================================
 Added services summary (.av-services-summary)

 Pill-list of services currently attached to the tenant. Shown above the
 selector table so the admin sees the working selection at a glance.
 Inactive services get a danger-tint accent badge.
 ============================================================================ */

.av-services-summary {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 20px;
  background: rgb(from var(--color-primary-600) r g b / 0.04);
  border: 1px solid rgb(from var(--color-primary-600) r g b / 0.18);
  border-radius: var(--radius-xl);
}

html.dark .av-services-summary {
  background: rgb(from var(--color-primary-400) r g b / 0.08);
  border-color: rgb(from var(--color-primary-400) r g b / 0.24);
}

.av-services-summary__head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.av-services-summary__icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: rgb(from var(--color-primary-600) r g b / 0.12);
  color: var(--color-primary-700);
}

.av-services-summary__icon .mud-icon-root {
  width: 16px;
  height: 16px;
}

html.dark .av-services-summary__icon {
  background: rgb(from var(--color-primary-400) r g b / 0.2);
  color: var(--color-primary-200);
}

.av-services-summary__count.mud-typography {
  color: var(--color-primary-700);
}

html.dark .av-services-summary__count.mud-typography {
  color: var(--color-primary-200);
}

.av-services-summary__label.mud-typography {
  color: var(--color-gray-600);
}

html.dark .av-services-summary__label.mud-typography {
  color: var(--color-dark-200);
}

.av-services-summary__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.av-services-summary__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 3px 2px 10px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 9999px;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease;
  line-height: 1;
}

.av-services-summary__chip:hover {
  border-color: var(--color-gray-300);
  box-shadow: 0 1px 2px rgb(from var(--color-gray-900) r g b / 0.04);
}

html.dark .av-services-summary__chip {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

html.dark .av-services-summary__chip:hover {
  border-color: var(--color-dark-400);
}

.av-services-summary__chip-icon {
  width: 13px;
  height: 13px;
  color: var(--color-primary-600);
  flex-shrink: 0;
}

html.dark .av-services-summary__chip-icon {
  color: var(--color-primary-300);
}

.av-services-summary__chip-name.mud-typography {
  color: var(--color-gray-800);
  line-height: 1.1;
  font-size: var(--text-xs-plus);
}

html.dark .av-services-summary__chip-name.mud-typography {
  color: var(--color-dark-50);
}

.av-services-summary__chip-deactivated.mud-typography {
  color: var(--color-error);
  margin-left: 2px;
  font-style: italic;
  line-height: 1.1;
}

.av-services-summary__chip-remove.mud-icon-button {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center;
  line-height: 0 !important;
  border-radius: 9999px;
  color: var(--color-gray-500);
  background: transparent;
  margin-left: 2px;
}

.av-services-summary__chip-remove.mud-icon-button .mud-icon-button-label {
  line-height: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.av-services-summary__chip-remove.mud-icon-button:hover {
  background: rgb(from var(--color-error) r g b / 0.1);
  color: var(--color-error);
}

.av-services-summary__chip-remove.mud-icon-button .mud-icon-root {
  width: 11px !important;
  height: 11px !important;
}

html.dark .av-services-summary__chip-remove.mud-icon-button {
  color: var(--color-dark-300);
}

html.dark .av-services-summary__chip-remove.mud-icon-button:hover {
  background: rgb(from var(--color-error) r g b / 0.18);
  color: var(--color-error);
}

/* ============================================================================
 Empty-state panel (.av-empty-state)

 Reusable "nothing here yet" surface — icon disc + title + description +
 optional action button. Used as <NoRecordsContent> for MudTable, but also
 stands alone in cards/sections. The --compact modifier tightens vertical
 rhythm for in-table use.
 ============================================================================ */

.av-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 48px 24px;
  text-align: center;
}

.av-empty-state--compact {
  gap: 12px;
  padding: 32px 16px;
}

.av-empty-state__icon-wrap {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-gray-100);
  color: var(--color-gray-500);
}

.av-empty-state--compact .av-empty-state__icon-wrap {
  width: 48px;
  height: 48px;
}

html.dark .av-empty-state__icon-wrap {
  background-color: var(--color-dark-700);
  color: var(--color-dark-300);
}

.av-empty-state__icon.mud-icon-root {
  width: 28px !important;
  height: 28px !important;
  font-size: 28px !important;
}

.av-empty-state--compact .av-empty-state__icon.mud-icon-root {
  width: 22px !important;
  height: 22px !important;
  font-size: 22px !important;
}

.av-empty-state__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 360px;
}

.av-empty-state__title.mud-typography {
  color: var(--color-gray-800);
}

html.dark .av-empty-state__title.mud-typography {
  color: var(--color-dark-100);
}

.av-empty-state__description.mud-typography {
  color: var(--color-gray-500);
}

html.dark .av-empty-state__description.mud-typography {
  color: var(--color-dark-300);
}

.av-empty-state__action.mud-button-root {
  margin-top: 4px;
}

/* ============================================================================
 Guía Visual-style table (.av-tailux-table)

 Drop-in skin for MudTable that mimics the look of the Guía Visual ProductsTable:
 card wrapper, gray-100 head row with uppercase font-semibold cells, rounded
 corners on the first/last header column, hairline row dividers, hover tint,
 pill-shaped pagination at the bottom.
 ============================================================================ */

.av-tailux-table.mud-table,
.av-tailux-table .mud-table {
  background: transparent !important;
  box-shadow: none !important;
  /* Hairline outer border so the table reads as a bounded card even when
       it isn't wrapped in `.av-table-card`. When it IS wrapped, the override
       further down removes this border to avoid a double-line. */
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

html.dark .av-tailux-table.mud-table,
html.dark .av-tailux-table .mud-table {
  border-color: var(--color-dark-500);
}

/* Suppress the inner table border when wrapped in `.av-table-card` — the
   card already paints the outer 1 px line and corners, so the inner border
   would read as a double rule. */
.av-table-card .av-tailux-table.mud-table,
.av-table-card .av-tailux-table .mud-table {
  border: 0;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.av-tailux-table .mud-table-container {
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  overflow: hidden;
}

/* Header row */
.av-tailux-table .mud-table-head {
  background: var(--color-gray-200);
}

html.dark .av-tailux-table .mud-table-head {
  background: var(--color-dark-800);
}

.av-tailux-table .mud-table-head .mud-table-cell {
  color: var(--color-gray-800) !important;
  background-color: var(--color-gray-200) !important;
  border-bottom: 1px solid var(--color-gray-200) !important;
  padding: 12px 16px !important;
}

html.dark .av-tailux-table .mud-table-head .mud-table-cell {
  color: var(--color-dark-100) !important;
  background-color: var(--color-dark-800) !important;
  border-bottom-color: var(--color-dark-500) !important;
}

.av-tailux-table .mud-table-head .mud-table-cell,
.av-tailux-table .mud-table-head .mud-table-sort-label,
.av-tailux-table .mud-table-head .mud-table-cell .mud-button-label {
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

/* Logical radius so the rounded header corners follow the leading/trailing
   edge and flip correctly under RTL (first cell is on the right there). */
.av-tailux-table .mud-table-head .mud-table-cell:first-child {
  border-start-start-radius: var(--radius-xl);
}

.av-tailux-table .mud-table-head .mud-table-cell:last-child {
  border-start-end-radius: var(--radius-xl);
}

/* Body rows */
.av-tailux-table .mud-table-body .mud-table-row {
  transition: background-color 120ms ease;
  position: relative;
}

/* Selected row — Tailux courses-datatable pattern: tinted background +
   left-edge accent stripe with mitered top/bottom corners (the small triangle
   cuts come from the CSS border miter — 3px transparent border on top/right/
   bottom + 3px primary on the left, painted via ::after).

   Applied via RowClassFunc on MudTable when the row's id is in the
   SelectedContacts set. */
.av-tailux-table .mud-table-body .mud-table-row.av-tailux-row--selected {
  background: rgb(from var(--color-primary-500) r g b / 0.10) !important;
}

.av-tailux-table .mud-table-body .mud-table-row.av-tailux-row--selected:hover {
  background: rgb(from var(--color-primary-500) r g b / 0.1) !important;
}

.av-tailux-table .mud-table-body .mud-table-row.av-tailux-row--selected::after {
  content: "";
  pointer-events: none;
  position: absolute;
  /* bottom: 1px keeps the cell's gray-200 bottom-border visible — the
       inter-row divider must stay readable when several rows are selected
       in a row, otherwise the block looks like one continuous tint. */
  inset: 0 0 1px 0;
  z-index: 2;
  box-sizing: border-box;
  border: 3px solid transparent;
  border-left-color: var(--color-primary-600);
}

html.dark
  .av-tailux-table
  .mud-table-body
  .mud-table-row.av-tailux-row--selected {
  background: rgb(from var(--color-primary-400) r g b / 0.12) !important;
}

html.dark
  .av-tailux-table
  .mud-table-body
  .mud-table-row.av-tailux-row--selected:hover {
  background: rgb(from var(--color-primary-400) r g b / 0.18) !important;
}

html.dark
  .av-tailux-table
  .mud-table-body
  .mud-table-row.av-tailux-row--selected::after {
  border-left-color: var(--color-primary-400);
}

.av-tailux-table .mud-table-body .mud-table-cell {
  color: var(--color-gray-800) !important;
  font-size: var(--text-sm) !important;
  padding: 12px 16px;
  /* gray-200 (NOT gray-100) so the inter-row divider stays perceptible
       when the row is tinted by av-tailux-row--selected (primary-500/6%).
       gray-100 was washing out against the tint and the row read as one
       continuous block. Matches Tailux's `border-b-gray-200` on the <tr>. */
  border-bottom: 1px solid var(--color-gray-200) !important;
  transition: background-color 120ms ease;
}

.av-tailux-table .mud-table-body .mud-table-cell {
  color: var(--color-gray-800) !important;
  font-size: var(--text-sm) !important;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-gray-100) !important;
}

/* When MudTable Dense="true", Mud applies .mud-table-dense to the table.
 Tighten cell padding so the dense toggle in the View menu actually visualises. */
.av-tailux-table.mud-table-dense .mud-table-body .mud-table-cell,
.av-tailux-table.mud-table-dense .mud-table-head .mud-table-cell {
  padding: 6px 12px !important;
}

/* Bordered + Striped toggles (View menu) — para consumidores de av-tailux-table
 que expongan los params Bordered/Striped (ej. Borrowers). Mud pinta las celdas
 con bg surface opaco, así que el striped va sobre las celdas (> .mud-table-cell)
 de las filas impares; bordered pinta border-right entre celdas. Solo aplican
 cuando .mud-table-bordered / .mud-table-striped están presentes. */
.av-tailux-table.mud-table-bordered
  .mud-table-container
  .mud-table-root
  .mud-table-body
  .mud-table-row
  .mud-table-cell:not(:last-child) {
  border-right: 1px solid var(--color-gray-200);
}

html.dark
  .av-tailux-table.mud-table-bordered
  .mud-table-container
  .mud-table-root
  .mud-table-body
  .mud-table-row
  .mud-table-cell:not(:last-child) {
  border-right-color: var(--color-dark-600);
}

.av-tailux-table.mud-table-striped
  .mud-table-container
  .mud-table-root
  .mud-table-body
  .mud-table-row:nth-of-type(odd)
  > .mud-table-cell {
  background-color: var(--color-gray-100);
}

html.dark
  .av-tailux-table.mud-table-striped
  .mud-table-container
  .mud-table-root
  .mud-table-body
  .mud-table-row:nth-of-type(odd)
  > .mud-table-cell {
  background-color: var(--color-dark-800);
}

/* Narrow column used for the Status switch — width follows content (1px collapses
 to the switch's intrinsic size) and the right padding tightens so the next
 column (Name) sits visually close to the toggle. */
.av-tailux-table .av-col-status {
  width: 1px;
  white-space: nowrap;
  padding-right: 4px !important;
  padding-left: 16px !important;
}

.av-tailux-table.mud-table-dense .av-col-status {
  padding-right: 4px !important;
  padding-left: 12px !important;
}

html.dark .av-tailux-table .mud-table-body .mud-table-cell {
  /* Matches Tailux `dark:border-b-dark-500`; dark-600 was too close to the
       row's selected-state tint and the divider disappeared. */
  color: var(--color-dark-100) !important;
  border-bottom-color: var(--color-dark-600) !important;
}

/* Last row — no bottom border, otherwise it doubles up with the pager strip
 and reads as a stray gray line floating above the pagination. */
.av-tailux-table .mud-table-body .mud-table-row:last-child .mud-table-cell {
  border-bottom: 0 !important;
}

/* MudCheckBox inside cells — let Mud render it natively (its own svg + ripple).
 No overrides on .mud-checkbox / .mud-icon-button so the checkbox box stays
 visible. The earlier overrides accidentally hid the box pseudo-element. */

.av-tailux-table .mud-table-body .mud-table-row {
  position: relative;
}

.av-tailux-table .mud-table-body .mud-table-row:hover {
  background: var(--color-gray-200) !important;
}

html.dark .av-tailux-table .mud-table-body .mud-table-row:hover {
  background: var(--color-dark-600) !important;
}

/* The row-level rule above is not enough on its own: Mud paints .mud-table-cell
   with an opaque surface background, so the <tr> tint is covered and the hover
   reads as nothing. Repeating it on the cells is what makes the highlight span
   the FULL row — the same reason the striped modifier further up targets cells.

   Two rows are excluded on purpose:
     · the group header (:has(> .av-tailux-group)) — a divider, not an actionable row;
     · the selected row — it carries its own tint through an ::after overlay, and a
       cell background would sit on top of it and erase the selection cue. */
.av-tailux-table
  .mud-table-body
  .mud-table-row:hover:not(.av-tailux-row--selected):not(.av-row--selected):not(
    :has(> .av-tailux-group)
  )
  > .mud-table-cell {
  background: var(--color-gray-100);
}

html.dark
  .av-tailux-table
  .mud-table-body
  .mud-table-row:hover:not(.av-tailux-row--selected):not(.av-row--selected):not(
    :has(> .av-tailux-group)
  )
  > .mud-table-cell {
  background: var(--color-dark-600);
}

/* Selected-row indicator — replicates the Guía Visual ProductsTable pattern:
 an absolutely-positioned ::after overlay tinted with primary/10 and a 3px
 left border in primary-500. Requires the row to be positioned. */

.av-tailux-table .mud-table-body .mud-table-row.av-row--selected::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  border-left: 3px solid var(--color-primary-500);
  background: rgb(from var(--color-primary-500) r g b / 0.1);
}

html.dark
  .av-tailux-table
  .mud-table-body
  .mud-table-row.av-row--selected::after {
  border-left-color: var(--color-primary-400);
  background: rgb(from var(--color-primary-400) r g b / 0.14);
}

/* The cell content must stay above the overlay so checkboxes / text remain
 clickable and visible through the tint. */
.av-tailux-table
  .mud-table-body
  .mud-table-row.av-row--selected
  > .mud-table-cell {
  position: relative;
  z-index: 3;
  background: transparent !important;
}

/* Row-level action group: a horizontal cluster of MudIconButton at the end
 of a row. Tight spacing so the actions read as a single unit per row. */
.av-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
}

/* Width / alignment utilities for table header + cell sizing. Replace
   `Style="width: ...; text-align: ..."` inline attributes which violate the
   "no inline Style=" rule and aren't reusable. */
.av-col-checkbox {
  width: 40px;
  padding-right: 0 !important;
}

/* Header checkbox (th): drop the trailing padding so it hugs the next column.
   Scoped with .mud-table-cell to outrank MudBlazor's own cell padding. Applies to
   every table using .av-col-checkbox (contacts, leads, …). */
th.mud-table-cell.av-col-checkbox,
th.av-col-checkbox,
th.av-col-checkbox .av-checkbox-host--error,
th.av-col-checkbox .mud-checkbox {
  padding-right: 0px !important;
}

.av-col-actions {
  width: 180px;
  text-align: right;
}

.av-cell-actions {
  text-align: right;
}

/* Contacts table — center the Actions column (header + cell) and shrink its icons
   to 14px, matching the leads-list treatment. */
.av-actions-center {
  text-align: center !important;
}

.av-row-actions--sm {
  justify-content: center !important;
}

.av-row-actions--sm .mud-icon-root {
  width: 14px !important;
  height: 14px !important;
  font-size: 14px !important;
}

/* Kebab (three dots) needs to stay legible — a bit larger than the row icons. */
.av-row-actions--sm .av-kebab-icon .mud-icon-root {
  width: 20px !important;
  height: 20px !important;
  font-size: 20px !important;
}

/* .av-col-center / .av-cell-center — centre a column. Use them as a PAIR, header
   plus cells, so the column keeps header and data on one axis (the house rule);
   applying only one of the two leaves the title on a different axis than the
   value it names.
   Reach for them on columns whose content has no reading direction — a status
   chip, a presence dot, a switch, an action cluster. Text columns (a name, an
   email) stay left-aligned.
   Declared after .av-col-actions / .av-cell-actions so they win the tie when
   composed on the same cell (equal specificity — source order decides). */
.av-col-center,
.av-cell-center {
  text-align: center !important;
}

/* MudTableSortLabel renders as an inline-flex button, so text-align alone does
   not move it; the flex axis has to be centred too. */
.av-col-center .mud-table-sort-label {
  justify-content: center;
  width: 100%;
}

/* The row-action cluster is inline-flex with a flex-end axis of its own; it is
   shrink-to-fit, so the cell's text-align does centre it, but the inner axis is
   reset too for the case where a consumer stretches it. */
.av-cell-center .av-row-actions {
  justify-content: center;
}

/* `Style="width: ...; text-align: ..."` inline attributes which violate the
 "no inline Style=" rule and aren't reusable. */
/* .av-col-checkbox { width: 56px; }
.av-col-actions { width: 120px; text-align: right; } */

/* ============================================================================
   .av-bulk-toolbar — floating dark pill at the bottom-right of the viewport,
   visible whenever one or more rows are selected in a table. Mirrors the
   Tailux courses-datatable bulk-action panel: count + Delete (Color.Error) +
   secondary actions (Export, Deselect). The fixed positioning keeps it in
   view as the user scrolls through the table.
   ============================================================================ */
.av-bulk-toolbar.mud-paper {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 12px 8px 20px;
  background: var(--color-gray-900);
  color: var(--color-white);
  border: 1px solid var(--color-gray-800);
  border-radius: var(--radius-md);
  box-shadow:
    0 10px 30px -8px rgb(0 0 0 / 0.35),
    0 4px 12px -4px rgb(0 0 0 / 0.2);
  min-width: 320px;
  max-width: calc(100vw - 48px);
}

html.dark .av-bulk-toolbar.mud-paper {
  background: var(--color-dark-800);
  border-color: var(--color-dark-700);
}

.av-bulk-toolbar__count.mud-typography {
  color: var(--color-white);
  font-weight: 500;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
}

html.dark .av-bulk-toolbar__count.mud-typography {
  color: var(--color-dark-50);
}

.av-bulk-toolbar__actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Secondary outlined toolbar button — pair to `av-table-card__btn`.
 Same rounded-full shape and height, transparent fill, gray-300 border. */

.av-table-card__btn-secondary.mud-button-root {
  background: transparent;
  color: var(--color-gray-700);
  border: 1px solid var(--color-gray-300);
  text-transform: none;
  letter-spacing: 0;
  border-radius: var(--radius-md);
  height: 32px;
  min-width: 0;
  padding: 0 12px;
  box-shadow: none;
}

.av-table-card__btn-secondary.mud-button-root .mud-button-label {
  font-weight: 500;
  font-size: var(--text-xs);
}

.av-table-card__btn-secondary.mud-button-root .mud-icon-root {
  width: 16px;
  height: 16px;
}

.av-table-card__btn-secondary.mud-button-root:hover {
  background: var(--color-gray-100);
  border-color: var(--color-gray-400);
  box-shadow: none;
}

html.dark .av-table-card__btn-secondary.mud-button-root {
  background: transparent;
  border-color: var(--color-dark-400);
  color: var(--color-dark-100);
}

html.dark .av-table-card__btn-secondary.mud-button-root:hover {
  background: var(--color-dark-600);
  border-color: var(--color-dark-300);
}

/* Override the av-table-card__btn-secondary lightness so it reads on the
   dark toolbar bg — white pill with dark text. Variant for the secondary
   actions (Export, More, etc.) inside the toolbar. */
.av-bulk-toolbar
  .av-table-card__btn-secondary.mud-button-root:not(.mud-icon-button):not(
    .mud-fab
  ) {
  background: var(--color-white) !important;
  color: var(--color-gray-900) !important;
  border-color: var(--color-white) !important;
}

.av-bulk-toolbar
  .av-table-card__btn-secondary.mud-button-root:not(.mud-icon-button):not(
    .mud-fab
  ):hover {
  background: var(--color-gray-100) !important;
  color: var(--color-gray-900) !important;
}

/* Primary destructive action (Delete, Filled + Error). MudBlazor's default
   .mud-button-label is uppercase; restore sentence case + zero tracking so it
   matches the canonical button typography (Typo.button: text-transform: none). */
.av-bulk-toolbar
  .mud-button-root.mud-button-filled.mud-button-filled-error
  .mud-button-label {
  text-transform: none;
  letter-spacing: 0;
}

/* Trailing close button to the right of the actions — white icon, no bg. */
.av-bulk-toolbar .mud-icon-button {
  color: var(--color-white) !important;
}

.av-bulk-toolbar .mud-icon-button:hover {
  background: rgb(from var(--color-white) r g b / 0.1) !important;
}

/* Slide-up entrance animation when the bulk toolbar appears. */
.av-bulk-toolbar.mud-paper {
  animation: av-bulk-toolbar-in 180ms ease-out;
}

@keyframes av-bulk-toolbar-in {
  from {
    transform: translateY(12px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Pagination footer that sits at the bottom of the .av-table-card. */
.av-table-card__pagination {
  padding: 12px 16px;
}

/* Primary cell: avatar + name + subtitle (NameCell-like) */
.av-tailux-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.av-tailux-cell__avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgb(from var(--color-primary-600) r g b / 0.1);
  color: var(--color-primary-600);
  flex-shrink: 0;
}

.av-tailux-cell__avatar .mud-icon-root {
  width: 18px;
  height: 18px;
}

html.dark .av-tailux-cell__avatar {
  background: rgb(from var(--color-primary-400) r g b / 0.16);
  color: var(--color-primary-300);
}

.av-tailux-cell__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.av-tailux-cell__name.mud-typography {
  color: var(--color-gray-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Leads table — Source cell: 14px icon, aligned with the label. */
.av-lead-source-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.av-lead-source-cell__icon.mud-icon-root {
  width: 14px !important;
  height: 14px !important;
  font-size: 14px !important;
  flex-shrink: 0;
}

/* Leads table — Actions cell: right-aligned (matches the ACTIONS header) with 14px icons. */
.av-lead-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.av-lead-actions .mud-icon-root {
  width: 14px !important;
  height: 14px !important;
  font-size: 14px !important;
}

html.dark .av-tailux-cell__name.mud-typography {
  color: var(--color-dark-50);
}

/* White "surface" tooltip — used for the truncated contact-name full-name popover.
   The popover is portaled to body and MudTooltip's Class doesn't reach it, so we hook via
   Color="Color.Surface" → .mud-theme-surface (the only reliable per-instance skin path). */
.mud-tooltip.mud-theme-surface {
  background-color: var(--color-white) !important;
  color: var(--color-gray-800) !important;
  border: 1px solid var(--color-gray-200) !important;
  box-shadow: 0 8px 24px -8px rgba(16, 22, 30, 0.28), 0 2px 6px -2px rgba(16, 22, 30, 0.14) !important;
  max-width: 360px;
}

html.dark .mud-tooltip.mud-theme-surface {
  background-color: var(--color-dark-700) !important;
  color: var(--color-dark-50) !important;
  border-color: var(--color-dark-500) !important;
}

.av-tailux-cell__sub.mud-typography {
  color: var(--color-gray-500);
}

html.dark .av-tailux-cell__sub.mud-typography {
  color: var(--color-dark-300);
}

/* Pager — Guía Visual-style. The PagerContent slot now hosts a MudPagination + info
 text (see EditTenant.razor) so we can paint numbered page controls inside a
 single rounded gray pill, exactly like the Guía Visual .pagination pattern. The
 MudTablePager fallback styling below is kept for any non-customized table. */
.av-tailux-table .mud-table-pagination,
.av-tailux-table .mud-table-pagination-toolbar {
  background: transparent;
  border: 0 !important;
  padding: 12px 20px !important;
  min-height: 56px !important;
}

/* ===========================================================================
   Pagination — app-wide pagination control (base skin)
   Used by Shared/Pagination/Pagination.razor for any table / list with a
   1-based CurrentPage + PageSize + TotalCount tuple. Visual baseline: flat
   solid primary pill for the active page, no ripple / focus halo (buttons are
   rendered via MudElement HtmlTag="button" so MudButton's two-tone overlay
   does not apply).
   NOTE: restored from commit 68dc9a9b9 — the base block was dropped by the
   V8 CSS restore in 35b04f738; only the :has() / .av-crm-*-pagination
   overrides survived, leaving the component unstyled.
   =========================================================================== */

.av-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 1rem;
    border-top: 1px solid var(--color-gray-200);
}

html.dark .av-pagination {
    border-top-color: var(--color-dark-500);
}

.av-pagination__info.mud-typography {
    color: var(--color-gray-600);
}

html.dark .av-pagination__info.mud-typography {
    color: var(--color-dark-200);
}

.av-pagination__controls {
    display: flex;
    align-items: center;
    gap: 4px;
}

.av-pagination__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    background: var(--color-white);
    color: var(--color-gray-600);
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.av-pagination__btn:hover:not(:disabled) {
    background: var(--color-gray-100);
    border-color: var(--color-gray-300);
    color: var(--color-gray-900);
}

.av-pagination__btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.av-pagination__btn .mud-icon-root {
    width: 16px;
    height: 16px;
}

html.dark .av-pagination__btn {
    background: var(--color-dark-700);
    border-color: var(--color-dark-500);
    color: var(--color-dark-200);
}

html.dark .av-pagination__btn:hover:not(:disabled) {
    background: var(--color-dark-600);
    border-color: var(--color-dark-400);
    color: var(--color-dark-50);
}

.av-pagination__numbers {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 4px;
}

.av-pagination__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    background: var(--color-white);
    color: var(--color-gray-600);
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.av-pagination__num:hover:not(.av-pagination__num--active) {
    background: var(--color-gray-100);
    border-color: var(--color-gray-300);
    color: var(--color-gray-900);
}

.av-pagination__num--active {
    background: var(--color-primary-600);
    border-color: var(--color-primary-600);
    color: var(--color-white);
    cursor: default;
}

.av-pagination__num--active:hover {
    background: var(--color-primary-600);
    border-color: var(--color-primary-600);
    color: var(--color-white);
}

html.dark .av-pagination__num {
    background: var(--color-dark-700);
    border-color: var(--color-dark-500);
    color: var(--color-dark-200);
}

html.dark .av-pagination__num:hover:not(.av-pagination__num--active) {
    background: var(--color-dark-600);
    border-color: var(--color-dark-400);
    color: var(--color-dark-50);
}

html.dark .av-pagination__num--active {
    background: var(--color-primary-500);
    border-color: var(--color-primary-500);
    color: var(--color-white);
}

html.dark .av-pagination__num--active:hover {
    background: var(--color-primary-500);
    border-color: var(--color-primary-500);
    color: var(--color-white);
}

.av-pagination__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--color-gray-400);
}

html.dark .av-pagination__ellipsis {
    color: var(--color-dark-300);
}

.av-pagination__size {
    display: flex;
    align-items: center;
    gap: 8px;
}

.av-pagination__size .mud-typography {
    color: var(--color-gray-600);
}

html.dark .av-pagination__size .mud-typography {
    color: var(--color-dark-200);
}

.av-pagination__select {
    width: 80px;
    min-width: 80px;
}

@media (max-width: 640px) {
    .av-pagination {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .av-pagination__controls {
        justify-content: center;
    }

    .av-pagination__size {
        justify-content: center;
    }

    .av-pagination__numbers {
        display: none;
    }
}

/* Cuando el PagerContent usa el componente <Pagination> (.av-pagination), el
 wrapper .mud-table-pagination NO debe agregar su padding/min-height (pensados
 para el MudTablePager nativo) — si no, el espacio vertical se duplica. El
 .av-pagination ya aporta su propio padding + border-top. */
.av-tailux-table .mud-table-pagination:has(.av-pagination),
.av-tailux-table .mud-table-pagination-toolbar:has(.av-pagination) {
  padding: 0 !important;
  min-height: 0 !important;
}

/* — Guía Visual-style numbered pager (.av-tailux-pager-row) — — — — — — — — — — */

.av-tailux-pager-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  flex-wrap: wrap;
}

.av-tailux-pager-row__info.mud-typography {
  color: var(--color-gray-600);
  flex-shrink: 0;
}

html.dark .av-tailux-pager-row__info.mud-typography {
  color: var(--color-dark-300);
}

/* The MudPagination group — single gray pill with transparent items inside */
.av-tailux-pagination .mud-pagination {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--color-gray-100);
  border-radius: 12px;
}

html.dark .av-tailux-pagination .mud-pagination {
  background: var(--color-dark-800);
}

/* Each MudPagination item is internally a MudButton with its own .mud-button
 wrapper, .mud-button-label inner, ::before ripple layer, and Mud's default
 outlined/standard styling. We force all of them flat — single solid color,
 no halo, no ripple, no internal border — so the active pill reads as one
 uniform morado square instead of "two tones". */
.av-tailux-pagination .mud-pagination-item,
.av-tailux-pagination .mud-pagination-item.mud-button-root,
.av-tailux-pagination .mud-pagination-item .mud-button-root {
  min-width: 30px !important;
  width: 30px !important;
  height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--color-gray-700) !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  transition:
    background-color 150ms ease,
    color 150ms ease;
}

/* Kill the ripple / focus-halo pseudo-elements that draw a second tone on
 top of the item background. */
.av-tailux-pagination .mud-pagination-item::before,
.av-tailux-pagination .mud-pagination-item::after,
.av-tailux-pagination .mud-pagination-item .mud-ripple,
.av-tailux-pagination .mud-pagination-item .mud-ripple-visual,
.av-tailux-pagination .mud-pagination-item .mud-ripple-container {
  display: none !important;
  background: transparent !important;
}

.av-tailux-pagination
  .mud-pagination-item:hover:not(.mud-pagination-item-selected):not(
    .mud-pagination-disabled
  ) {
  background: var(--color-white) !important;
  color: var(--color-primary-600) !important;
}

.av-tailux-pagination .mud-pagination-item.mud-pagination-item-selected,
.av-tailux-pagination .mud-pagination-item.mud-pagination-item-selected:hover,
.av-tailux-pagination .mud-pagination-item.mud-pagination-item-selected:focus {
  background: var(--color-primary-600) !important;
  color: var(--color-white) !important;
  box-shadow: none !important;
}

.av-tailux-pagination
  .mud-pagination-item.mud-pagination-item-selected
  .mud-button-label {
  color: var(--color-white) !important;
}

.av-tailux-pagination .mud-pagination-item.mud-pagination-disabled {
  opacity: 0.35 !important;
  pointer-events: none;
}

/* Prev/Next chevron icons inside MudPagination items */
.av-tailux-pagination .mud-pagination-item .mud-icon-root {
  width: 16px;
  height: 16px;
}

/* Dots (…) — render as a plain gray spacer */
.av-tailux-pagination .mud-pagination-item.mud-pagination-dots {
  background: transparent !important;
  color: var(--color-gray-500) !important;
  cursor: default;
  box-shadow: none !important;
}

html.dark .av-tailux-pagination .mud-pagination-item {
  color: var(--color-dark-200) !important;
}

html.dark
  .av-tailux-pagination
  .mud-pagination-item:hover:not(.mud-pagination-item-selected):not(
    .mud-pagination-disabled
  ) {
  background: var(--color-dark-600) !important;
  color: var(--color-primary-300) !important;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
}

html.dark
  .av-tailux-pagination
  .mud-pagination-item.mud-pagination-item-selected {
  background: var(--color-primary-500) !important;
  color: var(--color-white) !important;
}

html.dark .av-tailux-pagination .mud-pagination-item.mud-pagination-dots {
  color: var(--color-dark-300) !important;
}

@media (max-width: 640px) {
  .av-tailux-pager-row {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .av-tailux-pager-row__info {
    text-align: center;
  }

  .av-tailux-pagination {
    display: flex;
    justify-content: center;
  }
}

/* Caption + "Rows per page" + rows-per-page selector */
.av-tailux-table .mud-table-pagination-information,
.av-tailux-table .mud-table-pagination-caption,
.av-tailux-table .mud-table-pagination-spacer + .mud-table-pagination-caption,
.av-tailux-table .mud-table-pagination .mud-typography {
  color: var(--color-gray-600) !important;
  font-size: var(--text-xs-plus) !important;
  font-weight: 400 !important;
}

html.dark .av-tailux-table .mud-table-pagination-information,
html.dark .av-tailux-table .mud-table-pagination-caption,
html.dark
  .av-tailux-table
  .mud-table-pagination-spacer
  + .mud-table-pagination-caption,
html.dark .av-tailux-table .mud-table-pagination .mud-typography {
  color: var(--color-dark-200) !important;
}

/* Rows-per-page selector — outlined chip */
.av-tailux-table .mud-table-pagination-select.mud-select {
  margin: 0 12px !important;
}

.av-tailux-table .mud-table-pagination-select.mud-select .mud-input-control {
  background: var(--color-gray-50);
  border-radius: 8px;
  padding: 0 8px;
}

html.dark
  .av-tailux-table
  .mud-table-pagination-select.mud-select
  .mud-input-control {
  background: var(--color-dark-800);
}

/* Action button group — grouped pill, .pagination from Guía Visual */
.av-tailux-table .mud-table-pagination-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--color-gray-100);
  border-radius: 9999px;
}

html.dark .av-tailux-table .mud-table-pagination-actions {
  background: var(--color-dark-800);
}

.av-tailux-table .mud-table-pagination-actions .mud-icon-button {
  border-radius: 9999px !important;
  width: 30px !important;
  height: 30px !important;
  padding: 6px !important;
  color: var(--color-gray-700) !important;
  background: transparent !important;
  transition:
    background-color 150ms ease,
    color 150ms ease;
}

.av-tailux-table
  .mud-table-pagination-actions
  .mud-icon-button:hover:not(.mud-disabled) {
  background: var(--color-white) !important;
  color: var(--color-primary-600) !important;
  box-shadow: 0 1px 2px rgb(from var(--color-gray-900) r g b / 0.06);
}

.av-tailux-table .mud-table-pagination-actions .mud-icon-button.mud-disabled,
.av-tailux-table .mud-table-pagination-actions .mud-icon-button:disabled {
  opacity: 0.35 !important;
  pointer-events: none;
}

.av-tailux-table .mud-table-pagination-actions .mud-icon-button .mud-icon-root {
  width: 18px;
  height: 18px;
}

html.dark .av-tailux-table .mud-table-pagination-actions .mud-icon-button {
  color: var(--color-dark-200) !important;
}

html.dark
  .av-tailux-table
  .mud-table-pagination-actions
  .mud-icon-button:hover:not(.mud-disabled) {
  background: var(--color-dark-600) !important;
  color: var(--color-primary-300) !important;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
}

/* ============================================================================
 Page header + filter pills (Guía Visual users-datatable parity)

 Layout pattern for list pages with table:
 - .av-page-header → row with title (left) + primary actions (right)
 - .av-page-filters → row with filter pills (left) + search (right)
 - .av-filter-pill → individual clickable filter chip with count

 The header sits ABOVE the av-table-card; the filters sit between header and
 table card. Both are page-level wrappers, not inside the card.
 ============================================================================ */

.av-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.av-page-header__title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.av-page-header__title-text.mud-typography {
  color: var(--color-gray-900);
}

html.dark .av-page-header__title-text.mud-typography {
  color: var(--color-dark-50);
}

.av-page-header__title-hint.mud-typography {
  color: var(--color-gray-500);
}

html.dark .av-page-header__title-hint.mud-typography {
  color: var(--color-dark-300);
}

/* ----------------------------------------------------------------------------
 Gap titulo <-> descripcion cuando NO hay wrapper.

 El skin canonico apila titulo y hint dentro de .av-page-header__title, que es
 flex column con gap:2px. Pero muchas pantallas emiten los dos MudText como
 HERMANOS sueltos, sin ese wrapper, y ahi el gap no existe: la separacion la
 decide el utilitario de margen que lleve el titulo. Un `mb-4` heredado ponia
 16px entre el titulo y su propia descripcion — el doble de lo que las separa
 de cualquier otra cosa, y se leia como dos bloques distintos.

 Estas dos reglas hacen que el par se vea igual CON wrapper y SIN el:

 1) El titulo seguido de un hint no lleva margen inferior. Va con !important
    y specificity (0,2,0) a proposito: los utilitarios de Mud (.mb-4) tambien
    son !important, y entre dos !important gana el de mayor specificity.
    El :has() lo limita al caso "hay un hint debajo" — un titulo SIN hint
    conserva su mb-4, que ahi si es el aire que lo separa del contenido.
 2) El hermano inmediato reproduce el gap:2px del wrapper.

 Es una red de seguridad, no el arreglo: el markup tambien quedo limpio. Sirve
 para que una pantalla nueva que copie el patron suelto no reabra el hueco.
 ---------------------------------------------------------------------------- */

.av-page-header__title-text.mud-typography:has(+ .av-page-header__title-hint) {
  margin-bottom: 0 !important;
}

.av-page-header__title-text + .av-page-header__title-hint.mud-typography {
  margin-top: 2px;
}

/* Aire BAJO el bloque de cabecera. Con wrapper lo pone `.av-page-header`
   (margin-bottom:10px); sin wrapper no hay caja que lo lleve, asi que el hint
   suelto lo aporta el mismo y el par queda separado del contenido igual que
   en el resto del sistema. Dentro del wrapper se anula para no sumar dos veces. */
.av-page-header__title-hint.mud-typography {
  margin-bottom: 10px;
}

.av-page-header__title .av-page-header__title-hint.mud-typography {
  margin-bottom: 0;
}

.av-page-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.av-page-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 0 16px;
}

.av-filter-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.av-filter-pills::-webkit-scrollbar {
  display: none;
}

.av-page-filters__tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Page-level footer — pair to av-page-header. Holds primary actions that sit
 BELOW the table card (e.g. Next button in wizard flows). Aligned right by
 default; pass utility classes (justify-start, etc.) to override. */
.av-page-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 0 8px;
}

.av-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--color-gray-200);
  border-radius: 9999px;
  cursor: pointer;
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    color 150ms ease;
  color: var(--color-gray-700);
  white-space: nowrap;
}

.av-filter-pill:hover {
  background: var(--color-gray-100);
  border-color: var(--color-gray-300);
}

.av-filter-pill--active {
  background: rgb(from var(--color-primary-500) r g b / 0.1);
  border-color: var(--color-primary-500);
  color: var(--color-primary-700);
}

.av-filter-pill--active:hover {
  background: rgb(from var(--color-primary-500) r g b / 0.14);
}

.av-filter-pill__label.mud-typography {
  color: inherit;
  font-weight: 500;
}

.av-filter-pill__count.mud-typography {
  padding: 2px 8px;
  border-radius: 9999px;
  background: var(--color-gray-100);
  color: var(--color-gray-600);
  font-weight: 600;
  line-height: 1.2;
}

.av-filter-pill--active .av-filter-pill__count.mud-typography {
  background: var(--color-primary-500);
  color: var(--color-white);
}

html.dark .av-filter-pill {
  border-color: var(--color-dark-500);
  color: var(--color-dark-200);
}

html.dark .av-filter-pill:hover {
  background: var(--color-dark-700);
  border-color: var(--color-dark-400);
}

html.dark .av-filter-pill--active {
  background: rgb(from var(--color-primary-400) r g b / 0.16);
  border-color: var(--color-primary-400);
  color: var(--color-primary-200);
}

html.dark .av-filter-pill__count.mud-typography {
  background: var(--color-dark-600);
  color: var(--color-dark-200);
}

html.dark .av-filter-pill--active .av-filter-pill__count.mud-typography {
  background: var(--color-primary-400);
  color: var(--color-dark-900);
}

.av-page-filters__search {
  flex: 0 1 280px;
  min-width: 200px;
}

/* Match the input height to the toolbar button height (32px) so search + View
 read as a single horizontally-aligned row. Mud's default Dense Outlined input
 sits at ~40px, which towers over the buttons; this override aligns them. */
.av-page-filters__search .mud-input-control {
  height: 32px;
  min-height: 32px;
}

.av-page-filters__search .mud-input-control .mud-input,
.av-page-filters__search .mud-input-control .mud-input-slot {
  min-height: 32px;
  height: 32px;
}

.av-page-filters__search .mud-input-control .mud-input-slot input {
  font-size: var(--text-xs);
  padding-top: 0;
  padding-bottom: 0;
}

.av-page-filters__search .mud-input-control .mud-input-outlined-border {
  border-radius: var(--radius-md);
}

.av-page-filters__search .mud-input-control .mud-input-adornment-start {
  margin-top: 0;
}

.av-page-filters__search
  .mud-input-control
  .mud-input-adornment
  .mud-icon-root {
  width: 16px;
  height: 16px;
  font-size: 16px;
}

/* ============================================================================
   .av-page-filters__left / .av-page-filters__right
   Grouping wrappers used to lay out the toolbar Tailux-style:
       [Search] [FilterBtn …]            (left group)
       [ViewBtn]                          (right group)
   Both groups share the 8 px gap rhythm. The parent .av-page-filters keeps
   its space-between behaviour so left/right collapse to opposite ends.
   ============================================================================ */
.av-page-filters__left,
.av-page-filters__right {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.av-page-filters__left {
  flex: 1 1 auto;
}

.av-page-filters__right {
  flex-shrink: 0;
}

/* ============================================================================
   .av-table-filter-btn — Tailux faceted filter button (h-8 / px-2.5 / text-xs)
   Compact DASHED-bordered button. Inside: icon + label + optional vertical
   divider + gray badge when a value is picked (or a count for the selector).
   Every chip + the FilterSelector share this single style — the only thing
   that changes when a filter is applied is the presence of the divider+badge.
   ============================================================================ */
.av-table-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 10px;
  background: transparent;
  border: 1px dashed var(--color-gray-300);
  border-radius: var(--radius-md);
  color: var(--color-gray-900);
  font-size: var(--text-xs);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms ease;
}

.av-table-filter-btn:hover,
.av-table-filter-btn:focus {
  background: rgb(from var(--color-gray-300) r g b / 0.2);
  outline: none;
}

.av-table-filter-btn:active {
  background: rgb(from var(--color-gray-300) r g b / 0.25);
}

/* Active state for boolean toggle chips (e.g. Favorites). Solid border + primary tint. */
.av-table-filter-btn--active {
  border-style: solid;
  border-color: var(--color-primary-600);
  background: rgb(from var(--color-primary-500) r g b / 0.08);
  color: var(--color-primary-700);
}

.av-table-filter-btn--active:hover,
.av-table-filter-btn--active:focus {
  background: rgb(from var(--color-primary-500) r g b / 0.12);
}

html.dark .av-table-filter-btn--active {
  border-color: var(--color-primary-400);
  background: rgb(from var(--color-primary-400) r g b / 0.16);
  color: var(--color-primary-300);
}

.av-table-filter-btn__icon.mud-icon-root {
  width: 16px;
  height: 16px;
  font-size: 16px;
  color: inherit;
}

.av-table-filter-btn__divider {
  width: 1px;
  align-self: stretch;
  background: var(--color-gray-300);
  margin: 4px 0;
}

.av-table-filter-btn__badge {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--radius-sm);
  background: var(--color-gray-200);
  color: var(--color-gray-900);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

html.dark .av-table-filter-btn {
  border-color: var(--color-dark-450);
  color: var(--color-dark-50);
}

html.dark .av-table-filter-btn:hover,
html.dark .av-table-filter-btn:focus {
  background: rgb(from var(--color-dark-300) r g b / 0.2);
}

html.dark .av-table-filter-btn:active {
  background: rgb(from var(--color-dark-300) r g b / 0.25);
}

html.dark .av-table-filter-btn__divider {
  background: var(--color-dark-450);
}

html.dark .av-table-filter-btn__badge {
  background: var(--surface-2);
  color: var(--color-dark-50);
}

/* ============================================================================
   .av-filter-popover — popover content used by MudMenu when a filter button
   is clicked. Holds a list of options + an optional "Clear filter" footer.
   ============================================================================ */
.av-filter-popover.mud-popover {
  border-radius: var(--radius-md);
  border: 1px solid var(--color-gray-300);
  box-shadow:
    0 10px 15px -3px rgb(from var(--color-gray-200) r g b / 0.5),
    0 4px 6px -4px rgb(from var(--color-gray-200) r g b / 0.5);
  /* Fixed, compact width — `fit-content` lets the MudMenu popover stretch far
     wider than the short option labels need, so pin it. */
  width: 248px !important;
  min-width: 248px;
  max-width: calc(100vw - 32px);
  overflow: hidden;
  background: var(--color-white);
}

/* Long option lists (e.g. the origin channel filter) opt into scroll + a height cap. */
.av-filter-popover.av-popover-scroll.mud-popover {
  max-height: 360px;
}

html.dark .av-filter-popover.mud-popover {
  background: var(--color-dark-750, var(--color-dark-700));
  border-color: var(--color-dark-500);
  box-shadow: none;
}

/* Zero padding on the list so the search header (gray-100 bg) reaches the
   popover's TOP edge and the footer button reaches the BOTTOM edge. The
   popover's `overflow: hidden` + `border-radius: --radius-md` clip the
   corners cleanly — search corners get the top radius, footer button gets
   the bottom radius. Items between get their own padding for breath. */
.av-filter-popover .mud-list {
  padding: 0;
}

.av-filter-popover__item.mud-list-item,
.av-filter-popover__item.mud-menu-item {
  padding: 8px 10px !important;
  margin: 0 !important;
  min-height: auto !important;
  border-radius: 0 !important;
  background-color: transparent !important;
}

/* Tighten the label's line-height so the row isn't dragged taller by Mud's
   default 1.43em on body2 (~20 px for the 13 px label = wasted vertical
   space when an item carries a single line). */
.av-filter-popover__item .av-filter-popover__item-name.mud-typography {
  line-height: 1.3 !important;
}

.av-filter-popover__item.mud-list-item:hover,
.av-filter-popover__item.mud-menu-item:hover {
  background-color: var(--color-gray-100) !important;
}

html.dark .av-filter-popover__item.mud-list-item:hover,
html.dark .av-filter-popover__item.mud-menu-item:hover {
  background-color: var(--color-dark-600) !important;
}

.av-filter-popover__item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.av-filter-popover__item-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}

.av-filter-popover__item-name.mud-typography {
  font-size: var(--text-xs-plus);
  color: var(--color-gray-800);
}

html.dark .av-filter-popover__item-name.mud-typography {
  color: var(--color-dark-100);
}

.av-filter-popover__item-count.mud-typography {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-gray-500);
}

html.dark .av-filter-popover__item-count.mud-typography {
  color: var(--color-dark-300);
}

.av-filter-popover__item--selected.mud-list-item,
.av-filter-popover__item--selected.mud-menu-item {
  background-color: rgb(from var(--color-primary-500) r g b / 0.1) !important;
}

.av-filter-popover__item--selected
  .av-filter-popover__item-name.mud-typography {
  color: var(--color-primary-700);
  font-weight: 600;
}

html.dark .av-filter-popover__item--selected.mud-list-item,
html.dark .av-filter-popover__item--selected.mud-menu-item {
  background-color: rgb(from var(--color-primary-400) r g b / 0.2) !important;
}

html.dark
  .av-filter-popover__item--selected
  .av-filter-popover__item-name.mud-typography {
  color: var(--color-primary-200);
}

/* Radio-button visual marker for filter-popover rows. Matches the canonical
   `.mud-radio:has(input:checked)` skin defined above at §checkbox/radio:
   idle = hairline ring on transparent, selected = solid primary fill with a
   6 × 6 white inner dot. Same metrics so the popover reads as part of the
   same form vocabulary as the form-level radios. */
.av-filter-popover__radio-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgb(from var(--color-gray-400) r g b / 0.7);
  background: transparent;
  flex-shrink: 0;
  position: relative;
  transition:
    border-color 150ms ease,
    background-color 150ms ease;
}

.av-filter-popover__item--selected .av-filter-popover__radio-dot {
  border-color: var(--color-primary-600);
  background-color: var(--color-primary-600);
}

.av-filter-popover__item--selected .av-filter-popover__radio-dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  background-color: var(--color-white);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Shrink Mud's 58 × 38 outer container (.mud-switch-span) to match our
   36 × 20 track. Without this the column reserves 58 px of width for the
   switch but only fills the inner 34 × 14 with our pill — which means
   any cell narrower than 58 px clips the span and the pill appears cut.
   Forcing the span to the pill's exact size guarantees it never gets
   clipped by a tight column or compact-density padding. */
.mud-switch .mud-switch-span,
.mud-switch .mud-switch-span-small,
.mud-switch .mud-switch-span-medium,
.mud-switch .mud-switch-span-large {
  width: 36px !important;
  height: 20px !important;
  padding: 0 !important;
  overflow: visible !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Override Mud's translateX(20px) on .mud-checked — our thumb only needs
   to slide 16 px (36 − 14 − 2*3 padding = 16). Mud's default translates
   the (now hidden) thumb 20 px which would push our ::before too far
   right; but since we draw on ::before via track::before with our own
   transform: translateX(16px), the .mud-switch-base.mud-checked
   transform is irrelevant — kill it so it doesn't interfere if any
   future Mud version starts emitting it on a visible element. */
.mud-switch .mud-switch-base.mud-checked {
  transform: none !important;
}

/* Gap global entre el pill del switch y su label (LabelPlacement.End por
   doctrina). El skin encoge el .mud-switch-span a 36px y el label queda pegado
   al pill; este margen lo separa de forma uniforme en cualquier consumidor
   (drawers, forms, listas). Los contextos densos (p.ej. popover View) lo
   afinan con su propia regla mas especifica. */
.mud-switch .mud-typography {
  margin-left: 8px;
}

/* ============================================================================
 * §8   Notification panel (Shared/NotificationList.razor)
 * ----------------------------------------------------------------------------
 * design-styled notification popover: bell-icon trigger in the AppBar, on click
 * opens a 380 px panel with a header strip (title + soft-primary count badge
 * + subtle action icons), a tab filter (All / Unread / Read) and a scrollable
 * list of notification items.
 *
 * Visual reference: notifications panel pattern
 *.
 * The header + tab strip share a single `--color-gray-100` band; the list
 * area below sits on the panel's white surface.
 *
 * Doctrine: this section owns ALL styling for the notification popover. The
 * .razor itself must not carry a \3c style> block.
 * ============================================================================ */

/* §8.1   Theming variables (scoped to the panel)   */

/* §8.12   Per-item icon — design Avatar `size={10} rounded-lg` colored square
   ----------------------------------------------------------------------------
   Each item type renders as a 40ם40 SOLID-color square with an 18px WHITE icon
   inside (design uses `initialColor` per notification type). The .type-*
   classes come from GetNotificationTypeClass() in NotificationList.razor.cs
   (keyword-based: default / info / success / warning / error). */
.notification-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  /* rounded-lg */
  background: var(--mud-palette-action-disabled);
  /* fallback neutral */
  transition: none;
}

/*   Rings (delicate strokes, semi-transparent — mimics the airy "atomic
   orbit" feel of the Brand Identity Manual illustration). Three concentric
   rings with the inner-most slightly more opaque so the depth hierarchy
   reads correctly. */
.av-orbit-loader__ring {
  fill: none;
  stroke: var(--color-primary-100, #dbe7ff);
  stroke-width: 2;
}

/* Same stroke + width on every ring — depth is conveyed by the orbiting
   dots, not by ring opacity (matches the canonical SVG sample). */
.av-orbit-loader__ring--outer,
.av-orbit-loader__ring--middle,
.av-orbit-loader__ring--inner {
  opacity: 1;
}

/*   Dots (brand-colored, traveling on the rings via the parent <g> rotation)   */
/* Soft brand-tinted glow around every dot (matches the canonical SVG
   `filter: drop-shadow(0 0 4px rgba(37,99,255,.35))`). Token-driven so
   the glow follows the active primary under each brand. */
.av-orbit-loader__dot {
  filter: drop-shadow(
    0 0 4px rgb(from var(--color-primary-600, #2563ff) r g b / 0.35)
  );
}

.av-orbit-loader__dot--primary {
  fill: var(--color-primary-600, #2563ff);
  /* Avalme Blue */
}

.av-orbit-loader__dot--success {
  fill: var(--color-success, #22c55e);
  /* Growth Green */
}

/*   Rotation animations on the <g> groups
   Three rings rotate at staggered speeds and alternating directions
   (atomic-orbital metaphor):
     · Outer    → CW 4 s   (slowest — gives a calm "background" feel)
     · Middle   → CCW 2.5 s
     · Inner    → CW 1.7 s (fastest — closest to the center, feels more "active")
   Different periods means the dots never sync up into the same alignment,
   which keeps the pattern feeling alive even on long waits. */
.av-orbit-loader__group--outer {
  transform-origin: 50% 50%;
  animation: av-orbit-spin-cw 2.8s linear infinite;
}

.av-orbit-loader__group--middle {
  transform-origin: 50% 50%;
  animation: av-orbit-spin-ccw 2s linear infinite;
}

.av-orbit-loader__group--inner {
  transform-origin: 50% 50%;
  animation: av-orbit-spin-cw 1.4s linear infinite;
}

/* ============================================================================
 * §10 ─── DataGrid chrome
 * ----------------------------------------------------------------------------
 * App-level skin for the datatable composition surfaces that wrap a MudTable
 * or MudDataGrid. The bridge (tailux-mud-bridge.css §DATAGRID) skins the
 * table internals; this section skins everything AROUND the table:
 *
 *   §10.1  .av-datagrid                   outer frame (replaces stripped
 *                                          Mud border/shadow with the Tailux
 *                                          Card look)
 *   §10.2  .av-datagrid-toolbar           top strip: title + actions + search
 *                                          + filter chips
 *   §10.3  .av-datagrid-view-menu         dropdown body (column toggles +
 *                                          variant switches)
 *   §10.4  .av-datagrid-export-menu       dropdown body (CSV in v1)
 *   §10.5  .av-datagrid-selected-actions  floating bar shown when selection
 *                                          count > 0
 *   §10.6  .av-datagrid-empty             empty-state placeholder
 *   §10.7  .av-datagrid-loading           skeleton rows while data fetches
 *   §10.8  @media print                   page-friendly layout (no toolbar,
 *                                          no pagination, no sticky)
 *
 * Tokens consumed from tailux-tokens.css §I (--av-table-radius, --av-table-
 * chrome-pad-*, --av-table-chrome-gap). Colors from --color-gray-* /
 * --color-dark-* / --color-primary-* ramps — theme + brand aware.
 *
 * The class names use the `av-datagrid-*` BEM prefix even when hosting a
 * MudTable (not a MudDataGrid). Reason: the wrapping component is the
 * SHARED toolbar/view/export composition — same chrome regardless of which
 * Mud primitive the consumer chose inside. The doctrine names the chrome
 * once.
 * ========================================================================== */

/* §10.1 ─── Outer layout container ───────────────────────────────────────
   FLAT layout container — no card chrome, no background. Matches Tailux:
   toolbar sits directly on the page bg, and only the table itself carries
   the card look (border + radius — applied by tailux-mud-bridge.css §1
   directly on .mud-table). The wrapper just stacks toolbar + table +
   selected-actions with consistent vertical rhythm. */
.av-datagrid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Full-screen variant (FullScreen switch in the View menu) — fixed overlay
   covering the viewport. */
.av-datagrid--fullscreen {
  position: fixed;
  inset: 0;
  z-index: 1300;
  /* above MudDrawer (1200), below modals */
  background: var(--color-gray-50);
  padding: 16px;
  overflow: auto;
}

html.dark .av-datagrid--fullscreen {
  background: var(--color-dark-800);
}

/* §10.2 ─── Toolbar (FLAT — no card chrome, sits directly on page bg) ──
   Tailux reference: <div class="table-toolbar"> is a raw flex column with
   NO bg, border, or padding-x. Only vertical rhythm (gap between title row
   and filter row). The horizontal page padding comes from the parent
   layout (.px-xs-0 .px-sm-3 .px-md-6 in MainLayout) — the toolbar inherits. */
.av-datagrid-toolbar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  background: transparent;
  border: none;
}

/* Top row: title at left, action cluster at right. */
.av-datagrid-toolbar__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 32px;
}

/* Title — typography matches Tailux: 20 px / weight 500 / letter-spacing
   0.025em. Color is NOT overridden here — the `Color="Color.Primary"` prop
   on MudText paints it Avalme Blue (when brand=avalme) or the active
   primary tint, exactly like /dashboard-v1's hero greeting. Margin reset
   kills Mud's default vertical margin on h6/p elements. */
.av-datagrid-toolbar__title.mud-typography {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.025em;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Stand-in for the title when the page owns its header (ShowTitle="false", #1318).
   Inherits the title's elasticity so the action cluster keeps its right edge —
   the row is `space-between` and every other child is `flex-shrink: 0`. */
.av-datagrid-toolbar__spacer {
  flex: 1 1 auto;
  min-width: 0;
}

/* Title-row slot (§10.2) — sits between the title and the action cluster; the
   title's `flex: 1 1 auto` is what pushes it right. Mirrors the dashboard card
   head (`.ip-section-head`), where the section title and its button share a row. */
.av-datagrid-toolbar__title-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Action cluster — right-aligned button group. Tailux reference uses h-8
   (32 px) for ALL toolbar action buttons (Print, Export, View). The "New X"
   CTA is the visual exception (filled, slightly taller). */
.av-datagrid-toolbar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Force all icon-buttons inside the toolbar action cluster to 32 px to match
   Tailux. MudIconButton's default size-small is 30 px square — close but
   we lock it for visual rhythm with the labeled buttons next to them. */
.av-datagrid-toolbar__actions .mud-icon-button-size-small {
  width: 32px;
  height: 32px;
}

/* The "New X" primary CTA — filled pill. Slightly taller than the secondary
   cluster (36 px vs 32 px) to read as the page's primary action. Tailux's
   reference doesn't show a New CTA in the Orders demo, but the AddLeadStatus
   canonical FormDialog uses the same 36 px pill pattern for primary actions. */
.av-datagrid-toolbar__cta.mud-button-root {
  height: 36px;
  border-radius: 9999px;
  padding: 0 16px;
  font-weight: 500;
  text-transform: none;
  /* Own the color instead of leaning on Mud's Color.Primary — `--mud-palette-primary` is MudBlazor's
     default violet and is not wired to the design system, so the CTA read as a different brand than
     every other primary action (e.g. `av-table-card__btn`).
     KNOWN BUG (deferred): this whole block loses to the legacy
     `.mud-button-filled.mud-button-filled-primary` rule in avalme.css:31475, which paints every
     filled-primary MudButton with a violet gradient using !important on nine properties. The CTA
     therefore still renders violet, uppercase and rectangular. Fixing it means changing the look of
     the AvDataGridToolbar CTA consumers (e.g. TenantTemplates and the other av-datagrid screens), which
     need their own visual sign-off. Own WI. */
  background: var(--color-primary-600);
  color: var(--color-white);
  box-shadow: none;
}

.av-datagrid-toolbar__cta.mud-button-root:hover {
  background: var(--color-primary-700);
  box-shadow: none;
}

/* Bottom row: search + filters at left, View menu at right. Tailux uses
   `overflow-x: auto` here so the filter strip survives on small viewports
   without wrapping awkwardly. */
.av-datagrid-toolbar__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 4px;
}

/* LEFT cluster of the bottom row — search + filter buttons + active chips. */
.av-datagrid-toolbar__filters-cluster {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}

/* RIGHT cluster of the bottom row — currently only the View button. Pinned
   to the right edge so it visually separates from the filter activators. */
.av-datagrid-toolbar__view-cluster {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.av-datagrid-toolbar__search {
  width: 100%;
  max-width: 280px;
  flex: 0 1 280px;
  min-width: 200px;
}

/* Filter button — matches Tailux's "Status / Date Range / Total Amount"
   filter activator pattern: 32 px height, dashed border, labeled with text,
   small icon prefix. The dashed border is the visual signal of "click to
   apply a filter" (vs solid which means "click to perform an action"). */
.av-datagrid-toolbar__filter-btn.mud-button-root {
  height: 32px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px dashed var(--color-gray-300);
  background: transparent;
  color: var(--color-gray-800);
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  gap: 8px;
  white-space: nowrap;
}

.av-datagrid-toolbar__filter-btn.mud-button-root:hover {
  background: rgb(from var(--color-gray-300) r g b / 0.2);
}

/* Active state — the filter is currently applied. Switches the border to
   solid + primary tint, matching the way Tailux's chips highlight when
   selected. */
.av-datagrid-toolbar__filter-btn--active.mud-button-root {
  border-style: solid;
  border-color: var(--color-primary-600);
  color: var(--color-primary-700);
  background: rgb(from var(--color-primary-500) r g b / 0.08);
}

html.dark .av-datagrid-toolbar__filter-btn.mud-button-root {
  border-color: var(--color-dark-450);
  color: var(--color-dark-50);
}

html.dark .av-datagrid-toolbar__filter-btn.mud-button-root:hover {
  background: rgb(from var(--color-dark-300) r g b / 0.2);
}

html.dark .av-datagrid-toolbar__filter-btn--active.mud-button-root {
  border-color: var(--color-primary-400);
  color: var(--color-primary-300);
  background: rgb(from var(--color-primary-400) r g b / 0.16);
}

@media (max-width: 639px) {
  .av-datagrid-toolbar__search {
    max-width: none;
  }

  /* Mobile: action cluster collapses to an ellipsis menu (the razor wires
       a MudMenu with the same items). Hide the inline cluster below sm. */
  .av-datagrid-toolbar__actions--desktop {
    display: none;
  }

  /* A labeled button in the title slot would squeeze the title down to an
     ellipsis on a phone, so give the title its own line and let the slot wrap
     underneath. Scoped with :has() — toolbars that pass no TitleActions keep
     their single-row layout untouched. */
  .av-datagrid-toolbar__top:has(.av-datagrid-toolbar__title-actions) {
    flex-wrap: wrap;
  }

  .av-datagrid-toolbar__top:has(.av-datagrid-toolbar__title-actions)
    .av-datagrid-toolbar__title.mud-typography {
    flex-basis: 100%;
  }
}

@media (min-width: 640px) {
  .av-datagrid-toolbar__actions--mobile {
    display: none;
  }
}

.av-datagrid-toolbar__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* §10.3 ─── View menu — activator + drawer body bits ─────────────────────────
   The view menu pivoted from MudMenu (popover) to MudDrawer (right-anchored)
   per the canonical "Side panel drawers" doctrine (see ThemeCustomizerDrawer
   reference). The drawer chrome lives in tailux-tokens.css §11 (.bp-theme-
   drawer + helpers). Below we only style:
     - the activator BUTTON (Tailux "View" pill with caret)
     - the toggles LIST inside the drawer body (vertical stack of switches)
     - the column-checkbox LIST (scrollable when many columns)                */

/* Activator button — labeled (icon + "View" text + caret). Override Mud's
   default ALL-CAPS button text so "View" reads natural case, and round
   corners so the button sits in the same visual family as the form-dialog
   action buttons. */
.av-datagrid-view-menu__activator.mud-button-root {
  height: 36px;
  padding: 0 14px;
  border-radius: 9999px;
  text-transform: none;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0;
  border-color: var(--color-gray-300);
  color: var(--color-gray-700);
  background: transparent;
}

.av-datagrid-view-menu__activator.mud-button-root:hover {
  background: var(--color-gray-100);
  border-color: var(--color-gray-400);
  color: var(--color-gray-900);
}

html.dark .av-datagrid-view-menu__activator.mud-button-root {
  border-color: var(--color-dark-500);
  color: var(--color-dark-200);
}

html.dark .av-datagrid-view-menu__activator.mud-button-root:hover {
  background: var(--color-dark-600);
  border-color: var(--color-dark-400);
  color: var(--color-dark-50);
}

/* List wrapper inside a `.bp-theme-section` — vertical stack of rows.
   Mirror of `.dv1-customize-list` from the dashboard's Customize drawer
   (avalme-v1.css §9.10). */
.av-datagrid-view-menu__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 40vh;
  overflow-y: auto;
  padding-right: 4px;
}

/* Row pattern — label LEFT, control RIGHT (switch or checkbox). Hovering
   tints the bg subtly so the user sees the click target. Mirror of
   `.dv1-customize-row` from the dashboard's Customize drawer. */
.av-datagrid-view-menu__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 120ms ease;
}

.av-datagrid-view-menu__row:hover {
  background: var(--color-gray-100);
}

html.dark .av-datagrid-view-menu__row:hover {
  background: var(--color-dark-600);
}

/* Row label — same typography as `.dv1-customize-label`. Stays left-
   aligned and takes available space (`flex: 1`) so the switch/checkbox
   pins to the right edge. */
.av-datagrid-view-menu__row-label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-gray-800);
  flex: 1 1 auto;
  min-width: 0;
}

html.dark .av-datagrid-view-menu__row-label {
  color: var(--color-dark-100);
}

/* Section separator — three subtle dots centered, softer than a hairline
   rule. The dots use radial gradients on a transparent bg so they render
   crisp at any zoom level without needing extra DOM nodes. */
.av-datagrid-view-menu__dot-divider {
  margin: 8px auto;
  width: 32px;
  height: 4px;
  background-image: radial-gradient(
    circle,
    var(--color-gray-400) 1.5px,
    transparent 1.5px
  );
  background-size: 12px 4px;
  background-repeat: repeat-x;
  background-position: center;
  opacity: 0.6;
}

html.dark .av-datagrid-view-menu__dot-divider {
  background-image: radial-gradient(
    circle,
    var(--color-dark-300) 1.5px,
    transparent 1.5px
  );
  opacity: 0.5;
}

/* §10.4 ─── Export menu ──────────────────────────────────────────────────── */
.av-datagrid-export-menu {
  display: flex;
  flex-direction: column;
  min-width: 200px;
  padding: 4px;
}

.av-datagrid-export-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--color-gray-700);
  font-size: var(--text-sm);
  transition: background-color 150ms ease;
}

.av-datagrid-export-menu__item:hover {
  background: var(--color-gray-100);
  color: var(--color-gray-900);
}

html.dark .av-datagrid-export-menu__item {
  color: var(--color-dark-200);
}

html.dark .av-datagrid-export-menu__item:hover {
  background: var(--color-dark-600);
  color: var(--color-dark-50);
}

.av-datagrid-export-menu__item-icon {
  flex-shrink: 0;
  color: var(--color-gray-500);
}

html.dark .av-datagrid-export-menu__item-icon {
  color: var(--color-dark-300);
}

/* §10.5 ─── Selected actions bar (visible when selection count > 0) ────────
   Floating snackbar-style bar anchored to the viewport (NOT to the table
   wrapper). Reason: with `position: sticky` inside the .av-datagrid the
   bar disappears once the user scrolls past the table — on long datasets
   the bulk-actions are invisible exactly when they're most useful. By
   pinning it to `position: fixed` at the bottom-RIGHT of the viewport,
   the bar stays visible as long as there's a selection, regardless of
   scroll position. Mirrors Tailux's reference floating action bar
   (bottom-right corner with generous offset from the page footer).
   `z-index: 1200` puts it above the Grid pager / table chrome but below
   MudBlazor modal dialogs (which typically use 1300+). */
/* COLOR DOCTRINE (matches Tailux reference):
     - Bar background: dark-gray (`--color-gray-800`) in light, light
       (`--color-dark-50`) in dark — the bar INVERTS the surface so it
       reads as a foreground floating panel.
     - Default button: neutral gray (gray-200 light / dark-600 dark) —
       for non-destructive bulk actions (Print, Export, More, …).
     - `--danger` button: error red — for destructive actions (Delete,
       Permanent remove, …).
     - `--warning` button: amber — for partially-destructive actions
       (Force logout, Lock, Suspend session, …).
   The class composition `.av-datagrid-selected-actions__btn` +
   `.av-datagrid-selected-actions__btn--danger` (or `--warning`) is the
   contract. NEVER tint the bar with primary or any other accent. */
.av-datagrid-selected-actions {
  position: fixed;
  bottom: 40px;
  right: 80px;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* WI #1269 — flex-wrap is load-bearing: the buttons group cannot shrink
     below its content, so without it a many-action bar overflows the frame. */
  flex-wrap: wrap;
  gap: 16px;
  row-gap: 10px;
  padding: 10px 16px;
  min-width: 320px;
  /* 96px = the 80px right anchor + a 16px minimum left gutter. Percentage, not
     100vw: vw includes the scrollbar the containing block excludes, which ate
     the gutter and left the bar flush against the viewport edge. */
  max-width: min(880px, calc(100% - 96px));
  border-radius: var(--av-table-radius);
  background: var(--color-gray-800);
  color: var(--color-gray-100);
  box-shadow:
    0 10px 25px rgb(from var(--color-gray-900) r g b / 0.35),
    0 4px 10px rgb(from var(--color-gray-900) r g b / 0.15);
  transform: translateY(0);
  opacity: 1;
  transition:
    transform 200ms ease,
    opacity 200ms ease;
}

html.dark .av-datagrid-selected-actions {
  background: var(--color-dark-50);
  color: var(--color-dark-900);
  box-shadow:
    0 10px 25px rgb(from var(--color-gray-900) r g b / 0.5),
    0 0 0 1px var(--color-dark-200);
}

/* Hidden state — slides DOWN slightly and fades. */
.av-datagrid-selected-actions--hidden {
  transform: translateY(20px);
  opacity: 0;
  pointer-events: none;
}

/* Mobile: full-width minus margins, anchored to the bottom edge with
   safe-area padding so it clears any browser bottom UI (iOS home bar). */
@media (max-width: 640px) {
  .av-datagrid-selected-actions {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    left: 16px;
    right: 16px;
    max-width: none;
    min-width: 0;
    transform: translateY(0);
  }

  .av-datagrid-selected-actions--hidden {
    transform: translateY(20px);
  }
}

.av-datagrid-selected-actions__count {
  font-size: var(--text-sm);
  font-weight: 500;
}

.av-datagrid-selected-actions__buttons {
  display: flex;
  /* WI #1269 — the group folds inside the bar; min-width: 0 lets it shrink. */
  flex-wrap: wrap;
  min-width: 0;
  gap: 8px;
}

/* Default button — neutral gray for non-destructive bulk actions
   (Print, Export, More, …). On the inverted dark-gray bar, a slightly
   lighter gray pill reads as a "muted" affordance — destructive
   actions must override with `--danger` or `--warning`. */
.av-datagrid-selected-actions__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 6px;
  background: var(--color-gray-200);
  color: var(--color-gray-900);
  border: none;
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition:
    background-color 150ms ease,
    color 150ms ease;
}

.av-datagrid-selected-actions__btn:hover {
  background: var(--color-gray-300);
}

html.dark .av-datagrid-selected-actions__btn {
  background: var(--color-dark-600);
  color: var(--color-dark-50);
}

html.dark .av-datagrid-selected-actions__btn:hover {
  background: var(--color-dark-500);
}

/* `--danger` — destructive actions (Delete, Permanent remove). Red
   error tint signals "this can't be undone". Same colors in dark since
   error red reads identically against the inverted dark-50 bar. */
.av-datagrid-selected-actions__btn--danger,
html.dark .av-datagrid-selected-actions__btn--danger {
  background: var(--color-error);
  color: var(--color-white);
}

.av-datagrid-selected-actions__btn--danger:hover,
html.dark .av-datagrid-selected-actions__btn--danger:hover {
  background: var(--color-error-darker);
  color: var(--color-white);
}

/* `--warning` — partially-destructive actions (Force logout, Lock,
   Suspend session). Amber signals "reversible but with impact". */
.av-datagrid-selected-actions__btn--warning,
html.dark .av-datagrid-selected-actions__btn--warning {
  background: var(--color-warning);
  color: var(--color-white);
}

.av-datagrid-selected-actions__btn--warning:hover,
html.dark .av-datagrid-selected-actions__btn--warning:hover {
  background: var(--color-warning-darker);
  color: var(--color-white);
}

/* §10.6 ─── Empty state ──────────────────────────────────────────────────── */
.av-datagrid-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 64px 24px;
  text-align: center;
}

.av-datagrid-empty__icon {
  width: 56px;
  height: 56px;
  color: var(--color-gray-400);
}

html.dark .av-datagrid-empty__icon {
  color: var(--color-dark-300);
}

.av-datagrid-empty__title {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-gray-700);
  margin: 0;
}

html.dark .av-datagrid-empty__title {
  color: var(--color-dark-100);
}

.av-datagrid-empty__hint {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  margin: 0;
  max-width: 320px;
}

html.dark .av-datagrid-empty__hint {
  color: var(--color-dark-300);
}

/* §10.7 ─── Loading state (skeleton rows) ────────────────────────────────── */
.av-datagrid-loading {
  display: flex;
  flex-direction: column;
}

.av-datagrid-loading__row {
  display: grid;
  grid-template-columns: var(--av-skeleton-cols, repeat(6, 1fr));
  gap: 16px;
  padding: var(--av-table-pad-y) var(--av-table-pad-x);
  border-bottom: 1px solid var(--color-gray-200);
}

html.dark .av-datagrid-loading__row {
  border-bottom-color: var(--color-dark-500);
}

.av-datagrid-loading__cell {
  height: 16px;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    var(--color-gray-100) 0%,
    var(--color-gray-200) 50%,
    var(--color-gray-100) 100%
  );
  background-size: 200% 100%;
  animation: avDatagridShimmer 1.4s ease-in-out infinite;
}

html.dark .av-datagrid-loading__cell {
  background: linear-gradient(
    90deg,
    var(--color-dark-600) 0%,
    var(--color-dark-500) 50%,
    var(--color-dark-600) 100%
  );
  background-size: 200% 100%;
}

@keyframes avDatagridShimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* §10.8 ─── Print styles ─────────────────────────────────────────────────── */
@media print {
  /* Hide everything that isn't the table itself. */
  .mud-appbar,
  .mud-drawer,
  .av-appbar,
  .av-nav-rail,
  .av-datagrid-toolbar,
  .mud-table-pagination,
  .av-datagrid-selected-actions,
  .av-datagrid-loading,
  .mud-snackbar-container,
  .mud-overlay,
  button,
  .mud-button-root,
  .mud-icon-button {
    display: none !important;
  }

  /* Reset page chrome — let the table flow full width. */
  body,
  .mud-main-content,
  .mud-page-content,
  .av-datagrid {
    background: white !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }

  .av-datagrid--fullscreen {
    position: static !important;
  }

  /* Tables — neutralize hover/zebra/selected so each row reads as data only. */
  .mud-table,
  .styled-table.mud-table {
    background: transparent !important;
  }

  .mud-table-body .mud-table-row:hover:not(.mud-selected-item),
  .styled-table .mud-table-body .mud-table-row:hover:not(.mud-selected-item) {
    background: transparent !important;
  }

  .mud-table-body .mud-table-row.mud-selected-item::after,
  .styled-table .mud-table-body .mud-table-row.mud-selected-item::after {
    content: none !important;
  }

  .mud-table-striped .mud-table-body .mud-table-row:nth-of-type(even) > td,
  .styled-table.mud-table-striped
    .mud-table-body
    .mud-table-row:nth-of-type(even)
    > td {
    background: transparent !important;
  }

  /* Sticky head doesn't make sense in print — let it flow inline. */
  .mud-table-sticky-header .mud-table-head .mud-table-cell,
  .styled-table.mud-table-sticky-header .mud-table-head .mud-table-cell {
    position: static !important;
    box-shadow: none !important;
  }

  /* Avoid row splits across page boundaries. */
  .mud-table-row {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Header bg printed (even with most browsers stripping bg colors by default
       unless `print-color-adjust: exact`) so the column band stays readable. */
  .mud-table-head .mud-table-cell,
  .styled-table .mud-table-head .mud-table-cell {
    background: var(--color-gray-200) !important;
    color: var(--color-gray-800) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* §10.9 ─── DataGrid utility classes (independent of .styled-table)
   ----------------------------------------------------------------------------
   Small rules consumed by the pilots in /identity/users-tailux-* and by future
   datatable pages. They EXIST as global utilities (not scoped to .styled-table)
   so MudDataGrid pages — which don't carry the legacy class — can still use
   them. Mirror equivalents under .styled-table already exist in avalme.css for
   the 42 legacy pages; both paths read the same value. */

/* MudDataGrid PropertyColumn headers default to text-align inherit which can
 center via parent flex layout. Force left-align under .av-datagrid scope
 so Name/Email/etc. headers align with their cell content. The cell-center
 modifier (below) wins for explicit-opt-in columns (Actions). */
.av-datagrid .mud-data-grid-header-cell {
  text-align: left;
}

/* Cell content centering — header AND body. The :has() / explicit-class
   pair mirrors avalme.css §669-717 but without the .styled-table parent. */
.mud-table-cell.cell-center,
.mud-data-grid-header-cell.cell-center {
  text-align: center;
}

.mud-table-cell.cell-center > *,
.mud-data-grid-header-cell.cell-center > * {
  margin-left: auto;
  margin-right: auto;
}

/* Right-aligned cell (e.g. a trailing action icon pushed to the far right of its column).
   Covers MudTable body cells AND MudDataGrid body cells — both render as .mud-table-cell —
   plus the grid header cell (.mud-data-grid-header-cell). The av-cells-left rule already
   excludes .cell-right via :not(.cell-right), so this is not overridden. */
.styled-table .mud-table-cell.cell-right,
.styled-table .mud-data-grid-header-cell.cell-right {
    text-align: right;
}

.styled-table .mud-table-cell.cell-right > *,
.styled-table .mud-data-grid-header-cell.cell-right > * {
    margin-left: auto;
    margin-right: 0;
}

/* Row-action button clusters centered horizontally inside their cell. */
.mud-table-cell .row-actions,
.mud-table-cell .tenant-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* Action-cluster icons follow the 18px icon rule (Mud's Size.Small renders ~20px). */
.mud-table-cell .row-actions .mud-icon-root,
.mud-table-cell .row-actions svg,
.mud-table-cell .tenant-actions .mud-icon-root,
.mud-table-cell .tenant-actions svg {
  width: 18px;
  height: 18px;
  font-size: 18px;
}

/* Status cell: keep the switch centered in the column so it lines up across every row,
   whether or not a trailing badge (e.g. DEFAULT) is present. The badge floats to the
   right of the centered switch (absolute) so its width never shifts the switch. */
.av-status-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
}

.av-status-cell__badge {
  position: absolute;
  left: calc(50% + 24px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
}

/* Presence dot — extracted from the legacy Users.razor inline style so the
   pilots can render online/offline indicators without redefining the class.
   The legacy page keeps its inline copy for now; both definitions match. */
.users-online-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-gray-400);
  display: inline-block;
  transition: all 0.3s ease;
}

.users-online-dot--active {
  background-color: var(--color-success, #25c16f);
  box-shadow: 0 0 0 3px rgb(from var(--color-success, #25c16f) r g b / 0.2);
  animation: usersPresencePulse 2s infinite;
}

@keyframes usersPresencePulse {
  0% {
    box-shadow: 0 0 0 0 rgb(from var(--color-success, #25c16f) r g b / 0.4);
  }

  70% {
    box-shadow: 0 0 0 6px rgb(from var(--color-success, #25c16f) r g b / 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgb(from var(--color-success, #25c16f) r g b / 0);
  }
}

/* §10.10 ─── User cell (name column with avatar + name + meta, flat layout)
   ----------------------------------------------------------------------------
   Replaces the legacy <PersonCard> component (a MudCard wrapper with shadow
   + padding) in datagrid name columns. Renders as a flat 2-line block: bold
   name on top, muted meta line below — same vertical rhythm as Tailux's
   user-list rows. Avatar is a 36 px circle on the left. */

.user-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  /* allows the text column to truncate inside flex */
}

/* Avatar — Tailux "squircle" shape (superellipse / iOS-style rounded
   square). Implemented via `mask-image` with an inline SVG path so the
   shape is mathematically a squircle (smoother corner transition than
   `border-radius`). Same technique as Tailux's `mask is-squircle`
   utility. The mask clips the `<img>` itself — no wrapper needed.
   `border-radius: 0` is explicit so any inherited radius from MudBlazor
   or browser defaults doesn't compete with the mask. */
.user-cell__avatar {
  width: 36px;
  height: 36px;
  border-radius: 0;
  object-fit: cover;
  flex-shrink: 0;
  -webkit-mask-image: var(--av-squircle-mask);
  mask-image: var(--av-squircle-mask);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: var(--color-gray-200);
  /* placeholder before image loads */
}

html.dark .user-cell__avatar {
  background-color: var(--color-dark-600);
}

.user-cell__text {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.user-cell__name {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-gray-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html.dark .user-cell__name {
  color: var(--color-dark-100);
}

.user-cell__meta {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.3;
  color: var(--color-gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html.dark .user-cell__meta {
  color: var(--color-dark-300);
}

/* §10.11 ─── Tag / Badge variants (table cell chips) ─────────────────────
   FUTURE-USE library — not currently applied to any datatable cell, but
   pre-built so a future column like "Status: Shipping / Processing /
   Pending", "Role: Author", "Visibility: Draft / Published", or a tag
   list can drop in the canonical Tailux look without inventing styles.

   Composition: `.av-tag` is the base. Always combine with EXACTLY ONE
   variant modifier (`--filled` / `--outlined` / `--soft`) AND ONE color
   modifier (`--primary` / `--info` / `--success` / `--warning` /
   `--error`). The `--pill` modifier is OPTIONAL — adds full pill
   (border-radius: 9999px); without it the chip uses our 4 px radius.

   Mirrors Tailux's `tag` and `badge` utility classes which share the
   same shape but differ only in radius:
     - Default radius (4 px)  ≈ Tailux's `.tag`
     - With `--pill`          ≈ Tailux's `.badge.rounded-full`

   Color tokens are wired through a `--this-*` indirection so the same
   3 variants × 5 colors = 15 combinations are generated from 8 rules. */
.av-tag {
  /* Default neutral palette — overridden by color modifier classes. */
  --this-color: var(--color-gray-700);
  --this-color-dark: var(--color-gray-800);
  --this-bg: var(--color-gray-600);
  --this-bg-hover: var(--color-gray-700);

  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 10px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  flex-shrink: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--this-color);
}

/* Dark mode, NEUTRAL only. The defaults above are light-mode greys, and nothing
   flipped them for dark: a tag with no color modifier ended up as gray-700 text
   on a near-black surface (the Task Manager "not started" status pill was
   unreadable). :where() keeps this at .av-tag specificity so the color
   modifiers below, which come later, still win. */
:where(html.dark) .av-tag {
  --this-color: var(--color-dark-100);
  --this-color-dark: var(--color-dark-50);
  --this-bg: var(--color-dark-300);
  --this-bg-hover: var(--color-dark-200);
}

/* Pill modifier — full rounded ends. Apply ON TOP of a variant. */
.av-tag--pill {
  border-radius: 9999px;
}

/* ── Color modifiers (set the --this-* CSS variables only) ─────────── */
.av-tag--primary {
  --this-color: var(--color-primary-600);
  --this-color-dark: var(--color-primary-700);
  --this-bg: var(--color-primary-600);
  --this-bg-hover: var(--color-primary-700);
}

.av-tag--info {
  --this-color: var(--color-info);
  --this-color-dark: var(--color-info-darker, var(--color-info));
  --this-bg: var(--color-info);
  --this-bg-hover: var(--color-info-darker, var(--color-info));
}

.av-tag--success {
  --this-color: var(--color-success);
  --this-color-dark: var(--color-success-darker, var(--color-success));
  --this-bg: var(--color-success);
  --this-bg-hover: var(--color-success-darker, var(--color-success));
}

.av-tag--warning {
  --this-color: var(--color-warning);
  --this-color-dark: var(--color-warning-darker);
  --this-bg: var(--color-warning);
  --this-bg-hover: var(--color-warning-darker);
}

.av-tag--error {
  --this-color: var(--color-error);
  --this-color-dark: var(--color-error-darker);
  --this-bg: var(--color-error);
  --this-bg-hover: var(--color-error-darker);
}

/* ── Variant: --filled (solid color, white text). Reference: the
   "Shipping" button. Used for high-contrast status pills that are
   the primary signal in their cell. */
.av-tag--filled {
  background: var(--this-bg);
  border-color: var(--this-bg);
  color: var(--color-white);
}

.av-tag--filled:hover {
  background: var(--this-bg-hover);
  border-color: var(--this-bg-hover);
}

/* ── Variant: --outlined (transparent bg, colored border at 30 %
   alpha, colored text). Reference: the "Author" badge. Used for
   medium-weight labels (roles, visibility, taxonomy). */
.av-tag--outlined {
  background: transparent;
  border-color: rgb(from var(--this-color) r g b / 0.3);
  color: var(--this-color);
}

html.dark .av-tag--outlined {
  /* Slightly lighter border + text in dark for legibility against
       the dark surface. */
  border-color: rgb(from var(--this-color) r g b / 0.4);
}

/* ── Variant: --soft (translucent bg at 7 % alpha, darker text).
   Reference: the "virtual-reality" badge. Used for low-weight tags
   that read as "annotation, not status" (categories, taxonomy). */
.av-tag--soft {
  background: rgb(from var(--this-bg) r g b / 0.07);
  border-color: rgb(from var(--this-bg) r g b / 0.1);
  color: var(--this-color-dark);
}

html.dark .av-tag--soft {
  background: rgb(from var(--this-bg) r g b / 0.18);
  color: var(--this-color);
}

/* Icon inside a tag — common pattern (truck for shipping, document
   for draft, etc.). Sized to match the 12 px text. */
.av-tag .mud-icon-root,
.av-tag svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Status-indicator dot inside a tag — leading 6×6 px round mark used by
   status chips (Pending / In Progress / Completed / Overdue) and any
   pill that needs an extra visual cue beyond the soft-tinted background.
   Inherits the variant's text color via `currentColor`, so a single
   declaration covers every color modifier. Sits as the first child of
   `.av-tag` (the parent's `gap` handles spacing). */
.av-tag__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* §10.12 ─── Avatar variants (table cell + future use) ───────────────────
   Layered approach: `.av-avatar` is a fixed-size box, each variant
   defines the shape (circle / squircle / rounded / dashed-halo). The
   `.user-cell__avatar` from §10.10 is a specialized 36 × 36 squircle —
   for ALL other "image in a cell" needs (course tiles, logo cells,
   non-person rows), pick the matching `.av-avatar--*` variant below
   so the table doesn't accumulate per-page avatar styles.

   FUTURE-USE — not currently applied to any cell. The variants exist
   so the doctrine has a documented answer when a designer asks
   "what shape for THIS avatar?". */
.av-avatar {
  display: inline-block;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  object-fit: cover;
  background-color: var(--color-gray-200);
}

html.dark .av-avatar {
  background-color: var(--color-dark-600);
}

/* Squircle — DEFAULT for person rows (see .user-cell__avatar §10.10).
   Reference: the "Larine Burgher" avatar. Use for "this is a USER /
   contact / employee" — soft-corner shape matches the iOS / Tailux
   reference. */
.av-avatar--squircle {
  border-radius: 0;
  -webkit-mask-image: var(--av-squircle-mask);
  mask-image: var(--av-squircle-mask);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Full circle — use for borrower / contact thumbnails when the row
   visually reads as "person profile, not data card" (e.g. a chat
   list, an inline mention chip). */
.av-avatar--circle {
  border-radius: 50%;
}

/* Rounded card — 8 px radius. Use for NON-PERSON images: product /
   course tiles, brand logos, document thumbnails. Reference: the
   "course-9" image. The 8 px matches `--av-table-radius` so card
   cells align with the frame's corner softness. */
.av-avatar--rounded {
  border-radius: var(--av-table-radius);
}

/* Initials fallback — when there's no image, render the user's
   initials inside a same-shape box. Reference: the "HS" example.
   Apply alongside a shape modifier (squircle / circle / rounded).
   Use a <span> or <div> instead of <img>; the bg color shows the
   initials. */
.av-avatar--initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-gray-700);
}

html.dark .av-avatar--initials {
  color: var(--color-dark-100);
}

/* Halo-on-hover — outer wrapper that shows a dashed border around
   the avatar when the parent ROW is hovered. Reference: the
   "Chiquita Flament" wrapper. Use sparingly — the effect competes
   with row-hover bg, so reserve it for tables where the avatar is
   the primary identifier (CRM contacts, member lists).

   Composition: wrap the inner avatar with .av-avatar--halo. The row
   that contains it must set the parent selector — `.mud-table-row`
   for MudTable, `.mud-data-grid .mud-table-row` for MudDataGrid.
   The dashed border is transparent by default and tints on row hover. */
.av-avatar--halo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  padding: 2px;
  border: 2px dashed transparent;
  transition: border-color 150ms ease;
}

.mud-table-row:hover .av-avatar--halo,
.mud-data-grid .mud-table-row:hover .av-avatar--halo {
  border-color: var(--color-gray-400);
}

html.dark .mud-table-row:hover .av-avatar--halo,
html.dark .mud-data-grid .mud-table-row:hover .av-avatar--halo {
  border-color: var(--color-dark-300);
}

/* ═══════════════════════════════════════════════════════════════════════════
   §12 — LANGUAGE SWITCHER (AppBar globe icon → dropdown of locales)
   ───────────────────────────────────────────────────────────────────────────
   Trigger lives in the AppBar actions cluster (geometry locked by
   `.av-appbar__actions .mud-icon-button` 36×36); only hover micro-motion is
   tuned here. The dropdown popover is a thin scrollable list of locales
   with rounded flag + native language name; the active row has a solid
   primary fill with white text (no check icon — the strong bg is the cue).

   Markup: `Shared/LanguageSwitcher.razor`.
   ═══════════════════════════════════════════════════════════════════════════ */

/* §12.1 ── Trigger (round icon button in the AppBar) ─────────────────── */
.av-lang-trigger {
  transition:
    transform 0.2s ease,
    background-color 0.2s ease;
}

.av-lang-trigger:hover {
  transform: scale(1.05);
}

/* §12.6 ── Label (native language name) ─────────────────────────────── */
.av-lang-label {
  color: var(--color-gray-800);
  font-weight: 500;
}

.av-lang-row--active .av-lang-label {
  color: var(--color-white);
  font-weight: 600;
}

/* ============================================================================
 * §13 ─── Filter pill (toolbar filter chips with Key:Value pattern)
 * ----------------------------------------------------------------------------
 * Reusable filter-chip primitive: pill-shaped button-like activator that
 * shows a label key + current value inline (e.g. "Assignee: Mine"). When
 * combined with MudMenu it gives the canonical "toolbar filter" UX used
 * across the CRM (Tasks, Pipelines, Reports, anywhere a list filters by
 * a discrete value).
 *
 * Promoted from the Style Guide Demo `bp-tm-demo-filter-pill` (defined
 * scoped to `/example/task-manager` in `mud-bridge.css §617+ / §1180+`)
 * to a global agnostic class. The visual contract is preserved — same
 * tokens, same hover/active state, same Key/Val typography.
 *
 *   §13.1  .av-filter-pill                 outer pill (works on MudButton,
 *                                          native <button>, <label>, <a>)
 *   §13.2  .av-filter-pill__key            "Assignee:" label (muted weight 500)
 *   §13.3  .av-filter-pill__val            "Mine" value (heavy weight 700)
 *   §13.4  .av-filter-pill__chev           trailing chevron icon color
 *   §13.5  .av-filter-pill--has-value      tinted primary state when a non-
 *                                          default value is selected
 *
 * Recommended markup (with MudMenu for the dropdown):
 *
 *   <MudMenu AnchorOrigin="Origin.BottomLeft" TransformOrigin="Origin.TopLeft">
 *       <ActivatorContent>
 *           <MudButton Variant="Variant.Outlined"
 *                      StartIcon="@HeroIcons.Outline.User"
 *                      EndIcon="@HeroIcons.Outline.ChevronDown"
 *                      Class="@($"av-filter-pill {(IsActive ? "av-filter-pill--has-value" : "")}")">
 *               <span class="av-filter-pill__key">Assignee:</span>
 *               <span class="av-filter-pill__val">@SelectedLabel</span>
 *           </MudButton>
 *       </ActivatorContent>
 *       <MudMenuItem OnClick="@(() => Set("all"))">All</MudMenuItem>
 *       <MudMenuItem OnClick="@(() => Set("mine"))">Mine</MudMenuItem>
 *   </MudMenu>
 *
 * Brand-aware via `--color-primary-*` tokens; dark-mode-aware via the
 * `html.dark` overrides at the end of the section.
 * ========================================================================== */

/* §13.1 — Outer pill (agnostic to host element) */
.av-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 12px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 10px;
  color: var(--color-gray-700);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition:
    background-color 0.15s,
    border-color 0.15s,
    color 0.15s;
}

.av-filter-pill:hover {
  background: var(--color-primary-50);
  border-color: var(--color-primary-300);
  color: var(--color-primary-700);
}

html.dark .av-filter-pill {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
  color: var(--color-dark-100);
}

/* §13.2 — Key (muted "Assignee:" label) */
.av-filter-pill__key {
  color: var(--color-gray-500);
  font-weight: 500;
  margin-right: 2px;
}

html.dark .av-filter-pill__key {
  color: var(--color-dark-300);
}

/* §13.3 — Val (selected value, heavier weight) */
.av-filter-pill__val {
  color: var(--color-gray-900);
  font-weight: 700;
}

html.dark .av-filter-pill__val {
  color: var(--color-dark-50);
}

/* §13.4 — Chevron icon (trailing) */
.av-filter-pill__chev,
.av-filter-pill .mud-icon-root {
  color: currentColor;
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* §13.5 — Has-value (active filter, primary tint) */
.av-filter-pill--has-value {
  background: var(--color-primary-50);
  border-color: var(--color-primary-400);
  color: var(--color-primary-700);
}

.av-filter-pill--has-value .av-filter-pill__key {
  color: inherit;
  opacity: 0.7;
}

.av-filter-pill--has-value .av-filter-pill__val {
  color: inherit;
}

html.dark .av-filter-pill--has-value {
  background: rgb(from var(--color-primary-500) r g b / 0.12);
  border-color: var(--color-primary-500);
  color: var(--color-primary-300);
}

/* §13.6 — MudButton-specific overrides
   MudButton injects classes (.mud-button-outlined, .mud-button-root) with
   stronger specificity and inline padding/min-height. When `.av-filter-pill`
   is applied to a MudButton, these compound rules win against Mud defaults. */
.mud-button-root.av-filter-pill,
.mud-button-root.av-filter-pill.mud-button-outlined {
  height: 38px !important;
  min-height: unset !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  border: 1px solid var(--color-gray-200) !important;
  background-color: var(--color-white) !important;
  color: var(--color-gray-700) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-transform: none !important;
  gap: 6px;
}

.mud-button-root.av-filter-pill:hover,
.mud-button-root.av-filter-pill.mud-button-outlined:hover {
  background-color: var(--color-primary-50) !important;
  border-color: var(--color-primary-300) !important;
  color: var(--color-primary-700) !important;
}

.mud-button-root.av-filter-pill.av-filter-pill--has-value {
  background-color: var(--color-primary-50) !important;
  border-color: var(--color-primary-400) !important;
  color: var(--color-primary-700) !important;
}

html.dark .mud-button-root.av-filter-pill,
html.dark .mud-button-root.av-filter-pill.mud-button-outlined {
  background-color: var(--color-dark-700) !important;
  border-color: var(--color-dark-500) !important;
  color: var(--color-dark-100) !important;
}

html.dark .mud-button-root.av-filter-pill.av-filter-pill--has-value {
  background-color: rgb(from var(--color-primary-500) r g b / 0.12) !important;
  border-color: var(--color-primary-500) !important;
  color: var(--color-primary-300) !important;
}

/* §13.7 — Icon-only variant (square 38×38 — same height as the standard pill,
   no label, no internal __key/__val slots). Designed for utility actions next
   to the pills (refresh, settings cog, fullscreen, etc.). Combinable with the
   base `.av-filter-pill` to inherit border / background / hover transitions.
   Works on MudIconButton (`.mud-icon-button`) AND MudButton (`.mud-button-root`)
   — both selectors are emitted so consumers can pick whichever Mud primitive
   fits the action. */
.mud-icon-button.av-filter-pill.av-filter-pill--icon-only,
.mud-button-root.av-filter-pill.av-filter-pill--icon-only {
  width: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;
  justify-content: center !important;
}

.mud-icon-button.av-filter-pill.av-filter-pill--icon-only .mud-icon-root,
.mud-button-root.av-filter-pill.av-filter-pill--icon-only .mud-icon-root {
  width: 16px !important;
  height: 16px !important;
}

/* Hover — icon tints to primary (cue that the action is interactive). Mirrors
   the regular pill hover but without the label color shift. */
.mud-icon-button.av-filter-pill.av-filter-pill--icon-only:hover,
.mud-button-root.av-filter-pill.av-filter-pill--icon-only:hover {
  color: var(--color-primary-700) !important;
}

html.dark .mud-icon-button.av-filter-pill.av-filter-pill--icon-only:hover,
html.dark .mud-button-root.av-filter-pill.av-filter-pill--icon-only:hover {
  color: var(--color-primary-300) !important;
}

/* §13.8 — Vertical divider (1 px × 20 px). Drops between filter pills and
   utility actions to visually segment the bar. Used as a stand-alone <div> —
   no Mud wrapping required. */
.av-filter-pill-divider {
  width: 1px;
  height: 20px;
  align-self: center;
  flex: 0 0 auto;
  margin: 0 2px;
  background: var(--color-gray-200);
}

html.dark .av-filter-pill-divider {
  background: var(--color-dark-500);
}

/* §13.9 — Scrollable popover for MudMenu lists that can grow (e.g. Assignee
   filter pill — the user list is dynamic). Pair with `MaxHeight` on MudMenu;
   this class lives on the popover root and adds the scrollbar + custom
   styling. Thin scrollbar matching the doctrine's gray ramp. */
.mud-popover.av-popover-scroll {
  overflow-y: auto;
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--color-gray-300) transparent;
}

.mud-popover.av-popover-scroll::-webkit-scrollbar {
  width: 6px;
}

.mud-popover.av-popover-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.mud-popover.av-popover-scroll::-webkit-scrollbar-thumb {
  background: var(--color-gray-300);
  border-radius: 3px;
}

.mud-popover.av-popover-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--color-gray-400);
}

html.dark .mud-popover.av-popover-scroll {
  scrollbar-color: var(--color-dark-400) transparent;
}

html.dark .mud-popover.av-popover-scroll::-webkit-scrollbar-thumb {
  background: var(--color-dark-400);
}

html.dark .mud-popover.av-popover-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--color-dark-300);
}

/* §13.10 — Filter-pill popover skin (AvFilterPill component).
   El popover de los filter pills hereda el text color global del bridge
   (§Last: --color-dark-100 en dark mode) que queda muy tenue contra el
   bg dark-700 — mismo síntoma que el TaskActionsMenu. Subimos el texto a
   --color-dark-50 y el icono no-activo a --color-dark-200 para jerarquía.
   Compose con .av-popover-scroll cuando el consumer pasa MaxHeight. */
.mud-popover.av-filter-pill-popover {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgb(15 17 21 / 0.12);
}

html.dark .mud-popover.av-filter-pill-popover {
  background-color: var(--color-dark-700);
  border-color: var(--color-dark-500);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.5);
}

.av-filter-pill-popover .mud-menu-item {
  padding: 8px 14px !important;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.av-filter-pill-popover .mud-menu-item:hover {
  background-color: var(--color-gray-100);
}

html.dark .av-filter-pill-popover .mud-menu-item,
html.dark .av-filter-pill-popover .mud-menu-item .mud-typography,
html.dark .av-filter-pill-popover .mud-menu-item .mud-button-label,
html.dark .av-filter-pill-popover .mud-menu-item .mud-menu-item-text {
  color: var(--color-dark-50) !important;
}

html.dark .av-filter-pill-popover .mud-menu-item:hover {
  background-color: var(--color-dark-600);
}

/* §13.11 — Search header opcional del popover (AvFilterPill con SearchPlaceholder).
   Sticky en el top + flex row con icon · input · clear-button. Sin border
   propio (usa el border-bottom para separarse del listado). El input es
   native <input> para que las teclas no roben focus al MudMenu — el patrón
   typing-to-filter funciona con stopPropagation en el wrapper. */
.av-filter-pill-popover__search {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-gray-150);
}

html.dark .av-filter-pill-popover__search {
  background-color: var(--color-dark-700);
  border-bottom-color: var(--color-dark-500);
}

.av-filter-pill-popover__search-icon {
  color: var(--color-gray-500);
  flex-shrink: 0;
}

html.dark .av-filter-pill-popover__search-icon {
  color: var(--color-dark-300);
}

.av-filter-pill-popover__search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-sans);
  color: var(--color-gray-800);
  padding: 4px 0;
}

.av-filter-pill-popover__search-input::placeholder {
  color: var(--color-gray-400);
}

html.dark .av-filter-pill-popover__search-input {
  color: var(--color-dark-50);
}

html.dark .av-filter-pill-popover__search-input::placeholder {
  color: var(--color-dark-300);
}

.av-filter-pill-popover__search-clear {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 9999px;
  color: var(--color-gray-500);
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.av-filter-pill-popover__search-clear:hover {
  background-color: var(--color-gray-150);
  color: var(--color-gray-800);
}

html.dark .av-filter-pill-popover__search-clear {
  color: var(--color-dark-300);
}

html.dark .av-filter-pill-popover__search-clear:hover {
  background-color: var(--color-dark-600);
  color: var(--color-dark-50);
}

/* §13.12 — Multi-select rows del Assignee pill. Cada row es un <button>
   nativo (no MudMenuItem) para que el MudMenu NO se cierre al cliquear —
   el user puede toggle varios items sin tener que reabrir el popover. Skin
   manual mimic the MudMenuItem hover/active pattern para que se sienta
   visualmente consistente con los demás filter pills. */
.av-multiselect-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 14px;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  text-align: left;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.av-multiselect-row:hover {
  background-color: var(--color-gray-100);
}

.av-multiselect-row--active {
  color: var(--color-primary-700);
  font-weight: 500;
  background-color: rgb(from var(--color-primary-500) r g b / 0.08);
}

.av-multiselect-row--active:hover {
  background-color: rgb(from var(--color-primary-500) r g b / 0.14);
}

.av-multiselect-row__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  flex-shrink: 0;
  color: var(--color-primary-600);
  font-weight: 600;
}

html.dark .av-multiselect-row {
  color: var(--color-dark-50);
}

html.dark .av-multiselect-row:hover {
  background-color: var(--color-dark-600);
}

html.dark .av-multiselect-row--active {
  color: var(--color-primary-300);
  background-color: rgb(from var(--color-primary-400) r g b / 0.18);
}

html.dark .av-multiselect-row--active:hover {
  background-color: rgb(from var(--color-primary-400) r g b / 0.24);
}

html.dark .av-multiselect-row__check {
  color: var(--color-primary-300);
}

/* ============================================================================
 * §14 ─── Tag with mark (entity-reference chip with colored initial)
 * ----------------------------------------------------------------------------
 * Dense pill that represents a reference to another entity (loan, project,
 * contact, document, etc.). Composition: a small round colored "mark" with
 * an uppercase initial, followed by the entity name and an optional type
 * suffix. Used when a list row needs to point at WHICH thing this row is
 * about ("Related To: P Project Phoenix · Loan").
 *
 *   §14.1  .av-tag-with-mark               outer pill (ellipsis on overflow)
 *   §14.2  .av-tag-with-mark__mark         18×18 colored badge with initial
 *   §14.3  .av-tag-with-mark__name         entity name (weight 550, ellipsis)
 *   §14.4  .av-tag-with-mark__type         tertiary type suffix
 *   §14.5  .av-tag-with-mark--<color>      mark color modifier (7 variants):
 *                                          info / success / warning / error /
 *                                          primary / amber / rose
 *
 * The pill itself stays neutral (gray surface) regardless of variant — only
 * the mark badge picks up the color. This keeps a list of pills readable
 * even when 5 different categories sit side-by-side.
 *
 * Tokens consumed: --color-gray-*, --color-white, --color-primary-*,
 * --color-info, --color-success, --color-amber-*, --color-red-*,
 * --color-rose-*, --radius-full (or fallback), --font-sans.
 * ========================================================================== */

/* §14.1 — Outer pill (neutral surface) */
.av-tag-with-mark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 4px;
  background: var(--color-gray-100);
  border: 1px solid var(--color-gray-200);
  border-radius: 9999px;
  color: var(--color-gray-700);
  font-family: var(--font-sans);
  font-size: 11.5px;
  line-height: 1.4;
  max-width: 220px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.dark .av-tag-with-mark {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
  color: var(--color-dark-200);
}

/* §14.2 — Mark (18×18 colored badge with letter) */
.av-tag-with-mark__mark {
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-700);
  /* fallback when no color variant */
  color: var(--color-white);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0;
  flex-shrink: 0;
}

/* §14.3 — Name (primary identifier) */
.av-tag-with-mark__name {
  font-weight: 550;
  color: var(--color-gray-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.dark .av-tag-with-mark__name {
  color: var(--color-dark-50);
}

/* §14.4 — Type (tertiary suffix, e.g. "· Loan") */
.av-tag-with-mark__type {
  color: var(--color-gray-500);
  font-weight: 400;
}

html.dark .av-tag-with-mark__type {
  color: var(--color-dark-300);
}

/* §14.5 — Mark color modifiers (7 variants — only the mark recolors) */
.av-tag-with-mark--info .av-tag-with-mark__mark {
  background: var(--color-info);
}

.av-tag-with-mark--success .av-tag-with-mark__mark {
  background: var(--color-success);
}

.av-tag-with-mark--warning .av-tag-with-mark__mark {
  background: var(--color-amber-900);
}

.av-tag-with-mark--error .av-tag-with-mark__mark {
  background: var(--color-red-600);
}

.av-tag-with-mark--primary .av-tag-with-mark__mark {
  background: var(--color-primary-600);
}

.av-tag-with-mark--amber .av-tag-with-mark__mark {
  background: var(--color-orange-600);
}

.av-tag-with-mark--rose .av-tag-with-mark__mark {
  background: var(--color-rose-600);
}

/* ============================================================================
 * §14b ── Related-entity chip (WI #704)
 * ----------------------------------------------------------------------------
 * Compact pill with leading HeroIcon, a primary "Display" label, a tertiary
 * "- Type" suffix, and an optional "+N" badge when the task has more than one
 * related item. Consumed by TaskRow (List view) and BoardCard (Board view).
 * The previous .av-tag-with-mark variant carried a colored initials badge
 * driven by a synthetic substring-classifier; #704 replaces that with a real
 * EntityType icon, so the chip is type-agnostic at the SKIN level — the
 * affordance (icon + identifier + type) is identical regardless of which of
 * the 16 canonical EntityTypes the row belongs to. Brand-aware via tokens;
 * dark mode flips automatically.
 *
 *   §14b.1  .av-related-chip              outer pill (cursor:pointer when
 *                                         consumer wires OnRelatedClick;
 *                                         hover swap is subtle so the chip
 *                                         doesn't compete with the row's own
 *                                         hover background)
 *   §14b.2  .av-related-chip__icon        14 px HeroIcons stroke (inherits
 *                                         primary tint)
 *   §14b.3  .av-related-chip__name        Display label (semibold, ellipsis)
 *   §14b.4  .av-related-chip__type        "- Type" suffix (gray-500 / dark)
 *   §14b.5  .av-related-chip__more        "+N" overflow badge (rounded square)
 * ============================================================================ */

.av-related-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  background: var(--color-gray-100);
  border: 1px solid var(--color-gray-200);
  border-radius: 9999px;
  color: var(--color-gray-700);
  font-family: var(--font-sans);
  font-size: 11.5px;
  line-height: 1.4;
  /* WI #1270 — cap at the SMALLER of 320px or the container width, so the chip
     keeps its compact 320px ceiling on wide rows yet never spills past a narrow
     container: the Board card (~232px), a squeezed List row (grid floor 220px),
     or the detail-drawer expanded list at ≤340px viewports. The __name below
     ellipsizes once the chip is capped. */
  max-width: min(320px, 100%);
  min-width: 0;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.av-related-chip:hover {
  background: var(--color-gray-150);
  border-color: var(--color-gray-300);
}

html.dark .av-related-chip {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
  color: var(--color-dark-200);
}

html.dark .av-related-chip:hover {
  background: var(--color-dark-600);
  border-color: var(--color-dark-400);
}

.av-related-chip__icon.mud-icon-root {
  width: 14px;
  height: 14px;
  font-size: 14px;
  color: var(--color-primary-600);
  flex-shrink: 0;
}

html.dark .av-related-chip__icon.mud-icon-root {
  color: var(--color-primary-400);
}

.av-related-chip__name {
  font-weight: 550;
  color: var(--color-gray-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

html.dark .av-related-chip__name {
  color: var(--color-dark-50);
}

.av-related-chip__type {
  color: var(--color-gray-500);
  font-weight: 400;
  flex-shrink: 0;
}

html.dark .av-related-chip__type {
  color: var(--color-dark-300);
}

.av-related-chip__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  margin-left: 2px;
  border-radius: 9999px;
  background: var(--color-primary-100, rgb(from var(--color-primary-600) r g b / 0.12));
  color: var(--color-primary-700, var(--color-primary-600));
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

html.dark .av-related-chip__more {
  background: rgb(from var(--color-primary-400) r g b / 0.18);
  color: var(--color-primary-300, var(--color-primary-400));
}

/* §14b.6  .av-related-chips — wrap container for the EXPANDED list of related
 * chips (task detail read view). Layout-only: lets every related item render as
 * its own pill (wrapping to new rows) instead of collapsing the extras into a
 * single "+N" badge. WI #704 follow-up (expand Related-To in the detail panel). */
.av-related-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ============================================================================
 * §15 ─── Tabs (page-level navigation)
 * ----------------------------------------------------------------------------
 * Two agnostic tab styles for page-level navigation. Both are stand-alone
 * primitives (no MudBlazor dependency) so they can host any markup inside —
 * native <button>, anchor, or MudButton when activator wrapping is needed.
 *
 *   §15.1  .av-tabs-with-icon                    underline variant with optional icons.
 *                                      Active tab gets a primary-colored
 *                                      underline + primary text. Use as the
 *                                      MAIN page-level tabbar (List / Board /
 *                                      Calendar / etc.).
 *   §15.2  .av-tabs-boxed              segmented-control variant. The bar is
 *                                      a tinted rounded container; the active
 *                                      tab is a white card inside. Use for
 *                                      sub-tabs INSIDE a section (Templates /
 *                                      Active / Builder / Activity Log).
 *
 * Common contract:
 *   - Outer wrapper handles horizontal overflow (`overflow-x: auto`) so a
 *     long tab list never wraps.
 *   - `__tab` is the activator; `--active` modifier marks the current.
 *   - Icons inside `__tab` are sized via the `.mud-icon-root` / `svg` rule.
 *   - Brand-aware (consumes `--color-primary-*`) and dark-mode-aware
 *     (`html.dark` overrides at the end of each subsection).
 * ========================================================================== */

/* §15.1 — Underline tabs (icon variant)
   Mounted on top of <MudTabs Class="av-tabs-with-icon"> — see mud-bridge.css §14
   for the chrome neutralization (toolbar padding, slider, scroll buttons,
   panel container all stripped). This file only paints the underline
   layout, tab typography, active state, and the optional count badge.

   Scrollbar hidden cross-browser so the active underline is never masked
   by a native horizontal scrollbar when the tab list overflows. */
.av-tabs-with-icon.mud-tabs {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* legacy Edge / IE */
  padding-bottom: 4px;
}

.av-tabs-with-icon.mud-tabs::-webkit-scrollbar {
  display: none;
  /* Chrome / Safari / Edge */
}

/* The bottom 2 px line that spans the full width below all tabs.
   Drawn on the wrapper that contains all tab buttons. Each tab's
   own border-bottom overlaps it (via margin-bottom: -2px on the
   tab) so the active tab's primary border-bottom visually replaces
   the gray line locally. */
.av-tabs-with-icon .mud-tabs-tabbar-wrapper {
  border-bottom: 2px solid var(--color-gray-150);
  width: 100%;
}

/* Each tab activator — Mud's <button class="mud-tab"> after the bridge
   neutralization. We add only the Tailux look: padding, typography,
   color, and the bottom-border that toggles on .mud-tab-active.

   IMPORTANT: `color` carries `!important` to beat the legacy
   global override in avalme.css §31439-31540 (which sets
   `color: white !important` on `.mud-tabs .mud-tab.mud-tab-active`).
   Padding gets !important for the same reason (legacy sets
   `padding: 0.75rem 1.25rem !important`). The legacy block has
   NO scope — every MudTabs in the app picks it up — so until that
   block is retired we have to win it explicitly. The scope
   `.av-tabs-with-icon` keeps our override targeted; other MudTabs
   pages (Index, 1003, AvalmeService, etc.) keep the legacy look
   intentionally until they migrate. */
.av-tabs-with-icon .mud-tab {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 14px 16px !important;
  /* margin-bottom: -2px pulls each tab 2px DOWN so its own border-
       bottom overlaps the wrapper's gray-150 line. For inactive tabs
       the tab border is transparent (gray shows through); for the
       active tab the primary border replaces the gray locally,
       producing the Tailux underline effect. */
  margin: 0 0 -2px 0 !important;
  border-radius: 0 !important;
  border-bottom: 2px solid transparent;
  color: var(--color-gray-700) !important;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  /* Tab switches are INSTANT — no transitions. Matches the Tailux
       WithIcon reference exactly. Mud's stock `transition: background-
       color 150ms` and avalme.css §31493 `transition: all 0.2s ease`
       legacy are both nullified. */
  transition: none !important;
}

.av-tabs-with-icon .mud-tab:hover,
.av-tabs-with-icon .mud-tab:focus {
  color: var(--color-gray-900) !important;
  outline: 0;
}

.av-tabs-with-icon .mud-tab.mud-tab-active {
  border-bottom-color: var(--color-primary-600) !important;
  color: var(--color-primary-600) !important;
}

/* The leading MudIcon inside .mud-tab-content. Sized to 18×18 for
   visual parity with the Tailux WithIcon spec. */
.av-tabs-with-icon .mud-tab .mud-icon-root,
.av-tabs-with-icon .mud-tab svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Optional trailing count badge — applied via .av-tabs-with-icon__tab-count
   on a <MudElement HtmlTag="span"> inside the <TabContent> slot. */
.av-tabs-with-icon__tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 1px 6px;
  background: var(--color-gray-100);
  color: var(--color-gray-600);
  border-radius: 9999px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}

.av-tabs-with-icon .mud-tab.mud-tab-active .av-tabs-with-icon__tab-count {
  background: var(--color-primary-100);
  color: var(--color-primary-700);
}

/* Dark mode — same !important strategy as light mode to win against
   any legacy global rules that may bind to `html.dark .mud-tabs ...`. */
html.dark .av-tabs-with-icon .mud-tabs-tabbar-wrapper {
  border-bottom-color: var(--color-dark-500);
}

html.dark .av-tabs-with-icon .mud-tab {
  color: var(--color-dark-200) !important;
}

html.dark .av-tabs-with-icon .mud-tab:hover,
html.dark .av-tabs-with-icon .mud-tab:focus {
  color: var(--color-dark-100) !important;
}

html.dark .av-tabs-with-icon .mud-tab.mud-tab-active {
  border-bottom-color: var(--color-primary-500) !important;
  color: var(--color-primary-400) !important;
}

html.dark .av-tabs-with-icon__tab-count {
  background: var(--color-dark-600);
  color: var(--color-dark-200);
}

html.dark
  .av-tabs-with-icon
  .mud-tab.mud-tab-active
  .av-tabs-with-icon__tab-count {
  background: rgb(from var(--color-primary-500) r g b / 0.16);
  color: var(--color-primary-300);
}

/* §15.2 — Boxed tabs (segmented-control variant) */
.av-tabs-boxed {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.av-tabs-boxed::-webkit-scrollbar {
  display: none;
}

.av-tabs-boxed__list {
  display: inline-flex;
  width: max-content;
  min-width: 100%;
  padding: 4px 6px;
  background: var(--color-gray-200);
  color: var(--color-gray-600);
  border-radius: 8px;
}

.av-tabs-boxed__tab {
  flex-shrink: 0;
  padding: 6px 12px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: inherit;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color 0.15s,
    background-color 0.15s,
    box-shadow 0.15s;
}

.av-tabs-boxed__tab:hover,
.av-tabs-boxed__tab:focus {
  color: var(--color-gray-900);
  outline: 0;
}

.av-tabs-boxed__tab--active {
  background: var(--color-white);
  color: var(--color-gray-900);
  box-shadow:
    0 1px 3px rgb(0 0 0 / 0.08),
    0 1px 2px rgb(0 0 0 / 0.06);
}

/* Dark mode */
html.dark .av-tabs-boxed__list {
  background: var(--color-dark-700);
  color: var(--color-dark-200);
}

html.dark .av-tabs-boxed__tab:hover,
html.dark .av-tabs-boxed__tab:focus {
  color: var(--color-dark-100);
}

html.dark .av-tabs-boxed__tab--active {
  background: var(--color-dark-500);
  color: var(--color-dark-50);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
}

/* WI #1875 — optional status dot after the label (AvTabItem.Status). Same tokens as the
   Borrower Information stepper dots it replaces. */
.av-tabs-boxed__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 8px;
  border-radius: 9999px;
  flex-shrink: 0;
  vertical-align: middle;
}

.av-tabs-boxed__dot--error {
  background: var(--color-error);
}

.av-tabs-boxed__dot--warning {
  background: var(--color-warning);
}

.av-tabs-boxed__dot--success {
  background: var(--color-success);
}

html.dark .av-tabs-boxed__dot--error {
  background: var(--color-error-lighter);
}

html.dark .av-tabs-boxed__dot--warning {
  background: var(--color-warning-lighter);
}

html.dark .av-tabs-boxed__dot--success {
  background: var(--color-success-lighter);
}

/* ============================================================================
 * §16 ─── Search input (filled, rounded, with prefix/suffix slots)
 * ----------------------------------------------------------------------------
 * Filled (not outlined) search field with a leading icon and an optional
 * trailing icon. Designed to live in toolbars / filterbars where the field
 * needs to read as "secondary chrome" (tinted gray surface) rather than as
 * a primary form field (which would use MudTextField Outlined).
 *
 * Pattern translated from the Tailux `forms/input/Search` reference: filled
 * gray-150 background, rounded-lg corners, 18 px magnifier prefix, and a
 * 3 px primary-500/50 focus ring. Suffix slot is optional (badge, clear-X,
 * kbd hint, spinner during debounce, etc.).
 *
 *   §16.1  .av-search-input             outer wrapper (background, radius,
 *                                       padding, focus-within ring)
 *   §16.2  .av-search-input__prefix     leading icon (typically magnifier)
 *   §16.3  .av-search-input__input      native <input>, transparent, flex 1
 *   §16.4  .av-search-input__suffix     trailing slot (icon / kbd / spinner)
 *
 * Brand-aware via `--color-primary-500` (focus ring). Dark-mode-aware via
 * `html.dark` overrides at the end of the section. Hosts native `<input>`
 * directly — no MudBlazor wrapper required.
 * ========================================================================== */

/* §16.1 — Outer wrapper (filled chrome) */
.av-search-input {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 240px;
  min-width: 200px;
  padding: 8px 14px;
  background: var(--color-gray-150);
  /* Transparent border in light mode preserves the filled-only look
       (no visible outline) while keeping the box-model stable so dark
       mode can paint a visible outline without causing a 2 px layout
       shift on theme switch. */
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  color: var(--color-gray-700);
  transition:
    box-shadow 0.15s,
    background-color 0.15s,
    border-color 0.15s;
}

.av-search-input:focus-within {
  box-shadow: 0 0 0 3px rgb(from var(--color-primary-500) r g b / 0.5);
}

/* Dark mode — keep the dark-700 filled surface AND paint a near-white
   outline (dark-400) so the field stands out against the page bg
   (dark-800), which is otherwise too close in luminance. */
html.dark .av-search-input {
  background: var(--color-dark-700);
  border-color: var(--color-dark-400);
  color: var(--color-dark-200);
}

/* §16.2 — Prefix (leading icon) */
.av-search-input__prefix,
.av-search-input__prefix .mud-icon-root,
.av-search-input__prefix svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--color-gray-500);
  pointer-events: none;
}

html.dark .av-search-input__prefix,
html.dark .av-search-input__prefix .mud-icon-root,
html.dark .av-search-input__prefix svg {
  color: var(--color-dark-300);
}

/* Focus state — prefix icon tints to brand primary so the field
   reads as "Avalme-branded" when active. */
.av-search-input:focus-within .av-search-input__prefix,
.av-search-input:focus-within .av-search-input__prefix .mud-icon-root,
.av-search-input:focus-within .av-search-input__prefix svg {
  color: var(--color-primary-600);
}

html.dark .av-search-input:focus-within .av-search-input__prefix,
html.dark .av-search-input:focus-within .av-search-input__prefix .mud-icon-root,
html.dark .av-search-input:focus-within .av-search-input__prefix svg {
  color: var(--color-primary-400);
}

/* §16.3 — Native <input> (transparent, no chrome of its own) */
.av-search-input__input {
  flex: 1 1 0;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  padding: 0;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  color: inherit;
  line-height: 1.4;
}

.av-search-input__input::placeholder {
  color: var(--color-gray-400);
  opacity: 1;
}

html.dark .av-search-input__input::placeholder {
  color: rgb(from var(--color-dark-200) r g b / 0.7);
}

/* §16.4 — Suffix (trailing slot — optional) */
.av-search-input__suffix,
.av-search-input__suffix .mud-icon-root,
.av-search-input__suffix svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--color-gray-500);
}

html.dark .av-search-input__suffix,
html.dark .av-search-input__suffix .mud-icon-root,
html.dark .av-search-input__suffix svg {
  color: var(--color-dark-300);
}

/* §16.5 — Keyboard hint chip (e.g. "⌘K") inside the suffix slot.
   Override the 18×18 SVG sizing rule above so the chip can be a tiny pill. */
.av-search-input__suffix .av-search-input__kbd,
.av-search-input__kbd {
  width: auto;
  height: auto;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--color-gray-200);
  color: var(--color-gray-500);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
  font-weight: 500;
  border: 1px solid var(--color-gray-300);
}

html.dark .av-search-input__kbd {
  background: var(--color-dark-600);
  color: var(--color-dark-200);
  border-color: var(--color-dark-500);
}

/* ============================================================================
 * §17 ─── Card (shell-only primitive)
 * ----------------------------------------------------------------------------
 * Minimal "empty" card primitive that supplies only the SHELL: background,
 * border-radius, and (for the default variant) a soft shadow. Internal
 * layout — padding, grid, child typography — is the consumer's job, so
 * the same primitive hosts a KPI tile, a meeting card, a stat block, a
 * preview thumbnail, etc., without any per-page overrides at the shell
 * level.
 *
 *   §17.1  .av-card                    filled white surface + soft shadow
 *                                      (default — "shadow skin" in Tailux
 *                                      terms). Use for elevated content
 *                                      that sits on the page background.
 *   §17.2  .av-card-outlined           transparent surface + 1 px border,
 *                                      no shadow. Use for de-emphasized
 *                                      groupings (legend, ghost actions,
 *                                      print-friendly layouts).
 *
 * Brand-aware indirectly (no primary tokens; only neutral gray / surface
 * tokens). Dark-mode-aware via `html.dark` overrides at the end of each
 * subsection.
 * ========================================================================== */

/* §17.1 — Filled shell (default) */
.av-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow:
    0 1px 2px rgb(0 0 0 / 0.04),
    0 1px 3px rgb(0 0 0 / 0.06);
}

html.dark .av-card {
  background: var(--color-dark-700);
  box-shadow: none;
}

/* §17.2 — Outlined shell (no fill, no shadow) */
.av-card-outlined {
  background: transparent;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: none;
}

html.dark .av-card-outlined {
  border-color: var(--color-dark-500);
}

/* §17.3 — Stat tile addon (padding + interactive hover affordance)
   Designed to compose with .av-card or .av-card-outlined: the addon
   provides the internal padding plus a stronger-shadow hover so the
   card reads as a clickable / drillable surface (KPI tile, summary
   block, dashboard stat). Compatible with either shell variant. */
.av-stat-tile {
  padding: 16px;
  transition: box-shadow 0.15s ease;
}

.av-stat-tile:hover {
  box-shadow:
    0 4px 12px rgb(0 0 0 / 0.06),
    0 2px 4px rgb(0 0 0 / 0.04);
}

html.dark .av-stat-tile:hover {
  box-shadow:
    0 4px 12px rgb(0 0 0 / 0.2),
    0 2px 4px rgb(0 0 0 / 0.15);
}

/* ============================================================================
 * §18 ─── KPI card (label · value · delta · tone-colored squircle icon)
 * ----------------------------------------------------------------------------
 * Self-contained KPI tile primitive. Combines shell (background, radius,
 * shadow, padding) with internal layout (left text block + right icon
 * squircle) and tone modifiers (the metric's identity color travels
 * through both the value and the icon). One primitive replaces what
 * used to live as `.dv1-kpi-*` in the dashboard and `.tm8-kpi-*` in V8.
 *
 *   §18.1  .av-kpi                     outer tile (shell + flex layout)
 *   §18.2  .av-kpi-text                left column (label / value / delta)
 *   §18.3  .av-kpi-label               metric name (13 px / weight 400)
 *   §18.4  .av-kpi-value               headline number (24 px / weight 500)
 *   §18.5  .av-kpi-delta               trend line (icon + percent / period)
 *   §18.6  .av-kpi-icon                48 × 48 squircle with tone bg
 *   §18.7  .av-kpi--<tone>             tone modifiers (info / warning /
 *                                      success / error / primary /
 *                                      secondary / neutral)
 *   §18.9  .av-kpi-grid               consumer strip grid (auto-fill 240px)
 *   §18.8  .av-kpi--lg                 large-size variant (bigger padding,
 *                                      value font, icon squircle)
 *
 * Brand-aware via `--color-primary-*` (primary tone) and the semantic
 * tokens for info / success. Dark-mode-aware via `html.dark` overrides.
 * ========================================================================== */

/* §18.1 — Tile shell + layout */
.av-kpi {
  position: relative;
  overflow-wrap: break-word;
  word-break: normal;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow:
    rgba(145, 158, 171, 0.2) 0px 0px 2px 0px,
    rgba(145, 158, 171, 0.12) 0px 12px 24px -4px;
  padding: 1.25rem;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease;
}

.av-kpi:hover {
  transform: translateY(-1px);
}

html.dark .av-kpi {
  background: var(--color-dark-700);
  box-shadow: none;
}

@media print {
  .av-kpi {
    border: 1px solid var(--color-gray-200);
    box-shadow: none;
  }
}

/* §18.2 — Text column */
.av-kpi-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

/* §18.3 — Metric label */
.av-kpi-label {
  font-size: 13px;
  color: var(--color-gray-600);
  font-weight: 400;
  line-height: 1.4;
}

html.dark .av-kpi-label {
  color: var(--color-dark-200);
}

/* §18.4 — Headline value (color comes from tone modifier) */
.av-kpi-value {
  margin-top: 2px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-gray-900);
}

html.dark .av-kpi-value {
  color: var(--color-dark-50);
}

/* §18.5 — Trend delta (success-colored by default — overridable per use) */
.av-kpi-delta {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-success);
}

html.dark .av-kpi-delta {
  color: var(--color-success-lighter);
}

/* Delta tone modifiers — up/good = positive (green), down/bad = negative (red),
   flat/neutral = no change (gray). Emitted by both dashboards. */
.av-kpi-delta--up,
.av-kpi-delta--good {
  color: var(--color-success);
}

.av-kpi-delta--down,
.av-kpi-delta--bad {
  color: var(--color-error);
}

.av-kpi-delta--flat,
.av-kpi-delta--neutral {
  color: var(--color-gray-500);
}

html.dark .av-kpi-delta--up,
html.dark .av-kpi-delta--good {
  color: var(--color-success-lighter);
}

html.dark .av-kpi-delta--down,
html.dark .av-kpi-delta--bad {
  color: var(--color-error-lighter);
}

html.dark .av-kpi-delta--flat,
html.dark .av-kpi-delta--neutral {
  color: var(--color-dark-300);
}

.av-kpi-delta .mud-icon-root,
.av-kpi-delta svg {
  width: 14px;
  height: 14px;
}

/* §18.6 — Icon squircle (48 × 48 default; --lg bumps to 56 × 56) */
.av-kpi-icon {
  width: 48px;
  height: 48px;
  border-radius: 28%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: flex-start;
  background: var(--color-gray-100);
  color: var(--color-gray-700);
}

.av-kpi-icon .mud-icon-root,
.av-kpi-icon svg {
  width: 24px;
  height: 24px;
}

html.dark .av-kpi-icon {
  background: var(--color-dark-600);
  color: var(--color-dark-100);
}

/* §18.7 — Tone modifiers (paint value + icon) */
.av-kpi--info .av-kpi-value {
  color: var(--color-sky-500);
}

.av-kpi--warning .av-kpi-value {
  color: var(--color-amber-500);
}

.av-kpi--success .av-kpi-value {
  color: var(--color-success);
}

.av-kpi--error .av-kpi-value {
  color: var(--color-red-600);
}

.av-kpi--primary .av-kpi-value {
  color: var(--color-primary-600);
}

.av-kpi--secondary .av-kpi-value {
  color: var(--color-rose-600);
}

.av-kpi--neutral .av-kpi-value {
  color: var(--color-gray-700);
}

html.dark .av-kpi--info .av-kpi-value {
  color: var(--color-sky-400);
}

html.dark .av-kpi--warning .av-kpi-value {
  color: var(--color-amber-400);
}

html.dark .av-kpi--success .av-kpi-value {
  color: var(--color-success-lighter);
}

html.dark .av-kpi--error .av-kpi-value {
  color: var(--color-red-400);
}

html.dark .av-kpi--primary .av-kpi-value {
  color: var(--color-primary-400);
}

html.dark .av-kpi--secondary .av-kpi-value {
  color: var(--color-rose-400);
}

html.dark .av-kpi--neutral .av-kpi-value {
  color: var(--color-dark-100);
}

.av-kpi--info .av-kpi-icon {
  background: rgb(from var(--color-sky-500) r g b / 0.12);
  color: var(--color-sky-700);
}

.av-kpi--warning .av-kpi-icon {
  background: rgb(from var(--color-amber-500) r g b / 0.14);
  color: var(--color-amber-700);
}

.av-kpi--success .av-kpi-icon {
  background: rgb(from var(--color-success) r g b / 0.12);
  color: var(--color-success-darker);
}

.av-kpi--error .av-kpi-icon {
  background: rgb(from var(--color-red-600) r g b / 0.12);
  color: var(--color-red-700);
}

.av-kpi--primary .av-kpi-icon {
  background: rgb(from var(--color-primary-600) r g b / 0.12);
  color: var(--color-primary-700);
}

.av-kpi--secondary .av-kpi-icon {
  background: rgb(from var(--color-rose-600) r g b / 0.12);
  color: var(--color-rose-700);
}

.av-kpi--neutral .av-kpi-icon {
  background: var(--color-gray-100);
  color: var(--color-gray-700);
}

html.dark .av-kpi--info .av-kpi-icon {
  background: rgb(from var(--color-sky-500) r g b / 0.2);
  color: var(--color-sky-400);
}

html.dark .av-kpi--warning .av-kpi-icon {
  background: rgb(from var(--color-amber-500) r g b / 0.22);
  color: var(--color-amber-400);
}

html.dark .av-kpi--success .av-kpi-icon {
  background: rgb(from var(--color-success) r g b / 0.2);
  color: var(--color-success-lighter);
}

html.dark .av-kpi--error .av-kpi-icon {
  background: rgb(from var(--color-red-600) r g b / 0.2);
  color: var(--color-red-400);
}

html.dark .av-kpi--primary .av-kpi-icon {
  background: rgb(from var(--color-primary-500) r g b / 0.22);
  color: var(--color-primary-300);
}

html.dark .av-kpi--secondary .av-kpi-icon {
  background: rgb(from var(--color-rose-600) r g b / 0.2);
  color: var(--color-rose-400);
}

html.dark .av-kpi--neutral .av-kpi-icon {
  background: var(--color-dark-600);
  color: var(--color-dark-100);
}

/* §18.8 — Large-size variant (bumps padding, value font, icon squircle) */
.av-kpi--lg {
  padding: 1.5rem;
  gap: 20px;
}

.av-kpi--lg .av-kpi-value {
  font-size: 30px;
  margin-top: 4px;
}

.av-kpi--lg .av-kpi-icon {
  width: 56px;
  height: 56px;
}

.av-kpi--lg .av-kpi-icon .mud-icon-root,
.av-kpi--lg .av-kpi-icon svg {
  width: 28px;
  height: 28px;
}

.av-kpi--lg .av-kpi-delta {
  font-size: 14px;
  margin-top: 14px;
}

/* §18.9 — KPI strip: the consumer-side grid the tiles sit in (investor dashboard, pipeline). The
   card is the cell; this owns columns, gap and the mobile collapse. */
.av-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

/* ============================================================================
 * §19 ─── Task Group (DOMAIN-SPECIFIC: task manager date-collapsible)
 * ----------------------------------------------------------------------------
 * NOT AGNOSTIC. This section groups task list rows under a date header
 * with a collapsible toggle. The class family lives in the global stylesheet
 * for reuse across V8 + future task-manager iterations, but the semantic
 * is tied to "a list of tasks grouped by date" — promote to a different
 * agnostic name (e.g. `.av-section-group`) only if another domain
 * (notifications, audit log, etc.) reuses the same exact pattern.
 *
 *   §19.1  .av-task-group                 outer section (bg surface, border,
 *                                         radius, subtle shadow, overflow
 *                                         hidden — clips child border-radius)
 *   §19.2  .av-task-group__head           date header row (flex, padding,
 *                                         tinted surface, border-bottom)
 *   §19.3  .av-task-group__toggle         chevron click target (MudIconButton
 *                                         with chrome overrides)
 *   §19.4  .av-task-group__caret          chevron icon — rotates -90deg
 *                                         when paired with --collapsed
 *   §19.5  .av-task-group__title          date title (weight 600, gray-900)
 *   §19.6  .av-task-group__date           sub-date (mono, gray-500)
 *   §19.7  .av-task-group__count          tasks count badge (pill, mono)
 *   §19.8  .av-task-group__add            "+ Add Task" text button (primary,
 *                                         pushed right via margin-left:auto)
 *   §19.9  .av-task-group__list           flex column wrapper for task rows
 *
 * Brand-aware via `--color-primary-*`. Dark-mode-aware via `html.dark`
 * overrides at the end of the section.
 * ========================================================================== */

/* §19.1 — Outer section shell */
.av-task-group {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
  overflow: hidden;
}

html.dark .av-task-group {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
  box-shadow: none;
}

/* §19.2 — Date header row */
.av-task-group__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--color-gray-50);
  border-bottom: 1px solid var(--color-gray-200);
}

html.dark .av-task-group__head {
  background: var(--color-dark-800);
  border-bottom-color: var(--color-dark-500);
}

/* §19.3 — Toggle button (Mud chrome neutralized — just the caret hit area) */
.mud-icon-button.av-task-group__toggle {
  padding: 2px !important;
  min-width: 0 !important;
  width: 24px !important;
  height: 24px !important;
  background: transparent !important;
  color: var(--color-gray-500);
}

.mud-icon-button.av-task-group__toggle:hover {
  background: var(--color-gray-100) !important;
  color: var(--color-gray-900);
}

html.dark .mud-icon-button.av-task-group__toggle {
  color: var(--color-dark-300);
}

html.dark .mud-icon-button.av-task-group__toggle:hover {
  background: var(--color-dark-600) !important;
  color: var(--color-dark-50);
}

/* §19.4 — Caret icon (rotates when toggle has --collapsed modifier)
   Targets the inner .mud-icon-root because MudIconButton renders the
   chevron internally; consumer puts `--collapsed` on the toggle itself. */
.av-task-group__toggle .mud-icon-root {
  width: 14px !important;
  height: 14px !important;
  transition: transform 0.12s ease;
}

.av-task-group__toggle--collapsed .mud-icon-root {
  transform: rotate(-90deg);
}

/* §19.5 — Date title (e.g. "Wednesday, Apr 1") */
.av-task-group__title {
  font-weight: 600;
  font-size: 14px;
  color: var(--color-gray-900);
}

html.dark .av-task-group__title {
  color: var(--color-dark-50);
}

/* §19.6 — Sub-date (e.g. "Apr 1, 2026") */
.av-task-group__date {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-gray-500);
}

html.dark .av-task-group__date {
  color: var(--color-dark-300);
}

/* §19.7 — Count badge (small pill) */
.av-task-group__count {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 9999px;
  padding: 1px 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-gray-700);
}

html.dark .av-task-group__count {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
  color: var(--color-dark-200);
}

/* §19.8 — Add Task text button (MudButton chrome neutralized) */
.mud-button-root.av-task-group__add {
  margin-left: auto;
  padding: 4px 10px !important;
  min-width: 0 !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--color-primary-600) !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.mud-button-root.av-task-group__add:hover {
  background: var(--color-primary-50) !important;
  color: var(--color-primary-700) !important;
}

html.dark .mud-button-root.av-task-group__add {
  color: var(--color-primary-400) !important;
}

html.dark .mud-button-root.av-task-group__add:hover {
  background: rgb(from var(--color-primary-500) r g b / 0.12) !important;
  color: var(--color-primary-300) !important;
}

/* §19.9 — Task rows wrapper */
.av-task-group__list {
  display: flex;
  flex-direction: column;
}

/* ============================================================================
 * §20  Page header (AvPageHeader)
 *
 * Agnostic page-level header — title + optional subtitle + optional right-side
 * actions slot. Two size variants:
 *
 *   .av-pagehead                 — Default. Tailux baseline (text-3xl, 600).
 *                                  For sub-pages, settings, drill-downs.
 *   .av-pagehead--lg             — Hero look (38 px, weight 400, larger gap).
 *                                  For top-level pages (Task Manager, etc.).
 *
 * The title supports an inline <em> for primary-tinted emphasis (consumers
 * can put a key word inside <em> to highlight it).
 *
 * Mud neutralization: mud-bridge.css §13.
 * Consumed by: <AvPageHeader> at Shared/Layout/AvPageHeader.razor.
 * ========================================================================== */

.av-pagehead {
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
  gap: 4px;
}

.av-pagehead--lg {
  gap: 12px;
}

.av-pagehead__title.mud-typography {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-gray-800);
}

.av-pagehead--lg .av-pagehead__title.mud-typography {
  font-size: clamp(var(--text-3xl), 3.2vw, 38px);
  line-height: 1.1;
  font-weight: 400;
}

.av-pagehead__title em {
  font-style: italic;
  color: var(--color-primary-600);
}

.av-pagehead__subtitle.mud-typography {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 400;
  color: var(--color-gray-600);
  max-width: 70ch;
}

.av-pagehead__actions {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Dark mode ─────────────────────────────────────────────────────────────── */
html.dark .av-pagehead__title.mud-typography {
  color: var(--color-dark-100);
}

html.dark .av-pagehead__title em {
  color: var(--color-primary-400);
}

html.dark .av-pagehead__subtitle.mud-typography {
  color: var(--color-dark-300);
}

/* Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .av-pagehead {
    margin-bottom: 16px;
  }

  .av-pagehead--lg .av-pagehead__title.mud-typography {
    font-size: var(--text-3xl);
  }
}

/* ============================================================================
 * §21 ─── Task row (av-task-row)
 * ----------------------------------------------------------------------------
 * Single task row of the Task Manager v8 List view. 9-column grid layout:
 * checkbox + priority dot + title/desc + related pill + due time + avatar +
 * status tag + 2 action icon buttons.
 *
 * Specific to Task Manager v8 (consumed by Pages/TaskManager/V8/Components/
 * TaskRow.razor). The skin is doctrinal — same naming and dark-mode rhythm
 * as the rest of the av-* family — but the consumer is domain-specific.
 *
 *   §21.1  .av-task-row              outer <article> wrapper (grid + hover)
 *   §21.2  .av-task-row__check       checkbox label + native input + custom
 *                                    box (.av-task-row__check-box)
 *   §21.3  .av-task-row__prio        priority dot (8 px circle) + variants
 *                                    --urgent / --high / --medium / --low
 *   §21.4  .av-task-row__main        title + description column
 *                                    (.av-task-row__title / __desc)
 *   §21.5  .av-task-row__related     wrapper for the av-tag-with-mark pill
 *   §21.6  .av-task-row__time        clock icon + mono due time
 *   §21.7  .av-task-row__avatar      24 px initials circle + c0-c7 buckets
 *   §21.8  .av-task-row__icon        MudIconButton chrome override (26 × 26)
 *
 * Brand-aware via `--color-primary-*` (icon hover) and the success token
 * (checked checkbox). Dark-mode-aware via `html.dark` overrides at the end
 * of each subsection.
 * ========================================================================== */

/* §21.1 — Outer wrapper (grid + border + hover) */
.av-task-row {
  /* 8 columns: checkbox / priority dot / title / participants(assignees+/+watchers) /
       time / status / refresh icon / actions menu. The participants column replaced
       the legacy "related entity pill" — see TaskRow.razor for the rationale (user
       prefers seeing WHO is on the task over WHICH entity it relates to). */
  display: grid;
  grid-template-columns:
    28px 8px minmax(220px, 1fr) minmax(180px, auto)
    90px auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-gray-150);
  cursor: pointer;
  transition: background-color 0.12s ease;
}

/* Same eight columns minus the checkbox track. Without this the seven remaining children shift one
   column left and the title lands in the 8px priority-dot track. */
.av-task-row--no-check {
  grid-template-columns:
    8px minmax(220px, 1fr) minmax(180px, auto)
    90px auto auto auto;
}

/* Participants cluster — assignees + optional slash + watchers, all in the
   same grid cell. flex row with a small gap so the two stacks read as one
   "people on this task" cluster. */
.av-task-row__participants {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

/* Accept / Decline cluster — replaces the refresh icon when the caller has
   a Pending TaskAssignee row on the task. Inline two icon buttons in a flex
   row so they read as a binary choice. */
.av-task-row__accept-cluster {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.av-task-row__icon--accept .mud-icon-root {
  color: var(--color-success);
}

.av-task-row__icon--decline .mud-icon-root {
  color: var(--color-error);
}

/* "Pending" chip next to the title. Amber tint to signal "needs your
   attention" without alarming. */
.av-task-row__pending-chip {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 9999px;
  background: rgb(from var(--color-warning) r g b / 0.12);
  color: var(--color-warning-darker, var(--color-amber-700));
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
  vertical-align: middle;
}

html.dark .av-task-row__pending-chip {
  background: rgb(from var(--color-warning) r g b / 0.2);
  color: var(--color-warning);
}

.av-task-row__participants-sep {
  color: var(--color-gray-400);
  font-weight: 500;
  user-select: none;
}

html.dark .av-task-row__participants-sep {
  color: var(--color-dark-400);
}

.av-task-row:last-child {
  border-bottom: 0;
}

.av-task-row:hover {
  background: var(--color-gray-50);
}

html.dark .av-task-row {
  border-bottom-color: var(--color-dark-500);
}

html.dark .av-task-row:hover {
  background: var(--color-dark-800);
}

/* §21.2 — Checkbox (native <input> hidden under a custom box) */
.av-task-row__check {
  position: relative;
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.av-task-row__check input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}

.av-task-row__check-box {
  display: inline-flex;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--color-gray-300);
  border-radius: 4px;
  background: var(--color-white);
  align-items: center;
  justify-content: center;
  color: transparent;
  transition:
    background-color 0.12s,
    border-color 0.12s,
    color 0.12s;
}

.av-task-row__check input:checked + .av-task-row__check-box {
  background: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-white);
}

html.dark .av-task-row__check-box {
  border-color: var(--color-dark-400);
  background: var(--color-dark-700);
}

/* §21.3 — Priority dot */
.av-task-row__prio {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
}

.av-task-row__prio--urgent {
  background: var(--color-red-600);
  box-shadow: 0 0 0 3px rgb(from var(--color-red-600) r g b / 0.12);
}

.av-task-row__prio--high {
  background: var(--color-orange-600);
}

.av-task-row__prio--medium {
  background: var(--color-amber-600);
}

.av-task-row__prio--low {
  background: var(--color-gray-500);
}

/* §21.4 — Main column (title + description) */
.av-task-row__main {
  min-width: 0;
}

.av-task-row__title {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-gray-950);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.av-task-row__desc {
  font-size: 12.5px;
  color: var(--color-gray-600);
  line-height: 1.4;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.dark .av-task-row__title {
  color: var(--color-dark-50);
}

html.dark .av-task-row__desc {
  color: var(--color-dark-200);
}

/* §21.5 — Related slot (wrapper for av-tag-with-mark) */
.av-task-row__related {
  min-width: 0;
}

/* §21.5.bis — Tags chip row (WI #697 follow-up). Cluster compacto de chips
   debajo de title/desc/related para confirmar visualmente las tags
   persistidas. Cap 3 + "+N more" para no inflar la fila si hay muchas. El
   color usa los tokens neutros del proyecto y mantiene el contraste en
   dark mode automáticamente. */
.av-task-row__tags {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}

.av-task-row__tag-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--color-gray-700);
  background: var(--color-gray-100);
  border: 1px solid var(--color-gray-200);
  border-radius: 9999px;
  line-height: 1.4;
  white-space: nowrap;
}

.av-task-row__tag-chip--more {
  color: var(--color-gray-600);
  background: var(--color-gray-50);
  border-style: dashed;
  cursor: help;
}

html.dark .av-task-row__tag-chip {
  color: var(--color-gray-200);
  background: rgb(from var(--color-gray-700) r g b / 0.35);
  border-color: rgb(from var(--color-gray-600) r g b / 0.55);
}

html.dark .av-task-row__tag-chip--more {
  background: transparent;
  border-color: rgb(from var(--color-gray-600) r g b / 0.4);
}

/* §21.6 — Due time stamp (mono, amber) */
.av-task-row__time {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--color-amber-600);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  flex-shrink: 0; /* protege contra el solapamiento con el chip status — la
                     fila completa puede comprimirse pero el time queda intacto */
}

.av-task-row__time .mud-icon-root {
  width: 14px !important;
  height: 14px !important;
}

/* §21.6.a — Stack vertical local↑/utc↓ para que la referencia UTC quepa
   sin solaparse con el chip de status. Local en amber (acento), UTC chico
   en gris (secundario). El icono clock vive a la izquierda del stack. */
.av-task-row__time-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.1;
}

.av-task-row__time-local {
  font-size: 11.5px;
}

.av-task-row__time-utc {
  font-size: 9.5px;
  color: var(--color-gray-500);
  letter-spacing: 0;
}

html.dark .av-task-row__time-utc {
  color: var(--color-dark-300);
}

/* §21.7 — Avatar — see §22 Bucket avatar (agnostic primitive).
   TaskRow consumes `.av-bucket-avatar` + `--c0…--c7` directly so the
   color-bucket logic isn't duplicated per consumer. */

/* §21.8 — Action icon button (MudIconButton chrome override, 26×26 squircle) */
.mud-icon-button.av-task-row__icon {
  padding: 0 !important;
  min-width: 0 !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--color-gray-400) !important;
}

/* WI #1086 — reserva el ancho del botón de acción (26px) en filas completadas,
   para que el track T7 (auto) no colapse y corra las columnas del grid entre
   filas activas y completadas. Visible en ContactTasksTab, que interleava
   completadas con activas en el mismo ListView (en /task-manager las
   completadas van por CompletedView, no TaskRow). */
.av-task-row__icon-spacer {
  display: inline-block;
  width: 26px;
  height: 26px;
}

.mud-icon-button.av-task-row__icon:hover {
  background: var(--color-primary-50) !important;
  color: var(--color-primary-600) !important;
}

.mud-icon-button.av-task-row__icon .mud-icon-root {
  width: 16px !important;
  height: 16px !important;
}

html.dark .mud-icon-button.av-task-row__icon {
  color: var(--color-dark-300) !important;
}

html.dark .mud-icon-button.av-task-row__icon:hover {
  background: rgb(from var(--color-primary-500) r g b / 0.16) !important;
  color: var(--color-primary-300) !important;
}

/* ============================================================================
 * §22 ─── Bucket avatar (initials in colored circle, 8 color buckets)
 * ----------------------------------------------------------------------------
 * Agnostic round 24×24 avatar with initials inside, used when a user (or any
 * entity) needs a visual identity badge AND no real photo / icon is available.
 * The color comes from a stable hash bucket (0-7) so the same user always
 * gets the same color across the app.
 *
 *   .av-bucket-avatar              base circle (gray fallback + Inter initials)
 *   .av-bucket-avatar--c0…--c7     color bucket modifier (8 distinct hues)
 *
 * Brand-aware: c0 follows `--color-primary-600` (the active brand color);
 * c7 maps to purple-500 (the only bucket that doesn't follow the primary).
 * Dark-mode-aware via the `html.dark` override of the gray fallback.
 *
 * Consumed by: TaskRow (List view), BoardCard (Board view), and any future
 * V8 view that needs to point at "who owns this task". Promotable to other
 * domains as-is — no Task-specific assumption in the primitive.
 * ========================================================================== */

.av-bucket-avatar {
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  background: var(--color-gray-100);
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

/* Variantes de tamaño — consumidas por TaskAssigneeAvatar.razor §40 cuando
   el caller pide size="md" (32×32) o "lg" (40×40). Default sin modifier =
   24×24 (matchea el bucket avatar histórico de TaskRow). */
.av-bucket-avatar--md {
  width: 32px;
  height: 32px;
  font-size: 12px;
}

.av-bucket-avatar--lg {
  width: 40px;
  height: 40px;
  font-size: 14px;
}

html.dark .av-bucket-avatar {
  background: var(--color-dark-600);
}

.av-bucket-avatar--c0 {
  background: var(--color-primary-600);
}

.av-bucket-avatar--c1 {
  background: var(--color-sky-500);
}

.av-bucket-avatar--c2 {
  background: var(--color-success);
}

.av-bucket-avatar--c3 {
  background: var(--color-amber-600);
}

.av-bucket-avatar--c4 {
  background: var(--color-red-600);
}

.av-bucket-avatar--c5 {
  background: var(--color-orange-600);
}

.av-bucket-avatar--c6 {
  background: var(--color-gray-500);
}

.av-bucket-avatar--c7 {
  background: var(--color-purple-500);
}

/* ============================================================================
 * §23 ─── Task board (av-task-board)
 * ----------------------------------------------------------------------------
 * "Board" view of the Task Manager v8: responsive grid of status columns
 * (Not Started / In Progress / Pending / Waiting / Completed), each column
 * holds a stack of task cards.
 *
 *   §23.1  .av-task-board                     outer grid (5 cols ≥1280, 3 cols
 *                                              ≥800, 1 col mobile)
 *   §23.2  .av-task-board__column             single column (tinted surface)
 *   §23.3  .av-task-board__column-head        header row (dot + title + count
 *                                              + add icon)
 *   §23.4  .av-task-board__column-dot         8 px dot + status variants
 *                                              (--not-started / --in-progress /
 *                                              --pending / --waiting / --completed)
 *   §23.5  .av-task-board__column-title       column label (weight 600)
 *   §23.6  .av-task-board__column-count       small pill with task count
 *   §23.7  .av-task-board__column-add         MudIconButton chrome override
 *                                              (22×22 squircle, right-anchored)
 *   §23.8  .av-task-board__column-body        flex column for the cards
 *   §23.9  .av-task-board__column-empty       empty-state text inside a column
 *   §23.10 .av-task-board__card               task card (border + shadow + hover
 *                                              lift)
 *   §23.11 .av-task-board__card-head          row with priority dot + title
 *   §23.12 .av-task-board__card-prio          6 px dot + priority variants
 *                                              (--high / --medium / --low)
 *   §23.13 .av-task-board__card-title         task title
 *   §23.14 .av-task-board__card-related       wrapper for av-tag-with-mark
 *   §23.15 .av-task-board__card-foot          row with avatar + due time
 *   §23.16 .av-task-board__card-time          mono due-time text
 *
 * Specific to Task Manager v8 (consumed by Pages/TaskManager/V8/Components/
 * BoardView, BoardColumn, BoardCard). Brand-aware via `--color-primary-*`
 * (column-add hover) + `--color-info` (in-progress dot) + `--color-success`
 * (completed dot). Dark-mode-aware via `html.dark` overrides at the end of
 * each subsection.
 * ========================================================================== */

/* §23.1 — Outer grid */
.av-task-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(280px, 1fr));
  gap: 16px;
  overflow-x: auto;
}

@media (max-width: 1280px) {
  .av-task-board {
    grid-template-columns: repeat(3, minmax(280px, 1fr));
  }
}

@media (max-width: 800px) {
  .av-task-board {
    grid-template-columns: 1fr;
  }
}

/* §23.2 — Column (tinted surface, bordered, padded) */
.av-task-board__column {
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-150);
  border-radius: 12px;
  padding: 12px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

html.dark .av-task-board__column {
  background: var(--color-dark-800);
  border-color: var(--color-dark-500);
}

/* §23.3 — Column header */
.av-task-board__column-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* §23.4 — Column status dot + variants */
.av-task-board__column-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  flex-shrink: 0;
}

.av-task-board__column-dot--not-started {
  background: var(--color-gray-400);
}

.av-task-board__column-dot--in-progress {
  background: var(--color-info);
}

.av-task-board__column-dot--pending {
  background: var(--color-amber-600);
}

.av-task-board__column-dot--waiting {
  background: var(--color-primary-600);
}

.av-task-board__column-dot--completed {
  background: var(--color-success);
}

html.dark .av-task-board__column-dot--not-started {
  background: var(--color-dark-300);
}

/* §23.5 — Column title */
.av-task-board__column-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-gray-950);
}

html.dark .av-task-board__column-title {
  color: var(--color-dark-50);
}

/* §23.6 — Count badge (small mono pill) */
.av-task-board__column-count {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--color-gray-400);
  background: var(--color-white);
  border: 1px solid var(--color-gray-150);
  border-radius: 4px;
  padding: 0 6px;
}

html.dark .av-task-board__column-count {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
  color: var(--color-dark-300);
}

/* §23.7 — Add icon button (MudIconButton chrome override, 22×22) */
.mud-icon-button.av-task-board__column-add {
  margin-left: auto;
  padding: 0 !important;
  min-width: 0 !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--color-gray-400) !important;
}

.mud-icon-button.av-task-board__column-add:hover {
  background: var(--color-primary-50) !important;
  color: var(--color-primary-600) !important;
}

.mud-icon-button.av-task-board__column-add .mud-icon-root {
  width: 14px !important;
  height: 14px !important;
}

html.dark .mud-icon-button.av-task-board__column-add {
  color: var(--color-dark-300) !important;
}

html.dark .mud-icon-button.av-task-board__column-add:hover {
  background: rgb(from var(--color-primary-500) r g b / 0.16) !important;
  color: var(--color-primary-300) !important;
}

/* §23.8 — Column body (cards container) */
.av-task-board__column-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* §23.9 — Empty state inside a column */
.av-task-board__column-empty {
  color: var(--color-gray-400);
  text-align: center;
  font-size: 12.5px;
  padding: 24px 12px;
}

html.dark .av-task-board__column-empty {
  color: var(--color-dark-300);
}

/* §23.10 — Card (single task) */
.av-task-board__card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-150);
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
  transition:
    box-shadow 0.12s,
    transform 0.12s;
}

.av-task-board__card:hover {
  box-shadow:
    0 1px 3px rgb(0 0 0 / 0.06),
    0 1px 2px rgb(0 0 0 / 0.04);
  transform: translateY(-1px);
}

html.dark .av-task-board__card {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
  box-shadow: none;
}

html.dark .av-task-board__card:hover {
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.4);
}

/* §23.11 — Card header (prio dot + title) */
.av-task-board__card-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* §23.12 — Priority dot + variants */
.av-task-board__card-prio {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  margin-top: 6px;
  flex-shrink: 0;
}

.av-task-board__card-prio--urgent {
  background: var(--color-red-600);
  box-shadow: 0 0 0 3px rgb(from var(--color-red-600) r g b / 0.12);
}

.av-task-board__card-prio--high {
  background: var(--color-orange-600);
}

.av-task-board__card-prio--medium {
  background: var(--color-amber-600);
}

.av-task-board__card-prio--low {
  background: var(--color-gray-500);
}

/* §23.13 — Card title */
.av-task-board__card-title {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--color-gray-950);
}

html.dark .av-task-board__card-title {
  color: var(--color-dark-50);
}

/* §23.14 — Card related wrapper (margin only — av-tag-with-mark owns visuals) */
.av-task-board__card-related {
  margin-top: 8px;
}

/* §23.15 — Card footer (avatar + due time) */
.av-task-board__card-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

/* §23.16 — Card due-time (mono, amber) */
.av-task-board__card-time {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-amber-600);
}

.av-task-board__card-time .mud-icon-root {
  width: 14px !important;
  height: 14px !important;
}

/* §23.16.a — Stack vertical (mismo patrón que av-task-row §21.6.a) para
   incluir la referencia UTC sin agrandar el card horizontalmente. */
.av-task-board__card-time-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.1;
}

.av-task-board__card-time-local {
  font-size: 11px;
}

.av-task-board__card-time-utc {
  font-size: 9px;
  color: var(--color-gray-500);
}

html.dark .av-task-board__card-time-utc {
  color: var(--color-dark-300);
}

/* ============================================================================
 * §24 ─── Task calendar (av-task-calendar)
 * ----------------------------------------------------------------------------
 * "Calendar" view of the Task Manager v8: week grid (08:00–17:00 hourly rows
 * × 7 day columns) with a sticky toolbar on top (Today + Prev/Next + range
 * label + Week/Month/Year segmented control).
 *
 *   §24.1  .av-task-calendar                       outer wrapper (vertical stack
 *                                                   gap between toolbar + grid)
 *   §24.2  .av-task-calendar__toolbar              top toolbar (bordered card)
 *   §24.3  .av-task-calendar__today-btn            "Today" outlined pill button
 *                                                   (MudButton chrome override)
 *   §24.4  .av-task-calendar__nav-btn              prev/next icon button 32×32
 *                                                   (MudIconButton override)
 *   §24.5  .av-task-calendar__range                week-range label (display
 *                                                   font, larger size)
 *   §24.6  .av-task-calendar__segmented            Week/Month/Year segmented
 *                                                   control + .__seg + --active
 *   §24.7  .av-task-calendar__wrap                 grid card (border + shadow)
 *   §24.8  .av-task-calendar__head                 days header row
 *   §24.9  .av-task-calendar__head-cell + --corner /
 *          --today / __head-name / __head-num     header cells (day name + num)
 *   §24.10 .av-task-calendar__body                 vertical stack of rows
 *   §24.11 .av-task-calendar__row                  hour row (grid)
 *   §24.12 .av-task-calendar__hour                 left hour label column
 *   §24.13 .av-task-calendar__cell + --today       day-slot cell + today tint
 *   §24.14 .av-task-calendar__event + --high /
 *          --medium / --low                        event block + priority tone
 *   §24.15 .av-task-calendar__event-title          event title
 *   §24.16 .av-task-calendar__event-meta           event meta (initials + time)
 *
 * Specific to Task Manager v8 (consumed by Pages/TaskManager/V8/Components/
 * CalendarView). Brand-aware via `--color-primary-*` (today highlight + Today
 * button hover) + `--color-info` (low priority event — Teal in Avalme brand).
 * Dark-mode-aware via `html.dark` overrides at the end of each subsection.
 *
 * Event color logic (NOT the same as Board priority dots): high → red, medium
 * → amber, low → info (teal/sky). Mirrors the legacy v8 mapping; the calendar
 * leans on color tone to communicate urgency at-a-glance in a dense grid.
 * ========================================================================== */

/* §24.1 — Outer wrapper */
.av-task-calendar {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* §24.2 — Toolbar (bordered card hosting Today / Prev / Next / Range / Segmented) */
.av-task-calendar__toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-150);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
}

html.dark .av-task-calendar__toolbar {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
  box-shadow: none;
}

/* §24.3 — Today outlined pill button (MudButton chrome override) */
.mud-button-root.av-task-calendar__today-btn {
  height: 32px !important;
  min-height: unset !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  border: 1px solid var(--color-gray-150) !important;
  background-color: var(--color-white) !important;
  color: var(--color-gray-950) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: none !important;
}

.mud-button-root.av-task-calendar__today-btn:hover {
  border-color: var(--color-primary-600) !important;
  color: var(--color-primary-600) !important;
}

html.dark .mud-button-root.av-task-calendar__today-btn {
  background-color: var(--color-dark-700) !important;
  border-color: var(--color-dark-500) !important;
  color: var(--color-dark-50) !important;
}

html.dark .mud-button-root.av-task-calendar__today-btn:hover {
  border-color: var(--color-primary-400) !important;
  color: var(--color-primary-300) !important;
}

/* §24.4 — Nav icon button (Prev / Next week) — 32×32 outlined */
.mud-icon-button.av-task-calendar__nav-btn {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  border: 1px solid var(--color-gray-150) !important;
  background: var(--color-white) !important;
  color: var(--color-gray-600) !important;
}

.mud-icon-button.av-task-calendar__nav-btn:hover {
  border-color: var(--color-primary-600) !important;
  color: var(--color-primary-600) !important;
}

.mud-icon-button.av-task-calendar__nav-btn .mud-icon-root {
  width: 14px !important;
  height: 14px !important;
}

html.dark .mud-icon-button.av-task-calendar__nav-btn {
  background: var(--color-dark-700) !important;
  border-color: var(--color-dark-500) !important;
  color: var(--color-dark-200) !important;
}

html.dark .mud-icon-button.av-task-calendar__nav-btn:hover {
  border-color: var(--color-primary-400) !important;
  color: var(--color-primary-300) !important;
}

/* §24.5 — Range label (display font, larger size — "May 12 – May 18, 2026") */
.av-task-calendar__range {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--color-gray-950);
  margin-left: 12px;
}

html.dark .av-task-calendar__range {
  color: var(--color-dark-50);
}

/* §24.6 — Segmented control (Week / Month / Year) */
.av-task-calendar__segmented {
  margin-left: auto;
  display: inline-flex;
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-150);
  border-radius: 8px;
  padding: 2px;
  gap: 0;
}

html.dark .av-task-calendar__segmented {
  background: var(--color-dark-800);
  border-color: var(--color-dark-500);
}

.mud-button-root.av-task-calendar__seg {
  min-height: unset !important;
  padding: 4px 12px !important;
  border-radius: 6px !important;
  background-color: transparent !important;
  border: 0 !important;
  color: var(--color-gray-600) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  text-transform: none !important;
}

.mud-button-root.av-task-calendar__seg--active {
  background-color: var(--color-white) !important;
  color: var(--color-gray-950) !important;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
}

html.dark .mud-button-root.av-task-calendar__seg {
  color: var(--color-dark-200) !important;
}

html.dark .mud-button-root.av-task-calendar__seg--active {
  background-color: var(--color-dark-700) !important;
  color: var(--color-dark-50) !important;
}

/* §24.7 — Grid wrap (bordered + rounded card) */
.av-task-calendar__wrap {
  background: var(--color-white);
  border: 1px solid var(--color-gray-150);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
  overflow: hidden;
}

html.dark .av-task-calendar__wrap {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
  box-shadow: none;
}

/* §24.8 — Days header row (64 px gutter + 7 day columns) */
.av-task-calendar__head {
  display: grid;
  grid-template-columns: 64px repeat(7, 1fr);
  border-bottom: 1px solid var(--color-gray-150);
  background: var(--color-gray-50);
}

html.dark .av-task-calendar__head {
  background: var(--color-dark-800);
  border-bottom-color: var(--color-dark-500);
}

/* §24.9 — Head cells (corner, regular, today) */
.av-task-calendar__head-cell {
  padding: 12px 12px 8px;
  text-align: center;
  border-right: 1px solid var(--color-gray-150);
}

.av-task-calendar__head-cell:last-child {
  border-right: 0;
}

html.dark .av-task-calendar__head-cell {
  border-right-color: var(--color-dark-500);
}

.av-task-calendar__head-cell--corner {
  background: var(--color-gray-50);
}

html.dark .av-task-calendar__head-cell--corner {
  background: var(--color-dark-800);
}

.av-task-calendar__head-cell--today {
  background: var(--color-primary-50);
}

html.dark .av-task-calendar__head-cell--today {
  background: rgb(from var(--color-primary-500) r g b / 0.12);
}

.av-task-calendar__head-name {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--color-gray-400);
}

html.dark .av-task-calendar__head-name {
  color: var(--color-dark-300);
}

.av-task-calendar__head-num {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--color-gray-950);
  margin-top: 2px;
}

html.dark .av-task-calendar__head-num {
  color: var(--color-dark-50);
}

.av-task-calendar__head-cell--today .av-task-calendar__head-num {
  color: var(--color-primary-600);
}

html.dark .av-task-calendar__head-cell--today .av-task-calendar__head-num {
  color: var(--color-primary-300);
}

/* §24.10 — Body (rows stack) */
.av-task-calendar__body {
  display: flex;
  flex-direction: column;
}

/* §24.11 — Hour row (64 px gutter + 7 day columns) */
.av-task-calendar__row {
  display: grid;
  grid-template-columns: 64px repeat(7, 1fr);
  border-bottom: 1px solid var(--color-gray-150);
  min-height: 56px;
}

.av-task-calendar__row:last-child {
  border-bottom: 0;
}

html.dark .av-task-calendar__row {
  border-bottom-color: var(--color-dark-500);
}

/* All-day strip at the top of the week grid — slight tint so it stands out
   from the hour rows beneath. Tasks here are AllDayEvent or fall outside
   the 8 AM–5 PM visible range. */
.av-task-calendar__row--allday {
  background: var(--color-gray-50, var(--color-gray-100));
  min-height: 44px;
}

html.dark .av-task-calendar__row--allday {
  background: var(--color-dark-700);
}

/* §24.12 — Hour gutter (left column with "9 AM", "10 AM", …) */
.av-task-calendar__hour {
  padding: 8px 12px;
  border-right: 1px solid var(--color-gray-150);
  background: var(--color-gray-50);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-gray-400);
  letter-spacing: 0.02em;
}

html.dark .av-task-calendar__hour {
  background: var(--color-dark-800);
  border-right-color: var(--color-dark-500);
  color: var(--color-dark-300);
}

/* §24.13 — Day-slot cell + today tint */
.av-task-calendar__cell {
  border-right: 1px solid var(--color-gray-150);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.av-task-calendar__cell:last-child {
  border-right: 0;
}

html.dark .av-task-calendar__cell {
  border-right-color: var(--color-dark-500);
}

.av-task-calendar__cell--today {
  background: rgb(from var(--color-primary-500) r g b / 0.025);
}

html.dark .av-task-calendar__cell--today {
  background: rgb(from var(--color-primary-500) r g b / 0.06);
}

/* §24.14 — Event block + priority tone variants */
.av-task-calendar__event {
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11.5px;
  line-height: 1.3;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.1s ease;
}

.av-task-calendar__event:hover {
  transform: translateY(-1px);
}

.av-task-calendar__event--urgent {
  background: var(--color-red-600);
  border-color: var(--color-red-600);
  color: var(--color-white);
}

.av-task-calendar__event--high {
  background: var(--color-red-50);
  border-color: rgb(from var(--color-red-600) r g b / 0.25);
  color: var(--color-red-600);
}

.av-task-calendar__event--medium {
  background: var(--color-amber-50);
  border-color: rgb(from var(--color-amber-600) r g b / 0.25);
  color: var(--color-amber-600);
}

.av-task-calendar__event--low {
  background: var(--color-sky-50);
  border-color: rgb(from var(--color-info) r g b / 0.25);
  color: var(--color-info);
}

html.dark .av-task-calendar__event--urgent {
  background: var(--color-red-600);
  border-color: var(--color-red-500);
  color: var(--color-white);
}

html.dark .av-task-calendar__event--high {
  background: rgb(from var(--color-red-600) r g b / 0.16);
  border-color: rgb(from var(--color-red-600) r g b / 0.4);
  color: var(--color-red-500);
}

html.dark .av-task-calendar__event--medium {
  background: rgb(from var(--color-amber-600) r g b / 0.16);
  border-color: rgb(from var(--color-amber-600) r g b / 0.4);
  color: var(--color-amber-500);
}

html.dark .av-task-calendar__event--low {
  background: rgb(from var(--color-info) r g b / 0.16);
  border-color: rgb(from var(--color-info) r g b / 0.4);
  color: var(--color-info);
}

/* §24.15 — Event title */
.av-task-calendar__event-title {
  font-weight: 600;
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* §24.16 — Event meta (initials · time) */
.av-task-calendar__event-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  margin-top: 2px;
  display: inline-flex;
  gap: 4px;
  opacity: 0.85;
}

/* ----------------------------------------------------------------------------
 * §24.MONTH — Calendar Month view (av-task-calendar__month*)
 * ----------------------------------------------------------------------------
 * Grid 6×7 (6 semanas × 7 días). Cada celda muestra el número del día y hasta
 * 3 eventos como mini-chips. Si hay más de 3 tasks, aparece "+N more" al pie.
 * Días fuera del mes activo se atenúan con --outside (opacity 0.35).
 * --today resalta el día actual con un anillo + tint primario.
 * ---------------------------------------------------------------------------- */
.av-task-calendar__month {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-top: 1px solid var(--color-gray-150);
}

html.dark .av-task-calendar__month {
  background: var(--color-dark-800);
  border-top-color: var(--color-dark-500);
}

.av-task-calendar__month-head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--color-gray-150);
  background: var(--color-gray-50);
}

html.dark .av-task-calendar__month-head {
  background: var(--color-dark-700);
  border-bottom-color: var(--color-dark-500);
}

.av-task-calendar__month-head-cell {
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--color-gray-600);
  letter-spacing: 0.06em;
}

html.dark .av-task-calendar__month-head-cell {
  color: var(--color-dark-200);
}

.av-task-calendar__month-body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(96px, 1fr);
  flex: 1 1 auto;
}

.av-task-calendar__month-cell {
  border-right: 1px solid var(--color-gray-150);
  border-bottom: 1px solid var(--color-gray-150);
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 96px;
  overflow: hidden;
}

.av-task-calendar__month-cell:nth-child(7n) {
  border-right: 0;
}

html.dark .av-task-calendar__month-cell {
  border-right-color: var(--color-dark-500);
  border-bottom-color: var(--color-dark-500);
}

.av-task-calendar__month-cell-num {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-gray-700);
  line-height: 1;
}

html.dark .av-task-calendar__month-cell-num {
  color: var(--color-dark-100);
}

.av-task-calendar__month-cell--outside {
  background: var(--color-gray-50);
}

html.dark .av-task-calendar__month-cell--outside {
  background: var(--color-dark-750);
}

.av-task-calendar__month-cell--outside .av-task-calendar__month-cell-num {
  color: var(--color-gray-400);
}

html.dark
  .av-task-calendar__month-cell--outside
  .av-task-calendar__month-cell-num {
  color: var(--color-dark-300);
}

.av-task-calendar__month-cell--today {
  background: rgb(from var(--color-primary-500) r g b / 0.045);
}

html.dark .av-task-calendar__month-cell--today {
  background: rgb(from var(--color-primary-500) r g b / 0.1);
}

.av-task-calendar__month-cell--today .av-task-calendar__month-cell-num {
  color: var(--color-primary-700);
  font-weight: 700;
}

html.dark
  .av-task-calendar__month-cell--today
  .av-task-calendar__month-cell-num {
  color: var(--color-primary-300);
}

.av-task-calendar__month-more {
  font-family: var(--font-sans);
  font-size: 10.5px;
  color: var(--color-gray-500);
  margin-top: 2px;
}

html.dark .av-task-calendar__month-more {
  color: var(--color-dark-200);
}

/* ----------------------------------------------------------------------------
 * §24.YEAR — Calendar Year view (av-task-calendar__year*)
 * ----------------------------------------------------------------------------
 * 12 mini-meses en grid (auto-fit, min 220 px). Cada mini-mes = título +
 * fila de iniciales (M T W T F S S) + grid 6×7 de días. Días con task se
 * marcan como --has-tasks + tono según top priority (high / med / low).
 * Días fuera del mes activo se ocultan visualmente (--outside).
 * ---------------------------------------------------------------------------- */
.av-task-calendar__year {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  padding: 16px;
  background: var(--color-white);
  overflow: auto;
}

html.dark .av-task-calendar__year {
  background: var(--color-dark-800);
}

.av-task-calendar__year-month {
  background: var(--color-white);
  border: 1px solid var(--color-gray-150);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

html.dark .av-task-calendar__year-month {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

.av-task-calendar__year-month-title {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-gray-900);
  text-align: center;
  margin-bottom: 4px;
}

html.dark .av-task-calendar__year-month-title {
  color: var(--color-dark-50);
}

.av-task-calendar__year-grid-head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 2px;
}

.av-task-calendar__year-dow {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--color-gray-400);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

html.dark .av-task-calendar__year-dow {
  color: var(--color-dark-300);
}

.av-task-calendar__year-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.av-task-calendar__year-day {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 10.5px;
  color: var(--color-gray-700);
  border-radius: 50%;
  position: relative;
  cursor: default;
}

html.dark .av-task-calendar__year-day {
  color: var(--color-dark-100);
}

.av-task-calendar__year-day--outside {
  visibility: hidden;
}

.av-task-calendar__year-day--today {
  background: var(--color-primary-600);
  color: var(--color-white);
  font-weight: 600;
}

/* Día con tasks: puntito ABAJO del número (no encima del fondo del día).
   Solo el color del dot cambia por prioridad. Reusa el día como anchor.
   Si el día es ALSO today, el today bg gana visualmente y el dot se sobrepone. */
.av-task-calendar__year-day--has-tasks::after {
  content: "";
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}

.av-task-calendar__year-day--high::after {
  background: var(--color-red-600);
}

.av-task-calendar__year-day--med::after {
  background: var(--color-amber-600);
}

.av-task-calendar__year-day--low::after {
  background: var(--color-sky-500);
}

/* ============================================================================
 * §25 ─── Task automation (av-task-automation)
 * ----------------------------------------------------------------------------
 * "Automation" view of the Task Manager v8: heading + 4 KPI tiles + sub-tab
 * bar (Templates / Active / Builder / Activity Log / AI Suggestions) + grid
 * of automation-template cards.
 *
 * The view is mostly presentational today — Templates is the only active
 * sub-tab (the rest are placeholder until the automation builder is wired).
 * Each template card surfaces a colored icon squircle, title, description,
 * category tag, and a "Use template →" button.
 *
 *   §25.1  .av-task-automation                outer wrapper (flex column,
 *                                              vertical gap between sections)
 *   §25.2  .av-task-automation__head          heading row (title/subtitle +
 *                                              right-side actions)
 *   §25.3  .av-task-automation__title         heading (display font, 30 px,
 *                                              weight 400)
 *   §25.4  .av-task-automation__subtitle      heading sub-line (gray-600,
 *                                              60ch max-width)
 *   §25.5  .av-task-automation__actions       right-side button cluster
 *   §25.6  .av-task-automation__kpis          4-column KPI grid (collapses to
 *                                              2 cols ≤1024, 1 col on mobile)
 *   §25.7  .av-task-automation__grid          5-column template grid
 *                                              (3 cols ≤1280, 1 col ≤720)
 *   §25.8  .av-task-automation__card          template card (border + shadow
 *                                              + hover lift)
 *   §25.9  .av-task-automation__card-icon     36×36 squircle with tone variant
 *                                              + tone variants
 *                                              (--amber / --danger / --violet /
 *                                              --info / --success)
 *   §25.10 .av-task-automation__card-title    template title
 *   §25.11 .av-task-automation__card-desc     template description (gray-600)
 *   §25.12 .av-task-automation__card-foot     card footer (separator + tag +
 *                                              "Use template" button)
 *   §25.13 .av-task-automation__card-tag      uppercase mono category tag
 *   §25.14 .av-task-automation__card-use      "Use template →" outlined button
 *                                              (MudButton chrome override)
 *
 * Specific to Task Manager v8 (consumed by Pages/TaskManager/V8/Components/
 * AutomationView + AutomationCard). Brand-aware via `--color-primary-*`
 * (violet icon variant + card-use hover) + `--color-info`/`--color-success`
 * (other icon variants). Dark-mode-aware.
 * ========================================================================== */

/* §25.1 — Outer wrapper */
.av-task-automation {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* §25.2 — Head row (title/subtitle on left, action buttons on right) */
.av-task-automation__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

/* §25.3 — Heading title (display font) */
.av-task-automation__title {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 400;
  color: var(--color-gray-950);
  margin: 0;
  letter-spacing: -0.01em;
}

html.dark .av-task-automation__title {
  color: var(--color-dark-50);
}

/* §25.4 — Heading subtitle */
.av-task-automation__subtitle {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--color-gray-600);
  max-width: 60ch;
  line-height: 1.55;
}

html.dark .av-task-automation__subtitle {
  color: var(--color-dark-200);
}

/* §25.5 — Right-side actions wrapper */
.av-task-automation__actions {
  display: flex;
  gap: 8px;
}

/* §25.6 — KPI grid (4 cols → 2 cols ≤1024) */
.av-task-automation__kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 1024px) {
  .av-task-automation__kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* §25.7 — Template grid (5 cols → 3 ≤1280 → 1 ≤720) */
.av-task-automation__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 1280px) {
  .av-task-automation__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .av-task-automation__grid {
    grid-template-columns: 1fr;
  }
}

/* §25.8 — Template card */
.av-task-automation__card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-150);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
  transition:
    box-shadow 0.12s,
    transform 0.12s,
    border-color 0.12s;
}

.av-task-automation__card:hover {
  box-shadow:
    0 4px 12px rgb(0 0 0 / 0.06),
    0 2px 4px rgb(0 0 0 / 0.04);
  transform: translateY(-2px);
  border-color: var(--color-gray-200);
}

html.dark .av-task-automation__card {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
  box-shadow: none;
}

html.dark .av-task-automation__card:hover {
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.4);
  border-color: var(--color-dark-400);
}

/* §25.9 — Card icon squircle + tone variants */
.av-task-automation__card-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

/* SVG content rendered as MarkupString inherits the wrapper color via
   currentColor (the seed automation templates already write
   `stroke="currentColor"` on their paths). */
.av-task-automation__card-icon svg {
  width: 18px;
  height: 18px;
}

.av-task-automation__card-icon--amber {
  background: var(--color-amber-50);
  color: var(--color-amber-600);
}

.av-task-automation__card-icon--danger {
  background: var(--color-red-50);
  color: var(--color-red-600);
}

.av-task-automation__card-icon--violet {
  background: var(--color-primary-50);
  color: var(--color-primary-700);
}

.av-task-automation__card-icon--info {
  background: var(--color-sky-50);
  color: var(--color-info);
}

.av-task-automation__card-icon--success {
  background: var(--color-emerald-50);
  color: var(--color-success);
}

html.dark .av-task-automation__card-icon--amber {
  background: rgb(from var(--color-amber-600) r g b / 0.16);
  color: var(--color-amber-400);
}

html.dark .av-task-automation__card-icon--danger {
  background: rgb(from var(--color-red-600) r g b / 0.16);
  color: var(--color-red-400);
}

html.dark .av-task-automation__card-icon--violet {
  background: rgb(from var(--color-primary-500) r g b / 0.16);
  color: var(--color-primary-300);
}

html.dark .av-task-automation__card-icon--info {
  background: rgb(from var(--color-info) r g b / 0.16);
  color: var(--color-info);
}

html.dark .av-task-automation__card-icon--success {
  background: rgb(from var(--color-success) r g b / 0.16);
  color: var(--color-success);
}

/* §25.10 — Card title */
.av-task-automation__card-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--color-gray-950);
  margin: 0;
}

html.dark .av-task-automation__card-title {
  color: var(--color-dark-50);
}

/* §25.11 — Card description */
.av-task-automation__card-desc {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-gray-600);
  margin: 8px 0 16px;
  flex: 1;
}

html.dark .av-task-automation__card-desc {
  color: var(--color-dark-200);
}

/* §25.12 — Card footer (separator above + tag + Use template button) */
.av-task-automation__card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid var(--color-gray-150);
  padding-top: 12px;
}

html.dark .av-task-automation__card-foot {
  border-top-color: var(--color-dark-500);
}

/* §25.13 — Category tag (uppercase mono) */
.av-task-automation__card-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--color-gray-400);
}

html.dark .av-task-automation__card-tag {
  color: var(--color-dark-300);
}

/* §25.14 — "Use template →" outlined button (MudButton chrome override) */
.mud-button-root.av-task-automation__card-use {
  min-height: unset !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  border: 1px solid var(--color-gray-150) !important;
  background-color: var(--color-white) !important;
  color: var(--color-gray-950) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: none !important;
}

.mud-button-root.av-task-automation__card-use:hover {
  border-color: var(--color-primary-600) !important;
  color: var(--color-primary-600) !important;
}

html.dark .mud-button-root.av-task-automation__card-use {
  background-color: var(--color-dark-700) !important;
  border-color: var(--color-dark-500) !important;
  color: var(--color-dark-50) !important;
}

html.dark .mud-button-root.av-task-automation__card-use:hover {
  border-color: var(--color-primary-400) !important;
  color: var(--color-primary-300) !important;
}

/* ============================================================================
 * §26 ─── Task completed table (av-task-completed)
 * ----------------------------------------------------------------------------
 * "Completed" view of the Task Manager v8: dense table listing completed
 * tasks (check + title + outcome chip + related-to + assignee + completed-at
 * + attempts + reopen action). Read-only — the checkbox at the start of each
 * row is decorative ("already completed"), not interactive.
 *
 *   §26.1  .av-task-completed                 outer wrap (bordered card)
 *   §26.2  .av-task-completed__table          <table> base reset
 *   §26.3  .av-task-completed__th             header cell (mono, uppercase,
 *                                              gray tint)
 *           + --right modifier               right-aligned headers
 *           + --check modifier               narrow column for checkbox
 *   §26.4  .av-task-completed__td             body cell (top-align, border-
 *                                              bottom, hover row background)
 *           + --check modifier               vertically-centered check cell
 *           + --right modifier               right-aligned body cells
 *   §26.5  .av-task-completed__task           strikethrough task title
 *   §26.6  .av-task-completed__sub            completion note / description
 *   §26.7  .av-task-completed__user           inline avatar + assignee name
 *   §26.8  .av-task-completed__when           completion timestamp (mono,
 *                                              date · time)
 *   §26.9  .av-task-completed__attempts       attempts counter (mono, info
 *                                              tint)
 *   §26.10 .av-task-completed__empty          empty-state row text
 *   §26.11 .av-task-completed__check          decorative checkbox (pre-checked,
 *                                              disabled — same skin as TaskRow
 *                                              §21.2 but always checked)
 *   §26.12 .av-task-completed__reopen         "Reopen" button (MudButton
 *                                              chrome override, sm size)
 *
 * Brand-aware via `--color-primary-*` (reopen hover) + `--color-info`
 * (attempts color — Teal in Avalme brand) + `--color-success` (decorative
 * checkbox fill). Dark-mode-aware.
 * ========================================================================== */

/* §26.1 — Outer wrap (bordered card) */
.av-task-completed {
  background: var(--color-white);
  border: 1px solid var(--color-gray-150);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
}

html.dark .av-task-completed {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
  box-shadow: none;
}

/* §26.2 — Table base (collapse borders, full width, 13 px body type) */
.av-task-completed__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

/* §26.3 — Header cell (mono, uppercase, tinted strip) */
.av-task-completed__th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--color-gray-400);
  font-weight: 600;
  padding: 12px;
  background: var(--color-gray-50);
  border-bottom: 1px solid var(--color-gray-150);
  white-space: nowrap;
}

.av-task-completed__th--right {
  text-align: right;
}

.av-task-completed__th--check {
  width: 40px;
}

html.dark .av-task-completed__th {
  background: var(--color-dark-800);
  border-bottom-color: var(--color-dark-500);
  color: var(--color-dark-300);
}

/* §26.4 — Body cell + row hover */
.av-task-completed__td {
  padding: 12px;
  border-bottom: 1px solid var(--color-gray-150);
  vertical-align: top;
  color: var(--color-gray-950);
}

.av-task-completed__table tbody tr:last-child .av-task-completed__td {
  border-bottom: 0;
}

.av-task-completed__table tbody tr:hover .av-task-completed__td {
  background: var(--color-gray-50);
}

/* WI #703 — clickable row affordance (opens read-only detail drawer).
   The row carries role="button" + tabindex="0" in the markup; this rule
   adds the visual cursor cue without changing the hover background that
   the rule above already paints (we keep the gray-50 hover as the single
   source of background-on-hover). */
.av-task-completed__row {
  cursor: pointer;
}

.av-task-completed__td--check {
  vertical-align: middle;
}

.av-task-completed__td--right {
  text-align: right;
}

html.dark .av-task-completed__td {
  color: var(--color-dark-50);
  border-bottom-color: var(--color-dark-500);
}

html.dark .av-task-completed__table tbody tr:hover .av-task-completed__td {
  background: var(--color-dark-800);
}

/* §26.5 — Task title (strikethrough, line-through color via tertiary gray) */
.av-task-completed__task {
  font-weight: 500;
  color: var(--color-gray-950);
  text-decoration: line-through;
  text-decoration-color: var(--color-gray-400);
}

html.dark .av-task-completed__task {
  color: var(--color-dark-50);
  text-decoration-color: var(--color-dark-300);
}

/* §26.6 — Sub-text (completion note or description below title) */
.av-task-completed__sub {
  margin-top: 2px;
  font-size: 12px;
  color: var(--color-gray-600);
}

html.dark .av-task-completed__sub {
  color: var(--color-dark-200);
}

/* §26.7 — Assignee block (avatar + name inline) */
.av-task-completed__user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* §26.8 — When timestamp (mono date · time) */
.av-task-completed__when {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--color-gray-600);
}

.av-task-completed__when-sep {
  margin: 0 4px;
  color: var(--color-gray-400);
}

.av-task-completed__when-time {
  color: var(--color-gray-950);
}

html.dark .av-task-completed__when {
  color: var(--color-dark-200);
}

html.dark .av-task-completed__when-sep {
  color: var(--color-dark-300);
}

html.dark .av-task-completed__when-time {
  color: var(--color-dark-50);
}

/* §26.9 — Attempts counter (mono, info color) */
.av-task-completed__attempts {
  font-family: var(--font-mono);
  color: var(--color-info);
  font-weight: 600;
}

/* §26.10 — Empty state */
.av-task-completed__empty {
  text-align: center;
  color: var(--color-gray-400);
  padding: 32px;
  font-size: 13px;
}

html.dark .av-task-completed__empty {
  color: var(--color-dark-300);
}

/* §26.10b — Empty-state cell wrapper — host the canonical .av-datagrid-empty
   block inside a <td colspan> without inheriting the regular cell padding.
   The skin owns the spacing. */
.av-task-completed__empty-cell {
  padding: 0 !important;
  border-bottom: 0 !important;
}

/* §26.11 — Decorative checkbox (pre-checked + disabled — same look as
   TaskRow §21.2 in checked state). Uses the same native input + custom
   box pattern but the input is always `checked` and `disabled`. */
.av-task-completed__check {
  position: relative;
  width: 18px;
  height: 18px;
  display: inline-block;
}

.av-task-completed__check input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
}

.av-task-completed__check-box {
  display: inline-flex;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--color-success);
  border-radius: 4px;
  background: var(--color-success);
  color: var(--color-white);
  align-items: center;
  justify-content: center;
}

.av-task-completed__check-box .mud-icon-root {
  width: 11px !important;
  height: 11px !important;
}

/* §26.12 — Reopen button (MudButton chrome override, 26 px height) */
.mud-button-root.av-task-completed__reopen {
  min-height: unset !important;
  height: 26px !important;
  padding: 0 10px !important;
  border-radius: 6px !important;
  border: 1px solid transparent !important;
  background-color: transparent !important;
  color: var(--color-gray-400) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  gap: 4px;
}

.mud-button-root.av-task-completed__reopen:hover {
  border-color: var(--color-primary-600) !important;
  color: var(--color-primary-600) !important;
  background-color: var(--color-primary-50) !important;
}

.mud-button-root.av-task-completed__reopen .mud-icon-root {
  width: 12px !important;
  height: 12px !important;
}

html.dark .mud-button-root.av-task-completed__reopen {
  color: var(--color-dark-300) !important;
}

html.dark .mud-button-root.av-task-completed__reopen:hover {
  border-color: var(--color-primary-400) !important;
  color: var(--color-primary-300) !important;
  background-color: rgb(from var(--color-primary-500) r g b / 0.16) !important;
}

/* ============================================================================
 * §27 ─── Task drawer (av-task-drawer)
 * ----------------------------------------------------------------------------
 * Right-anchored modal drawer for the Task Manager v8 Add / Edit Task form.
 * Backdrop covers viewport + slides a 480 px aside from the right. Header
 * (icon squircle + tag + title + close) + body (scrollable section list) +
 * footer (Cancel / Save).
 *
 *   §27.1  .av-task-drawer-backdrop      full-viewport dim overlay + backdrop
 *                                        blur, hosts the aside
 *   §27.2  .av-task-drawer               slide-in aside (480 px desktop,
 *                                        full-width mobile)
 *   §27.3  .av-task-drawer__head         sticky header (icon + title + close)
 *   §27.4  .av-task-drawer__head-icon    36×36 squircle with primary tint
 *   §27.5  .av-task-drawer__head-text    title block (tag + title + sub)
 *   §27.6  .av-task-drawer__tag          uppercase mono tag (e.g. "TASK")
 *   §27.7  .av-task-drawer__title        H3 title
 *   §27.8  .av-task-drawer__sub          subtitle paragraph
 *   §27.9  .av-task-drawer__close        close MudIconButton (chrome override)
 *   §27.10 .av-task-drawer__body         scrollable body (between head+foot)
 *   §27.11 .av-task-drawer__section      section block (vertical stack +
 *                                        border-bottom + section title)
 *   §27.12 .av-task-drawer__section-title section heading (mono uppercase)
 *   §27.13 .av-task-drawer__field-row    2-column field row (grid)
 *   §27.14 .av-task-drawer__field-help   tertiary helper text below a field
 *   §27.15 .av-task-drawer__foot         sticky footer (action buttons)
 *   §27.16 .av-task-drawer__chip         quick-template chip + --active modifier
 *
 * Brand-aware via `--color-primary-*` (head icon tint, active chip, focus
 * rings inherited from Mud); dark-mode-aware.
 *
 * Consumed by: Pages/TaskManager/V8/Components/AddTaskDrawer.razor.
 * Animations (slide-in + backdrop-fade) reuse the original tm8-* keyframes
 * which we keep alive in the legacy razor.css for now.
 * ========================================================================== */

/* §27.1 — Backdrop */
.av-task-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 0.32);
  backdrop-filter: blur(2px);
  z-index: 1300;
  display: flex;
  justify-content: flex-end;
  animation: av-task-drawer-fade 0.18s ease forwards;
}

@keyframes av-task-drawer-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* §27.2 — Slide-in aside */
.av-task-drawer {
  width: 480px;
  max-width: 100vw;
  height: 100vh;
  background: var(--color-white);
  box-shadow: -8px 0 24px rgb(0 0 0 / 0.12);
  display: flex;
  flex-direction: column;
  animation: av-task-drawer-slide 0.22s ease forwards;
}

@keyframes av-task-drawer-slide {
  from {
    transform: translateX(100%);
    opacity: 0.4;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

html.dark .av-task-drawer {
  background: var(--color-dark-700);
  box-shadow: -8px 0 24px rgb(0 0 0 / 0.45);
}

@media (max-width: 720px) {
  .av-task-drawer {
    width: 100vw;
  }
}

/* §27.3 — Header (sticky, bordered) */
.av-task-drawer__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-gray-150);
  background: var(--color-white);
  flex: 0 0 auto;
}

html.dark .av-task-drawer__head {
  background: var(--color-dark-700);
  border-bottom-color: var(--color-dark-500);
}

/* §27.4 — Header icon squircle */
.av-task-drawer__head-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--color-primary-50);
  color: var(--color-primary-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

html.dark .av-task-drawer__head-icon {
  background: rgb(from var(--color-primary-500) r g b / 0.16);
  color: var(--color-primary-300);
}

.av-task-drawer__head-icon .mud-icon-root {
  width: 18px !important;
  height: 18px !important;
}

/* §27.5 — Header text wrapper */
.av-task-drawer__head-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* §27.6 — Tag (uppercase mono) */
.av-task-drawer__tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--color-gray-400);
  font-weight: 600;
}

html.dark .av-task-drawer__tag {
  color: var(--color-dark-300);
}

/* §27.7 — Title */
.av-task-drawer__title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-gray-950);
  margin: 0;
}

html.dark .av-task-drawer__title {
  color: var(--color-dark-50);
}

/* §27.8 — Subtitle */
.av-task-drawer__sub {
  margin: 0;
  font-size: 12.5px;
  color: var(--color-gray-600);
  line-height: 1.45;
}

html.dark .av-task-drawer__sub {
  color: var(--color-dark-200);
}

/* §27.9 — Close icon button (MudIconButton chrome override) */
.mud-icon-button.av-task-drawer__close {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  color: var(--color-gray-400) !important;
}

.mud-icon-button.av-task-drawer__close:hover {
  background: var(--color-gray-100) !important;
  color: var(--color-gray-900) !important;
}

html.dark .mud-icon-button.av-task-drawer__close {
  color: var(--color-dark-300) !important;
}

html.dark .mud-icon-button.av-task-drawer__close:hover {
  background: var(--color-dark-600) !important;
  color: var(--color-dark-50) !important;
}

.mud-icon-button.av-task-drawer__close .mud-icon-root {
  width: 16px !important;
  height: 16px !important;
}

/* §27.10 — Body (scrollable middle) */
.av-task-drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  /* scrollbar (thin, doctrinal) */
  scrollbar-width: thin;
  scrollbar-color: var(--color-gray-300) transparent;
}

.av-task-drawer__body::-webkit-scrollbar {
  width: 6px;
}

.av-task-drawer__body::-webkit-scrollbar-track {
  background: transparent;
}

.av-task-drawer__body::-webkit-scrollbar-thumb {
  background: var(--color-gray-300);
  border-radius: 3px;
}

html.dark .av-task-drawer__body {
  scrollbar-color: var(--color-dark-400) transparent;
}

/* §27.10b — Dark mode: textos auxiliares dentro del body del drawer.
   MudSwitch/MudCheckBox labels y MudText body2 caen al color default de
   Mud que se ve muy tenue sobre el bg dark-700 del drawer. Subimos el
   contraste con scope restringido al body para no afectar otros sitios.
   Cubre: "Assign to myself", "Link this task to loans for review",
   "Include myself", "No loans linked to this task" y similares. */
html.dark .av-task-drawer__body .mud-switch .mud-typography,
html.dark .av-task-drawer__body .mud-checkbox .mud-typography {
  color: var(--color-dark-50) !important;
}

html.dark .av-task-drawer__body .mud-typography-body2 {
  color: var(--color-dark-100);
}

html.dark .av-task-drawer__body::-webkit-scrollbar-thumb {
  background: var(--color-dark-400);
}

/* §27.11 — Section (titled block with bottom border) */
.av-task-drawer__section {
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-gray-150);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.av-task-drawer__section:last-of-type {
  border-bottom: 0;
}

html.dark .av-task-drawer__section {
  border-bottom-color: var(--color-dark-500);
}

/* §27.12 — Section title (uppercase mono) */
.av-task-drawer__section-title {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--color-gray-400);
  font-weight: 600;
  text-transform: uppercase;
  margin: 0;
}

html.dark .av-task-drawer__section-title {
  color: var(--color-dark-300);
}

/* Sub-section title — usado para separar bloques dentro de una sección
   (ej. "External collaborators" dentro de Assignment). Misma tipografía
   que section-title pero con un poco menos de tracking y margen extra
   arriba para crear respiro visual sin imitar al título principal. */
.av-task-drawer__subsection-title {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--color-gray-500);
  font-weight: 600;
  text-transform: uppercase;
  margin: 12px 0 4px;
}

html.dark .av-task-drawer__subsection-title {
  color: var(--color-dark-300);
}

/* §27.12bis — Tenant hint (visible solo cuando IsAdmin)
   Mini-callout encima del select de assignees que muestra de qué tenants
   viene el pool actual + click target para abrir TenantTreeMultiSelector.
   Reusa _selectedTenants global del parent (cero duplicación de estado). */
.av-task-drawer__tenant-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin: 8px 0;
  background-color: rgb(from var(--color-info-500) r g b / 0.07);
  border: 1px solid rgb(from var(--color-info-500) r g b / 0.2);
  border-radius: var(--radius-md);
  font-size: 12.5px;
  color: var(--color-gray-700);
  cursor: pointer;
  transition: background-color 150ms ease;
}

.av-task-drawer__tenant-hint:hover {
  background-color: rgb(from var(--color-info-500) r g b / 0.12);
}

.av-task-drawer__tenant-hint .mud-icon-root {
  color: var(--color-info-600);
  flex-shrink: 0;
}

.av-task-drawer__tenant-hint-label {
  flex: 1 1 auto;
}

.av-task-drawer__tenant-hint-label strong {
  color: var(--color-gray-900);
  font-weight: 600;
}

.av-task-drawer__tenant-hint-action {
  color: var(--color-info-700);
  font-weight: 500;
  flex-shrink: 0;
}

html.dark .av-task-drawer__tenant-hint {
  background-color: rgb(from var(--color-info-400) r g b / 0.12);
  border-color: rgb(from var(--color-info-400) r g b / 0.3);
  color: var(--color-dark-200);
}

html.dark .av-task-drawer__tenant-hint:hover {
  background-color: rgb(from var(--color-info-400) r g b / 0.2);
}

html.dark .av-task-drawer__tenant-hint .mud-icon-root,
html.dark .av-task-drawer__tenant-hint-action {
  color: var(--color-info-400);
}

html.dark .av-task-drawer__tenant-hint-label strong {
  color: var(--color-dark-50);
}

/* §27.12ter — Hint text (descripción debajo de un subsection-title)
   Usado por la sección Watchers para explicar el rol del observador. */
.av-task-drawer__hint-text {
  font-size: 12.5px;
  color: var(--color-gray-600);
  margin: 0 0 8px;
  line-height: 1.4;
}

html.dark .av-task-drawer__hint-text {
  color: var(--color-dark-200);
}

/* §27.13 — Field row (2 columns) */
.av-task-drawer__field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.av-task-drawer__field-row--3 {
  grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 600px) {
  .av-task-drawer__field-row,
  .av-task-drawer__field-row--3 {
    grid-template-columns: 1fr;
  }
}

/* §27.14 — Field helper text */
.av-task-drawer__field-help {
  font-size: 11.5px;
  color: var(--color-gray-400);
  line-height: 1.45;
}

html.dark .av-task-drawer__field-help {
  color: var(--color-dark-300);
}

/* §27.15 — Footer (sticky, action buttons) */
.av-task-drawer__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--color-gray-150);
  background: var(--color-white);
  flex: 0 0 auto;
}

.av-task-drawer__foot--end {
  justify-content: flex-end;
}

html.dark .av-task-drawer__foot {
  background: var(--color-dark-700);
  border-top-color: var(--color-dark-500);
}

/* §27.16 — Quick template chip (MudButton chrome override) */
.av-task-drawer__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mud-button-root.av-task-drawer__chip {
  min-height: unset !important;
  height: 28px !important;
  padding: 0 12px !important;
  border-radius: 9999px !important;
  border: 1px solid var(--color-gray-200) !important;
  background-color: var(--color-white) !important;
  color: var(--color-gray-700) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: none !important;
}

.mud-button-root.av-task-drawer__chip:hover {
  border-color: var(--color-gray-300) !important;
  background-color: var(--color-gray-50) !important;
}

.mud-button-root.av-task-drawer__chip--active {
  border-color: var(--color-primary-400) !important;
  background-color: var(--color-primary-50) !important;
  color: var(--color-primary-700) !important;
}

html.dark .mud-button-root.av-task-drawer__chip {
  background-color: var(--color-dark-700) !important;
  border-color: var(--color-dark-500) !important;
  color: var(--color-dark-100) !important;
}

html.dark .mud-button-root.av-task-drawer__chip:hover {
  background-color: var(--color-dark-600) !important;
  border-color: var(--color-dark-400) !important;
}

html.dark .mud-button-root.av-task-drawer__chip--active {
  background-color: rgb(from var(--color-primary-500) r g b / 0.16) !important;
  border-color: var(--color-primary-500) !important;
  color: var(--color-primary-300) !important;
}

/* ============================================================
 * §28 — av-accordion — lightweight native accordion
 * ------------------------------------------------------------
 * Reusable accordion primitive. Lighter than MudExpansionPanel
 * for compact toggleable sections inside drawers, dialogs and
 * settings panels. The consumer owns the open/close state and
 * composes `.av-accordion--open` on the block when expanded.
 *
 * Markup (native HTML — head needs @onclick so MudElement is
 * not used; the rest can stay native or wrap in MudElement at
 * the consumer's discretion):
 *   <div class="av-accordion av-accordion--open?">
 *     <button class="av-accordion__head" type="button" @onclick>
 *       <span class="av-accordion__name">Title</span>
 *       <span class="av-accordion__caret"><svg>…</svg></span>
 *     </button>
 *     <div class="av-accordion__body">…content…</div>
 *   </div>
 *
 * Brand-aware: surfaces/borders follow the active theme tokens;
 * the caret color comes from --color-gray-400 / --color-dark-300
 * so it stays neutral across primary swaps.
 * ============================================================ */

.av-accordion {
  border: 1px solid var(--color-gray-150);
  border-radius: 9px;
  margin-bottom: 8px;
  overflow: hidden;
  background: var(--color-white);
}

html.dark .av-accordion {
  border-color: var(--color-dark-500);
  background: var(--color-dark-700);
}

.av-accordion__head {
  padding: 11px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  background: var(--color-white);
  transition: background 0.12s;
  font-family: var(--font-sans);
  width: 100%;
  border: 0;
  color: var(--color-gray-950);
}

html.dark .av-accordion__head {
  background: var(--color-dark-700);
  color: var(--color-dark-50);
}

.av-accordion__head:hover {
  background: var(--color-gray-50);
}

html.dark .av-accordion__head:hover {
  background: var(--color-dark-800);
}

.av-accordion__name {
  font-size: 13px;
  font-weight: 550;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.av-accordion__caret {
  transition: transform 0.15s;
  color: var(--color-gray-400);
  display: inline-flex;
}

html.dark .av-accordion__caret {
  color: var(--color-dark-300);
}

.av-accordion--open .av-accordion__caret {
  transform: rotate(90deg);
}

.av-accordion__body {
  padding: 0 14px;
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.2s ease,
    padding 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.av-accordion--open .av-accordion__body {
  padding: 14px;
  max-height: 600px;
  border-top: 1px solid var(--color-gray-150);
}

html.dark .av-accordion--open .av-accordion__body {
  border-top-color: var(--color-dark-500);
}

/* ============================================================
 * §29 — av-task-btn — Task Manager native button (LEGACY)
 * ------------------------------------------------------------
 * Native HTML button primitive kept as a one-off for the Task
 * Manager v8 drawers (AddTaskDrawer footer + detail drawer +
 * complete modal). The rest of the app uses MudButton with
 * doctrine skins per §Mandatory UI Patterns; DO NOT introduce
 * this class in new pages.
 *
 * Markup:
 *   <button class="av-task-btn av-task-btn--ghost av-task-btn--sm">
 *     Cancel
 *   </button>
 *   <button class="av-task-btn av-task-btn--primary av-task-btn--sm">
 *     Save
 *   </button>
 *
 * Variants: --primary | --ghost | --outlined (WI #1086 — the inline
 * "add" buttons of the drawer). Sizes: --sm (28 px). The base is
 * 34 px (mid). The focus ring follows the active primary
 * (--color-primary-500), so the Avalme brand and any primary
 * picker swap propagate automatically.
 *
 * When TM v8 is fully migrated to MudButton, DELETE this block
 * (including the --outlined variant added for WI #1086).
 * ============================================================ */

.av-task-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 12px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-gray-950);
  background: var(--color-white);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.12s,
    border-color 0.12s,
    color 0.12s,
    box-shadow 0.12s;
}

html.dark .av-task-btn {
  color: var(--color-dark-50);
  background: var(--color-dark-700);
}

.av-task-btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgb(from var(--color-primary-500) r g b / 0.18);
}

.av-task-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Variant: primary (filled, brand color) */
.av-task-btn--primary {
  background: var(--color-primary-600);
  border-color: var(--color-primary-600);
  color: var(--color-white);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 1px 2px rgba(15, 17, 21, 0.05);
}

.av-task-btn--primary:hover:not(:disabled) {
  background: var(--color-primary-700);
  border-color: var(--color-primary-700);
}

/* Variant: ghost (transparent, subtle hover) */
.av-task-btn--ghost {
  background: transparent;
  color: var(--color-gray-600);
  border-color: transparent;
}

html.dark .av-task-btn--ghost {
  color: var(--color-dark-200);
}

.av-task-btn--ghost:hover:not(:disabled) {
  background: var(--color-gray-50);
  color: var(--color-gray-950);
}

html.dark .av-task-btn--ghost:hover:not(:disabled) {
  background: var(--color-dark-800);
  color: var(--color-dark-50);
}

/* Variant: outlined (subtle border, transparent bg) — for secondary "add"
 * actions inside the drawer (assignees / watchers / external / related). Keeps
 * the bordered affordance of the old MudButton Outlined but WITHOUT MudBlazor's
 * default uppercase + tracking, so it matches the footer buttons (WI #1086). */
.av-task-btn--outlined {
  background: transparent;
  color: var(--color-gray-700);
  border-color: var(--color-gray-300);
}

html.dark .av-task-btn--outlined {
  color: var(--color-dark-100);
  border-color: var(--color-dark-500);
}

.av-task-btn--outlined:hover:not(:disabled) {
  border-color: var(--color-gray-400);
  color: var(--color-gray-950);
  background: var(--color-gray-50);
}

html.dark .av-task-btn--outlined:hover:not(:disabled) {
  border-color: var(--color-dark-400);
  color: var(--color-dark-50);
  background: var(--color-dark-800);
}

/* Size: sm (compact — 28 px) */
.av-task-btn--sm {
  height: 28px;
  padding: 4px 9px;
  font-size: 12px;
  border-radius: 6px;
}

/* ============================================================
 * §30 — av-task-toggle — Task Manager native pill toggle (LEGACY)
 * ------------------------------------------------------------
 * Native HTML pill toggle kept as a one-off for the Task Manager
 * v8 AddTaskDrawer Advanced Options. The doctrine equivalent is
 * MudSwitch (§Switches), which provides nearly identical visuals
 * with the doctrine skin. DO NOT introduce this class in new
 * pages; use MudSwitch instead.
 *
 * Markup (label wraps the input + track + label so the click
 * surface covers everything):
 *   <label class="av-task-toggle">
 *     <input type="checkbox" checked="@bool" @onchange>
 *     <span class="av-task-toggle__track"></span>
 *     <span class="av-task-toggle__label">Label</span>
 *   </label>
 *
 * Brand-aware: the "on" track color uses --color-primary-600
 * so the Avalme brand and any primary picker swap propagate.
 *
 * When TM v8 is fully migrated to MudSwitch, DELETE this block.
 * ============================================================ */

.av-task-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.av-task-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.av-task-toggle__track {
  position: relative;
  width: 34px;
  height: 20px;
  border-radius: 9999px;
  background: var(--color-gray-300);
  transition: background 0.15s;
  flex-shrink: 0;
}

html.dark .av-task-toggle__track {
  background: var(--color-dark-400);
}

.av-task-toggle__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: 0 1px 2px rgba(15, 17, 21, 0.04);
  transition: left 0.15s;
}

.av-task-toggle input:checked + .av-task-toggle__track {
  background: var(--color-primary-600);
}

.av-task-toggle input:checked + .av-task-toggle__track::after {
  left: 16px;
}

.av-task-toggle__label {
  font-size: 13px;
  margin-left: 9px;
  color: var(--color-gray-950);
}

html.dark .av-task-toggle__label {
  color: var(--color-dark-50);
}

/* ----------------------------------------------------------------------------
 * av-task-action-menu — TaskActionsMenu popover skin (V8)
 * ----------------------------------------------------------------------------
 * Skin del popover del menu "more-vert" por fila (TaskActionsMenu.razor).
 * Se aplica vía PopoverClass="av-task-action-menu" en el MudMenu.
 *
 * Cubre:
 *   - Surface (bg, border, shadow, radius) en light + dark mode.
 *   - Padding/hover de los items en ambos modos.
 *   - Visibilidad del divider en ambos modos.
 *   - Modifier --danger (Delete): texto + icono rojos + hover rojo tinted,
 *     reemplaza el viejo workaround `transform: scale(1.15)` (que crecía la
 *     SVG fuera de su bbox y descuadraba la alineación con el texto).
 *
 * Color/font del label vienen via mud-bridge.css §Last (mud-menu-item global)
 * — no se duplican acá. Solo añade lo que falta para el popover y el danger.
 * ---------------------------------------------------------------------------- */
.mud-popover.av-task-action-menu {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgb(15 17 21 / 0.12);
  overflow: hidden;
  min-width: 200px;
}

html.dark .mud-popover.av-task-action-menu {
  background-color: var(--color-dark-700);
  border-color: var(--color-dark-500);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.5);
}

.av-task-action-menu .mud-menu-item {
  padding: 8px 14px !important;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.av-task-action-menu .mud-menu-item:hover {
  background-color: var(--color-gray-100);
}

/* Dark mode — el texto del bridge global (§Last) usa --color-dark-100 que
   queda muy tenue contra el --color-dark-700 del popover. Subimos a --dark-50
   (casi blanco) para legibilidad clara. El icono no-danger usa --dark-200
   (un tono más apagado que el texto, jerarquía visual). */
html.dark .av-task-action-menu .mud-menu-item,
html.dark .av-task-action-menu .mud-menu-item .mud-typography,
html.dark .av-task-action-menu .mud-menu-item .mud-button-label,
html.dark .av-task-action-menu .mud-menu-item .mud-menu-item-text {
  color: var(--color-dark-50) !important;
}

html.dark
  .av-task-action-menu
  .mud-menu-item:not(.av-task-action-menu__item--danger)
  .mud-icon-root {
  color: var(--color-dark-200);
}

html.dark .av-task-action-menu .mud-menu-item:hover {
  background-color: var(--color-dark-600);
}

.av-task-action-menu .mud-divider {
  border-color: var(--color-gray-150);
  margin: 4px 0;
}

html.dark .av-task-action-menu .mud-divider {
  border-color: var(--color-dark-500);
}

/* Danger modifier (Delete) — color rojo en texto + icono, hover tinted.
   Reemplaza el viejo scale(1.15) que causaba misalignment con los items
   pares: ahora Delete usa el mismo tamaño de icono que el resto y solo se
   diferencia por color. */
.av-task-action-menu .av-task-action-menu__item--danger,
.av-task-action-menu .av-task-action-menu__item--danger .mud-icon-root {
  color: var(--color-red-600) !important;
}

.av-task-action-menu .av-task-action-menu__item--danger:hover {
  background-color: rgb(from var(--color-red-600) r g b / 0.08);
}

html.dark .av-task-action-menu .av-task-action-menu__item--danger,
html.dark
  .av-task-action-menu
  .av-task-action-menu__item--danger
  .mud-icon-root {
  color: var(--color-red-500) !important;
}

html.dark .av-task-action-menu .av-task-action-menu__item--danger:hover {
  background-color: rgb(from var(--color-red-500) r g b / 0.15);
}

/* ----------------------------------------------------------------------------
 * av-cal-conn-card — clickable card used by CalendarConnectionDialog (V8)
 * ----------------------------------------------------------------------------
 * Lista de 3 cards (Subscribe via URL, Google, Microsoft) dentro del dialog
 * canónico. Cada card es un <button> nativo (necesita @onclick) con icono
 * cuadrado a la izquierda, título + descripción en el medio, y chevron a
 * la derecha. Hover suave + foco visible. Estado del icono: success (verde
 * cuando conectado), neutral (gris cuando no), info (azul para el universal
 * Subscribe via URL).
 * ---------------------------------------------------------------------------- */
.av-cal-conn-card {
  width: 100%;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--font-sans);
  transition:
    background 0.12s,
    border-color 0.12s,
    box-shadow 0.12s;
  text-align: left;
}

.av-cal-conn-card:hover {
  background: var(--color-gray-50);
  border-color: var(--color-gray-300);
}

.av-cal-conn-card:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgb(from var(--color-primary-500) r g b / 0.18);
}

html.dark .av-cal-conn-card {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

html.dark .av-cal-conn-card:hover {
  background: var(--color-dark-600);
  border-color: var(--color-dark-400);
}

/* WI #945 — Coming-soon state. La integración con Microsoft no está
   wired (IsConfigured=false en el backend); mostramos la card en estado
   inerte hasta que se cablee, sin botón muerto. cursor: not-allowed +
   opacity transmite "not actionable" + hover neutraliza el visual de
   hovered (no levantamos el bg/border). */
.av-cal-conn-card--disabled,
.av-cal-conn-card--disabled:hover,
.av-cal-conn-card--disabled:focus-visible {
  cursor: not-allowed;
  opacity: 0.55;
  background: var(--surface-1);
  border-color: var(--color-gray-200);
  box-shadow: none;
}

html.dark .av-cal-conn-card--disabled,
html.dark .av-cal-conn-card--disabled:hover {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

.av-cal-conn-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.av-cal-conn-card__icon--neutral {
  background: var(--color-gray-100);
  color: var(--color-gray-500);
}

html.dark .av-cal-conn-card__icon--neutral {
  background: var(--color-dark-600);
  color: var(--color-dark-200);
}

.av-cal-conn-card__icon--success {
  background: rgb(from var(--color-success) r g b / 0.12);
  color: var(--color-success);
}

.av-cal-conn-card__icon--info {
  background: rgb(from var(--color-primary-500) r g b / 0.12);
  color: var(--color-primary-600);
}

html.dark .av-cal-conn-card__icon--info {
  color: var(--color-primary-400);
}

.av-cal-conn-card__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.av-cal-conn-card__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html.dark .av-cal-conn-card__title {
  color: var(--color-dark-50);
}

.av-cal-conn-card__desc {
  font-size: 12.5px;
  color: var(--color-gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html.dark .av-cal-conn-card__desc {
  color: var(--color-dark-200);
}

.av-cal-conn-card__arrow {
  color: var(--color-gray-400);
  flex-shrink: 0;
}

html.dark .av-cal-conn-card__arrow {
  color: var(--color-dark-300);
}

/* ----------------------------------------------------------------------------
 * av-cal-sub-row — TextField (URL readonly) + botón de copiar (sólo icono) de
 * CalendarSubscriptionDialog.
 *
 * Alineación por CENTRO, no por `end`: el form-control de Mud es más alto que su
 * caja visible (reserva el renglón del helper-text incluso sin helper), así que
 * alinear por el final dejaba el botón visiblemente más abajo que el input. Con
 * ambos elementos centrados entre sí y el renglón reservado suprimido, los dos
 * miden lo mismo y quedan a la misma altura.
 *
 * `min-width: 0` en la columna del input es obligatorio: sin él, el contenido
 * intrínseco de una URL larga impide que la columna 1fr se encoja y la fila
 * desborda el ancho del diálogo.
 * ---------------------------------------------------------------------------- */
.av-cal-sub-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.av-cal-sub-row > .mud-input-control {
  min-width: 0;
}

/* Sin HelperText el renglón no muestra nada, pero sigue ocupando alto y descuadra
   la fila. */
.av-cal-sub-row .mud-input-helper-text:empty {
  display: none;
}

/* P5 — Variante disabled (e.g. SMS feature off para el tenant). El switch
   no acepta clicks y se atenúa al 50% de opacidad. El __hint complementa
   con el motivo legible (resource localizado). */
.av-task-toggle--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.av-task-toggle--disabled .av-task-toggle__track {
  pointer-events: none;
}

.av-task-toggle__hint {
  font-size: 11px;
  color: var(--color-gray-500);
  margin-left: 6px;
  font-style: italic;
}

html.dark .av-task-toggle__hint {
  color: var(--color-dark-300);
}

/* ============================================================================
 * §35 ─── TaskOutcomeBadge (Task Manager V8 — closure-quality pill)
 * ----------------------------------------------------------------------------
 * Pill que renderiza la dimensión de calidad de cierre de una task. Pareja
 * dot + label de color por outcome. Brand-aware via tokens semánticos
 * (--color-success / --color-warning / --color-error / --color-gray-*),
 * dark-mode-aware sin trabajo del consumidor.
 * Consumer canónico: TaskOutcomeBadge.razor.
 * ============================================================================ */

.av-outcome-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  white-space: nowrap;
  font-family: var(--font-sans);
}

.av-outcome-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.av-outcome-badge__label {
  color: inherit;
}

/* ── Variants — light mode ──────────────────────────────────────────── */
.av-outcome-badge--successful {
  color: var(--color-success-darker);
  background: rgb(from var(--color-success) r g b / 0.12);
  border-color: rgb(from var(--color-success) r g b / 0.3);
}

.av-outcome-badge--partiallysuccessful {
  color: var(--color-warning-darker);
  background: rgb(from var(--color-warning) r g b / 0.14);
  border-color: rgb(from var(--color-warning) r g b / 0.32);
}

.av-outcome-badge--unsuccessful {
  color: var(--color-orange-700, #c2410c);
  background: rgb(from var(--color-orange-500, #f97316) r g b / 0.14);
  border-color: rgb(from var(--color-orange-500, #f97316) r g b / 0.32);
}

.av-outcome-badge--unabletocomplete {
  color: var(--color-error-darker);
  background: rgb(from var(--color-error) r g b / 0.12);
  border-color: rgb(from var(--color-error) r g b / 0.3);
}

.av-outcome-badge--nolongerrelevant,
.av-outcome-badge--duplicate {
  color: var(--color-gray-700);
  background: var(--color-gray-100);
  border-color: var(--color-gray-200);
}

/* ── Variants — dark mode (tonos más claros para legibilidad) ─────── */
html.dark .av-outcome-badge--successful {
  color: var(--color-success-lighter);
  background: rgb(from var(--color-success) r g b / 0.18);
  border-color: rgb(from var(--color-success) r g b / 0.4);
}

html.dark .av-outcome-badge--partiallysuccessful {
  color: var(--color-warning-lighter, #fcd34d);
  background: rgb(from var(--color-warning) r g b / 0.22);
  border-color: rgb(from var(--color-warning) r g b / 0.42);
}

html.dark .av-outcome-badge--unsuccessful {
  color: var(--color-orange-300, #fdba74);
  background: rgb(from var(--color-orange-500, #f97316) r g b / 0.22);
  border-color: rgb(from var(--color-orange-500, #f97316) r g b / 0.42);
}

html.dark .av-outcome-badge--unabletocomplete {
  color: var(--color-error-lighter);
  background: rgb(from var(--color-error) r g b / 0.2);
  border-color: rgb(from var(--color-error) r g b / 0.42);
}

html.dark .av-outcome-badge--nolongerrelevant,
html.dark .av-outcome-badge--duplicate {
  color: var(--color-dark-200);
  background: var(--color-dark-600);
  border-color: var(--color-dark-500);
}

/* ============================================================================
 * §36 ─── TaskClosureDialog — Outcome picker grid (radio-style cards)
 * ----------------------------------------------------------------------------
 * Grid de 6 cards en 2 columnas (1 col en ≤600px). Cada card es radio-like:
 * click → selected. Selected state pinta border + bg en el color del outcome.
 * Consumer canónico: TaskClosureDialog.razor.
 * ============================================================================ */

.av-outcome-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.av-outcome-card {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  font-family: inherit;

  display: grid;
  grid-template-columns: 14px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 2px;
  padding: 12px 14px;

  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
  text-align: left;
  transition:
    border-color 120ms ease,
    background-color 120ms ease,
    transform 120ms ease;
  color: var(--color-gray-700);
}

.av-outcome-card:hover {
  border-color: var(--color-gray-300);
  background: var(--color-gray-50);
}

.av-outcome-card__dot {
  grid-row: 1 / span 2;
  align-self: center;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
}

.av-outcome-card__label {
  grid-column: 2;
  grid-row: 1;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-gray-900);
}

.av-outcome-card__help {
  grid-column: 2;
  grid-row: 2;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--color-gray-500);
  font-weight: 400;
}

.av-outcome-card--successful {
  color: var(--color-success-darker);
}

.av-outcome-card--partiallysuccessful {
  color: var(--color-warning-darker);
}

.av-outcome-card--unsuccessful {
  color: var(--color-orange-700, #c2410c);
}

.av-outcome-card--unabletocomplete {
  color: var(--color-error-darker);
}

.av-outcome-card--nolongerrelevant {
  color: var(--color-gray-600);
}

.av-outcome-card--duplicate {
  color: var(--color-gray-600);
}

.av-outcome-card--selected {
  border-color: currentColor;
  background: rgb(from currentColor r g b / 0.08);
  transform: translateY(-1px);
  box-shadow: 0 1px 3px rgb(from currentColor r g b / 0.15);
}

.av-outcome-card--selected .av-outcome-card__label {
  color: currentColor;
}

html.dark .av-outcome-card {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
  color: var(--color-dark-200);
}

html.dark .av-outcome-card:hover {
  background: var(--color-dark-600);
  border-color: var(--color-dark-400);
}

html.dark .av-outcome-card__label {
  color: var(--color-dark-50);
}

html.dark .av-outcome-card__help {
  color: var(--color-dark-300);
}

html.dark .av-outcome-card--selected {
  background: rgb(from currentColor r g b / 0.18);
}

@media (max-width: 600px) {
  .av-outcome-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
 * §37 ─── TaskAttemptDialog — Quick reschedule chips + waiting hint
 * ----------------------------------------------------------------------------
 * Chips para set rápido de la nueva due date (+1/+2/+3/+7 días) + banner
 * info cuando el outcome implica esperar respuesta.
 * Consumer canónico: TaskAttemptDialog.razor.
 * ============================================================================ */

.av-quick-reschedule {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  margin-bottom: 14px;
}

.av-quick-reschedule__label {
  font-size: 12px;
  color: var(--color-gray-500);
  margin-right: 4px;
}

.av-quick-reschedule__chip {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  font-family: inherit;

  padding: 5px 12px;
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: 9999px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--color-gray-700);
  transition:
    border-color 100ms ease,
    background-color 100ms ease,
    color 100ms ease;
}

.av-quick-reschedule__chip:hover {
  border-color: var(--color-primary-600);
  color: var(--color-primary-600);
  background: rgb(from var(--color-primary-500) r g b / 0.06);
}

html.dark .av-quick-reschedule__label {
  color: var(--color-dark-300);
}

html.dark .av-quick-reschedule__chip {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
  color: var(--color-dark-200);
}

html.dark .av-quick-reschedule__chip:hover {
  border-color: var(--color-primary-400);
  color: var(--color-primary-300);
  background: rgb(from var(--color-primary-400) r g b / 0.14);
}

.av-waiting-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  margin-top: 4px;
  background: rgb(from var(--color-info) r g b / 0.08);
  border: 1px solid rgb(from var(--color-info) r g b / 0.28);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--color-info-darker);
}

.av-waiting-hint__icon {
  font-size: 14px;
  line-height: 1.1;
  flex-shrink: 0;
}

.av-waiting-hint strong {
  color: var(--color-gray-900);
  font-weight: 600;
}

html.dark .av-waiting-hint {
  background: rgb(from var(--color-info) r g b / 0.16);
  border-color: rgb(from var(--color-info) r g b / 0.4);
  color: var(--color-info-lighter);
}

html.dark .av-waiting-hint strong {
  color: var(--color-dark-50);
}

/* ============================================================================
 * §38 ─── TaskDetailDrawer — Banners & lineage chips (V8 Phase 2)
 * ----------------------------------------------------------------------------
 * Outcome banner, attempts banner y lineage chips (parent/children) que se
 * renderizan en el top del body del detail drawer cuando los datos existen.
 * Consumer canónico: detail drawer dentro de TaskManagerV8.razor.
 * ============================================================================ */

.av-task-banner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 14px;
  margin-bottom: 12px;
  border-radius: 8px;
  border: 1px solid var(--color-gray-200);
  background: var(--color-gray-50);
  font-size: 12.5px;
  color: var(--color-gray-700);
}

.av-task-banner--outcome {
  background: rgb(from var(--color-success) r g b / 0.06);
  border-color: rgb(from var(--color-success) r g b / 0.2);
}

.av-task-banner--attempts {
  background: rgb(from var(--color-warning) r g b / 0.08);
  border-color: rgb(from var(--color-warning) r g b / 0.24);
}

.av-task-banner__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.av-task-banner__count {
  font-weight: 600;
  color: var(--color-gray-900);
}

.av-task-banner__meta {
  color: var(--color-gray-500);
  font-size: 12px;
}

.av-task-banner__notes {
  font-size: 12.5px;
  color: var(--color-gray-600);
  margin: 0;
  line-height: 1.5;
}

html.dark .av-task-banner {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
  color: var(--color-dark-200);
}

html.dark .av-task-banner--outcome {
  background: rgb(from var(--color-success) r g b / 0.14);
  border-color: rgb(from var(--color-success) r g b / 0.32);
}

html.dark .av-task-banner--attempts {
  background: rgb(from var(--color-warning) r g b / 0.16);
  border-color: rgb(from var(--color-warning) r g b / 0.32);
}

html.dark .av-task-banner__count {
  color: var(--color-dark-50);
}

html.dark .av-task-banner__meta,
html.dark .av-task-banner__notes {
  color: var(--color-dark-300);
}

.av-task-lineage {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin-bottom: 8px;
  border-radius: 8px;
  border: 1px dashed var(--color-gray-300);
  background: var(--color-white);
  cursor: pointer;
  transition:
    border-color 120ms ease,
    background-color 120ms ease;
}

.av-task-lineage:hover {
  border-color: var(--color-primary-500);
  background: rgb(from var(--color-primary-500) r g b / 0.04);
}

.av-task-lineage__arrow {
  font-size: 18px;
  line-height: 1;
  color: var(--color-gray-400);
  flex-shrink: 0;
}

.av-task-lineage__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}

.av-task-lineage__eyebrow {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-gray-500);
  font-family: var(--font-mono);
}

.av-task-lineage__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-gray-800);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.av-task-lineage__child-link {
  display: inline-block;
  margin-right: 8px;
  color: var(--color-primary-600);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}

.av-task-lineage__child-link:hover {
  text-decoration: underline;
}

html.dark .av-task-lineage {
  background: var(--color-dark-700);
  border-color: var(--color-dark-450);
}

html.dark .av-task-lineage:hover {
  border-color: var(--color-primary-400);
  background: rgb(from var(--color-primary-400) r g b / 0.1);
}

html.dark .av-task-lineage__arrow {
  color: var(--color-dark-300);
}

html.dark .av-task-lineage__eyebrow {
  color: var(--color-dark-300);
}

html.dark .av-task-lineage__title {
  color: var(--color-dark-50);
}

html.dark .av-task-lineage__child-link {
  color: var(--color-primary-300);
}

/* ============================================================================
 * §39 ─── Attempts list — historial estructurado en detail drawer
 * ----------------------------------------------------------------------------
 * Lista vertical de TaskAttemptDto items rendered en un .tm8-drawer-section
 * con título "Attempt History". Consumer: detail drawer en TaskManagerV8.razor.
 * ============================================================================ */

.av-attempt-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 0;
}

.av-attempt-item {
  display: grid;
  grid-template-columns: 32px 1fr;
  column-gap: 12px;
  align-items: flex-start;
}

.av-attempt-item__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  background: var(--color-gray-100);
  color: var(--color-gray-700);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
}

.av-attempt-item__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.av-attempt-item__outcome {
  font-size: 13px;
  color: var(--color-gray-800);
  line-height: 1.4;
}

.av-attempt-item__outcome strong {
  font-weight: 600;
}

.av-attempt-item__notes {
  font-size: 12.5px;
  color: var(--color-gray-600);
  line-height: 1.45;
  margin: 0;
}

.av-attempt-item__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-gray-500);
}

html.dark .av-attempt-item__num {
  background: var(--color-dark-600);
  color: var(--color-dark-100);
}

html.dark .av-attempt-item__outcome {
  color: var(--color-dark-50);
}

html.dark .av-attempt-item__notes {
  color: var(--color-dark-300);
}

html.dark .av-attempt-item__meta {
  color: var(--color-dark-400);
}

/* ============================================================================
 * §40 ─── TaskAssigneeAvatar — <img> de profile picture cuando disponible
 * ----------------------------------------------------------------------------
 * Avatar real del usuario (subido al profile) renderizado como <img> redondeado.
 * Coexiste con .av-bucket-avatar (§22) — el componente Razor decide cuál
 * pintar según AvatarUri esté presente o no. Mismos 3 tamaños (sm/md/lg)
 * que el bucket fallback para que el footprint visual sea consistente cuando
 * un row mezcla users con y sin foto.
 *
 * Composición:
 *   .av-task-assignee-avatar           base (object-fit: cover, redondo)
 *   .av-task-assignee-avatar--sm       24×24 (matchea bucket default)
 *   .av-task-assignee-avatar--md       32×32
 *   .av-task-assignee-avatar--lg       40×40
 *
 * Consumer canónico: TaskAssigneeAvatar.razor.
 * ============================================================================ */

.av-task-assignee-avatar {
  border-radius: 9999px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--color-gray-100);
  border: 1px solid var(--color-gray-200);
  display: inline-block;
  vertical-align: middle;
}

.av-task-assignee-avatar--sm {
  width: 24px;
  height: 24px;
}

.av-task-assignee-avatar--md {
  width: 32px;
  height: 32px;
}

.av-task-assignee-avatar--lg {
  width: 40px;
  height: 40px;
}

html.dark .av-task-assignee-avatar {
  background: var(--color-dark-600);
  border-color: var(--color-dark-500);
}

/* ----------------------------------------------------------------------------
 * §40.1 ─── AssigneeAvatarStack (`.av-task-assignee-stack`)
 * ----------------------------------------------------------------------------
 * N avatares solapados al estilo "team stack" (≥ 2 asignados). Cada item está
 * envuelto en `.av-task-assignee-stack__item` que aplica margin-left negativo
 * a partir del segundo, generando el efecto de superposición. El borde blanco
 * (light) / dark-paper (dark) separa visualmente los avatares contiguos. Un
 * último chip `.av-task-assignee-stack__overflow` (con clase de tamaño
 * `av-bucket-avatar--md/--lg` añadida cuando aplica) renderiza el "+N" cuando
 * el total supera MaxVisible.
 *
 * Consumer canónico: AssigneeAvatarStack.razor (Task Manager v8).
 * Composición: cuando `entries.Count == 1` el componente NO usa el wrapper —
 * pinta directamente el TaskAssigneeAvatar para preservar el footprint visual
 * de las tareas single-assignee.
 * ---------------------------------------------------------------------------- */
.av-task-assignee-stack {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.av-task-assignee-stack__item {
  display: inline-flex;
  align-items: center;
}

.av-task-assignee-stack__item + .av-task-assignee-stack__item {
  margin-left: -6px;
}

/* El borde alrededor de cada avatar separa visualmente cuando se solapan.
   Aplica a las dos primitivas que el stack puede renderizar dentro de
   `.av-task-assignee-stack__item`: `.av-task-assignee-avatar` (img de
   profile picture) y `.av-bucket-avatar` (fallback de iniciales para
   internos sin foto y para externos). */
.av-task-assignee-stack__item > .av-task-assignee-avatar,
.av-task-assignee-stack__item > .av-bucket-avatar {
  border: 2px solid var(--color-white);
  box-sizing: content-box;
}

html.dark .av-task-assignee-stack__item > .av-task-assignee-avatar,
html.dark .av-task-assignee-stack__item > .av-bucket-avatar {
  border-color: var(--color-dark-700);
}

/* Overflow chip — "+N" gris neutro con la misma forma/tamaño que un bucket.
   Reusa `.av-bucket-avatar--md/--lg` (compuestos en el consumer) para los
   tamaños mayores. Default sin modifier = 24×24 (matchea sm). */
.av-task-assignee-stack__overflow {
  margin-left: -6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  background: var(--color-gray-200);
  color: var(--color-gray-700);
  border: 2px solid var(--color-white);
  box-sizing: content-box;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  cursor: default;
}

.av-task-assignee-stack__overflow.av-bucket-avatar--md {
  width: 32px;
  height: 32px;
  font-size: 12px;
}

.av-task-assignee-stack__overflow.av-bucket-avatar--lg {
  width: 40px;
  height: 40px;
  font-size: 14px;
}

html.dark .av-task-assignee-stack__overflow {
  background: var(--color-dark-500);
  color: var(--color-dark-100);
  border-color: var(--color-dark-700);
}

/* ===========================================================================
 * §41 ─── Task Automation extra panes (av-auto-*)
 * --------------------------------------------------------------------------
 * Active Automations · Builder · Activity Log · AI Suggestions
 * Renderizan dentro de <AutomationView> según _subTabIndex (0=Templates ya
 * cubierto por §25; 1..4 cubiertos aquí). Mock reference:
 * claude/avalme-task-manager.html §AUTOMATION VIEW.
 * --------------------------------------------------------------------------
 * Sub-sections:
 *   §41.1  .av-auto-rules            — Active Automations list wrapper
 *   §41.2  .av-auto-rule             — single rule card (switch + flow + stats)
 *   §41.3  .av-auto-rule-flow        — when→if→then horizontal chip flow
 *   §41.4  .av-auto-rule-stats       — owner / lastRun / success / failed row
 *   §41.5  .av-auto-rule-actions     — edit / delete icon cluster
 *   §41.6  .av-auto-builder          — Builder pane (3 dashed stages)
 *   §41.7  .av-auto-builder-step     — single When / If / Then stage
 *   §41.8  .av-auto-builder-pill     — inline editable pill chip
 *   §41.9  .av-auto-log              — Activity Log table
 *   §41.10 .av-auto-ai               — AI Suggestions card list
 * ===========================================================================*/

/* §41.1 — Active Automations list wrapper ----------------------------------*/
.av-auto-rules {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

/* §41.2 — Single rule card -------------------------------------------------*/
.av-auto-rule {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 16px;
  align-items: flex-start;
  padding: 16px 18px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
}

html.dark .av-auto-rule {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

.av-auto-rule__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-gray-800);
  margin-bottom: 6px;
}

html.dark .av-auto-rule__name {
  color: var(--color-dark-100);
}

/* §41.3 — When → If → Then flow --------------------------------------------*/
.av-auto-rule-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.av-auto-rule-flow__step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 12px;
  line-height: 1.4;
  background: var(--color-gray-100);
  color: var(--color-gray-700);
  border: 1px solid var(--color-gray-200);
}

.av-auto-rule-flow__step .label {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.04em;
  opacity: 0.7;
}

.av-auto-rule-flow__step--when {
  background: rgb(from var(--color-info) r g b / 0.1);
  border-color: rgb(from var(--color-info) r g b / 0.25);
  color: var(--color-info);
}

.av-auto-rule-flow__step--if {
  background: rgb(from var(--color-warning) r g b / 0.1);
  border-color: rgb(from var(--color-warning) r g b / 0.25);
  color: #92580b;
}

.av-auto-rule-flow__step--then {
  background: rgb(from var(--color-primary-600) r g b / 0.1);
  border-color: rgb(from var(--color-primary-600) r g b / 0.2);
  color: var(--color-primary-700);
}

.av-auto-rule-flow__arrow {
  color: var(--color-gray-400);
  font-size: 12px;
  font-weight: 600;
}

html.dark .av-auto-rule-flow__step {
  background: var(--color-dark-600);
  border-color: var(--color-dark-500);
  color: var(--color-dark-200);
}

/* §41.4 — Stats row --------------------------------------------------------*/
.av-auto-rule-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12px;
  color: var(--color-gray-500);
}

.av-auto-rule-stats b {
  color: var(--color-gray-800);
  font-weight: 600;
}

.av-auto-rule-stats__success {
  color: var(--color-success);
}

.av-auto-rule-stats__failed {
  color: var(--color-error);
}

.av-auto-rule-stats__failed--zero {
  color: var(--color-gray-400);
}

html.dark .av-auto-rule-stats {
  color: var(--color-dark-300);
}

html.dark .av-auto-rule-stats b {
  color: var(--color-dark-100);
}

/* §41.5 — Row actions ------------------------------------------------------*/
.av-auto-rule-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* §41.6 — Builder pane -----------------------------------------------------*/
.av-auto-builder {
  margin-top: 16px;
  padding: 24px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
}

html.dark .av-auto-builder {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

.av-auto-builder__name {
  margin-bottom: 18px;
}

/* §41.7 — Single When / If / Then stage ------------------------------------*/
.av-auto-builder-step {
  position: relative;
  border: 1.5px dashed var(--color-gray-300);
  border-radius: var(--radius-lg);
  padding: 18px 18px 14px;
  margin-bottom: 16px;
}

.av-auto-builder-step::before {
  content: attr(data-label);
  position: absolute;
  top: -10px;
  left: 18px;
  padding: 0 8px;
  background: var(--color-white);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-gray-500);
}

.av-auto-builder-step--when {
  border-color: rgb(from var(--color-info) r g b / 0.45);
}

.av-auto-builder-step--when::before {
  color: var(--color-info);
}

.av-auto-builder-step--if {
  border-color: rgb(from var(--color-warning) r g b / 0.45);
}

.av-auto-builder-step--if::before {
  color: #92580b;
}

.av-auto-builder-step--then {
  border-color: rgb(from var(--color-primary-600) r g b / 0.45);
}

.av-auto-builder-step--then::before {
  color: var(--color-primary-700);
}

html.dark .av-auto-builder-step::before {
  background: var(--color-dark-700);
}

html.dark .av-auto-builder-step {
  border-color: var(--color-dark-400);
}

.av-auto-builder__block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--color-gray-700);
}

html.dark .av-auto-builder__block {
  color: var(--color-dark-200);
}

/* §41.8 — Editable inline pill --------------------------------------------*/
.av-auto-builder-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 9999px;
  background: var(--color-gray-100);
  border: 1px solid var(--color-gray-200);
  font-size: 13px;
  color: var(--color-gray-800);
  cursor: pointer;
  user-select: none;
}

.av-auto-builder-pill--primary {
  background: rgb(from var(--color-primary-600) r g b / 0.1);
  border-color: rgb(from var(--color-primary-600) r g b / 0.25);
  color: var(--color-primary-700);
}

.av-auto-builder-pill--danger {
  background: rgb(from var(--color-error) r g b / 0.1);
  border-color: rgb(from var(--color-error) r g b / 0.25);
  color: var(--color-error);
}

.av-auto-builder__conn {
  font-size: 12px;
  color: var(--color-gray-500);
  font-style: italic;
}

.av-auto-builder__add {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--color-primary-600);
  background: transparent;
  border: 1px dashed var(--color-primary-300, var(--color-primary-600));
  border-radius: 9999px;
  cursor: pointer;
}

.av-auto-builder__add:hover {
  background: rgb(from var(--color-primary-600) r g b / 0.06);
}

.av-auto-builder__foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--color-gray-200);
}

html.dark .av-auto-builder__foot {
  border-top-color: var(--color-dark-500);
}

html.dark .av-auto-builder-pill {
  background: var(--color-dark-600);
  border-color: var(--color-dark-500);
  color: var(--color-dark-200);
}

/* §41.9 — Activity Log table ----------------------------------------------*/
.av-auto-log {
  margin-top: 16px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.av-auto-log__row {
  display: grid;
  grid-template-columns: 140px 1.5fr 2fr 100px 140px;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-gray-150, var(--color-gray-200));
  font-size: 13px;
  color: var(--color-gray-700);
  align-items: center;
}

.av-auto-log__row:last-child {
  border-bottom: 0;
}

.av-auto-log__row--head {
  background: var(--color-gray-50, var(--color-gray-100));
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--color-gray-500);
}

.av-auto-log__time {
  color: var(--color-gray-500);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.av-auto-log__name {
  font-weight: 600;
  color: var(--color-gray-800);
}

.av-auto-log__sub {
  font-size: 11px;
  color: var(--color-gray-500);
  margin-top: 2px;
}

.av-auto-log__result {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
}

.av-auto-log__result--success {
  color: var(--color-success);
}

.av-auto-log__result--failed {
  color: var(--color-error);
}

.av-auto-log__result-dot {
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  background: currentColor;
}

html.dark .av-auto-log {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

html.dark .av-auto-log__row {
  color: var(--color-dark-200);
  border-bottom-color: var(--color-dark-500);
}

html.dark .av-auto-log__row--head {
  background: var(--color-dark-600);
  color: var(--color-dark-300);
}

html.dark .av-auto-log__name {
  color: var(--color-dark-100);
}

/* §41.10 — AI Suggestions cards -------------------------------------------*/
.av-auto-ai {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.av-auto-ai__card {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  padding: 16px 18px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}

.av-auto-ai__card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(
    180deg,
    var(--color-primary-600) 0%,
    var(--color-info) 100%
  );
}

.av-auto-ai__spark {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: rgb(from var(--color-primary-600) r g b / 0.1);
  color: var(--color-primary-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.av-auto-ai__label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary-700);
  margin-bottom: 4px;
}

.av-auto-ai__text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-gray-700);
  margin-bottom: 12px;
}

.av-auto-ai__text b {
  font-weight: 600;
  color: var(--color-gray-900);
}

.av-auto-ai__actions {
  display: flex;
  gap: 8px;
}

html.dark .av-auto-ai__card {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

html.dark .av-auto-ai__text {
  color: var(--color-dark-200);
}

html.dark .av-auto-ai__text b {
  color: var(--color-dark-50);
}

html.dark .av-auto-ai__label {
  color: var(--color-primary-400);
}

/* ===========================================================================
 * §42 ─── AddTaskDrawer — Visibility tiles (mock-parity §B)
 * --------------------------------------------------------------------------
 * 2×2 grid of selectable tiles (Private / Team / Workspace / Shared) — used
 * inside the AddTaskDrawer "Assignment & Visibility" section. Selection state
 * comes from the parent's _visibility field; consumer composes the
 * --selected modifier via VizTileClass() helper.
 *
 * ⚠️ BACKEND TODO: cuando CreateTaskCommand acepte Visibility, mover el
 * estado al contract. Hoy es local en el drawer.
 * ===========================================================================*/
.av-task-viz {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.av-task-viz__opt {
  padding: 10px 12px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    border-color 0.12s ease,
    background-color 0.12s ease;
}

.av-task-viz__opt:hover {
  border-color: var(--color-gray-400);
}

.av-task-viz__opt--selected {
  border-color: var(--color-primary-600);
  background: rgb(from var(--color-primary-600) r g b / 0.08);
}

/* Disabled state — applied to the "Private" tile when the task has other
   people on it (see IsPrivateAllowed in AddTaskDrawer.razor.cs). Visual:
   muted text, neutral background, no hover lift, not-allowed cursor. The
   MudTooltip wrapper around the tile explains the rule on hover. */
.av-task-viz__opt--disabled,
.av-task-viz__opt--disabled:hover {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--color-gray-50);
  border-color: var(--color-gray-200);
  box-shadow: none;
}

html.dark .av-task-viz__opt--disabled,
html.dark .av-task-viz__opt--disabled:hover {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

.av-task-viz__opt-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-gray-800);
  margin-bottom: 2px;
}

.av-task-viz__opt-desc {
  font-size: 11px;
  color: var(--color-gray-500);
  line-height: 1.4;
}

html.dark .av-task-viz__opt {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

html.dark .av-task-viz__opt:hover {
  border-color: var(--color-dark-300);
}

html.dark .av-task-viz__opt--selected {
  border-color: var(--color-primary-400);
  background: rgb(from var(--color-primary-400) r g b / 0.15);
}

html.dark .av-task-viz__opt-name {
  color: var(--color-dark-100);
}

html.dark .av-task-viz__opt-desc {
  color: var(--color-dark-300);
}

/* §42.X — Helper text inside drawer sections (e.g. Related-To hint). */
.av-task-drawer__helper {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--color-gray-500);
}

html.dark .av-task-drawer__helper {
  color: var(--color-dark-300);
}

/* ===========================================================================
 * §43 ─── Task Manager V8 — header horizontal + KPI tiles enhanced
 * --------------------------------------------------------------------------
 * Layout-rich variant del header / KPIs portado del Style Guide Demo
 * (mud-bridge.css §bp-tm-demo-*). El header anterior (AvPageHeader Size=Large)
 * gastaba ~120 px de alto vertical; este horizontal cabe en ~46 px y deja
 * lugar para meta-info (chip "X teammates online"). Las KPIs ganan top-stripe
 * coloreado + icono en círculo + chip de trend + meta sublabel.
 *
 * Tokens de color por tile vienen via --tm8-kpi-accent / --tm8-kpi-bg /
 * --tm8-kpi-fg que cada modifier define (today, overdue, completed, team,
 * mytasks). Cualquier KPI nuevo solo necesita declarar esos 3 tokens.
 * ===========================================================================*/

/* §43.1 — Header
   Injected via <SectionOutlet name="page-header"> in MainLayout.razor. It is a BLOCK below the
   breadcrumb toolbar, not inline with it (WI #1012 moved it there; the comment said "inline" long
   after that stopped being true). MainLayout wraps the outlet in the same px-* gutters as @Body so
   the title lines up with the content under it. flex:1 spreads title and actions across the row. */
.tm8-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex: 1;
  min-width: 0;
}

.tm8-header__title-block {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.tm8-header__title-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
  background: linear-gradient(
    135deg,
    var(--color-primary-500) 0%,
    var(--color-primary-700) 100%
  );
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px -2px rgb(from var(--color-primary-600) r g b / 0.35);
}

.tm8-header__title-icon .mud-icon-root {
  color: var(--color-white);
  width: 18px;
  height: 18px;
}

.tm8-header__title-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}

/* Compound selector .tm8-header__title.tm8-header__title gives this rule
   specificity (0,2,0) — beats the brand override at design-tokens.css §H
   `[data-theme-brand="avalme"] h1` (0,1,1) so the page title stays at our
   tight 20px instead of jumping to 48px Montserrat. The doubled class is
   a deliberate spec-bumping idiom, NOT a typo. */
.tm8-header__title.tm8-header__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-gray-900);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
  font-family: var(--font-sans);
}

html.dark .tm8-header__title {
  color: var(--color-dark-50);
}

.tm8-header__subtitle {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  font-size: 12.5px;
  /* Truncate long subtitles so the toolbar row doesn't grow vertically. */
  overflow: hidden;
}

.tm8-header__subtitle-text {
  color: var(--color-gray-500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

html.dark .tm8-header__subtitle-text {
  color: var(--color-dark-300);
}

.tm8-header__online {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-success-darker);
  font-weight: 600;
}

.tm8-header__online::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-success);
  box-shadow: 0 0 0 0 rgb(from var(--color-success) r g b / 0.6);
  animation: tm8-pulse-green 2s infinite;
}

@keyframes tm8-pulse-green {
  0% {
    box-shadow: 0 0 0 0 rgb(from var(--color-success) r g b / 0.6);
  }

  70% {
    box-shadow: 0 0 0 7px rgb(from var(--color-success) r g b / 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgb(from var(--color-success) r g b / 0);
  }
}

.tm8-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* §43.2 — KPI tile (enhanced) */
.tm8-kpi {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 12px;
  padding: 10px 14px;
  /* gap: 0 + per-element margins below — gives the rhythm
       icon — small space — number — TIGHT — label */
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: all 0.18s ease;
  position: relative;
  overflow: hidden;
  cursor: default;
}

/* The tiles are <button> now (every count needs a path to its rows), so the user-agent chrome
   has to go and the affordance has to read as clickable. Keyboard focus comes free with the
   element; the ring is explicit so it survives the reset. */
.tm8-kpi--clickable {
  cursor: pointer;
  text-align: inherit;
  font: inherit;
  color: inherit;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
}

.tm8-kpi.tm8-kpi--clickable:hover {
  border-color: var(--color-primary-400);
}

.tm8-kpi.tm8-kpi--clickable:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

html.dark .tm8-kpi--clickable:hover {
  border-color: var(--color-primary-500);
}

html.dark .tm8-kpi {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

.tm8-kpi:hover {
  border-color: var(--color-primary-300);
  transform: translateY(-2px);
  box-shadow:
    0 8px 24px rgb(from var(--color-primary-700) r g b / 0.1),
    0 2px 6px rgba(0, 0, 0, 0.05);
}

/* Top color stripe */
.tm8-kpi::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--tm8-kpi-accent, var(--color-primary-600));
  opacity: 0.85;
  border-radius: 12px 12px 0 0;
}

/* Tone variants */
.tm8-kpi--mytasks {
  --tm8-kpi-accent: var(--color-primary-600);
  --tm8-kpi-bg: var(--color-primary-50);
  --tm8-kpi-fg: var(--color-primary-700);
}

.tm8-kpi--today {
  --tm8-kpi-accent: var(--color-warning);
  --tm8-kpi-bg: rgb(from var(--color-warning) r g b / 0.1);
  --tm8-kpi-fg: var(--color-warning-darker, #92580b);
}

.tm8-kpi--overdue {
  --tm8-kpi-accent: var(--color-error);
  --tm8-kpi-bg: rgb(from var(--color-error) r g b / 0.1);
  --tm8-kpi-fg: var(--color-error-darker);
}

.tm8-kpi--team {
  --tm8-kpi-accent: var(--color-info);
  --tm8-kpi-bg: rgb(from var(--color-info) r g b / 0.1);
  --tm8-kpi-fg: var(--color-info-darker);
}

.tm8-kpi--completed {
  --tm8-kpi-accent: var(--color-success);
  --tm8-kpi-bg: rgb(from var(--color-success) r g b / 0.1);
  --tm8-kpi-fg: var(--color-success-darker);
}

html.dark .tm8-kpi--mytasks {
  --tm8-kpi-bg: rgb(from var(--color-primary-500) r g b / 0.15);
  --tm8-kpi-fg: var(--color-primary-300);
}

.tm8-kpi__top {
  /* Row 1 of the card: [icon] [label] ........ [trend?].
       Icon and label sit next to each other (gap 10px); the optional
       trend chip — when present — pushes to the right edge via
       margin-left:auto on .tm8-kpi__trend below. The big number lives
       in .tm8-kpi__value on row 2, and the descriptive caption in
       .tm8-kpi__meta on row 3. */
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.tm8-kpi__icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--tm8-kpi-bg);
  color: var(--tm8-kpi-fg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tm8-kpi__icon .mud-icon-root {
  color: var(--tm8-kpi-fg);
  width: 16px;
  height: 16px;
}

.tm8-kpi__trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 5px;
  font-family: var(--font-mono);
  line-height: 1;
  /* Push to the right edge of __top, after [icon] + [value]. */
  margin-left: auto;
}

.tm8-kpi__trend--up {
  background: rgb(from var(--color-success) r g b / 0.1);
  color: var(--color-success-darker);
}

.tm8-kpi__trend--down {
  background: rgb(from var(--color-error) r g b / 0.1);
  color: var(--color-error-darker);
}

.tm8-kpi__trend--flat {
  background: var(--color-gray-100);
  color: var(--color-gray-700);
}

html.dark .tm8-kpi__trend--flat {
  background: var(--color-dark-600);
  color: var(--color-dark-200);
}

.tm8-kpi__value {
  font-size: 26px;
  font-weight: 700;
  color: var(--color-gray-900);
  letter-spacing: -0.02em;
  font-family: var(--font-mono);
  line-height: 1.1;
  /* Standalone row between [icon][label] (top) and meta caption (bottom). */
  margin: 0;
}

html.dark .tm8-kpi__value {
  color: var(--color-dark-50);
}

/* WI #1086 — KPI value skeleton: shimmer bar shown on first load so the 5
   tiles don't flash "0" before the real counts arrive. Reuses the datagrid
   shimmer keyframe (avDatagridShimmer, §10.7). Sits inside .tm8-kpi__value. */
.tm8-kpi__skeleton {
  display: inline-block;
  width: 44px;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    var(--color-gray-200) 25%,
    var(--color-gray-100) 37%,
    var(--color-gray-200) 63%
  );
  background-size: 200% 100%;
  animation: avDatagridShimmer 1.4s ease-in-out infinite;
}

html.dark .tm8-kpi__skeleton {
  background: linear-gradient(
    90deg,
    var(--color-dark-500) 25%,
    var(--color-dark-400) 37%,
    var(--color-dark-500) 63%
  );
  background-size: 200% 100%;
}

.tm8-kpi__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-gray-800);
  margin: 0;
  line-height: 1.2;
  /* Sits inline with the icon inside .tm8-kpi__top — the "category" label
       of the card (e.g. "My Tasks"), NOT the big value. */
}

html.dark .tm8-kpi__label {
  color: var(--color-dark-50);
}

/* Row 3 — small descriptive caption below the value (e.g. "Assigned to you",
   "Tasks due today"). Smaller and muted compared to the label. */
.tm8-kpi__meta {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--color-gray-500);
  margin: 2px 0 0;
  line-height: 1.3;
}

html.dark .tm8-kpi__meta {
  color: var(--color-dark-300);
}

/* ============================================================================
 * §39 ─── Av-DataGrid Pager (custom HTML pager for MudDataGrid)
 * ----------------------------------------------------------------------------
 * The custom pager replaces MudDataGridPager — see AdvancedGridShowcase.razor
 * PagerContent for markup. All selectors scope-restricted to .av-datagrid-pager*
 * — fully opt-in.
 * ============================================================================ */
/* ── 11.5. MudDataGrid pager — custom HTML pager ─────────────────────────
 Background: rounds of CSS reorder hacks (`order:`, `display: contents`,
 `position: absolute`) on MudDataGridPager's DOM failed to produce a
 stable 3-column layout for the Grid pilot. The cause was MudDataGrid's
 internal pager renders its children in a structure that doesn't fully
 honour our `.mud-data-grid`-scoped overrides — even with `!important`
 on every property.

 Resolution: replace `<MudDataGridPager>` entirely with a hand-written
 pager in `<PagerContent>` (see consumer pages §PagerContent).
 The custom markup uses our own `.av-datagrid-pager*` class hierarchy
 and is in the exact DOM order we want — info-left, buttons-center,
 rows-per-page-right. No `order:` CSS, no DOM dissolution tricks.

 The Table pilot keeps using MudTablePager (its DOM cooperates with
 our §10 rules), so nothing here affects the Table — there's NO
 `.mud-table-pagination`/`.mud-table-pagination-toolbar` selector in
 this section. */
.av-datagrid-pager {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  min-height: 48px;
  border-top: 1px solid var(--color-primary-200);
  background: linear-gradient(
    180deg,
    rgb(from var(--color-primary-500) r g b / 0.04) 0%,
    var(--color-gray-50) 100%
  );
  color: var(--color-gray-700);
  font-size: 0.8125rem;
}

html.dark .av-datagrid-pager {
  border-top-color: var(--color-primary-700);
  background: linear-gradient(
    180deg,
    rgb(from var(--color-primary-500) r g b / 0.1) 0%,
    var(--color-dark-700) 100%
  );
  color: var(--color-dark-200);
}

/* Left: page range info "1-10 │ 233". Primary-tinted + bold so it
 stands out as the most informative chunk of the pager. */
.av-datagrid-pager__info {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: auto;
  color: var(--color-primary-700);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

html.dark .av-datagrid-pager__info {
  color: var(--color-primary-300);
}

.av-datagrid-pager__separator {
  color: var(--color-gray-400);
  font-weight: 400;
}

html.dark .av-datagrid-pager__separator {
  color: var(--color-dark-400);
}

/* Center: nav buttons (first / prev / next / last). 32×32 square-
 rounded with subtle border; hover tints with primary. Mirrors
 §10's `.mud-table-pagination-actions` skin so both pagers look
 identical. */
.av-datagrid-pager__nav {
  display: flex;
  gap: 4px;
  margin-right: auto;
}

.av-datagrid-pager__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--color-gray-300);
  background: var(--color-white);
  color: var(--color-gray-600);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.av-datagrid-pager__btn:hover:not(:disabled) {
  background: rgb(from var(--color-primary-500) r g b / 0.08);
  border-color: var(--color-primary-500);
  color: var(--color-primary-700);
}

.av-datagrid-pager__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

html.dark .av-datagrid-pager__btn {
  border-color: var(--color-dark-500);
  background: var(--color-dark-700);
  color: var(--color-dark-200);
}

html.dark .av-datagrid-pager__btn:hover:not(:disabled) {
  background: rgb(from var(--color-primary-500) r g b / 0.18);
  border-color: var(--color-primary-400);
  color: var(--color-primary-200);
}

/* Right: "Rows per page:" label + native <select>. */
.av-datagrid-pager__rows {
  display: flex;
  align-items: center;
  gap: 8px;
}

.av-datagrid-pager__rows-label {
  color: var(--color-gray-700);
  font-weight: 500;
}

html.dark .av-datagrid-pager__rows-label {
  color: var(--color-dark-200);
}

/* Native <select> styled minimally — no border / no background /
 no underline, just the value + the OS-default chevron. */
.av-datagrid-pager__rows-select {
  border: none;
  background: transparent;
  box-shadow: none;
  font-size: 0.8125rem;
  color: var(--color-gray-800);
  cursor: pointer;
  padding: 2px 4px;
  min-width: 56px;
  appearance: auto;
}

html.dark .av-datagrid-pager__rows-select {
  color: var(--color-dark-100);
}

.av-datagrid-pager__rows-select:focus {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 1px;
  border-radius: 4px;
}

/* Mobile: stack vertically. */
@media (max-width: 640px) {
  .av-datagrid-pager {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .av-datagrid-pager__info,
  .av-datagrid-pager__nav {
    margin-right: 0;
    justify-content: center;
  }
}

/* ============================================================================
 * §40 ─── Av-Alert — Basic + Soft skins (opt-in) — Guía Visual color matrix completa
 * ----------------------------------------------------------------------------
 * Mud's Severity enum tiene 4 colors (Info/Success/Warning/Error) + Normal.
 * Guía Visual Basic alert muestra 7 colors (default/primary/secondary/info/success/
 * warning/error). Para cubrir las 7, usamos el color chain av-color-X (§14.1 ext,
 * compartido con button/badge/tag) que setea --av-this según el color.
 *
 * Skins:
 * .av-alert-basic — bg saturado --av-this + text white + rounded-lg + padding
 * Sin av-color-X → cae a neutral (gray-200 + gray-800).
 * Aplicación: <MudAlert Class="av-alert-basic av-color-X"
 * Severity="Severity.Normal" NoIcon="true" />
 * (Para info/success/warning/error puede mantener Severity
 * correspondiente para que el icon se renderee acorde.)
 *
 * .av-alert-soft — bg tinted 10% --av-this/--mud-palette + text darker.
 * Replica Guía Visual SoftColor. Mantiene Severity para color.
 * Aplicación: <MudAlert Class="av-alert-soft" Severity="X" />
 * ============================================================================ */

/* — av-alert-basic — 7 colors saturated (Guía Visual Basic) — */

.av-alert-basic.mud-alert {
  border-radius: var(--radius-lg) !important;
  /* Guía Visual rounded-lg = 8 px */
  padding: 16px !important;
  /* Guía Visual py-4 px-4 = 16 px */
  border: 0 !important;
  background-color: var(--color-gray-200) !important;
  color: var(--color-gray-800) !important;
}

.av-alert-basic.mud-alert .mud-alert-icon {
  color: var(--color-gray-800) !important;
}

html.dark .av-alert-basic.mud-alert {
  background-color: var(--color-dark-500) !important;
  color: var(--color-dark-100) !important;
}

html.dark .av-alert-basic.mud-alert .mud-alert-icon {
  color: var(--color-dark-100) !important;
}

@media (min-width: 640px) {
  .av-alert-basic.mud-alert {
    padding: 16px 20px !important;
    /* Guía Visual sm:px-5 = 20 px lateral */
  }
}

/* Mud's .mud-alert-message tiene padding: 9px 0 + .mud-alert-icon tiene
 padding: 7px 0 internamente. Sumados a nuestro outer 16 px hacen 25 px cada
 lado, demasiado alto vs Guía Visual 16 px. Override a 0 para que el outer sea
 la única fuente de padding vertical (pixel-perfect Guía Visual py-4).
 Font-size: Guía Visual body default = --text-sm-plus (15 px / 0.9375rem); Mud
 alert hereda body1 = --text-sm (14 px). Override explícito para matchear. */
.av-alert-basic.mud-alert .mud-alert-message {
  padding: 0 !important;
  font-size: var(--text-sm-plus) !important;
  line-height: 1.5 !important;
}

.av-alert-basic.mud-alert .mud-alert-icon {
  padding: 0 !important;
  /* Alinear icono visualmente con el texto cuando es single-line. */
  align-self: center;
}

/* Saturated color variants — consume --av-this del color chain av-color-X.
   html.dark counterpart REQUERIDO: la regla `html.dark .av-alert-basic.mud-alert`
   (neutral) tiene specificity (0,3,1) y gana sobre `.av-alert-basic.mud-alert[class*="av-color-"]`
   (0,3,0). Sin esta contraparte dark, en dark mode todos los colored caen al bg neutral. */
.av-alert-basic.mud-alert[class*="av-color-"],
html.dark .av-alert-basic.mud-alert[class*="av-color-"] {
  background-color: var(--av-this) !important;
  color: var(--color-white) !important;
}

.av-alert-basic.mud-alert[class*="av-color-"] .mud-alert-icon,
.av-alert-basic.mud-alert[class*="av-color-"] .mud-alert-message,
html.dark .av-alert-basic.mud-alert[class*="av-color-"] .mud-alert-icon,
html.dark .av-alert-basic.mud-alert[class*="av-color-"] .mud-alert-message {
  color: var(--color-white) !important;
}

/* — av-alert-soft — Guía Visual SoftColor — */

.av-alert-soft.mud-alert {
  border-radius: var(--radius-lg) !important;
  /* Guía Visual rounded-lg = 8 px */
  padding: 16px !important;
  border: 0 !important;
}

@media (min-width: 640px) {
  .av-alert-soft.mud-alert {
    padding: 16px 20px !important;
  }
}

/* Override Mud inner padding + font-size — pixel-perfect Guía Visual py-4 +
 text-sm-plus (15 px) en vez de Mud body1 14 px. */
.av-alert-soft.mud-alert .mud-alert-message {
  padding: 0 !important;
  font-size: var(--text-sm-plus) !important;
  line-height: 1.5 !important;
}

.av-alert-soft.mud-alert .mud-alert-icon {
  padding: 0 !important;
  align-self: center;
}

/* Info */
.av-alert-soft.mud-alert.mud-alert-filled-info,
.av-alert-soft.mud-alert.mud-alert-outlined-info,
.av-alert-soft.mud-alert.mud-alert-text-info {
  background-color: rgb(from var(--color-info) r g b / 0.1) !important;
  color: var(--color-info-darker) !important;
}

.av-alert-soft.mud-alert.mud-alert-filled-info .mud-alert-icon,
.av-alert-soft.mud-alert.mud-alert-outlined-info .mud-alert-icon,
.av-alert-soft.mud-alert.mud-alert-text-info .mud-alert-icon {
  color: var(--color-info-darker) !important;
}

html.dark .av-alert-soft.mud-alert.mud-alert-filled-info,
html.dark .av-alert-soft.mud-alert.mud-alert-outlined-info,
html.dark .av-alert-soft.mud-alert.mud-alert-text-info {
  background-color: rgb(from var(--color-info-light) r g b / 0.14) !important;
  color: var(--color-info-light) !important;
}

html.dark .av-alert-soft.mud-alert.mud-alert-filled-info .mud-alert-icon,
html.dark .av-alert-soft.mud-alert.mud-alert-outlined-info .mud-alert-icon,
html.dark .av-alert-soft.mud-alert.mud-alert-text-info .mud-alert-icon {
  color: var(--color-info-light) !important;
}

/* Success */
.av-alert-soft.mud-alert.mud-alert-filled-success,
.av-alert-soft.mud-alert.mud-alert-outlined-success,
.av-alert-soft.mud-alert.mud-alert-text-success {
  background-color: rgb(from var(--color-success) r g b / 0.12) !important;
  color: var(--color-success-darker) !important;
}

.av-alert-soft.mud-alert.mud-alert-filled-success .mud-alert-icon,
.av-alert-soft.mud-alert.mud-alert-outlined-success .mud-alert-icon,
.av-alert-soft.mud-alert.mud-alert-text-success .mud-alert-icon {
  color: var(--color-success-darker) !important;
}

html.dark .av-alert-soft.mud-alert.mud-alert-filled-success,
html.dark .av-alert-soft.mud-alert.mud-alert-outlined-success,
html.dark .av-alert-soft.mud-alert.mud-alert-text-success {
  background-color: rgb(
    from var(--color-success-light) r g b / 0.18
  ) !important;
  color: var(--color-success-light) !important;
}

html.dark .av-alert-soft.mud-alert.mud-alert-filled-success .mud-alert-icon,
html.dark .av-alert-soft.mud-alert.mud-alert-outlined-success .mud-alert-icon,
html.dark .av-alert-soft.mud-alert.mud-alert-text-success .mud-alert-icon {
  color: var(--color-success-light) !important;
}

/* Warning */
.av-alert-soft.mud-alert.mud-alert-filled-warning,
.av-alert-soft.mud-alert.mud-alert-outlined-warning,
.av-alert-soft.mud-alert.mud-alert-text-warning {
  background-color: rgb(from var(--color-warning) r g b / 0.14) !important;
  color: var(--color-warning-darker) !important;
}

.av-alert-soft.mud-alert.mud-alert-filled-warning .mud-alert-icon,
.av-alert-soft.mud-alert.mud-alert-outlined-warning .mud-alert-icon,
.av-alert-soft.mud-alert.mud-alert-text-warning .mud-alert-icon {
  color: var(--color-warning-darker) !important;
}

html.dark .av-alert-soft.mud-alert.mud-alert-filled-warning,
html.dark .av-alert-soft.mud-alert.mud-alert-outlined-warning,
html.dark .av-alert-soft.mud-alert.mud-alert-text-warning {
  background-color: rgb(
    from var(--color-warning-light) r g b / 0.18
  ) !important;
  color: var(--color-warning-light) !important;
}

html.dark .av-alert-soft.mud-alert.mud-alert-filled-warning .mud-alert-icon,
html.dark .av-alert-soft.mud-alert.mud-alert-outlined-warning .mud-alert-icon,
html.dark .av-alert-soft.mud-alert.mud-alert-text-warning .mud-alert-icon {
  color: var(--color-warning-light) !important;
}

/* Error */
.av-alert-soft.mud-alert.mud-alert-filled-error,
.av-alert-soft.mud-alert.mud-alert-outlined-error,
.av-alert-soft.mud-alert.mud-alert-text-error {
  background-color: rgb(from var(--color-error) r g b / 0.1) !important;
  color: var(--color-error-darker) !important;
}

.av-alert-soft.mud-alert.mud-alert-filled-error .mud-alert-icon,
.av-alert-soft.mud-alert.mud-alert-outlined-error .mud-alert-icon,
.av-alert-soft.mud-alert.mud-alert-text-error .mud-alert-icon {
  color: var(--color-error-darker) !important;
}

html.dark .av-alert-soft.mud-alert.mud-alert-filled-error,
html.dark .av-alert-soft.mud-alert.mud-alert-outlined-error,
html.dark .av-alert-soft.mud-alert.mud-alert-text-error {
  background-color: rgb(from var(--color-error-light) r g b / 0.18) !important;
  color: var(--color-error-light) !important;
}

html.dark .av-alert-soft.mud-alert.mud-alert-filled-error .mud-alert-icon,
html.dark .av-alert-soft.mud-alert.mud-alert-outlined-error .mud-alert-icon,
html.dark .av-alert-soft.mud-alert.mud-alert-text-error .mud-alert-icon {
  color: var(--color-error-light) !important;
}

/* Normal (no severity color) */
.av-alert-soft.mud-alert.mud-alert-filled-normal,
.av-alert-soft.mud-alert.mud-alert-outlined-normal,
.av-alert-soft.mud-alert.mud-alert-text-normal {
  background-color: var(--color-gray-100) !important;
  color: var(--color-gray-800) !important;
}

html.dark .av-alert-soft.mud-alert.mud-alert-filled-normal,
html.dark .av-alert-soft.mud-alert.mud-alert-outlined-normal,
html.dark .av-alert-soft.mud-alert.mud-alert-text-normal {
  background-color: var(--color-dark-600) !important;
  color: var(--color-dark-100) !important;
}

/* ============================================================================
 * §41 ─── MudSnackbar — Guía Visual toast look (GLOBAL, no opt-in)
 * ----------------------------------------------------------------------------
 * MudSnackbar no expone Class por-instancia (config es global en Program.cs).
 * Para que las toasts del app tengan look Guía Visual (soft tint + rounded + shadow)
 * en lugar de bg sólido Mud default, se aplica el skin globalmente a
 * .mud-snackbar.mud-snackbar-X. Es cambio app-wide pero estrictamente mejora
 * legibilidad. Si en algún consumer puntual se necesita el look Mud default,
 * agregar la clase .mud-snackbar--unstyled como override (no implementado aún).
 * ============================================================================ */

.mud-snackbar {
  border-radius: var(--radius-md) !important;
  padding: 14px 18px !important;
  box-shadow:
    0 10px 25px -3px rgb(from var(--color-gray-900) r g b / 0.12),
    0 4px 10px -2px rgb(from var(--color-gray-900) r g b / 0.05) !important;
}

html.dark .mud-snackbar {
  box-shadow:
    0 10px 25px -3px rgb(from var(--color-dark-900) r g b / 0.45),
    0 4px 10px -2px rgb(from var(--color-dark-900) r g b / 0.3) !important;
}

/* Info */
.mud-snackbar.mud-snackbar-info {
  background-color: rgb(from var(--color-info) r g b / 0.95) !important;
  color: var(--color-white) !important;
}

html.dark .mud-snackbar.mud-snackbar-info {
  background-color: var(--color-info-darker) !important;
}

/* Success */
.mud-snackbar.mud-snackbar-success {
  background-color: rgb(from var(--color-success) r g b / 0.95) !important;
  color: var(--color-white) !important;
}

html.dark .mud-snackbar.mud-snackbar-success {
  background-color: var(--color-success-darker) !important;
}

/* Warning */
.mud-snackbar.mud-snackbar-warning {
  background-color: rgb(from var(--color-warning) r g b / 0.95) !important;
  color: var(--color-white) !important;
}

html.dark .mud-snackbar.mud-snackbar-warning {
  background-color: var(--color-warning-darker) !important;
}

/* Error */
.mud-snackbar.mud-snackbar-error {
  background-color: rgb(from var(--color-error) r g b / 0.95) !important;
  color: var(--color-white) !important;
}

html.dark .mud-snackbar.mud-snackbar-error {
  background-color: var(--color-error-darker) !important;
}

/* Normal (no severity) — clean dark/light card */
.mud-snackbar.mud-snackbar-normal {
  background-color: var(--color-gray-800) !important;
  color: var(--color-white) !important;
}

html.dark .mud-snackbar.mud-snackbar-normal {
  background-color: var(--color-dark-700) !important;
  color: var(--color-dark-50) !important;
}

/* ============================================================================
 * §42 ─── Av-Chip Outlined — Guía Visual outlined tag (opt-in)
 * ----------------------------------------------------------------------------
 * Replaces Mud's default outlined chip (which uses solid color border) with
 * Guía Visual outlined look: subtle gray-300 border by default, color-darker text,
 * border becomes the color on hover/focus. Apply additively:
 * <MudChip Class="av-chip-outlined" Color="Color.X">
 * Same compact dimensions as av-chip-soft.
 * ============================================================================ */

.av-chip-outlined.mud-chip {
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.02em;
  height: auto;
  min-height: 0;
  background-color: transparent !important;
  border: 1px solid var(--color-gray-300) !important;
  transition:
    border-color 150ms ease,
    color 150ms ease;
}

html.dark .av-chip-outlined.mud-chip {
  border-color: var(--color-dark-450, var(--color-dark-400)) !important;
}

.av-chip-outlined.mud-chip .mud-chip-icon {
  font-size: 0.875rem;
  width: 0.875rem;
  height: 0.875rem;
}

/* Default (neutral) */
.av-chip-outlined.mud-chip.mud-chip-color-default {
  color: var(--color-gray-800) !important;
}

html.dark .av-chip-outlined.mud-chip.mud-chip-color-default {
  color: var(--color-dark-100) !important;
}

.av-chip-outlined.mud-chip.mud-chip-color-default:hover {
  border-color: var(--color-gray-800) !important;
}

html.dark .av-chip-outlined.mud-chip.mud-chip-color-default:hover {
  border-color: var(--color-dark-100) !important;
}

/* Primary */
.av-chip-outlined.mud-chip.mud-chip-color-primary {
  color: var(--color-primary-700) !important;
}

html.dark .av-chip-outlined.mud-chip.mud-chip-color-primary {
  color: var(--color-primary-300) !important;
  border-color: rgb(from var(--color-primary-300) r g b / 0.3) !important;
}

.av-chip-outlined.mud-chip.mud-chip-color-primary:hover {
  border-color: var(--color-primary-700) !important;
}

html.dark .av-chip-outlined.mud-chip.mud-chip-color-primary:hover {
  border-color: var(--color-primary-300) !important;
}

/* Secondary */
.av-chip-outlined.mud-chip.mud-chip-color-secondary {
  color: var(--color-secondary-darker) !important;
}

html.dark .av-chip-outlined.mud-chip.mud-chip-color-secondary {
  color: var(--color-secondary-light) !important;
  border-color: rgb(from var(--color-secondary-light) r g b / 0.3) !important;
}

.av-chip-outlined.mud-chip.mud-chip-color-secondary:hover {
  border-color: var(--color-secondary-darker) !important;
}

html.dark .av-chip-outlined.mud-chip.mud-chip-color-secondary:hover {
  border-color: var(--color-secondary-light) !important;
}

/* Info */
.av-chip-outlined.mud-chip.mud-chip-color-info {
  color: var(--color-info-darker) !important;
}

html.dark .av-chip-outlined.mud-chip.mud-chip-color-info {
  color: var(--color-info-light) !important;
  border-color: rgb(from var(--color-info-light) r g b / 0.3) !important;
}

.av-chip-outlined.mud-chip.mud-chip-color-info:hover {
  border-color: var(--color-info-darker) !important;
}

html.dark .av-chip-outlined.mud-chip.mud-chip-color-info:hover {
  border-color: var(--color-info-light) !important;
}

/* Success */
.av-chip-outlined.mud-chip.mud-chip-color-success {
  color: var(--color-success-darker) !important;
}

html.dark .av-chip-outlined.mud-chip.mud-chip-color-success {
  color: var(--color-success-light) !important;
  border-color: rgb(from var(--color-success-light) r g b / 0.3) !important;
}

.av-chip-outlined.mud-chip.mud-chip-color-success:hover {
  border-color: var(--color-success-darker) !important;
}

html.dark .av-chip-outlined.mud-chip.mud-chip-color-success:hover {
  border-color: var(--color-success-light) !important;
}

/* Warning */
.av-chip-outlined.mud-chip.mud-chip-color-warning {
  color: var(--color-warning-darker) !important;
}

html.dark .av-chip-outlined.mud-chip.mud-chip-color-warning {
  color: var(--color-warning-light) !important;
  border-color: rgb(from var(--color-warning-light) r g b / 0.3) !important;
}

.av-chip-outlined.mud-chip.mud-chip-color-warning:hover {
  border-color: var(--color-warning-darker) !important;
}

html.dark .av-chip-outlined.mud-chip.mud-chip-color-warning:hover {
  border-color: var(--color-warning-light) !important;
}

/* Error */
.av-chip-outlined.mud-chip.mud-chip-color-error {
  color: var(--color-error-darker) !important;
}

html.dark .av-chip-outlined.mud-chip.mud-chip-color-error {
  color: var(--color-error-light) !important;
  border-color: rgb(from var(--color-error-light) r g b / 0.3) !important;
}

.av-chip-outlined.mud-chip.mud-chip-color-error:hover {
  border-color: var(--color-error-darker) !important;
}

html.dark .av-chip-outlined.mud-chip.mud-chip-color-error:hover {
  border-color: var(--color-error-light) !important;
}

/* ============================================================================
 * §43 ─── Av-Swap — Guía Visual toggle entre dos vistas (opt-in, native HTML)
 * ----------------------------------------------------------------------------
 * Pattern Guía Visual (no hay equivalente MudBlazor). Usa nativo <button> con dos
 * hijos <span> superpuestos en una grilla de 1×1. Click toggles el atributo
 * data-swap-state entre "on" y "off". 3 effects: fade (default), flip, rotate.
 *
 * Markup:
 * <button type="button" class="av-swap av-swap--fade"
 * data-swap-state="on" disabled?>
 * <span class="av-swap__on">…contenido on…</span>
 * <span class="av-swap__off">…contenido off…</span>
 * </button>
 *
 * Modificadores:
 * .av-swap--fade — transición de opacidad (default Guía Visual)
 * .av-swap--flip — rotateY 180° en el eje vertical (cara A → cara B)
 * .av-swap--rotate — rotate 45° en plano XY
 *
 * Cero efecto colateral — selector scope-restringido a .av-swap.
 * ============================================================================ */

.av-swap {
  position: relative;
  display: inline-grid;
  place-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  user-select: none;
  color: inherit;
  line-height: 1;
}

.av-swap[disabled],
.av-swap[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.6;
}

.av-swap:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 4px;
  border-radius: 4px;
}

.av-swap__on,
.av-swap__off {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  fill: currentColor;
  transition:
    transform 300ms ease-out,
    opacity 300ms ease-out;
}

/* — Effect: fade (default) — — — — — — — — — — — — — — — — — — — — — — — */

.av-swap[data-swap-state="on"] .av-swap__off {
  opacity: 0;
}

.av-swap[data-swap-state="off"] .av-swap__on {
  opacity: 0;
}

/* — Effect: flip — — — — — — — — — — — — — — — — — — — — — — — — — — — — */

.av-swap--flip .av-swap__on,
.av-swap--flip .av-swap__off {
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.av-swap--flip[data-swap-state="on"] .av-swap__on {
  transform: rotateY(0deg);
}

.av-swap--flip[data-swap-state="on"] .av-swap__off {
  transform: rotateY(180deg);
  opacity: 0;
}

.av-swap--flip[data-swap-state="off"] .av-swap__on {
  transform: rotateY(180deg);
  opacity: 0;
}

.av-swap--flip[data-swap-state="off"] .av-swap__off {
  transform: rotateY(0deg);
}

/* — Effect: rotate — — — — — — — — — — — — — — — — — — — — — — — — — — — */

.av-swap--rotate[data-swap-state="on"] .av-swap__on {
  transform: rotate(0deg);
}

.av-swap--rotate[data-swap-state="on"] .av-swap__off {
  transform: rotate(-45deg);
  opacity: 0;
}

.av-swap--rotate[data-swap-state="off"] .av-swap__on {
  transform: rotate(45deg);
  opacity: 0;
}

.av-swap--rotate[data-swap-state="off"] .av-swap__off {
  transform: rotate(0deg);
}

/* ============================================================================
 * §44 ─── Av-Box — colored variants (opt-in skin para MudPaper)
 * ----------------------------------------------------------------------------
 * Replica el patrón Guía Visual <Box className="bg-{color}-600 text-white"> con
 * MudPaper + clase opt-in .av-box-{color}. Cubre 6 semánticos:
 * primary / secondary / info / success / warning / error con text-white.
 *
 * Distinto de:
 * .av-alert-soft (§40) — tinte al 10% + texto darker, severity-bound
 * MudCard — header/content/actions estructurado
 * Box default — wrapper genérico sin color
 *
 * Cero efecto colateral — selector scope-restringido a .av-box-X.
 * Children MudText heredan el color via .av-box-X .mud-typography { color: inherit }.
 * ============================================================================ */

.av-box-primary.mud-paper {
  background-color: var(--color-primary-600);
  color: var(--color-white);
  box-shadow: none;
  --av-this: var(--color-primary-600);
  /* exponer para av-box-glow */
}

html.dark .av-box-primary.mud-paper {
  background-color: var(--color-primary-500);
  --av-this: var(--color-primary-500);
}

.av-box-secondary.mud-paper {
  background-color: var(--color-secondary);
  color: var(--color-white);
  box-shadow: none;
  --av-this: var(--color-secondary);
}

.av-box-info.mud-paper {
  background-color: var(--color-info);
  color: var(--color-white);
  box-shadow: none;
  --av-this: var(--color-info);
}

.av-box-success.mud-paper {
  background-color: var(--color-success);
  color: var(--color-white);
  box-shadow: none;
  --av-this: var(--color-success);
}

.av-box-warning.mud-paper {
  background-color: var(--color-warning);
  color: var(--color-white);
  box-shadow: none;
  --av-this: var(--color-warning);
}

.av-box-error.mud-paper {
  background-color: var(--color-error);
  color: var(--color-white);
  box-shadow: none;
  --av-this: var(--color-error);
}

/* Children inherit the box color so MudText / MudIcon read on the tinted bg. */
.av-box-primary.mud-paper .mud-typography,
.av-box-secondary.mud-paper .mud-typography,
.av-box-info.mud-paper .mud-typography,
.av-box-success.mud-paper .mud-typography,
.av-box-warning.mud-paper .mud-typography,
.av-box-error.mud-paper .mud-typography,
.av-box-primary.mud-paper .mud-icon-root,
.av-box-secondary.mud-paper .mud-icon-root,
.av-box-info.mud-paper .mud-icon-root,
.av-box-success.mud-paper .mud-icon-root,
.av-box-warning.mud-paper .mud-icon-root,
.av-box-error.mud-paper .mud-icon-root {
  color: inherit;
}

/* ============================================================================
 * §44 ext ─── Box — Simple / Rounded / Bordered / Glow / Gradient / Outlined-Gradient
 * ----------------------------------------------------------------------------
 * Extensiones aditivas para cubrir las 11 secciones del demo Guía Visual Box:
 * Simple → shadow-soft custom Guía Visual (light) / shadow-none (dark)
 * Rounded → radius 16 px ( rounded-2xl) — override del bridge §66
 * Bordered → border gray-150 / dark-600
 * Glow → shadow-lg tinted del --av-this (via av-color-X o av-box-X)
 * Gradient → 3 paletas (purple-indigo / fuchsia-pink / amber-orange)
 * Outlined Gradient → wrapper gradient + inner gray-50 / dark-900 (3 paletas)
 *
 * Cero impacto sobre las 6 variantes colored existentes. av-box-X siguen
 * funcionando standalone — la única adición es `--av-this` para que
 * av-box-glow pueda consumirlo. Los gradients y outlined-gradient son
 * primitivas nuevas independientes.
 * ============================================================================ */

/* — Simple Box — shadow-soft custom Guía Visual (light) + dark:shadow-none. */

.av-shadow-soft.mud-paper {
  box-shadow: var(--shadow-soft) !important;
}

html.dark .av-shadow-soft.mud-paper {
  box-shadow: none !important;
}

/* — Rounded Box — rounded-2xl = 16 px. Bate al override del bridge
 §66 (.mud-paper border-radius: var(--radius-lg) !important = 8 px) por
 mayor specificity (0,2,0 vs 0,1,0). */

.av-rounded-2xl.mud-paper {
  border-radius: 16px !important;
}

/* — Bordered Box — border gray-150 light / dark-600 dark. Sin box-shadow
 (Guía Visual Bordered demo no lleva shadow). */

.av-box-bordered.mud-paper {
  border: 1px solid var(--color-gray-150);
  box-shadow: none !important;
}

html.dark .av-box-bordered.mud-paper {
  border-color: var(--color-dark-600);
}

/* — Glow modifier — shadow-lg tinted del --av-this/50. Combinable con
 av-box-X (donde el bg + --av-this ya está declarado) o con av-color-X
 (que también declara --av-this) sobre un MudPaper con bg manual. */

.av-box-glow.mud-paper {
  box-shadow:
    0 10px 15px -3px rgb(from var(--av-this, var(--color-gray-300)) r g b / 0.5),
    0 4px 6px -4px rgb(from var(--av-this, var(--color-gray-300)) r g b / 0.5);
}

/* — Gradient Box — 3 paletas del demo. Sin shadow (Guía Visual Gradient demo no
 lleva shadow). Text color white forzado por contraste sobre los gradients. */

.av-box-gradient-purple-indigo.mud-paper {
  background: linear-gradient(to bottom right, #a855f7, #4f46e5);
  color: var(--color-white);
  box-shadow: none !important;
}

.av-box-gradient-fuchsia-pink.mud-paper {
  background: linear-gradient(to right, #c026d3, #db2777);
  color: var(--color-white);
  box-shadow: none !important;
}

.av-box-gradient-amber-orange.mud-paper {
  background: linear-gradient(to bottom right, #fbbf24, #ea580c);
  color: var(--color-white);
  box-shadow: none !important;
}

/* Guía Visual Circlebar Custom: from-green-400 to-blue-600 (bottom-right). */
.av-box-gradient-green-blue.mud-paper {
  background: linear-gradient(to bottom right, #4ade80, #2563eb);
  color: var(--color-white);
  box-shadow: none !important;
}

.av-box-gradient-purple-indigo.mud-paper .mud-typography,
.av-box-gradient-fuchsia-pink.mud-paper .mud-typography,
.av-box-gradient-amber-orange.mud-paper .mud-typography,
.av-box-gradient-green-blue.mud-paper .mud-typography {
  color: inherit;
}

/* — Outlined Gradient Box — wrapper con gradient bg + p-1 (4px padding) y
 un inner MudPaper con bg-gray-50 (light) / bg-dark-900 (dark). El
 gradient queda visible como un borde 4 px. 3 paletas del demo
 (sky-blue / green-fuchsia / amber-orange).

 Padding del wrapper: 4 px ( p-1). El consumidor del inner
 aporta su propio padding (típicamente pa-4 = 16 px). */

.av-box-outlined-gradient-wrapper.mud-paper {
  padding: 4px !important;
  box-shadow: none !important;
}

.av-box-outlined-gradient-sky-blue.mud-paper {
  background: linear-gradient(to right, #38bdf8, #2563eb);
}

.av-box-outlined-gradient-green-fuchsia.mud-paper {
  background: linear-gradient(to right, #4ade80, #e879f9);
}

.av-box-outlined-gradient-amber-orange.mud-paper {
  background: linear-gradient(to right, #fbbf24, #ea580c);
}

/* Inner — gray-50 light / dark-900 dark. Sin shadow (heredaría del Mud
 default). El radius lo aporta el bridge (8 px). */
.av-box-outlined-gradient-inner.mud-paper {
  background-color: var(--color-gray-50);
  box-shadow: none !important;
}

html.dark .av-box-outlined-gradient-inner.mud-paper {
  background-color: var(--color-dark-900);
}

/* ============================================================================
 * §45 ─── Av-Mask — Guía Visual mask shapes (opt-in, applicable a cualquier element)
 * ----------------------------------------------------------------------------
 * Réplica del patrón Guía Visual <X className="mask is-squircle"> que recorta
 * visualmente cualquier elemento (Avatar, imagen, div coloreado, etc.) con
 * una forma SVG mask. Cubre 7 shapes del demo:
 * - .av-mask-squircle (superellipse, iOS rounded square)
 * - .av-mask-reuleaux-triangle (triángulo de bordes curvos)
 * - .av-mask-diamond (rombo con esquinas suavizadas)
 * - .av-mask-hexagon (hexágono vertical regular)
 * - .av-mask-octagon (octágono con esquinas ligeramente redondeadas)
 * - .av-mask-star (estrella de 12 puntas suaves)
 * - .av-mask-heart (corazón clásico)
 *
 * Tokens viven en design-tokens.css como --av-{shape}-mask. Para usar:
 * <MudAvatar Color="Color.Primary" Square="true" Class="av-mask av-mask-heart">JD</MudAvatar>
 * <img src="..." class="av-mask av-mask-hexagon" />
 *
 * Cero efecto colateral — selector scope-restringido a .av-mask y modifiers.
 * El border-radius:0 explícito anula cualquier radius del consumidor para que
 * no compita con el mask (mismo principio que §31 av-avatar-squircle).
 *
 * Nota: para Avatar squircle específico, preferir el shortcut .av-avatar-squircle
 * (§31) que cubre el caso más común sin requerir el modifier extra .av-mask.
 * ============================================================================ */

.av-mask {
  border-radius: 0 !important;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.av-mask-squircle {
  -webkit-mask-image: var(--av-squircle-mask);
  mask-image: var(--av-squircle-mask);
}

.av-mask-reuleaux-triangle {
  -webkit-mask-image: var(--av-reuleaux-triangle-mask);
  mask-image: var(--av-reuleaux-triangle-mask);
}

.av-mask-diamond {
  -webkit-mask-image: var(--av-diamond-mask);
  mask-image: var(--av-diamond-mask);
}

.av-mask-hexagon {
  -webkit-mask-image: var(--av-hexagon-mask);
  mask-image: var(--av-hexagon-mask);
}

.av-mask-octagon {
  -webkit-mask-image: var(--av-octagon-mask);
  mask-image: var(--av-octagon-mask);
}

.av-mask-star {
  -webkit-mask-image: var(--av-star-mask);
  mask-image: var(--av-star-mask);
}

.av-mask-heart {
  -webkit-mask-image: var(--av-heart-mask);
  mask-image: var(--av-heart-mask);
}

/* ============================================================================
 * §46 ─── Av Utility classes — pixel-perfect helpers for showcases & UI
 * ----------------------------------------------------------------------------
 * Set de utility classes que mapean directo a las clases del demo
 * Guía Visual (size-N, rounded-X, ring-N, gradients, etc.). Centraliza los
 * valores exactos en clases reusables para reemplazar inline Style en
 * showcases y código de producción.
 *
 * Naming: `.av-{group}-{value}` o `.av-{purpose}`.
 * - Sizes: .av-size-{8|10|12|14|16|20|24} → 32 / 40 / 48 / 56 / 64 / 80 / 96 px (Guía Visual scale)
 * - Radius: .av-rounded-{lg|xl|full} → 8 / 12 / 9999 px
 * - Ring: .av-ring-{2|3} → box-shadow 2 / 3 px ring (white light, dark-700 dark)
 * - Overlap: .av-stack-overlap → -8 px margin-left en > *:not(:first-child)
 * - Gradient: .av-gradient-{name} → 5 named gradients para avatar borders
 *
 * Cero efecto colateral — todas las clases son opt-in `.av-*`.
 * ============================================================================ */

/* — Size utilities ( size-N scale → px) — — — — — — — — — — — — —
 Usan !important porque Mud aplica width/height a sus componentes
 (.mud-avatar, .mud-skeleton, etc.) con la misma specificity que el
 utility + later source order. El precedente vive en §35 av-avatar-xs.
*/
/* Sub-scale (size-N para N ∈ {3, 3.5, 4, 5, 6, 7}) — iconos dentro de
 primitivas (badge, chip, button). Naming : size-N = N*4 px.
 `av-size-3-5` usa hyphen en vez de dot para evitar escape CSS y mantener
 HTML class attribute libre de caracteres especiales. */
.av-size-3 {
  width: 12px !important;
  height: 12px !important;
}

.av-size-3-5 {
  width: 14px !important;
  height: 14px !important;
}

.av-size-4 {
  width: 16px !important;
  height: 16px !important;
}

.av-size-4-5 {
  width: 18px !important;
  height: 18px !important;
}

.av-size-5 {
  width: 20px !important;
  height: 20px !important;
}

.av-size-6 {
  width: 24px !important;
  height: 24px !important;
}

.av-size-7 {
  width: 28px !important;
  height: 28px !important;
}

.av-size-8 {
  width: 32px !important;
  height: 32px !important;
}

.av-size-10 {
  width: 40px !important;
  height: 40px !important;
}

.av-size-12 {
  width: 48px !important;
  height: 48px !important;
}

.av-size-14 {
  width: 56px !important;
  height: 56px !important;
}

.av-size-16 {
  width: 64px !important;
  height: 64px !important;
}

.av-size-20 {
  width: 80px !important;
  height: 80px !important;
}

.av-size-24 {
  width: 96px !important;
  height: 96px !important;
}

.av-size-full {
  width: 100% !important;
  height: 100% !important;
}

/* — Radius utilities — — — — — — — — — — — — — — — — — — — — — — — — —
 El selector base sirve para elementos non-Mud. Los compuestos
 `.av-rounded-X.mud-button-root:not(.mud-fab)` (specificity 0,3,0)
 matchean la specificity del override defensivo en mud-bridge.css
 (`.mud-button-root:not(.mud-icon-button):not(.mud-fab)` también
 0,3,0 + !important) → como avalme-v1.css carga después que
 mud-bridge.css, ganamos por source order al estar a igual !important.

 Los compound con .mud-icon-button-root son para MudIconButton (la
 bridge ya lo excluye con :not(.mud-icon-button)) — no necesita
 override extra, pero lo dejamos para casos donde otra regla Mud
 ponga radius en icon-button-root. */
.av-rounded-lg,
.av-rounded-lg.mud-button-root:not(.mud-fab),
.av-rounded-lg.mud-icon-button-root {
  border-radius: 8px !important;
}

.av-rounded-xl,
.av-rounded-xl.mud-button-root:not(.mud-fab),
.av-rounded-xl.mud-icon-button-root {
  border-radius: 12px !important;
}

.av-rounded-full,
.av-rounded-full.mud-button-root:not(.mud-fab),
.av-rounded-full.mud-icon-button-root {
  border-radius: 9999px !important;
}

/* — Ring utilities (box-shadow rings around avatars / images) — — — — — — */
.av-ring-2 {
  box-shadow: 0 0 0 2px var(--color-white);
}

.av-ring-3 {
  box-shadow: 0 0 0 3px var(--color-white);
}

html.dark .av-ring-2 {
  box-shadow: 0 0 0 2px var(--color-dark-700);
}

html.dark .av-ring-3 {
  box-shadow: 0 0 0 3px var(--color-dark-700);
}

/* — Text color utilities ( text-{color}) — — — — — — — — — — — —
 Aplican `color: var(--color-X)`. Usados sobre MudIcon (cuyo SVG hereda
 `fill/stroke: currentColor`) o sobre <span> hijos donde queremos tintar
 un fragmento sin afectar al padre. */
.av-text-primary {
  color: var(--color-primary-600);
}

.av-text-secondary {
  color: var(--color-secondary);
}

.av-text-info {
  color: var(--color-info);
}

.av-text-success {
  color: var(--color-success);
}

.av-text-warning {
  color: var(--color-warning);
}

.av-text-error {
  color: var(--color-error);
}

html.dark .av-text-primary {
  color: var(--color-primary-400);
}

html.dark .av-text-secondary {
  color: var(--color-secondary-lighter);
}

html.dark .av-text-info {
  color: var(--color-info-lighter);
}

html.dark .av-text-success {
  color: var(--color-success-lighter);
}

html.dark .av-text-warning {
  color: var(--color-warning-lighter);
}

html.dark .av-text-error {
  color: var(--color-error-lighter);
}

/* — Stroke width utility ( stroke-{N}) — — — — — — — — — — — — —
 Override del stroke-width hardcoded en los path SVG de HeroIcons.Outline
 (default 1.5). CSS gana sobre el attribute SVG porque CSS tiene mayor
 precedencia que presentational attributes. */
.av-stroke-2 path {
  stroke-width: 2;
}

/* — Stack overlap (flex row + negative inline-start margin) — — — — — —
 display: inline-flex es obligatorio porque children no-flex (MudSkeleton
 con <span> default block) quedarían stackeados vertical sin el wrapper
 flex. Alineamos al center para que tamaños distintos no rompan el row.
*/
.av-stack-overlap {
  display: inline-flex;
  align-items: center;
}

.av-stack-overlap > *:not(:first-child) {
  margin-inline-start: -8px;
}

/* — Max-width utilities ( max-w-{size}) — Forms y otros showcases
 las usan para limitar ancho de inputs. Naming . */
.av-max-w-xs {
  max-width: 20rem;
}

.av-max-w-sm {
  max-width: 24rem;
}

.av-max-w-md {
  max-width: 28rem;
}

.av-max-w-lg {
  max-width: 32rem;
}

.av-max-w-xl {
  max-width: 36rem;
}

.av-max-w-2xl {
  max-width: 42rem;
}

/* — Min-width utilities ( min-w-{size}) — para components que necesitan
 un ancho mínimo (dialogs ad-hoc, popovers, paneles). Misma escala que
 av-max-w-X. */
.av-min-w-xs {
  min-width: 20rem;
}

.av-min-w-sm {
  min-width: 24rem;
}

.av-min-w-md {
  min-width: 28rem;
}

.av-min-w-lg {
  min-width: 32rem;
}

.av-min-w-xl {
  min-width: 36rem;
}

.av-min-w-2xl {
  min-width: 42rem;
}

/* — Max-height utilities ( max-h-{size}) — combina bien con av-scroll-shadow
 cuando queremos un contenedor scrollable con altura limitada. Misma escala
 que av-max-w-X. */
.av-max-h-xs {
  max-height: 20rem;
}

.av-max-h-sm {
  max-height: 24rem;
}

.av-max-h-md {
  max-height: 28rem;
}

.av-max-h-lg {
  max-height: 32rem;
}

.av-max-h-xl {
  max-height: 36rem;
}

.av-max-h-2xl {
  max-height: 42rem;
}

/* — Cursor utility ( cursor-pointer) — para elementos clickables que NO
 son button/link nativos (TreeViewItem, listas custom, decorative
 elements). Mud sí lo aplica a button-root automáticamente, pero no a
 todos los slots interactivos. */
.av-cursor-pointer {
  cursor: pointer;
}

/* — Overflow utilities — — — — — — — — — — — — — — — — — — — — — — — —
 Para contenedores que combinan av-max-h-X con scroll vertical pero NO
 quieren los gradient fades de av-scroll-shadow (ese pinta un linear
 gradient white→transparent en top/bottom que tapa contenido corto). */
.av-overflow-y-auto {
  overflow-y: auto;
}

.av-overflow-x-auto {
  overflow-x: auto;
}

.av-overflow-hidden {
  overflow: hidden;
}

/* — Tenant selector card — clickeable row card usado en TenantSelectorDialog.
 Renderiza un mini-card outlined con icon + name + url + jobTitle + roles
 + chevron derecho. Hover sutil. Click navega al tenant. */
.av-tenant-card {
  width: 100% !important;
  padding: 12px 16px !important;
  border: 1px solid var(--color-gray-200) !important;
  border-radius: var(--radius-lg) !important;
  background-color: var(--surface-1) !important;
  transition:
    background-color 150ms ease,
    border-color 150ms ease;
  box-sizing: border-box;
}

.av-tenant-card:hover {
  background-color: rgb(from var(--color-primary-500) r g b / 0.04) !important;
  border-color: rgb(from var(--color-primary-500) r g b / 0.3) !important;
}

html.dark .av-tenant-card {
  border-color: var(--color-dark-500) !important;
  background-color: var(--color-dark-700) !important;
}

html.dark .av-tenant-card:hover {
  background-color: rgb(from var(--color-primary-400) r g b / 0.1) !important;
  border-color: rgb(from var(--color-primary-400) r g b / 0.4) !important;
}

.av-tenant-card__icon {
  flex: 0 0 auto;
  width: 28px !important;
  height: 28px !important;
}

/* — Location read-only (WI #1300) — — — — — — — — — — — — — — — — — —
 Un tenant / cuenta donde el usuario está desactivado se muestra pero NO
 se puede entrar: sin hover, sin cursor de click, atenuado. El motivo se
 explica en un mensaje debajo del item (no en un tooltip: tiene que
 leerse sin interacción). Aplica al card del switcher y al MudListItem
 del wizard de login. */
.av-tenant-card--deactivated,
.av-location-item--deactivated {
  opacity: 0.6;
  cursor: not-allowed !important;
}

.av-tenant-card--deactivated:hover {
  background-color: var(--surface-1) !important;
  border-color: var(--color-gray-200) !important;
}

html.dark .av-tenant-card--deactivated:hover {
  background-color: var(--color-dark-700) !important;
  border-color: var(--color-dark-500) !important;
}

/* — Current location (WI #1745) — the tenant the user is already in:
 highlighted and not clickable (entering it again would only log out). */
.av-tenant-card--current,
.av-tenant-card--current:hover {
  cursor: default;
  background-color: rgb(from var(--color-primary-500) r g b / 0.06) !important;
  border-color: rgb(from var(--color-primary-500) r g b / 0.4) !important;
}

html.dark .av-tenant-card--current,
html.dark .av-tenant-card--current:hover {
  background-color: rgb(from var(--color-primary-400) r g b / 0.12) !important;
  border-color: rgb(from var(--color-primary-400) r g b / 0.45) !important;
}

/* MudListItem pinta su propio hover; el item desactivado no debe reaccionar. */
.av-location-item--deactivated:hover {
  background-color: transparent !important;
}

/* El mensaje de validación que explica por qué no se puede entrar. */
.av-location-item__deactivated-reason {
  color: var(--color-error) !important;
}

html.dark .av-location-item__deactivated-reason {
  color: var(--color-error-lighter) !important;
}

/* — Grouped "account deactivated" notice (WI #1319) — — — — — — — — —
 The status and its reason share one soft-error block inside the row.
 Layout and color only: typography comes from Typo.caption and badge §48.
 These are new class names, so the other consumers of
 `__deactivated-reason` (LoginSelectEmail, TenantSelectorDialog) are
 untouched. */
.av-location-item__deactivated {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: var(--radius-lg);
  border-inline-start: 3px solid var(--color-error);
  background-color: rgb(from var(--color-error) r g b / 0.08);
}

html.dark .av-location-item__deactivated {
  border-inline-start-color: var(--color-error-lighter);
  background-color: rgb(from var(--color-error-lighter) r g b / 0.16);
}

.av-location-item__deactivated-icon {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--color-error);
}

html.dark .av-location-item__deactivated-icon {
  color: var(--color-error-lighter);
}

.av-location-item__deactivated-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
}

/* The row is dimmed to 60%; the notice is exempt so the reason stays legible
 on top of the tint. */
.av-location-item--deactivated .av-location-item__deactivated {
  opacity: 1;
}

/* — Showcase scroll-to-top FAB position — — — — — — — — — — — — — — —
 MudScrollToTop por default pinea el botón a bottom: 16-24px. Lo
 subimos para que no quede tan pegado al borde / al bottom AppBar de
 MainLayout cuando aparece. Scope estricto a `.av-showcase-scroll-top`
 para no afectar otros usos de MudScrollToTop en la app. */
.av-showcase-scroll-top {
  bottom: 80px !important;
}

/* — Show-on-hover utility — — — — — — — — — — — — — — — — — — — — — —
 El elemento queda invisible (pero NO display:none — sigue ocupando
 espacio) hasta que el cursor pasa sobre un ancestro común (típicamente
 la row de una lista / tree). Patrón estándar para trailing actions en
 listas (Notion, Linear, Gmail). Combina con cualquier hijo target.

 Activadores comunes — agregá tu propio si necesitás otro contenedor:
   .mud-treeview-item-content:hover .av-show-on-hover
   .mud-list-item:hover .av-show-on-hover
   .mud-table-row:hover .av-show-on-hover

 A11y: el focus-within también lo revela, así que la navegación por
 teclado puede llegar al action button sin necesitar mouse hover. */
.av-show-on-hover {
  opacity: 0;
  transition: opacity 150ms ease;
}

.mud-treeview-item-content:hover .av-show-on-hover,
.mud-treeview-item-content:focus-within .av-show-on-hover,
.mud-list-item:hover .av-show-on-hover,
.mud-list-item:focus-within .av-show-on-hover {
  opacity: 1;
}

/* — Truncate utility ( truncate) — overflow + ellipsis + nowrap.
 Útil cuando un elemento collapsed muestra una sola línea (ej: MinWidth
 variant del Collapse demo). */
.av-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* — Scroll shadow approximation (Guía Visual ScrollShadow component) — overflow
 con gradient fades top/bottom para indicar contenido scrollable. Aplica
 sobre cualquier wrapper que tenga max-height + overflow. */
.av-scroll-shadow {
  position: relative;
  overflow-y: auto;
}

.av-scroll-shadow::before,
.av-scroll-shadow::after {
  content: "";
  position: sticky;
  left: 0;
  right: 0;
  height: 16px;
  display: block;
  pointer-events: none;
}

.av-scroll-shadow::before {
  top: 0;
  background: linear-gradient(to bottom, var(--color-white), transparent);
  margin-bottom: -16px;
}

.av-scroll-shadow::after {
  bottom: 0;
  background: linear-gradient(to top, var(--color-white), transparent);
  margin-top: -16px;
}

html.dark .av-scroll-shadow::before {
  background: linear-gradient(to bottom, var(--color-dark-700), transparent);
}

html.dark .av-scroll-shadow::after {
  background: linear-gradient(to top, var(--color-dark-700), transparent);
}

/* — Gradient borders (5 paletas del demo Guía Visual GradientBorder) — — — — */
.av-gradient-sky-blue {
  background: linear-gradient(to right, #38bdf8, #2563eb);
}

.av-gradient-amber-orange {
  background: linear-gradient(to right, #fbbf24, #ea580c);
}

.av-gradient-pink-rose {
  background: linear-gradient(to right, #ec4899, #f43f5e);
}

.av-gradient-purple-orange {
  background: linear-gradient(to right, #a855f7, #ea580c);
}

.av-gradient-green-fuchsia {
  background: linear-gradient(to right, #4ade80, #e879f9);
}

/* — Gradient backgrounds (Custom Styles del demo Guía Visual) — — — — — — — — */
.av-gradient-bg-green-blue {
  background: linear-gradient(to bottom right, #4ade80, #2563eb);
  color: var(--color-white);
}

.av-gradient-bg-amber-orange {
  background: linear-gradient(to bottom right, #fbbf24, #ea580c);
  color: var(--color-white);
}

/* — Gradient border wrappers — pattern Guía Visual InstagramStory-style — — — */
/* Wrapper exterior: size-16 + p-0.5 + rounded-full + gradient bg */
.av-gradient-border-wrapper {
  display: inline-flex;
  width: 64px;
  height: 64px;
  padding: 2px;
  border-radius: 9999px;
}

/* Wrapper interior: size-15 + p-[3px] + rounded-full + bg-white */
.av-gradient-border-inner {
  display: inline-flex;
  width: 60px;
  height: 60px;
  padding: 3px;
  border-radius: 9999px;
  background-color: var(--color-white);
}

html.dark .av-gradient-border-inner {
  background-color: var(--color-dark-700);
}

/* — Custom avatar variants (showcase Custom Styles) — — — — — — — — — — */

/* Brand color: Twitter blue */
.av-avatar-brand-twitter.mud-avatar {
  background-color: #1c96e8;
  color: var(--color-white);
}

/* Outlined transparent — border + no fill (different of av-chip-outlined) */
.av-avatar-outlined.mud-avatar {
  background-color: transparent;
  border: 1px solid var(--color-gray-400);
  color: var(--color-gray-700);
}

html.dark .av-avatar-outlined.mud-avatar {
  border-color: var(--color-dark-400);
  color: var(--color-dark-100);
}

/* Glow shadow effect (drop-shadow tinted of the current color) */
.av-glow-primary {
  box-shadow: 0 8px 24px rgb(from var(--color-primary-500) r g b / 0.5);
}

html.dark .av-glow-primary {
  box-shadow: 0 8px 24px rgb(from var(--color-primary-400) r g b / 0.5);
}

/* ============================================================================
 * §47 ─── Av-Spinner — Guía Visual border-only spinners (pixel-perfect demo)
 * ============================================================================
 *
 * Guía Visual usa spinners CSS-only de borde (no Material/indeterminate). 4
 * variantes del demo `components/spinner` + uso en `components/button/Loading.jsx`:
 *
 * 1. `.av-spinner` — círculo 3/4 (3 lados con border
 * gris-500, lado derecho transparente).
 * Para botones neutral / outside.
 * 2. `.av-spinner.av-spinner--on-color` — mismo patrón pero border blanco
 * (GhostSpinner default — dentro de
 * botones filled colored).
 * 3. `.av-spinner.av-spinner--soft` — border blanco 30 % opacity + lado
 * derecho blanco sólido. Efecto
 * "cometa" (GhostSpinner variant="soft").
 * 4. `.av-spinner.av-spinner--inner-dot` — usa SVG inline en el markup; este
 * modifier solo da color (white).
 *
 * Marcado canónico (replace MudProgressCircular):
 * <MudElement HtmlTag="span" Class="av-spinner av-spinner--on-color" />
 *
 * Para innerDot el SVG va inline en el markup; ver showcase §12 Loading.
 *
 * Spec demo (Spinner index.jsx + spinner.css):
 * size: 16 × 16 px (size-4 = 1rem)
 * border: 2 px (border-2)
 * radius: 9999 px
 * anim: rotate 360° / 1 s linear infinite
 * ============================================================================ */

@keyframes av-spinner-spin {
  to {
    transform: rotate(360deg);
  }
}

.av-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  box-sizing: border-box;
  border: 2px solid var(--color-gray-500);
  border-right-color: transparent;
  border-radius: 9999px;
  animation: av-spinner-spin 1s linear infinite;
}

html.dark .av-spinner {
  border-color: var(--color-dark-400);
  border-right-color: transparent;
}

/* GhostSpinner default — usado dentro de botones colored (filled primary etc).
 Border blanco en 3 lados + transparente a la derecha. */
.av-spinner.av-spinner--on-color {
  border-color: var(--color-white);
  border-right-color: transparent;
}

html.dark .av-spinner.av-spinner--on-color {
  border-color: var(--color-white);
  border-right-color: transparent;
}

/* GhostSpinner soft — efecto "cometa": base white 30 % + lado derecho white sólido. */
.av-spinner.av-spinner--soft {
  border-color: rgb(from var(--color-white) r g b / 0.3);
  border-right-color: var(--color-white);
}

html.dark .av-spinner.av-spinner--soft {
  border-color: rgb(from var(--color-white) r g b / 0.3);
  border-right-color: var(--color-white);
}

/* GhostSpinner innerDot — sin border. Solo flexbox + animación + color via SVG.
 El SVG con currentColor=white va inline en el markup (no podemos meterlo via
 CSS background sin sacrificar el spinning suave en algunos browsers). */
.av-spinner.av-spinner--inner-dot {
  border: none;
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.av-spinner.av-spinner--inner-dot > svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* ============================================================================
 * §48 ─── Av-Badge — Guía Visual Badge component (pixel-perfect demo)
 * ============================================================================
 *
 * Guía Visual <Badge> es un status tag passive (no clickable, no hover), distinto
 * de MudChip (interactive). Para no traer el chrome de Mud (cursor pointer,
 * hover, padding, etc.) renderiza como <MudElement HtmlTag="span" Class="av-badge ...">
 * con el color chain `av-color-X` (definido en §14.1 ext) y variantes opt-in:
 *
 * - .av-badge — base (badge-base + badge del demo)
 * - .av-badge.av-badge-filled — filled (default Guía Visual)
 * - .av-badge.av-badge-outlined — border + colored text, bg transparent
 * - .av-badge.av-badge-soft — tinted bg + darker text (variant="soft")
 * - .av-badge.av-badge-bordered — modifier aditivo sobre soft (border darker/20)
 * - .av-badge.av-badge-glow — modifier aditivo (box-shadow tinted)
 *
 * Color chain — compatible con `av-color-{primary|secondary|info|success|warning|error}`
 * (§14.1 ext). Sin av-color-X cae al neutral (gray-200 bg / gray-900 text / etc.).
 *
 * Spec del demo (badge.css + index.jsx):
 * font: font-medium leading-none tracking-wide text-xs (12px / 500 / 1 / 0.025em)
 * padding: py-1 px-2 (4 px / 8 px)
 * radius: rounded-sm (4 px) — usar `av-rounded-full` para pill
 * border: 1px transparent baseline (outlined/bordered lo sobrescriben)
 * align: inline-flex + items-center + justify-center + align-baseline
 * glow: shadow-lg + shadow-this/50 (tinted del color activo)
 *
 * NOTA typography: declarar font-size/-weight/-line-height/-letter-spacing va
 * contra la regla §Typography de CLAUDE.md. Como Badge renderiza fuera de
 * .mud-typography-* (es <span> raw), entra en la misma excepción documentada
 * para `av-btn` / `av-avatar` / form-controls — la métrica de la primitiva
 * vive en su clase, pero igual consume `--font-sans` por el bridge.
 * ============================================================================ */

.av-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: baseline;
  box-sizing: border-box;

  font-family: var(--font-sans);
  font-size: 12px;
  /* text-xs */
  font-weight: 500;
  /* font-medium */
  line-height: 1;
  /* leading-none */
  letter-spacing: 0.025em;
  /* tracking-wide */

  padding: 4px 8px;
  /* py-1 px-2 */
  border-radius: 4px;
  /* rounded-sm */
  border: 1px solid transparent;

  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    color 150ms ease;
}

/* — Filled variant (default Guía Visual) — — — — — — — — — — — — — — — — — — */

.av-badge.av-badge-filled {
  background-color: var(--av-this, var(--color-gray-200));
  color: var(--color-white);
  border-color: transparent;
}

/* Filled neutral (sin av-color-X) — bg gray-200 + text gray-900 */
.av-badge.av-badge-filled:not([class*="av-color-"]) {
  background-color: var(--color-gray-200);
  color: var(--color-gray-900);
}

html.dark .av-badge.av-badge-filled:not([class*="av-color-"]) {
  background-color: var(--surface-2);
  color: var(--color-dark-50);
}

/* — Outlined variant — — — — — — — — — — — — — — — — — — — — — — — — — */

.av-badge.av-badge-outlined {
  background-color: transparent;
  color: var(--av-this, var(--color-gray-900));
  border-color: rgb(from var(--av-this, var(--color-gray-300)) r g b / 0.3);
}

html.dark .av-badge.av-badge-outlined {
  color: var(--av-this-lighter, var(--color-dark-50));
  border-color: rgb(from var(--av-this-lighter, var(--surface-1)) r g b / 0.3);
}

/* Outlined neutral */
.av-badge.av-badge-outlined:not([class*="av-color-"]) {
  color: var(--color-gray-900);
  border-color: var(--color-gray-300);
}

html.dark .av-badge.av-badge-outlined:not([class*="av-color-"]) {
  color: var(--color-dark-50);
  border-color: var(--surface-1);
}

/* — Soft variant — — — — — — — — — — — — — — — — — — — — — — — — — — — */

.av-badge.av-badge-soft {
  background-color: rgb(
    from var(--av-this-darker, var(--color-gray-200)) r g b / 0.07
  );
  color: var(--av-this-darker, var(--color-gray-900));
  border-color: transparent;
}

html.dark .av-badge.av-badge-soft {
  background-color: rgb(
    from var(--av-this-lighter, var(--color-dark-500)) r g b / 0.1
  );
  color: var(--av-this-lighter, var(--color-dark-50));
}

/* Soft neutral */
.av-badge.av-badge-soft:not([class*="av-color-"]) {
  background-color: rgb(from var(--color-gray-200) r g b / 0.3);
  color: var(--color-gray-900);
}

html.dark .av-badge.av-badge-soft:not([class*="av-color-"]) {
  background-color: rgb(from var(--color-dark-500) r g b / 0.3);
  color: var(--color-dark-50);
}

/* — Bordered modifier (aditivo, normalmente sobre soft) — Guía Visual pattern
 `border border-this-darker/20 dark:border-this-lighter/20`. */

.av-badge.av-badge-bordered {
  border-color: rgb(
    from var(--av-this-darker, var(--color-gray-300)) r g b / 0.2
  );
}

html.dark .av-badge.av-badge-bordered {
  border-color: rgb(
    from var(--av-this-lighter, var(--color-dark-450)) r g b / 0.2
  );
}

/* — Glow modifier (aditivo) — shadow-lg shadow-this/50.
 shadow-lg = 0 10px 15px -3px / 0 4px 6px -4px con tint del color. */

.av-badge.av-badge-glow {
  box-shadow:
    0 10px 15px -3px rgb(from var(--av-this, var(--color-gray-300)) r g b / 0.5),
    0 4px 6px -4px rgb(from var(--av-this, var(--color-gray-300)) r g b / 0.5);
}

html.dark .av-badge.av-badge-glow {
  box-shadow:
    0 10px 15px -3px
      rgb(from var(--av-this-lighter, var(--color-dark-450)) r g b / 0.5),
    0 4px 6px -4px
      rgb(from var(--av-this-lighter, var(--color-dark-450)) r g b / 0.5);
}

/* Glow neutral fallback (sin av-color-X) */
.av-badge.av-badge-glow:not([class*="av-color-"]) {
  box-shadow:
    0 10px 15px -3px rgb(from var(--color-gray-200) r g b / 0.5),
    0 4px 6px -4px rgb(from var(--color-gray-200) r g b / 0.5);
}

html.dark .av-badge.av-badge-glow:not([class*="av-color-"]) {
  box-shadow:
    0 10px 15px -3px rgb(from var(--color-dark-450) r g b / 0.5),
    0 4px 6px -4px rgb(from var(--color-dark-450) r g b / 0.5);
}

/* — Icon inside badge — el demo usa size-3.5 / size-4 (14 / 16 px).
 Heroicons rendered via MudIcon necesitan tamaño manual; usar utility
 classes `av-size-3-5` (14px) / `av-size-4` (16px) del §46. */
.av-badge > svg,
.av-badge .mud-icon-root {
  flex-shrink: 0;
}

/* — Custom Badge variants (demo §8 Custom) — — — — — — — — — — — — — — */

/* Dark badge — bg dark-800 + text white. Guía Visual Custom: <Badge unstyled> con
 "bg-dark-800 px-2 py-1.5 text-xs text-white". */
.av-badge.av-badge-dark {
  background-color: var(--color-dark-800);
  color: var(--color-white);
  border-color: transparent;
}

/* Gradient pill — Guía Visual Custom: "bg-linear-to-r from-purple-500 to-orange-600".
 Distinto de av-btn-gradient-X (que apunta a .mud-button-root). Genérico
 para <span> raw. */
.av-badge.av-badge-gradient-purple-orange {
  background: linear-gradient(to right, #8b5cf6, #ea580c);
  color: var(--color-white);
  border-color: transparent;
}

/* — Pulse animation ( animate-pulse) — — — — — — — — — — — — —
 Utility genérica (sirve para badges, icons, indicators). Misma curva
 : cubic-bezier(0.4, 0, 0.6, 1) infinite 2s. */

@keyframes av-pulse-keyframes {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

.av-pulse {
  animation: av-pulse-keyframes 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ============================================================================
 * §49 ─── Av-Tag Guía Visual variants — interactive tag (extensión aditiva sobre
 * el av-tag legacy de §29 que sigue intacto para priority-* etc.)
 * ============================================================================
 *
 * Guía Visual Tag es un link interactivo: renderiza como <a> por default
 * (component || "a") con hover/focus/active states. En MudBlazor se mapea
 * a MudButton — éste renderiza como <a> cuando lleva Href= y como <button>
 * sin Href (cubre la sección Polymorphic del demo).
 *
 * Las variantes Guía Visual (filled / outlined / soft) son ADITIVAS sobre el
 * baseline `.av-tag` legacy (§29 — typography 12 px / 500 / 1 / 0.025em +
 * padding 4×8 que ya matchea exactamente el demo). Los modifiers nuevos:
 *
 * - .av-tag-filled → bg saturado del color + text white (default Guía Visual)
 * - .av-tag-outlined → border gray-300 + text del color; hover border-this
 * - .av-tag-soft → bg darker/7% + text darker; hover → bg darker + text white
 * - .av-tag-glow → shadow-soft tinted del --av-this (spec custom Guía Visual)
 *
 * Cero impacto sobre el av-tag legacy (priorities, av-tag--neutral/success/
 * primary etc.) — esos no llevan las clases nuevas y siguen pintando como
 * antes (pill 9999 px). Las variantes nuevas overridean el border-radius a
 * 4 px (rounded-sm Guía Visual default).
 *
 * Color chain — reusa `.av-color-{primary|secondary|info|success|warning|error}`
 * de §14.1 ext. Sin av-color-X cae al neutral palette Guía Visual (gray-150/
 * gray-900 / etc.).
 *
 * shadow-soft (custom Guía Visual, declarado en demo/src/styles/index.css):
 * 0px 0px 2px 0px rgba(...) , 0px 12px 24px -4px rgba(...)
 * Para glow con color tinted: substituir rgba(145,158,171,0.20) por
 * rgb(from var(--av-this) r g b / 0.50). El neutral usa shadow-lg gray-200/50.
 * ============================================================================ */

/* — Reset Guía Visual radius default sobre las variantes nuevas (rounded-sm 4px). */

.av-tag.av-tag-filled.mud-button-root,
.av-tag.av-tag-outlined.mud-button-root,
.av-tag.av-tag-soft.mud-button-root {
  border-radius: 4px;
}

/* Mud reset compartido — sin altura fija, sin uppercase, sin text-decoration
 (el <a> que renderiza MudButton trae underline por default browser). */

.av-tag.av-tag-filled.mud-button-root,
.av-tag.av-tag-outlined.mud-button-root,
.av-tag.av-tag-soft.mud-button-root {
  padding: 4px 8px;
  height: auto;
  min-height: 0;
  text-decoration: none;
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    color 150ms ease,
    box-shadow 150ms ease;
}

/* — Variant filled — bg-this text-white hover:bg-this-darker active:bg-this-darker/90 */

.av-tag.av-tag-filled.mud-button-root {
  background-color: var(--av-this, var(--color-gray-150));
  color: var(--color-white);
  border: 1px solid transparent;
}

.av-tag.av-tag-filled.mud-button-root:hover,
.av-tag.av-tag-filled.mud-button-root:focus {
  background-color: var(--av-this-darker, var(--color-gray-200));
}

.av-tag.av-tag-filled.mud-button-root:active {
  background-color: rgb(
    from var(--av-this-darker, var(--color-gray-200)) r g b / 0.9
  );
}

/* Neutral filled — bg-gray-150 + text-gray-900 light · surface-2/dark-100 dark. */
.av-tag.av-tag-filled:not([class*="av-color-"]).mud-button-root {
  color: var(--color-gray-900);
}

html.dark .av-tag.av-tag-filled:not([class*="av-color-"]).mud-button-root {
  background-color: var(--surface-2);
  color: var(--color-dark-100);
}

html.dark .av-tag.av-tag-filled:not([class*="av-color-"]).mud-button-root:hover,
html.dark
  .av-tag.av-tag-filled:not([class*="av-color-"]).mud-button-root:focus {
  background-color: var(--surface-1);
}

/* — Variant outlined — border-gray-300 + text-this; hover border-this. */

.av-tag.av-tag-outlined.mud-button-root {
  background-color: transparent;
  color: var(--av-this, var(--color-gray-800));
  border: 1px solid var(--color-gray-300);
}

.av-tag.av-tag-outlined.mud-button-root:hover,
.av-tag.av-tag-outlined.mud-button-root:focus {
  border-color: var(--av-this, var(--color-gray-800));
}

html.dark .av-tag.av-tag-outlined.mud-button-root {
  color: var(--av-this-lighter, var(--color-dark-100));
  border-color: rgb(from var(--av-this-lighter, var(--surface-2)) r g b / 0.3);
}

html.dark .av-tag.av-tag-outlined.mud-button-root:hover,
html.dark .av-tag.av-tag-outlined.mud-button-root:focus {
  border-color: var(--av-this-lighter, var(--color-dark-100));
}

/* Neutral outlined — border-gray-300 + text-gray-800; hover border-gray-800. */
.av-tag.av-tag-outlined:not([class*="av-color-"]).mud-button-root {
  color: var(--color-gray-800);
  border-color: var(--color-gray-300);
}

.av-tag.av-tag-outlined:not([class*="av-color-"]).mud-button-root:hover,
.av-tag.av-tag-outlined:not([class*="av-color-"]).mud-button-root:focus {
  border-color: var(--color-gray-800);
}

html.dark .av-tag.av-tag-outlined:not([class*="av-color-"]).mud-button-root {
  color: var(--color-dark-100);
  border-color: var(--surface-2);
}

html.dark
  .av-tag.av-tag-outlined:not([class*="av-color-"]).mud-button-root:hover,
html.dark
  .av-tag.av-tag-outlined:not([class*="av-color-"]).mud-button-root:focus {
  border-color: var(--color-dark-100);
}

/* — Variant soft — bg darker/7% + text darker; HOVER → bg darker + text white
 (esto distingue Tag de Badge — Tag soft hover se convierte en filled). */

.av-tag.av-tag-soft.mud-button-root {
  background-color: rgb(
    from var(--av-this-darker, var(--color-gray-300)) r g b / 0.07
  );
  color: var(--av-this-darker, var(--color-gray-900));
  border: 1px solid transparent;
}

.av-tag.av-tag-soft.mud-button-root:hover,
.av-tag.av-tag-soft.mud-button-root:focus {
  background-color: var(--av-this-darker, var(--color-gray-200));
  color: var(--color-white);
}

html.dark .av-tag.av-tag-soft.mud-button-root {
  background-color: rgb(
    from var(--av-this-lighter, var(--color-dark-500)) r g b / 0.13
  );
  color: var(--av-this-lighter, var(--color-dark-100));
}

html.dark .av-tag.av-tag-soft.mud-button-root:hover,
html.dark .av-tag.av-tag-soft.mud-button-root:focus {
  background-color: var(--av-this, var(--color-dark-500));
  color: var(--color-white);
}

/* Neutral soft */
.av-tag.av-tag-soft:not([class*="av-color-"]).mud-button-root {
  background-color: rgb(from var(--color-gray-150) r g b / 0.1);
  color: var(--color-gray-900);
}

.av-tag.av-tag-soft:not([class*="av-color-"]).mud-button-root:hover,
.av-tag.av-tag-soft:not([class*="av-color-"]).mud-button-root:focus {
  background-color: var(--color-gray-150);
  color: var(--color-gray-900);
}

html.dark .av-tag.av-tag-soft:not([class*="av-color-"]).mud-button-root {
  background-color: rgb(from var(--color-dark-500) r g b / 0.1);
  color: var(--color-dark-100);
}

html.dark .av-tag.av-tag-soft:not([class*="av-color-"]).mud-button-root:hover,
html.dark .av-tag.av-tag-soft:not([class*="av-color-"]).mud-button-root:focus {
  background-color: var(--color-dark-500);
  color: var(--color-dark-100);
}

/* — Glow modifier (Guía Visual Tag isGlow — shadow-soft tinted del color) — — —
 shadow-soft spec (custom Guía Visual): rgba(145,158,171, 0.20) 0 0 2px 0 +
 rgba(145,158,171, 0.12) 0 12px 24px -4px. Tag substituye el color
 por shadow-this/50 → rgb(from --av-this r g b / 0.50). */

.av-tag.av-tag-glow.mud-button-root {
  box-shadow:
    0 0 2px 0 rgb(from var(--av-this, var(--color-gray-300)) r g b / 0.5),
    0 12px 24px -4px rgb(from var(--av-this, var(--color-gray-300)) r g b / 0.5);
}

html.dark .av-tag.av-tag-glow.mud-button-root {
  box-shadow:
    0 0 2px 0
      rgb(from var(--av-this-lighter, var(--color-dark-450)) r g b / 0.5),
    0 12px 24px -4px
      rgb(from var(--av-this-lighter, var(--color-dark-450)) r g b / 0.5);
}

/* Neutral glow — shadow-lg gray-200/50 light · dark-450/50 dark (Guía Visual usa
 shadow-lg en neutral en vez de shadow-soft, igual que Badge). */
.av-tag.av-tag-glow:not([class*="av-color-"]).mud-button-root {
  box-shadow:
    0 10px 15px -3px rgb(from var(--color-gray-200) r g b / 0.5),
    0 4px 6px -4px rgb(from var(--color-gray-200) r g b / 0.5);
}

html.dark .av-tag.av-tag-glow:not([class*="av-color-"]).mud-button-root {
  box-shadow:
    0 10px 15px -3px rgb(from var(--color-dark-450) r g b / 0.5),
    0 4px 6px -4px rgb(from var(--color-dark-450) r g b / 0.5);
}

/* — Tag Group — wrapper que mergea bordes adyacentes. Guía Visual usa
 `ltr:rounded-r-none` / `ltr:rounded-l-none` por tag individual; aquí
 centralizamos en el wrapper para evitar repetir clases en cada hijo. */

.av-tag-group {
  display: inline-flex;
  flex-wrap: nowrap;
}

.av-tag-group > .mud-button-root:not(:first-child) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.av-tag-group > .mud-button-root:not(:last-child) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* — Custom static variants — Guía Visual TagGroup §7 muestra 2 "unstyled" estáticas
 (Light = bg-gray-200, Dark = bg-dark-800). Específicas:
 padding: py-1.5 px-2 = 6 × 8 px (no las default 4 × 8 px del baseline).
 border-radius: rounded-sm = 4 px (no la pill 9999 px del baseline av-tag).
 Distintos de filled neutral porque son estáticos sin hover. */

.av-tag.av-tag-light.mud-button-root {
  background-color: var(--color-gray-200);
  color: var(--color-gray-900);
  border-color: transparent;
  padding: 6px 8px;
  border-radius: 4px;
}

.av-tag.av-tag-dark.mud-button-root {
  background-color: var(--color-dark-800);
  color: var(--color-white);
  border-color: transparent;
  padding: 6px 8px;
  border-radius: 4px;
}

/* — Size modifier av-tag-lg — Guía Visual Polymorphic demo usa px-5 py-2 (20×8 px)
 sobre un Tag outlined rounded-full. Opt-in para esa composición. */

.av-tag.av-tag-lg.mud-button-root {
  padding: 8px 20px;
}

/* ============================================================================
 * §51 ─── Av-Legend — color legend indicator (Guía Visual components/legend)
 * ============================================================================
 *
 * Patrón Guía Visual: <span class="inline-flex items-center space-x-2 leading-none">
 * con un dot circular + label de texto. Usado para indicar el significado de
 * colores en charts / dashboards / calendars / status lists.
 *
 * 3 variantes del demo:
 * 1. Basic Legend → dot 8 px filled (bg-this)
 * 2. Outlined Legend → dot 14 px con border-2 transparent bg
 * 3. Soft Color Legend → composición sobre Badge (reusa av-badge-soft + av-rounded-full)
 * con un dot interno bg-current
 *
 * Mapping a Blazor — primitive custom sobre <MudElement HtmlTag="span"> ya
 * que es un wrapper decorativo sin chrome necesario. Color chain compartido
 * con button/badge/tag/box/timeline (av-color-X de §14.1 ext).
 *
 * Markup esperado:
 *
 * <MudElement HtmlTag="span" Class="av-legend [av-legend--outlined] [av-color-X]">
 * <MudElement HtmlTag="span" Class="av-legend__dot" />
 * <MudElement HtmlTag="span">Label</MudElement>
 * </MudElement>
 *
 * Para Soft Color Legend, NO se usa av-legend wrapper — se compone sobre
 * av-badge-soft con un dot interno `av-legend__dot av-legend__dot--current`
 * que toma color del texto del badge (que ya lo aplica via av-badge-soft).
 * ============================================================================ */

.av-legend {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
}

/* Container layout para múltiples Legend en columna (Basic / Outlined demo). */
.av-legend-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Dot baseline — 8 px filled, consume --av-this. Sin av-color-X cae al
 neutral (gray-600 light / dark-200 dark). */

.av-legend__dot {
  display: inline-block;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background-color: var(--av-this, var(--color-gray-600));
}

html.dark .av-legend__dot {
  background-color: var(--av-this-lighter, var(--color-dark-200));
}

/* Outlined variant — dot 14 px (size-3.5) con border-2 transparent bg. */

.av-legend.av-legend--outlined .av-legend__dot {
  width: 14px;
  height: 14px;
  background-color: transparent;
  border: 2px solid var(--av-this, var(--color-gray-300));
}

html.dark .av-legend.av-legend--outlined .av-legend__dot {
  background-color: transparent;
  border-color: var(--av-this-lighter, var(--color-dark-300));
}

/* Current-color variant — para dot dentro de av-badge-soft (Soft Color Legend).
 El badge ya aplica color: var(--av-this-darker), el dot lo hereda via
 currentColor. Sin border. */

.av-legend__dot.av-legend__dot--current {
  background-color: currentColor;
  border: none;
  width: 8px;
  height: 8px;
}

/* ============================================================================
 * §52 ─── Av-Input — MudTextField Guía Visual skin (Forms category)
 * ============================================================================
 *
 * El bridge §LAST-3 (mud-bridge.css) ya pinta el border state machine Guía Visual
 * en TODOS los .mud-input.mud-input-outlined (Normal/Hover/Focus/Error/Disabled
 * con tokens gray-300/400 + primary-600/500 + error). Por eso `av-input` NO
 * necesita re-declarar los borders — esos son globales.
 *
 * Lo que av-input aporta (opt-in via Class="av-input" en MudTextField):
 * - Sizes: --sm (32 px, text-xs) y --lg (48 px, text-base) — el default Mud
 * Margin.Dense ronda 40 px ≈ Guía Visual h-10 default.
 * - Rounded modifier: --rounded (border-radius 9999 px)
 * - Soft variant: --soft (bg gray-150 / dark-900 + sin border visible +
 * ring primary/50 en focus) — usado por Search y Custom unstyled del demo.
 * - Description text typography (cuando se usa HelperText sin Error)
 *
 * Para Prefix/Suffix usar MudTextField.Adornment (Mud-nativo). El bridge ya
 * tiene reglas de color para .mud-input-adornment.
 *
 * Mapping de la API Guía Visual ↔ MudTextField:
 * label → Label
 * placeholder → Placeholder
 * description → HelperText (cuando no hay Error)
 * error → Error + ErrorText
 * disabled → Disabled
 * type → InputType
 * prefix → Adornment="Adornment.Start" AdornmentIcon="@..."
 * suffix → Adornment="Adornment.End" + OnAdornmentClick para acciones
 * value/onChange → @bind-Value
 * component={Cleave} options={...} → Mask="@(new PatternMask/DateMask/...)"
 * ============================================================================ */

/* — Size modifier --sm (h-8 32 px + text-xs 12 px) — Guía Visual InputSizes small.
 Mud calcula la altura del .mud-input-control desde un mix de min-height del
 .mud-input + padding del .mud-input-input. Override ambos. */

.av-input.av-input--sm .mud-input.mud-input-outlined {
  min-height: 32px;
}

.av-input.av-input--sm .mud-input-input {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  font-size: 12px !important;
  line-height: 1.4;
}

/* — Size modifier --lg (h-12 48 px + text-base 16 px) — Guía Visual InputSizes large. */

.av-input.av-input--lg .mud-input.mud-input-outlined {
  min-height: 48px;
}

.av-input.av-input--lg .mud-input-input {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  font-size: 16px !important;
  line-height: 1.4;
}

/* — Rounded modifier — Guía Visual Custom usa rounded-full sobre el input.
 MISMO patrón de fix que av-input--in-group-{X} (§53): el bridge §66 pone
 radius-lg via `.mud-input-control .mud-input-outlined-border` (0,2,0 +
 !important) Y MudBlazor.min.css declara `.mud-input.mud-input-outlined
 .mud-input-outlined-border` (0,3,0 sin !important). Para batirlos en idle
 Y focus:
 - Specificity bumped a 0,5,0 via chain `.av-input.av-input--rounded
 .mud-input.mud-input-outlined .mud-input-outlined-border`.
 - Border-radius shorthand (no individual corner) para reemplazar el
 shorthand del bridge en su totalidad.
 - overflow: hidden defensivo sobre el wrapper interno — recorta cualquier
 elemento descendiente con radius propio al shape rounded-full. */

.av-input.av-input--rounded .mud-input.mud-input-outlined,
.av-input.av-input--rounded
  .mud-input.mud-input-outlined
  .mud-input-outlined-border,
.av-input.av-input--rounded .mud-input-slot.mud-input-root-outlined,
.av-input.av-input--rounded .mud-input-input,
.av-input.av-input--rounded > input,
.av-input.av-input--rounded input.mud-input-root {
  border-radius: 9999px !important;
}

.av-input.av-input--rounded .mud-input.mud-input-outlined {
  overflow: hidden;
}

/* Padding extra para que el texto no choque con el radius — Guía Visual usa
 px-3 (12 px) en su rounded-full pero visualmente sumamos un poco. */
.av-input.av-input--rounded .mud-input-input {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* — Soft variant — Guía Visual Search/Custom usan `unstyled bg-gray-150 ring-primary/50
 focus:ring-3`. Sin border, con bg tinted + ring expansivo en focus. */

.av-input.av-input--soft .mud-input.mud-input-outlined {
  background-color: var(--color-gray-150);
  border-radius: 8px;
}

html.dark .av-input.av-input--soft .mud-input.mud-input-outlined {
  background-color: var(--color-dark-900);
}

/* Suprimir el outlined-border del bridge — soft no tiene border visible. */
.av-input.av-input--soft .mud-input-outlined-border {
  border-color: transparent !important;
}

/* Ring en focus — 3 px primary-500 al 50% ( ring-3 + ring-primary-500/50). */
.av-input.av-input--soft .mud-input.mud-input-outlined:focus-within {
  box-shadow: 0 0 0 3px rgb(from var(--color-primary-500) r g b / 0.5);
}

/* Placeholder color — Guía Visual usa gray-400 light / dark-200 al 70%. */
.av-input.av-input--soft .mud-input-input::placeholder {
  color: var(--color-gray-400);
  opacity: 1;
}

html.dark .av-input.av-input--soft .mud-input-input::placeholder {
  color: rgb(from var(--color-dark-200) r g b / 0.7);
}

/* — Description / HelperText typography — 12 px + text-gray-400 / dark-300 +
 margin-top 4 px, igual que el mensaje de error. Ya no se declara acá: el
 bridge (LAST-3) lo aplica global a .mud-input-helper-text, así que un input
 sin .av-input lee idéntico. Redeclararlo acá solo duplicaría el valor. */

/* — InputType.Search browser-native clear (X) — Chromium/WebKit muestran un
 ícono X nativo cuando el input tiene value. Lo ocultamos para evitar
 conflicto visual con nuestro Adornment.End custom (Guía Visual pattern). */

.av-input .mud-input-input[type="search"]::-webkit-search-cancel-button,
.av-input .mud-input-input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

/* — Adornment icon size — el default Mud (Size.Medium = 1.5rem ≈ 24 px) se ve
   oversize dentro de un input Dense (h-10). Lo fijamos a 18 px (mismo tamaño que
   el prefix de av-search-input §16) vía width/height — NO font-size — para que el
   svg del MudIcon de prefix/suffix matchee el rhythm del input. Aplica a start y
   end (decorativos); los icon-button de av-input-group §53 tienen su propio sizing. */
.av-input .mud-input-adornment .mud-icon-root {
	width: 18px;
	height: 18px;
}

/* ============================================================================
 * §53 ─── Av-Input-Group — Guía Visual InputGroup (Prepend/Append/Between/Filled/Advanced)
 * ============================================================================
 *
 * Patrón Guía Visual: flex container con `-space-x-px` (margin-left -1 px en
 * adyacentes) para mergear los bordes; cada Input adyacente al addon lleva
 * `rounded-X-none` en el lado del addon para visualmente fusionar.
 *
 * Mapping a Blazor — wrapper via `MudElement HtmlTag="div"` (no MudStack
 * porque su gap por default no soporta el negative-margin pattern de Guía Visual
 * sin pelearle). Addon decorativo via `MudElement HtmlTag="div"` también
 * (no MudPaper porque trae shadow/elevation que pelearíamos).
 *
 * Markup esperado:
 *
 * <MudElement HtmlTag="div" Class="av-input-group">
 * <MudElement HtmlTag="div" Class="av-input-addon [av-input-addon--filled]">@</MudElement>
 * <MudTextField Class="av-input av-input--in-group av-input--in-group-end" ... />
 * </MudElement>
 *
 * Modifiers de posición sobre el input dentro del grupo:
 * --in-group-end → border-top-right + border-bottom-right cero (addon a la derecha)
 * --in-group-start → border-top-left + border-bottom-left cero (addon a la izquierda)
 * --in-group-both → ambos lados cero (input rodeado de addons)
 * ============================================================================ */

.av-input-group {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  /* alineación vertical center — los addons NO se
 estiran al tamaño del wrapper Mud (que reserva
 espacio para helper text aunque no exista). */
  max-width: 100%;
}

/* Negative margin para que los bordes adyacentes se fusionen visualmente
 (Guía Visual -space-x-px = margin-left -1 px en los hijos no-primeros). */
.av-input-group > *:not(:first-child) {
  margin-inline-start: -1px;
}

/* Suprimir el espacio reservado del helper-text en inputs dentro de grupos
 (Mud lo reserva por default incluso cuando no hay HelperText). Sin esto
 el .mud-input-control queda más alto que el border visible y los addons
 no alinean. */
.av-input-group .mud-input-helper-text {
  display: none;
}

/* — Addon decorativo — Guía Visual: <div class="border bg px-3.5 ...">. Spec:
 - height: 40 px (matchea Mud Dense default input border altura visible)
 - padding inline: 14 px (px-3.5 )
 - border: 1px gray-300 / dark-450 (matchea borders del input via bridge)
 - bg: white (light, transparent) / dark-paper (dark) — neutral default
 - text: gray-800 / dark-100 + line-height 1 (leading-none)
 - radius: 0 en el centro (controla el wrapper via :first-child / :last-child) */

.av-input-addon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 42px;
  /* matchea altura visible del MudTextField
 Margin.Dense Outlined: padding 10.5 px + line 1.4 *
 14 px font ≈ 42 px (verificado con DevTools). */
  padding: 0 14px;
  border: 1px solid var(--color-gray-300);
  background-color: var(--color-white);
  color: var(--color-gray-800);
  line-height: 1;
  font-family: var(--font-sans);
  font-size: 14px;
  border-radius: 0;
  box-sizing: border-box;
}

html.dark .av-input-addon {
  border-color: var(--color-dark-450);
  background-color: var(--surface-3, var(--color-dark-700));
  color: var(--color-dark-100);
}

/* Filled variant — bg gray-150 (light) / dark-500 (dark) — Guía Visual Filled. */
.av-input-addon.av-input-addon--filled {
  background-color: var(--color-gray-150);
}

html.dark .av-input-addon.av-input-addon--filled {
  background-color: var(--color-dark-500);
}

/* Esquinas — addon como primer hijo del grupo: radius solo en lado izquierdo.
 Addon como último hijo: radius solo en lado derecho. Si es addon central
 (between), ambos lados a 0. */

.av-input-group > .av-input-addon:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.av-input-group > .av-input-addon:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* Inputs / buttons dentro del grupo — radius condicional. Modifiers
 `av-input--in-group-{end|start|both}` son primitive-agnostic: aplican
 sobre MudTextField (via descendant selectors al .mud-input + outlined-border
 + slot + input element) Y sobre MudButton (via .mud-button-root + :not(.mud-fab)
 — matchea la specificity del bridge §62 que pone radius-lg en todo MudButton).

 IMPORTANTE — usar `border-radius` shorthand (4 corners explícitos) en vez
 de `border-top-right-radius: 0` individual. Razón: el bridge §66 declara
 `border-radius: var(--radius-lg) !important` shorthand sobre los mismos
 selectores. Si solo overrideáramos 2 corners individuales, el resto del
 shorthand del bridge sigue activo. Forzando los 4 corners explícitos
 garantizamos el override en idle Y focus states. */

/* in-group-end → radius derecho cero (input/button al inicio del grupo, addon a la derecha).
 Shorthand corners: top-left top-right bottom-right bottom-left = 8 0 0 8.
 Specificity bumped a 0,3,0+ via doble-class .av-input.av-input--in-group-end y
 chain .mud-input.mud-input-outlined para batir MudBlazor.min.css §`.mud-input.mud-input-outlined .mud-input-outlined-border` (0,3,0) en idle Y focus state. */
.av-input.av-input--in-group-end .mud-input.mud-input-outlined,
.av-input.av-input--in-group-end
  .mud-input.mud-input-outlined
  .mud-input-outlined-border,
.av-input.av-input--in-group-end .mud-input-slot.mud-input-root-outlined,
.av-input.av-input--in-group-end .mud-input-input,
.av-input.av-input--in-group-end > input,
.av-input.av-input--in-group-end input.mud-input-root,
.av-input--in-group-end.mud-button-root:not(.mud-fab),
.av-input--in-group-end.mud-icon-button-root {
  border-radius: 8px 0 0 8px !important;
}

/* in-group-start → radius izquierdo cero (addon a la izquierda, input/button al final).
 Shorthand corners: 0 8 8 0. */
.av-input.av-input--in-group-start .mud-input.mud-input-outlined,
.av-input.av-input--in-group-start
  .mud-input.mud-input-outlined
  .mud-input-outlined-border,
.av-input.av-input--in-group-start .mud-input-slot.mud-input-root-outlined,
.av-input.av-input--in-group-start .mud-input-input,
.av-input.av-input--in-group-start > input,
.av-input.av-input--in-group-start input.mud-input-root,
.av-input--in-group-start.mud-button-root:not(.mud-fab),
.av-input--in-group-start.mud-icon-button-root {
  border-radius: 0 8px 8px 0 !important;
}

/* in-group-both → todos los corners cero (input rodeado de addons en ambos lados). */
.av-input.av-input--in-group-both .mud-input.mud-input-outlined,
.av-input.av-input--in-group-both
  .mud-input.mud-input-outlined
  .mud-input-outlined-border,
.av-input.av-input--in-group-both .mud-input-slot.mud-input-root-outlined,
.av-input.av-input--in-group-both .mud-input-input,
.av-input.av-input--in-group-both > input,
.av-input.av-input--in-group-both input.mud-input-root,
.av-input--in-group-both.mud-button-root:not(.mud-fab),
.av-input--in-group-both.mud-icon-button-root {
  border-radius: 0 !important;
}

/* — Clip defensivo — sobre el wrapper interno .mud-input.mud-input-outlined
 apply overflow: hidden para que CUALQUIER elemento interno (input slot,
 <input> raw, legend, etc.) que tenga border-radius propio quede recortado
 al rectangular shape definido por nuestros modifiers in-group-*. Es la red
 de seguridad contra futuros cambios de Mud que añadan radius en algún layer
 interno. NO afecta floating label porque éste vive en .mud-input-control
 (outer) — Mud lo renderea fuera del .mud-input-outlined. */
.av-input.av-input--in-group-end .mud-input.mud-input-outlined,
.av-input.av-input--in-group-start .mud-input.mud-input-outlined,
.av-input.av-input--in-group-both .mud-input.mud-input-outlined {
  overflow: hidden;
}

/* Hover/focus z-index — Guía Visual usa `hover:z-1 focus:z-1` para que el borde
 resaltado quede sobre el adyacente. */
.av-input-group .av-input:hover,
.av-input-group .av-input:focus-within {
  z-index: 1;
  position: relative;
}

/* Inputs dentro del grupo crecen (flex-1 en Guía Visual). */
.av-input-group > .av-input {
  flex: 1 1 0;
  min-width: 0;
}

/* Botones dentro del grupo — altura 42 px (matchea altura real del MudTextField
 Margin.Dense Outlined + altura del av-input-addon). Sin esto el MudButton
 default (36 px) queda más bajo que el input visible. */
.av-input-group > .mud-button-root:not(.mud-fab) {
  height: 42px !important;
}

/* ============================================================================
 * §54 ─── Av-Collapse — Guía Visual Collapse variants (modifiers sobre MudCollapse)
 * ============================================================================
 *
 * MudCollapse no expone parámetros para transition-duration / timing-function /
 * min-height-on-collapsed. Estos modifiers opt-in setean esos valores via
 * override CSS sobre el `.mud-collapse-container` interno.
 *
 * Modifiers (todos opt-in, aplican via Class="av-collapse--X" en MudCollapse):
 * - .av-collapse--duration-{N} → transition-duration: Nms (override del default Mud 300ms)
 * - .av-collapse--ease-elastic → cubic-bezier(0.175, 0.885, 0.320, 1.275) (Guía Visual TimingFunction demo)
 * - .av-collapse--min-h-{N} → min-height: Npx (visible cuando collapsed; matchea `min` prop Guía Visual)
 *
 * Selector chain: .av-collapse--X .mud-collapse-container (0,2,0). El Mud
 * default usa estilo inline en `height` (alta specificity) PERO los modifiers
 * acá usan `transition-*` y `min-height` — props distintos, sin conflicto
 * de cascada.
 *
 * Mapping a Guía Visual Collapse API:
 * in → Expanded (bool)
 * transitionDuration → av-collapse--duration-{N}
 * transitionTimingFunction → av-collapse--ease-{name}
 * min → av-collapse--min-h-{N}
 * onTransitionEnd → OnAnimationEnd (Mud event, mismo concepto)
 * component={ScrollShadow} → wrap content en MudPaper + av-scroll-shadow (§46)
 * ============================================================================ */

.av-collapse--duration-2000 .mud-collapse-container,
.av-collapse--duration-2000 .mud-collapse-wrapper,
.av-collapse--duration-2000 .mud-collapse-wrapper-inner {
  transition-duration: 2000ms;
}

.av-collapse--ease-elastic .mud-collapse-container,
.av-collapse--ease-elastic .mud-collapse-wrapper,
.av-collapse--ease-elastic .mud-collapse-wrapper-inner {
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Min-height visible cuando collapsed. Mud setea height: 0 inline al colapsar;
 min-height vía CSS resulta en max(0, min-height) = min-height. */
.av-collapse--min-h-20 .mud-collapse-container {
  min-height: 20px;
}

.av-collapse--min-h-80 .mud-collapse-container {
  min-height: 80px;
}

/* ============================================================================
 * §55 ─── Av-Progress — Guía Visual Progress over MudProgressLinear
 * ============================================================================
 *
 * MudProgressLinear renderiza:
 * <div class="mud-progress-linear mud-progress-color-X">
 * <div class="mud-progress-linear-bars">
 * <div class="mud-progress-linear-bar mud-progress-color-X" style="transform: scaleX(0.4)"/>
 * </div>
 * </div>
 *
 * Guía Visual Progress (8 variantes — default / basic / soft / sizes / active /
 * indeterminate / customizer / custom) usa colores semánticos distintos al
 * MudTheme. Override via clase opt-in `av-progress` + color chain av-color-X.
 *
 * Mapping a Mud:
 * value → MudProgressLinear Value (0-100)
 * color → av-color-X (Guía Visual palette) en vez de Mud Color enum
 * variant="soft" → modifier av-progress--soft (rail tinted)
 * isActive → modifier av-progress--active (white overlay slide animation)
 * isIndeterminate → MudProgressLinear Indeterminate=true (Mud-native)
 * className h-N → modifiers av-progress--h-{1|4|6}
 *
 * MudProgressLinear default usa Color="Color.Default" → gris. Cuando aplica
 * Color="Color.Primary/etc", Mud usa --mud-palette-X (theme). Para Guía Visual
 * palette pura, el showcase usa Color="Color.Default" + clase av-color-X
 * que overridea via --av-this.
 * ============================================================================ */

/* Active sweep — animado via background-position (no via ::before transform,
 que conflictúa con el `transform: scaleX(value)` de Mud sobre el bar). */
@keyframes av-progress-active-sweep {
  0% {
    background-position: -150% 0;
    opacity: 0.6;
  }

  100% {
    background-position: 150% 0;
    opacity: 0;
  }
}

/* Rail neutral default — gray-150 light, dark-500 dark. Height 8 px matchea
 Guía Visual h-2 (default). Override de Mud's `.mud-progress-linear.horizontal.mud-progress-linear-medium`
 que tiene height: 8 px sin !important — mismo valor pero forzado para que sizes modifiers ganen.
 IMPORTANTE: Specificity 0,2,0 + !important sobre todas las propiedades clave
 para vencer la cadena de selectores compuestos de Mud (.mud-progress-linear.horizontal.mud-progress-linear-X). */

.av-progress.mud-progress-linear {
  background-color: var(--color-gray-150) !important;
  border-radius: 9999px !important;
  overflow: hidden !important;
  height: 8px !important;
}

html.dark .av-progress.mud-progress-linear {
  background-color: var(--color-dark-500) !important;
}

/* Bar neutral default — gray-500 light, dark-400 dark. */
.av-progress.mud-progress-linear .mud-progress-linear-bar {
  background-color: var(--color-gray-500) !important;
  border-radius: 9999px !important;
}

html.dark .av-progress.mud-progress-linear .mud-progress-linear-bar {
  background-color: var(--color-dark-400) !important;
}

/* Color override via av-color-X chain (§14.1 ext). Pinta el bar con --av-this. */
.av-progress[class*="av-color-"].mud-progress-linear .mud-progress-linear-bar {
  background-color: var(--av-this) !important;
}

html.dark
  .av-progress[class*="av-color-"].mud-progress-linear
  .mud-progress-linear-bar {
  background-color: var(--av-this-lighter) !important;
}

/* Soft variant — rail tinted con --av-this/15% en light, lighter/25% en dark.
 El bar mantiene el color saturado del av-color-X. */
.av-progress.av-progress--soft.mud-progress-linear {
  background-color: rgb(from var(--av-this) r g b / 0.15) !important;
}

html.dark .av-progress.av-progress--soft.mud-progress-linear {
  background-color: rgb(from var(--av-this-lighter) r g b / 0.25) !important;
}

/* Height modifiers ( h-N = N * 4 px). Default Mud Progress = 8 px.
 Specificity 0,2,0 + !important para batir el chain
 `.mud-progress-linear.horizontal.mud-progress-linear-medium` (0,3,0 sin !important). */
.av-progress.av-progress--h-1.mud-progress-linear {
  height: 4px !important;
}

.av-progress.av-progress--h-4.mud-progress-linear {
  height: 16px !important;
}

.av-progress.av-progress--h-6.mud-progress-linear {
  height: 24px !important;
}

/* Active state — white sliding overlay vía background-image gradient + animation
 sobre background-position. NO usar ::before porque el bar tiene
 `transform: scaleX(value)` aplicado por Mud y el ::before heredaría el scale,
 destruyendo la animación translateX. Background-image es independiente del
 transform. */
.av-progress.av-progress--active.mud-progress-linear .mud-progress-linear-bar {
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    rgb(from var(--color-white) r g b / 0.85) 50%,
    transparent 100%
  ) !important;
  background-size: 50% 100% !important;
  background-repeat: no-repeat !important;
  animation: av-progress-active-sweep 2s cubic-bezier(0.55, 0.2, 0.3, 0.67)
    infinite !important;
}

/* Custom variant — bg-linear-gradient utilities (paletas demo Guía Visual Custom).
 Override completo del bar bg via `background:` shorthand + !important. */
.av-progress.av-progress--gradient-secondary-info.mud-progress-linear
  .mud-progress-linear-bar {
  background: linear-gradient(to right, #ff75df, var(--color-info)) !important;
}

.av-progress.av-progress--gradient-lime.mud-progress-linear {
  background-color: rgb(from #84cc16 r g b / 0.2) !important;
}

.av-progress.av-progress--gradient-lime.mud-progress-linear
  .mud-progress-linear-bar {
  background-color: #84cc16 !important;
  background-image: none !important;
}

/* Squared corners modifier (Guía Visual Custom 2da variante usa rounded-bl-none rounded-tr-none) */
.av-progress.av-progress--squared-tr-bl.mud-progress-linear,
.av-progress.av-progress--squared-tr-bl.mud-progress-linear
  .mud-progress-linear-bar {
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

/* ============================================================================
 * §56 ─── Av-Circlebar — Guía Visual Circlebar over MudProgressCircular
 * ============================================================================
 *
 * MudProgressCircular renderiza:
 * <div class="mud-progress-circular ...">
 * <svg viewBox="22 22 44 44">
 * <circle class="mud-progress-circular-circle" cx="44" cy="44" r="20" stroke-width="3"/>
 * </svg>
 * </div>
 *
 * Mud NO renderiza rail (track) por default — solo el progress arc. Aproximamos
 * el rail via ::before pseudo-elemento con border-radius 50% + border de color
 * gris (matchea Guía Visual rail neutral).
 *
 * Mapping a Mud:
 * value → MudProgressCircular Value (0-100)
 * strokeWidth → MudProgressCircular StrokeWidth (Mud-native ✓)
 * strokeLinecap → CSS override `stroke-linecap` en .mud-progress-circular-circle
 * isActive → modifier av-circlebar--active (no implementable pixel-perfect; placeholder)
 * isIndeterminate → MudProgressCircular Indeterminate=true ✓
 * offsetDegree → CSS transform: rotate(Xdeg) sobre el SVG
 * gapDegree → stroke-dasharray con calc gap (aproximación)
 * size (Guía Visual N) → CSS width/height (N/4 rem)
 * variant="soft" → modifier av-circlebar--soft (rail tinted)
 * variant="gradient"→ no implementable con MudProgressCircular (stroke debe ser url(#gradient));
 * skip pixel-perfect, mostrar solid color como fallback
 *
 * Limitaciones documentadas en showcase: Gradient variant NO se logra pixel-perfect
 * con MudProgressCircular como base (requeriría SVG defs + linearGradient en el
 * <circle>). Se demuestra solid color en su lugar.
 * ============================================================================ */

/* Container — relative para anclar el rail ::before. Default size 6 rem (96 px)
 matchea Guía Visual <Circlebar /> default `size = 24` (24/4 rem). Mud's default
 .mud-progress-medium (40 px) hay que batirlo con !important. */
.av-circlebar.mud-progress-circular {
  position: relative;
  width: 6rem !important;
  height: 6rem !important;
}

/* Rail neutral — pseudo-element circle detrás del arc. Border-width default 6 px
 matchea Guía Visual strokeWidth default = 6. Si el consumer cambia StrokeWidth,
 debe combinar con av-circlebar--stroke-N para sincronizar rail. */
.av-circlebar.mud-progress-circular::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 6px solid var(--color-gray-150);
  box-sizing: border-box;
  pointer-events: none;
}

html.dark .av-circlebar.mud-progress-circular::before {
  border-color: var(--color-dark-500);
}

/* Stroke color override via av-color-X chain (consume --av-this). */
.av-circlebar[class*="av-color-"].mud-progress-circular
  .mud-progress-circular-circle {
  stroke: var(--av-this) !important;
}

html.dark
  .av-circlebar[class*="av-color-"].mud-progress-circular
  .mud-progress-circular-circle {
  stroke: var(--av-this-lighter) !important;
}

/* Soft variant — rail tinted con --av-this/15%. */
.av-circlebar.av-circlebar--soft.mud-progress-circular::before {
  border-color: rgb(from var(--av-this) r g b / 0.15) !important;
}

html.dark .av-circlebar.av-circlebar--soft.mud-progress-circular::before {
  border-color: rgb(from var(--av-this-lighter) r g b / 0.2) !important;
}

/* Stroke linecap — Guía Visual default `strokeLinecap = "round"`. Mud solo aplica
 `stroke-linecap: round` cuando el consumer pasa Rounded="true" (clase
 .mud-progress-circular-circle-rounded). Default Mud sin Rounded → butt
 (cortes rectos). Forzamos round en todos los av-circlebar para matchear
 Guía Visual pixel-perfect; el modifier --linecap-square override a square. */
.av-circlebar.mud-progress-circular .mud-progress-circular-circle {
  stroke-linecap: round;
}

.av-circlebar.av-circlebar--linecap-square.mud-progress-circular
  .mud-progress-circular-circle {
  stroke-linecap: square !important;
}

/* Rail border-width sync con stroke-width custom — Mud StrokeWidth param afecta
 el arc, pero el rail (::before) es fijo a 3 px por default. Si el consumer
 usa StrokeWidth distinto, debe combinar con un modifier av-circlebar--stroke-N.
 !important para batir el border: 3px solid en la regla base con doble-clase. */
.av-circlebar.av-circlebar--stroke-2.mud-progress-circular::before {
  border-width: 2px !important;
}

.av-circlebar.av-circlebar--stroke-4.mud-progress-circular::before {
  border-width: 4px !important;
}

.av-circlebar.av-circlebar--stroke-6.mud-progress-circular::before {
  border-width: 6px !important;
}

.av-circlebar.av-circlebar--stroke-8.mud-progress-circular::before {
  border-width: 8px !important;
}

.av-circlebar.av-circlebar--stroke-12.mud-progress-circular::before {
  border-width: 12px !important;
}

/* Size modifiers (Guía Visual size=N → N/4 rem). Mud's default
 `.mud-progress-circular.mud-progress-medium` (specificity 0,2,0) pinta width/
 height 40 px. Para batirlo, doble-clase + !important. */
.av-circlebar.av-circlebar--size-12.mud-progress-circular {
  width: 3rem !important;
  height: 3rem !important;
}

.av-circlebar.av-circlebar--size-16.mud-progress-circular {
  width: 4rem !important;
  height: 4rem !important;
}

.av-circlebar.av-circlebar--size-20.mud-progress-circular {
  width: 5rem !important;
  height: 5rem !important;
}

.av-circlebar.av-circlebar--size-24.mud-progress-circular {
  width: 6rem !important;
  height: 6rem !important;
}

.av-circlebar.av-circlebar--size-28.mud-progress-circular {
  width: 7rem !important;
  height: 7rem !important;
}

.av-circlebar.av-circlebar--size-32.mud-progress-circular {
  width: 8rem !important;
  height: 8rem !important;
}

/* OffsetDegree — rotación del SVG entero. !important porque Mud aplica transform
 en el SVG para indeterminate animation. */
.av-circlebar--offset-90.mud-progress-circular .mud-progress-circular-svg {
  transform: rotate(90deg) !important;
}

.av-circlebar--offset-180.mud-progress-circular .mud-progress-circular-svg {
  transform: rotate(180deg) !important;
}

.av-circlebar--offset-270.mud-progress-circular .mud-progress-circular-svg {
  transform: rotate(270deg) !important;
}

/* GapDegree (aproximación) — stroke-dasharray con gap visible. El Mud
 default arc usa stroke-dasharray para dibujar el value. Si overrideáramos
 completo, romperíamos el value display. Para showcase mostramos el efecto
 visual via rail con dasharray.

 Calc: circumference = 2*π*r ≈ 2*π*20 = 125.66. Para gap de 75deg:
 gap_arc = 125.66 * (75/360) = 26.18. */
.av-circlebar.av-circlebar--gap-75.mud-progress-circular::before {
  border: none !important;
  background: conic-gradient(
    from 217.5deg,
    var(--color-gray-150) 0 285deg,
    transparent 285deg 360deg
  ) !important;
  mask: radial-gradient(circle, transparent 60%, black 60%);
  -webkit-mask: radial-gradient(circle, transparent 60%, black 60%);
}

html.dark .av-circlebar.av-circlebar--gap-75.mud-progress-circular::before {
  background: conic-gradient(
    from 217.5deg,
    var(--color-dark-500) 0 285deg,
    transparent 285deg 360deg
  ) !important;
}

/* Gradient variant — MudProgressCircular's <circle> stroke no soporta SVG
 gradient via CSS directo. Aproximamos con solid color (midpoint del gradient
 demo). Pixel-perfect requeriría SVG <defs><linearGradient> que MudProgressCircular
 no inyecta. Documentado como limitación en showcase. */
.av-circlebar--gradient-rose-green.mud-progress-circular
  .mud-progress-circular-circle {
  stroke: #f97316 !important;
  /* approximation: midpoint del rose→green */
}

.av-circlebar--gradient-amber-cyan.mud-progress-circular
  .mud-progress-circular-circle {
  stroke: #06b6d4 !important;
  /* approximation: cyan side */
}

.av-circlebar--gradient-cyan-fuchsia.mud-progress-circular
  .mud-progress-circular-circle {
  stroke: #d946ef !important;
  /* approximation: fuchsia side */
}

.av-circlebar--gradient-rose-violet.mud-progress-circular
  .mud-progress-circular-circle {
  stroke: #8b5cf6 !important;
  /* approximation: violet side */
}

/* Custom modifier — outer container con bg gradient + circlebar override stroke white. */
.av-circlebar.av-circlebar--on-dark.mud-progress-circular::before {
  border-color: rgb(from var(--color-white) r g b / 0.2) !important;
}

.av-circlebar.av-circlebar--on-dark.mud-progress-circular
  .mud-progress-circular-circle {
  stroke: rgb(from var(--color-white) r g b / 0.8) !important;
}

/* ── Custom card primitivas (sec 13 del demo Guía Visual) ──
 Guía Visual usa `px-4 pb-4 pt-5` (asimétrico) + `mx-8` interior + button "unstyled"
 con bg-white/20 + border-white/10. Modifiers dedicados para evitar
 inline-style en el showcase. */
.av-circlebar-card.mud-paper {
  padding: 20px 16px 16px 16px !important;
  /* pt-5 = 20px, px-4 = 16px, pb-4 = 16px */
  border-radius: var(--radius-lg) !important;
  text-align: center;
}

.av-circlebar-card__circle-wrap {
  margin: 0 32px;
  /* Guía Visual mx-8 = 32px lateral interno */
}

.av-circlebar-card__label.mud-typography {
  margin-top: 12px;
  /* mt-3 */
  color: inherit;
  font-weight: 600;
}

/* Unstyled white-on-white button (Guía Visual <Button unstyled className="...">) */
.av-circlebar-card__btn.mud-button-root {
  margin-top: 20px !important;
  /* mt-5 */
  width: 100%;
  border-radius: var(--radius-lg) !important;
  border: 1px solid rgb(from var(--color-white) r g b / 0.1) !important;
  background-color: rgb(from var(--color-white) r g b / 0.2) !important;
  color: var(--color-white) !important;
  padding: 8px 0 !important;
  /* py-2 */
  font-weight: 500;
  text-transform: none;
  box-shadow: none !important;
}

.av-circlebar-card__btn.mud-button-root:hover,
.av-circlebar-card__btn.mud-button-root:focus {
  background-color: rgb(from var(--color-white) r g b / 0.3) !important;
}

/* ============================================================================
 * §57 ─── MudTooltip — Guía Visual Tooltip skin (GLOBAL, no opt-in)
 * ============================================================================
 *
 * MudTooltip renderiza:
 * <div class="mud-tooltip mud-tooltip-default mud-tooltip-top-center"> texto </div>
 *
 * El popover sale portalado al body, así que no podemos targetearlo via
 * descendant selector desde un wrapper class. Mud no expone .Class de manera
 * confiable sobre el popover (Class va al wrapper trigger, RootClass también).
 * Solución: skin GLOBAL sobre `.mud-tooltip` (mismo precedente que Snackbar
 * §41). El impacto es: TODOS los MudTooltip del app adoptan padding/radius/
 * colors Guía Visual automáticamente — coherencia cross-app garantizada.
 *
 * Mapping Mud Color → CSS class on the tooltip popover:
 * Color.Default → .mud-tooltip-default
 * Color.Primary/Secondary/Info/Success/ → .mud-theme-X (mud-theme palette;
 * Warning/Error sobrescribimos con --color-X-darker)
 *
 * Spec Guía Visual (de components/shared/Tooltip.jsx):
 * - padding: 0.3rem 0.75rem (~5/12 px) — Mud default es 4/8
 * - border-radius: 0.5rem (8 px) — Mud default es 4 px
 * - color-dark: --color-gray-800 light / --color-dark-500 dark
 * - color-success: --color-success-darker
 * - color-error: --color-error-darker
 * - color-warning: --color-warning-darker
 * - color-info: --color-info-darker
 * - opacity 1, transitions 0.15 s
 * ============================================================================ */

.mud-tooltip {
  padding: 5px 12px !important;
  border-radius: var(--radius-lg) !important;
  /* 8 px */
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

/* Default (Color.Default) — gray-800 light, dark-500 dark. */
.mud-tooltip.mud-tooltip-default {
  background-color: var(--color-gray-800) !important;
  color: var(--color-white) !important;
}

html.dark .mud-tooltip.mud-tooltip-default {
  background-color: var(--color-dark-500) !important;
  color: var(--color-dark-50) !important;
}

.mud-tooltip.mud-tooltip-default.mud-tooltip-arrow::after {
  border-color: var(--color-gray-800) transparent transparent transparent !important;
}

html.dark .mud-tooltip.mud-tooltip-default.mud-tooltip-arrow::after {
  border-color: var(--color-dark-500) transparent transparent transparent !important;
}

/* Color variants — Guía Visual usa --color-X-darker (más saturados que el base palette).
 .mud-theme-X es la clase que MudTooltip aplica cuando Color="Color.X". */
.mud-tooltip.mud-theme-success {
  background-color: var(--color-success-darker) !important;
  color: var(--color-white) !important;
}

.mud-tooltip.mud-theme-success.mud-tooltip-arrow::after {
  border-color: var(--color-success-darker) transparent transparent transparent !important;
}

.mud-tooltip.mud-theme-warning {
  background-color: var(--color-warning-darker) !important;
  color: var(--color-white) !important;
}

.mud-tooltip.mud-theme-warning.mud-tooltip-arrow::after {
  border-color: var(--color-warning-darker) transparent transparent transparent !important;
}

.mud-tooltip.mud-theme-info {
  background-color: var(--color-info-darker) !important;
  color: var(--color-white) !important;
}

.mud-tooltip.mud-theme-info.mud-tooltip-arrow::after {
  border-color: var(--color-info-darker) transparent transparent transparent !important;
}

.mud-tooltip.mud-theme-error {
  background-color: var(--color-error-darker) !important;
  color: var(--color-white) !important;
}

.mud-tooltip.mud-theme-error.mud-tooltip-arrow::after {
  border-color: var(--color-error-darker) transparent transparent transparent !important;
}

.mud-tooltip.mud-theme-primary {
  background-color: var(--color-primary-700) !important;
  color: var(--color-white) !important;
}

.mud-tooltip.mud-theme-primary.mud-tooltip-arrow::after {
  border-color: var(--color-primary-700) transparent transparent transparent !important;
}

/* Contenido rich (TooltipContent con MudText): el color del texto SIEMPRE debe
 heredar el foreground del tooltip (blanco en default/variantes, --color-dark-50
 en dark). Sin esto, el brand rule [data-theme-brand="avalme"] .mud-typography-body1/body2
 (design-tokens §I) fuerza --av-brand-charcoal sobre el MudText y, al ganar sobre
 el color heredado del contenedor, deja texto casi-negro sobre el fondo oscuro del
 tooltip en modo claro (invisible). inherit lo ata al color del .mud-tooltip. */
.mud-tooltip .mud-typography {
  color: inherit !important;
}

/* Rich tooltip content — TooltipContent slot con avatar + texto multilínea.
 El skin global §57 fuerza font-size 12 / line-height 1.4 sobre el .mud-tooltip,
 pero los MudText interiores usan sus propias clases .mud-typography-X que
 ganan en specificity. Default Mud line-height de body2 (1.43) hace que el
 bloque de 2 líneas (~40 px) sea más alto que MudAvatar Size.Small (32 px),
 produciendo misalignment visual aunque el flex Center centre matemáticamente.
 Solución: usar Size.Medium (40 px, matchea Guía Visual size={10}) y comprimir
 line-height a 1.25 para que el bloque de texto matchee bien el avatar. */
.av-tooltip-rich .mud-typography {
  line-height: 1.25 !important;
}

/* ============================================================================
 * §58 ─── MudDialog — Guía Visual animation entrances + blur backdrop (opt-in)
 * ============================================================================
 *
 * MudDialog default (Mud 9.x) tiene un fade-in via opacity transition en el
 * .mud-popover wrapper. No tiene animation built-in en el .mud-dialog mismo,
 * así que @keyframes custom aplicados via clase opt-in funcionan limpio
 * sin pelear con animation existente.
 *
 * Variantes Guía Visual replicadas:
 * av-dialog--anim-shift-up → translateY(20px) → 0
 * av-dialog--anim-shift-down → translateY(-20px) → 0
 * av-dialog--anim-scale-up → scale(0.85) → 1
 * av-dialog--anim-scale-down → scale(1.15) → 1
 *
 * Backdrop blur — opt-in via class en el wrapper .mud-overlay-dialog. MudDialog
 * no expone API directa para esto; usamos selector descendant desde el .mud-dialog
 * con la clase opt-in para targetear su sibling overlay.
 *
 * Aplicación: pasar `Class="av-dialog--anim-X"` o `Class="av-dialog--blur-backdrop"`
 * en el <MudDialog>. El consumer puede componer (anim + backdrop juntas en la
 * misma cadena de clases).
 * ============================================================================ */

@keyframes av-dialog-shift-up {
  from {
    transform: translateY(20px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes av-dialog-shift-down {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes av-dialog-scale-up {
  from {
    transform: scale(0.85);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes av-dialog-scale-down {
  from {
    transform: scale(1.15);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.mud-dialog.av-dialog--anim-shift-up {
  animation: av-dialog-shift-up 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.mud-dialog.av-dialog--anim-shift-down {
  animation: av-dialog-shift-down 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.mud-dialog.av-dialog--anim-scale-up {
  animation: av-dialog-scale-up 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.mud-dialog.av-dialog--anim-scale-down {
  animation: av-dialog-scale-down 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Blur backdrop — Guía Visual usa `backdrop-blur-sm` (= blur(4px)) sobre el overlay
 dark. MudDialog renderea el overlay como hermano del .mud-dialog dentro del
 .mud-overlay-dialog; usamos :has() para detectar el dialog con la clase opt-in
 y aplicar el filter al overlay sibling. Soporte :has() en todos los targets
 modernos (Chrome 105+ / Firefox 121+ / Safari 15.4+). */
.mud-overlay-dialog:has(.mud-dialog.av-dialog--blur-backdrop)
  .mud-overlay-scrim,
.mud-overlay-dialog:has(.mud-dialog.av-dialog--blur-backdrop)
  .mud-overlay-simple {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ============================================================================
 * §59 ─── MudStepper — Guía Visual line-space modifier (opt-in)
 * ============================================================================
 *
 * Replica el modifier Guía Visual `.steps.line-space` (forms/components/steps.css):
 * añade un gap entre el step header (círculo) y la línea conectora, en vez de
 * que la línea conecte el centro de un step con el centro del siguiente sin
 * espacio.
 *
 * Mud renderiza la línea como `.mud-stepper-nav-connector` con `margin: 0 -16px`
 * (horizontal) o `margin-inline-start: 28px` (vertical). Para crear el gap
 * Guía Visual-style, reemplazamos el margin con valores POSITIVOS que separan la
 * línea del step circle.
 *
 * Aplicación: <MudStepper Class="av-stepper--line-space">. Combinable con
 * Vertical="true" para vertical-with-line-space.
 * ============================================================================ */

/* Horizontal — gap 8 px a ambos lados de la línea (separación del step circle). */
.mud-stepper.av-stepper--line-space.mud-stepper__horizontal
  > .mud-stepper-nav
  > .mud-stepper-nav-connector {
  margin: 0 8px !important;
}

/* Vertical — gap 8 px top/bottom de la línea (separación del step circle). */
.mud-stepper.av-stepper--line-space.mud-stepper__vertical
  > .mud-stepper-nav
  > .mud-stepper-nav-connector {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

.mud-stepper.av-stepper--line-space.mud-stepper__vertical
  > .mud-stepper-nav
  > .mud-stepper-nav-connector
  .mud-stepper-nav-connector-line {
  min-height: 16px !important;
}

/* ============================================================================
 * §60 ─── Av-Spinner — Guía Visual Spinner pixel-perfect (CSS-only primitive)
 * ============================================================================
 *
 * Guía Visual Spinner es arquitectónicamente distinto de MudProgressCircular:
 * Guía Visual = CSS `border-3 rounded-full` con `border-r-transparent` + animation spin
 * Mud = SVG <circle> con stroke-dasharray animation
 *
 * Por eso esta primitiva CSS-only replica el look Guía Visual pixel-perfect, sobre
 * <MudElement HtmlTag="span"> (doctrina §MudElement). MudProgressCircular sigue
 * disponible para inline buttons + use cases Mud-native (showcase mantiene
 * ambas variantes lado a lado).
 *
 * Variantes:
 * default — border completo + border-right transparent (look estándar)
 * --soft — border at 30% opacity + border-right at 100%
 * --elastic — animation-timing cubic-bezier (rebote elástico)
 * --inner-dot — SVG con círculo + dot interior (mask-image)
 * --no-anim — animation: none
 * --disabled — opacity 0.5 + animation pausada
 * --size-{3|5|7|10|12|14|16} — sizes Guía Visual (12/20/28/40/48/56/64 px)
 *
 * Color chain av-color-X (§14.1 ext) consume --av-this para el color del border.
 * Sin av-color-X → cae a neutral (gray-500 light / dark-400 dark).
 * ============================================================================ */

@keyframes av-spinner-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Base — default variant (border completo + right transparent + animation spin). */
.av-spinner {
  display: inline-block;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  border-width: 3px;
  border-style: solid;
  border-color: var(--av-this, var(--color-gray-500));
  border-right-color: transparent;
  border-radius: 9999px;
  animation: av-spinner-spin 1s linear infinite;
  vertical-align: middle;
}

html.dark .av-spinner {
  border-color: var(--av-this-lighter, var(--color-dark-400));
  border-right-color: transparent;
}

/* Soft variant — border at 30% opacity + border-right at 100% (color saturado). */
.av-spinner.av-spinner--soft {
  border-color: rgb(from var(--av-this, var(--color-gray-500)) r g b / 0.3);
  border-right-color: var(--av-this, var(--color-gray-500));
}

html.dark .av-spinner.av-spinner--soft {
  border-color: rgb(
    from var(--av-this-lighter, var(--color-dark-400)) r g b / 0.3
  );
  border-right-color: var(--av-this-lighter, var(--color-dark-400));
}

/* Elastic variant — cubic-bezier easing (rebote tipo Guía Visual is-elastic). */
.av-spinner.av-spinner--elastic {
  animation-timing-function: cubic-bezier(0.5, 1.8, 0.5, 0.8);
}

/* Inner Dot variant — SVG icon con círculo perimetral + dot interior, mask-image
 para que el color venga de --av-this (via background-color mascarado). */
.av-spinner.av-spinner--inner-dot {
  border: none;
  background-color: var(--av-this, var(--color-gray-500));
  mask-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 28 28'><path fill-rule='evenodd' clip-rule='evenodd' d='M28 14c0 7.732-6.268 14-14 14S0 21.732 0 14 6.268 0 14 0s14 6.268 14 14zm-2.764.005c0 6.185-5.014 11.2-11.2 11.2-6.185 0-11.2-5.015-11.2-11.2 0-6.186 5.015-11.2 11.2-11.2 6.186 0 11.2 5.014 11.2 11.2zM8.4 16.8a2.8 2.8 0 100-5.6 2.8 2.8 0 000 5.6z'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 28 28'><path fill-rule='evenodd' clip-rule='evenodd' d='M28 14c0 7.732-6.268 14-14 14S0 21.732 0 14 6.268 0 14 0s14 6.268 14 14zm-2.764.005c0 6.185-5.014 11.2-11.2 11.2-6.185 0-11.2-5.015-11.2-11.2 0-6.186 5.015-11.2 11.2-11.2 6.186 0 11.2 5.014 11.2 11.2zM8.4 16.8a2.8 2.8 0 100-5.6 2.8 2.8 0 000 5.6z'/></svg>");
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-position: center;
  -webkit-mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}

html.dark .av-spinner.av-spinner--inner-dot {
  background-color: var(--av-this-lighter, var(--color-dark-400));
}

/* No animation — Guía Visual animate={false}. */
.av-spinner.av-spinner--no-anim {
  animation: none;
}

/* Disabled — opacity 0.5 + animation pausada. */
.av-spinner.av-spinner--disabled {
  opacity: 0.5;
  animation: none;
}

/* Sizes — escala Guía Visual size-{3|5|7|10|12|14|16}. */
.av-spinner.av-spinner--size-3 {
  width: 12px;
  height: 12px;
  border-width: 1px;
}

.av-spinner.av-spinner--size-5 {
  width: 20px;
  height: 20px;
  border-width: 2px;
}

.av-spinner.av-spinner--size-7 {
  width: 28px;
  height: 28px;
  border-width: 3px;
}

.av-spinner.av-spinner--size-10 {
  width: 40px;
  height: 40px;
  border-width: 3px;
}

.av-spinner.av-spinner--size-12 {
  width: 48px;
  height: 48px;
  border-width: 4px;
}

.av-spinner.av-spinner--size-14 {
  width: 56px;
  height: 56px;
  border-width: 4px;
}

.av-spinner.av-spinner--size-16 {
  width: 64px;
  height: 64px;
  border-width: 4px;
}

/* ============================================================================
 * §61 ─── Av-Carousel — MudCarousel companion utilities
 * ----------------------------------------------------------------------------
 * Set de utility classes para el showcase MudCarousel — heights, slide
 * content layout, gradient backgrounds del demo Guía Visual, bullet dot
 * (square pagination) custom y arrow pill (HeroIcons en pill oscuro).
 *
 * Las gradient slides NO son tokens del design system — son visuales
 * demo del showcase únicamente. Si en producción se usa MudCarousel para
 * un banner real, el consumer aporta sus propias imágenes / surfaces.
 *
 * Bullet dot + arrow pill SÍ son utility reusable: cualquier MudCarousel
 * que quiera el look Guía Visual (square dot pagination + dark pill arrows)
 * los consume via Class= en BulletTemplate / NextButtonTemplate.
 * ============================================================================ */

/* Frame height (240 px = h-60 Tailwind) — slide container. */
.av-carousel-h-60.mud-carousel {
  height: 240px;
}

/* Slide content layout — flex column center + 100% del frame del item. */
.av-carousel-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  color: var(--color-white);
  padding: 16px;
}

/* Slide tints — gradient backgrounds del demo. Theme-aware via tokens. */
.av-carousel-slide--primary {
  background: linear-gradient(
    135deg,
    var(--color-primary-500),
    var(--color-primary-700)
  );
}

.av-carousel-slide--secondary {
  background: linear-gradient(
    135deg,
    var(--color-secondary),
    var(--color-secondary-darker)
  );
}

.av-carousel-slide--info {
  background: linear-gradient(
    135deg,
    var(--color-info),
    var(--color-info-darker)
  );
}

.av-carousel-slide--success {
  background: linear-gradient(
    135deg,
    var(--color-success),
    var(--color-success-darker)
  );
}

/* Multi-color combos — info+primary, success+info, warning+error.  */
.av-carousel-slide--combo-blue {
  background: linear-gradient(
    135deg,
    var(--color-info),
    var(--color-primary-500)
  );
}

.av-carousel-slide--combo-green {
  background: linear-gradient(135deg, var(--color-success), var(--color-info));
}

.av-carousel-slide--combo-fire {
  background: linear-gradient(135deg, var(--color-warning), var(--color-error));
}

/* Dark slide — slate gradient cuando el showcase necesita un canvas oscuro
   para que los arrow pills resalten. */
.av-carousel-slide--dark {
  background: linear-gradient(135deg, #1e293b, #0f172a);
}

html.dark .av-carousel-slide--dark {
  background: linear-gradient(
    135deg,
    var(--color-dark-700),
    var(--color-dark-900)
  );
}

/* Neutral slide — gris claro / dark surface. Para variantes "data" con
   texto color natural del theme (no white forzado). */
.av-carousel-slide--neutral {
  background: var(--color-gray-200);
  color: var(--color-gray-800);
}

html.dark .av-carousel-slide--neutral {
  background: var(--color-dark-700);
  color: var(--color-dark-100);
}

/* Bullet dot pagination (Guía Visual square pill style).
   Base = 12×4 inactive. Active modifier expande a 24×4 + color primary.
   Aplicar dentro de BulletTemplate del MudCarousel:
     <BulletTemplate Context="selected">
       <MudElement HtmlTag="span"
         Class="@($"av-carousel-bullet-dot {(selected ? "av-carousel-bullet-dot--active" : "")}")" />
     </BulletTemplate>  */
.av-carousel-bullet-dot {
  display: inline-block;
  width: 12px;
  height: 4px;
  margin: 0 4px;
  border-radius: 9999px;
  background-color: var(--color-gray-400);
  cursor: pointer;
  transition:
    width 200ms ease,
    background-color 200ms ease;
}

.av-carousel-bullet-dot.av-carousel-bullet-dot--active {
  width: 24px;
  background-color: var(--color-primary-600);
}

html.dark .av-carousel-bullet-dot {
  background-color: var(--color-dark-300);
}

html.dark .av-carousel-bullet-dot.av-carousel-bullet-dot--active {
  background-color: var(--color-primary-400);
}

/* Arrow pill (Guía Visual dark pill con icono blanco) — modifier al MudIconButton
   dentro de NextButtonTemplate / PreviousButtonTemplate. */
.av-carousel-arrow-pill.mud-icon-button-root {
  background-color: rgb(from var(--color-gray-900) r g b / 0.5);
  color: var(--color-white);
  border-radius: 9999px;
}

.av-carousel-arrow-pill.mud-icon-button-root:hover {
  background-color: rgb(from var(--color-gray-900) r g b / 0.7);
}

html.dark .av-carousel-arrow-pill.mud-icon-button-root {
  background-color: rgb(from var(--color-dark-900) r g b / 0.6);
}

html.dark .av-carousel-arrow-pill.mud-icon-button-root:hover {
  background-color: rgb(from var(--color-dark-900) r g b / 0.8);
}

/* Max-width wrapper para showcase (carouseles se renderean a 480 px máx). */
.av-carousel-max-md {
  max-width: 480px;
}

/* ============================================================================
 * §62 ─── Av-File-Upload — MudFileUpload companion utilities
 * ----------------------------------------------------------------------------
 * Set de utility classes para el showcase MudFileUpload — square dashed
 * add button, thumbnail card con remove X overlay, input-like trigger
 * con prefix/suffix, file row item para dropzone. Replica el visual del
 * demo Guía Visual forms/file-upload.
 *
 * Reusable: cualquier MudFileUpload en producción puede consumir estas
 * classes via Class= en CustomContent / SelectedTemplate cuando quiera el
 * look Guía Visual.
 * ============================================================================ */

/* Square dashed add button (80×80) — el "+" para agregar nueva imagen.
   Aplica sobre MudButton dentro de CustomContent. Hover deviene primary. */
.av-file-upload-square-add.mud-button-root {
  width: 80px;
  height: 80px;
  min-width: 0;
  padding: 0;
  border-radius: var(--radius-lg);
  border: 2px dashed var(--color-gray-300);
  background-color: transparent;
  color: var(--color-gray-400);
  transition:
    border-color 150ms ease,
    color 150ms ease;
}

.av-file-upload-square-add.mud-button-root:hover {
  border-color: var(--color-primary-600);
  color: var(--color-primary-600);
  background-color: transparent;
}

html.dark .av-file-upload-square-add.mud-button-root {
  border-color: var(--color-dark-450);
  color: var(--color-dark-300);
}

html.dark .av-file-upload-square-add.mud-button-root:hover {
  border-color: var(--color-primary-400);
  color: var(--color-primary-400);
}

/* Thumbnail card 80×80 — contenedor del preview de imagen subida. Wrapper
   con overflow hidden para que el img.cover quede recortado al border-radius. */
.av-file-upload-thumb {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-gray-200);
  background-color: var(--color-gray-100);
}

html.dark .av-file-upload-thumb {
  border-color: var(--color-dark-500);
  background-color: var(--color-dark-700);
}

.av-file-upload-thumb__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Remove X overlay sobre el thumbnail (top-right corner). Aparece siempre
   visible — pixel-perfect con FileItemSquare del demo. */
.av-file-upload-thumb__remove.mud-icon-button-root {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  min-width: 0;
  padding: 0;
  border-radius: 9999px;
  background-color: rgb(from var(--color-gray-900) r g b / 0.7);
  color: var(--color-white);
  z-index: 1;
}

.av-file-upload-thumb__remove.mud-icon-button-root:hover {
  background-color: var(--color-error);
}

.av-file-upload-thumb__remove.mud-icon-button-root .mud-icon-root {
  width: 12px;
  height: 12px;
}

/* Input-like trigger (sec 3 InputView) — botón con look de input outlined
   que muestra filename adentro + paperclip prefix + X suffix. Aplica sobre
   MudButton dentro de CustomContent. */
.av-file-upload-input-trigger.mud-button-root {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-gray-300);
  background-color: var(--color-white);
  color: var(--color-gray-800);
  text-transform: none;
  font-weight: 400;
  justify-content: flex-start;
  cursor: pointer;
  transition: border-color 150ms ease;
}

.av-file-upload-input-trigger.mud-button-root:hover {
  border-color: var(--color-gray-400);
  background-color: var(--color-white);
}

html.dark .av-file-upload-input-trigger.mud-button-root {
  border-color: var(--color-dark-450);
  background-color: var(--color-dark-800);
  color: var(--color-dark-100);
}

html.dark .av-file-upload-input-trigger.mud-button-root:hover {
  border-color: var(--color-dark-300);
  background-color: var(--color-dark-800);
}

.av-file-upload-input-trigger__filename {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: start;
}

.av-file-upload-input-trigger--empty .av-file-upload-input-trigger__filename {
  color: var(--color-gray-500);
}

html.dark
  .av-file-upload-input-trigger--empty
  .av-file-upload-input-trigger__filename {
  color: var(--color-dark-300);
}

/* Round flat X dentro del input-like trigger (suffix). */
.av-file-upload-input-trigger__clear.mud-icon-button-root {
  width: 20px;
  height: 20px;
  min-width: 0;
  padding: 0;
  border-radius: 9999px;
  background-color: var(--color-gray-200);
  color: var(--color-gray-700);
  flex-shrink: 0;
}

.av-file-upload-input-trigger__clear.mud-icon-button-root:hover {
  background-color: var(--color-error);
  color: var(--color-white);
}

html.dark .av-file-upload-input-trigger__clear.mud-icon-button-root {
  background-color: var(--color-dark-600);
  color: var(--color-dark-100);
}

.av-file-upload-input-trigger__clear.mud-icon-button-root .mud-icon-root {
  width: 14px;
  height: 14px;
}

/* Max-width wrapper para showcase (file uploads se renderean a 576 px = max-w-xl). */
.av-file-upload-max-xl {
  max-width: 576px;
}

/* ============================================================================
 * §63 ─── Av-Accordion — MudExpansionPanels variant modifiers (opt-in)
 * ----------------------------------------------------------------------------
 * Set de modifiers para MudExpansionPanels que replican las variantes del
 * demo Guía Visual components/accordion: bordered (divide-y entre items),
 * full-bordered (border wrapper + radius + divide-y), separated (gap entre
 * items con surface propia), primary (bg saturado + text white), no-anim
 * (transition-duration 0). Cada modifier es aditivo sobre la base Mud.
 *
 * Mud renderiza .mud-expansion-panels como container y cada panel como
 * .mud-expand-panel con header .mud-expand-panel-header y contenido
 * .mud-expand-panel-content. Los modifiers se aplican via Class= sobre
 * el MudExpansionPanels y descienden hasta los hijos via selectores
 * descendientes (sin tocar otros consumers de Mud).
 *
 * Aplicación: <MudExpansionPanels Class="av-accordion av-accordion--bordered">
 * ============================================================================ */

/* Base — reset elevation/border defaults para que los modifiers manden. */
.av-accordion.mud-expansion-panels {
  box-shadow: none !important;
  background-color: transparent !important;
}

.av-accordion.mud-expansion-panels > .mud-expand-panel {
  background-color: transparent;
}

.av-accordion.mud-expansion-panels .mud-expand-panel-header {
  padding: 16px 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-gray-700);
}

html.dark .av-accordion.mud-expansion-panels .mud-expand-panel-header {
  color: var(--color-dark-100);
}

/* Bordered modifier — divide-y entre items (gray-150 light / dark-500 dark). */
.av-accordion.av-accordion--bordered.mud-expansion-panels
  > .mud-expand-panel
  + .mud-expand-panel {
  border-top: 1px solid var(--color-gray-150);
}

html.dark
  .av-accordion.av-accordion--bordered.mud-expansion-panels
  > .mud-expand-panel
  + .mud-expand-panel {
  border-top-color: var(--color-dark-500);
}

/* Full Bordered modifier — wrapper border + radius + divide-y inner. */
.av-accordion.av-accordion--full-bordered.mud-expansion-panels {
  border: 1px solid var(--color-gray-150);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

html.dark .av-accordion.av-accordion--full-bordered.mud-expansion-panels {
  border-color: var(--color-dark-500);
}

.av-accordion.av-accordion--full-bordered.mud-expansion-panels
  > .mud-expand-panel
  + .mud-expand-panel {
  border-top: 1px solid var(--color-gray-150);
}

html.dark
  .av-accordion.av-accordion--full-bordered.mud-expansion-panels
  > .mud-expand-panel
  + .mud-expand-panel {
  border-top-color: var(--color-dark-500);
}

.av-accordion.av-accordion--full-bordered.mud-expansion-panels
  .mud-expand-panel-header {
  padding: 16px;
}

.av-accordion.av-accordion--full-bordered.mud-expansion-panels
  .mud-expand-panel-content {
  padding: 0 16px 16px;
}

@media (min-width: 640px) {
  .av-accordion.av-accordion--full-bordered.mud-expansion-panels
    .mud-expand-panel-header,
  .av-accordion.av-accordion--full-bordered.mud-expansion-panels
    .mud-expand-panel-content {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Separated modifier — gap entre items, cada uno con surface y radius propios. */
.av-accordion.av-accordion--separated.mud-expansion-panels {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 640px) {
  .av-accordion.av-accordion--separated.mud-expansion-panels {
    gap: 20px;
  }
}

.av-accordion.av-accordion--separated.mud-expansion-panels > .mud-expand-panel {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-150);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

html.dark
  .av-accordion.av-accordion--separated.mud-expansion-panels
  > .mud-expand-panel {
  background-color: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

.av-accordion.av-accordion--separated.mud-expansion-panels
  .mud-expand-panel-header {
  padding: 16px;
}

.av-accordion.av-accordion--separated.mud-expansion-panels
  .mud-expand-panel-content {
  padding: 0 16px 16px;
}

/* Primary modifier — bg saturado + text white en header, divide primary inner. */
.av-accordion.av-accordion--primary.mud-expansion-panels {
  border: 1px solid var(--color-primary-600);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

html.dark .av-accordion.av-accordion--primary.mud-expansion-panels {
  border-color: var(--color-primary-500);
}

.av-accordion.av-accordion--primary.mud-expansion-panels
  > .mud-expand-panel
  + .mud-expand-panel {
  border-top: 1px solid var(--color-primary-400);
}

.av-accordion.av-accordion--primary.mud-expansion-panels
  .mud-expand-panel-header {
  background-color: var(--color-primary-600);
  color: var(--color-white);
  padding: 16px;
}

html.dark
  .av-accordion.av-accordion--primary.mud-expansion-panels
  .mud-expand-panel-header {
  background-color: var(--color-primary-500);
}

.av-accordion.av-accordion--primary.mud-expansion-panels
  .mud-expand-panel-header
  .mud-expand-panel-icon {
  color: var(--color-white);
}

.av-accordion.av-accordion--primary.mud-expansion-panels
  .mud-expand-panel-content {
  padding: 16px;
  background-color: var(--color-white);
  color: var(--color-gray-700);
}

html.dark
  .av-accordion.av-accordion--primary.mud-expansion-panels
  .mud-expand-panel-content {
  background-color: var(--color-dark-700);
  color: var(--color-dark-100);
}

/* No Animation modifier — disable collapse transition (transitionDuration=0). */
.av-accordion.av-accordion--no-anim.mud-expansion-panels
  .mud-collapse-container,
.av-accordion.av-accordion--no-anim.mud-expansion-panels .mud-collapse-wrapper,
.av-accordion.av-accordion--no-anim.mud-expansion-panels
  .mud-collapse-wrapper-inner {
  transition: none !important;
  animation: none !important;
}

/* Header rich content — para Custom / Advanced que tienen avatars + chevron
   manual. Suprime el icon default Mud (HideIcon en C# es la forma idiomática
   pero esto cubre cuando se quiere chevron custom dentro del TitleContent). */
.av-accordion-rich-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
}

.av-accordion-rich-header__title {
  flex: 1 1 auto;
}

/* Max-width wrapper para showcase (accordions se renderean a 576 px = max-w-xl). */
.av-accordion-max-xl {
  max-width: 576px;
}

/* ============================================================================
 * §64 ─── Av-Contextual-Help — minimal popover pattern (opt-in)
 * ----------------------------------------------------------------------------
 * Patrón Guía Visual: trigger icon-only round que abre un popover con
 * title + content. Sin equivalente Mud directo (MudTooltip es hover-only,
 * MudMenu siempre renderiza lista). La solución usa MudPopover anchored al
 * trigger + MudOverlay invisible para click-outside dismiss.
 *
 * Cada utility class lleva el prefix `.av-contextual-help-*` para que el
 * skin sea opt-in puro — cero impacto sobre MudPopover / MudIconButton de
 * producción.
 *
 * NOTA SOBRE EL SELECTOR: MudIconButton renderiza <button class="mud-button-root
 * mud-icon-button ...">. La clase Mud es `.mud-icon-button` (NO `.mud-icon-button-root`
 * — ese identificador NO existe en MudBlazor 9.x).
 *
 * Aplicación:
 *   <MudIconButton Class="av-contextual-help-trigger" ... />
 *   <MudPopover ...>
 *     <MudPaper Class="av-contextual-help-panel">
 *       <h3 class="av-contextual-help-title">Title</h3>
 *       <div class="av-contextual-help-body">Content</div>
 *     </MudPaper>
 *   </MudPopover>
 * ============================================================================ */

/* Trigger — pill round flat tight (default 26×26 con icon 18).
   !important para ganar al chain default Mud (padding 5px + sizing implicit).
   overflow:hidden corta el bg de hover al box del button (impide overflow
   cuando se monta en un input Adornment más bajo que el button).
   .mud-icon-button-label interno forzado a width/height 100% — heredado
   automático cuando aplica un size modifier (26 / 30 / 34). */
.av-contextual-help-trigger.mud-icon-button {
  width: 34px !important;
  height: 34px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-radius: 9999px;
  background-color: transparent;
  color: var(--color-gray-500);
  transition:
    background-color 150ms ease,
    color 150ms ease;
  box-sizing: border-box;
  overflow: hidden;
}

.av-contextual-help-trigger.mud-icon-button:hover {
  background-color: var(--color-gray-150);
  color: var(--color-gray-700);
}

html.dark .av-contextual-help-trigger.mud-icon-button {
  color: var(--color-dark-300);
}

html.dark .av-contextual-help-trigger.mud-icon-button:hover {
  background-color: var(--color-dark-600);
  color: var(--color-dark-100);
}

/* Label interno hereda tamaño del button (responsivo a los size modifiers). */
.av-contextual-help-trigger.mud-icon-button .mud-icon-button-label {
  width: 100%;
  height: 100%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.av-contextual-help-trigger.mud-icon-button .mud-icon-root {
  width: 22px;
  height: 22px;
}

/* Size modifiers — escala 26 (xs) / 30 (sm) / 34 (default). El icon escala
   con el button para mantener un halo tight (4-6 px más grande que el icon). */
.av-contextual-help-trigger.av-contextual-help-trigger--xs.mud-icon-button {
  width: 26px !important;
  height: 26px !important;
}

.av-contextual-help-trigger.av-contextual-help-trigger--xs.mud-icon-button
  .mud-icon-root {
  width: 18px;
  height: 18px;
}

.av-contextual-help-trigger.av-contextual-help-trigger--sm.mud-icon-button {
  width: 30px !important;
  height: 30px !important;
}

.av-contextual-help-trigger.av-contextual-help-trigger--sm.mud-icon-button
  .mud-icon-root {
  width: 20px;
  height: 20px;
}

/* Panel — popover surface 320 px con border + radius + shadow.
   Replica el PopoverPanel del demo (w-80 rounded-md border bg-white shadow-lg). */
.av-contextual-help-panel.mud-paper {
  width: 320px;
  padding: 16px;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-elevation-3);
}

html.dark .av-contextual-help-panel.mud-paper {
  background-color: var(--color-dark-750);
  border-color: var(--color-dark-500);
  box-shadow: none;
}

/* Title — text-sm (14 px) bold sobre top — compacto, alineado con tooltips. */
.av-contextual-help-title {
  margin: 0 0 6px;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-gray-800);
}

html.dark .av-contextual-help-title {
  color: var(--color-dark-100);
}

/* Body — text-xs-plus (13 px) muted para el content. */
.av-contextual-help-body {
  font-size: var(--text-xs-plus);
  line-height: 1.5;
  color: var(--color-gray-500);
}

html.dark .av-contextual-help-body {
  color: var(--color-dark-200);
}

.av-contextual-help-body p {
  margin: 0;
}

.av-contextual-help-body p + p {
  margin-top: 8px;
}

/* Panel size modifier --compact — title y body un nivel más chico cuando
   el consumer quiere un popover más denso (form fields, table cells). */
.av-contextual-help-panel.av-contextual-help-panel--compact.mud-paper {
  width: 280px;
  padding: 12px;
}

.av-contextual-help-panel--compact .av-contextual-help-title {
  font-size: var(--text-xs-plus);
  margin-bottom: 4px;
}

.av-contextual-help-panel--compact .av-contextual-help-body {
  font-size: var(--text-xs);
  line-height: 1.45;
}

/* Title size modifiers — aplicables sin tocar el panel (el consumer elige
   tipografía solo para el title). */
.av-contextual-help-title.av-contextual-help-title--sm {
  font-size: var(--text-xs-plus);
}

.av-contextual-help-title.av-contextual-help-title--xs {
  font-size: var(--text-xs);
}

/* ============================================================================
 * §65 ─── Av-TreeView — MudTreeView Guía Visual look (opt-in)
 * ----------------------------------------------------------------------------
 * Replica el visual del demo Guía Visual components/treeview: hover bg gray-100
 * + chevron rotate 90° + tipografía tracking-wide + padding compact. El skin
 * es scope-restringido a .av-treeview — cero impacto sobre MudTreeView de
 * producción.
 *
 * Aplicación:
 *   <MudTreeView Class="av-treeview" T="string">
 *     <MudTreeViewItem Value="@(...)" Text="..." />
 *     <MudTreeViewItem Value="@(...)" Text="...">
 *       <MudTreeViewItem ... />
 *     </MudTreeViewItem>
 *   </MudTreeView>
 *
 * El folder icon (sec Advanced) se pasa al item via parameter Icon="@HeroIcons.Outline.Folder"
 * + IconColor="Color.Warning" — heredados Mud-native, sin modifier extra.
 * ============================================================================ */

/* Container reset — sin border / shadow / bg propio. */
.av-treeview.mud-treeview {
  background-color: transparent;
}

/* Item content — fila clickeable con padding compact + radius + transition. */
.av-treeview .mud-treeview-item-content {
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  letter-spacing: 0.025em;
  color: var(--color-gray-600);
  transition:
    background-color 150ms ease,
    color 150ms ease;
  cursor: pointer;
}

.av-treeview .mud-treeview-item-content:hover,
.av-treeview .mud-treeview-item-content:focus-within {
  background-color: var(--color-gray-100);
  color: var(--color-gray-800);
}

html.dark .av-treeview .mud-treeview-item-content {
  color: var(--color-dark-200);
}

html.dark .av-treeview .mud-treeview-item-content:hover,
html.dark .av-treeview .mud-treeview-item-content:focus-within {
  background-color: var(--color-dark-600);
  color: var(--color-dark-100);
}

/* Selected item — color gray-800 / dark-100 (sin bg saturado). */
.av-treeview .mud-treeview-item-selected > .mud-treeview-item-content {
  background-color: transparent;
  color: var(--color-gray-800);
}

html.dark
  .av-treeview
  .mud-treeview-item-selected
  > .mud-treeview-item-content {
  color: var(--color-dark-100);
}

/* Chevron — rotate 90° cuando expanded (replica el demo). Mud usa
   .mud-treeview-item-arrow-expand class on toggle. */
.av-treeview .mud-treeview-item-arrow {
  color: var(--color-gray-500);
  transition: transform 200ms ease;
}

html.dark .av-treeview .mud-treeview-item-arrow {
  color: var(--color-dark-300);
}

/* Indent — pl-4 (16 px) entre niveles, replica el spacing del demo. */
.av-treeview .mud-treeview-group {
  padding-left: 16px;
}

/* Text typography — font-medium (500) + tracking-wide ya en item-content. */
.av-treeview .mud-treeview-item-content .mud-typography {
  font-weight: 500;
}

/* Icon slot — el icon (folder, file, etc.) renderea via Mud Icon parameter
   en MudTreeViewItem. Gap 12 px entre chevron y icon, y entre icon y text. */
.av-treeview .mud-treeview-item-icon {
  margin-right: 12px;
}

/* Max-width wrapper para showcase (treeview se renderea a 320 px = max-w-xs). */
.av-treeview-max-xs {
  max-width: 320px;
}

/* ============================================================================
 * §66 ─── Av-Dropdown — MudMenu Guía Visual popover look (opt-in)
 * ----------------------------------------------------------------------------
 * Replica el visual del demo Guía Visual components/dropdown: panel rounded-lg
 * border + shadow-lg + bg-white / dark-700, items height 36 con tracking-wide
 * + hover bg gray-100 / dark-600. El skin se aplica via PopoverClass= sobre
 * el MudMenu — scope-restringido a .av-dropdown-menu, cero impacto sobre
 * MudMenu de producción.
 *
 * NOTA SOBRE EL SELECTOR: MudMenu renderiza un MudList dentro del popover
 * con clase .mud-menu-list, y cada MudMenuItem es .mud-menu-item. NO usa
 * .mud-list-item (eso es para MudList standalone).
 *
 * Aplicación:
 *   <MudMenu PopoverClass="av-dropdown-menu">
 *     <ActivatorContent>...</ActivatorContent>
 *     <ChildContent>
 *       <MudMenuItem>Action</MudMenuItem>
 *       <MudDivider />
 *       <MudMenuItem>Separated</MudMenuItem>
 *     </ChildContent>
 *   </MudMenu>
 * ============================================================================ */

/* Panel — el popover wrapper que envuelve la lista de items. PopoverClass
   se aplica al .mud-popover-open root, no al list interno. Apuntamos al
   list interno via descendant. */
.av-dropdown-menu.mud-popover {
  min-width: 11rem;
  /* 176 px — replica min-w-[11rem] del demo */
  padding: 4px 0;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevation-3);
}

html.dark .av-dropdown-menu.mud-popover {
  background-color: var(--color-dark-700);
  border-color: var(--color-dark-500);
  box-shadow: none;
}

/* MudList interno — sin padding extra (Mud aplica su propio gutter). */
.av-dropdown-menu .mud-menu-list,
.av-dropdown-menu .mud-list {
  padding: 0;
  background-color: transparent;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

/* Items — height 36 + padding 12 + tracking-wide + hover bg gray-100. */
.av-dropdown-menu .mud-menu-item,
.av-dropdown-menu .mud-list-item {
  height: 36px;
  min-height: 36px;
  padding: 0 12px;
  letter-spacing: 0.025em;
  color: var(--color-gray-600);
  transition:
    background-color 150ms ease,
    color 150ms ease;
  white-space: nowrap;
}

.av-dropdown-menu .mud-menu-item:hover,
.av-dropdown-menu .mud-menu-item:focus,
.av-dropdown-menu .mud-list-item:hover,
.av-dropdown-menu .mud-list-item:focus {
  background-color: var(--color-gray-100);
  color: var(--color-gray-800);
}

html.dark .av-dropdown-menu .mud-menu-item,
html.dark .av-dropdown-menu .mud-list-item {
  color: var(--color-dark-200);
}

html.dark .av-dropdown-menu .mud-menu-item:hover,
html.dark .av-dropdown-menu .mud-menu-item:focus,
html.dark .av-dropdown-menu .mud-list-item:hover,
html.dark .av-dropdown-menu .mud-list-item:focus {
  background-color: var(--color-dark-600);
  color: var(--color-dark-100);
}

/* Icon prefix — gap 12 px entre icon y text, color heredado del item. */
.av-dropdown-menu .mud-menu-item-icon,
.av-dropdown-menu .mud-list-item-icon {
  min-width: 0;
  margin-right: 12px;
  color: inherit;
}

.av-dropdown-menu .mud-menu-item-icon .mud-icon-root,
.av-dropdown-menu .mud-list-item-icon .mud-icon-root {
  width: 18px;
  height: 18px;
}

/* Divider — replica el <hr className="mx-3 my-1.5 border-gray-150"> del demo. */
.av-dropdown-menu .mud-divider {
  margin: 6px 12px;
  border-color: var(--color-gray-150);
}

html.dark .av-dropdown-menu .mud-divider {
  border-color: var(--color-dark-500);
}

/* Scrollable modifier — max-height + overflow-y (demo Scrollable section).
   Restablece overflow-y: auto que el bloque base deshabilitó por default. */
.av-dropdown-menu.av-dropdown-menu--scrollable .mud-menu-list,
.av-dropdown-menu.av-dropdown-menu--scrollable .mud-list {
  max-height: 240px;
  overflow-y: auto !important;
}

/* ============================================================================
 * §67 ─── Av-Popover — MudPopover Guía Visual panel (opt-in)
 * ----------------------------------------------------------------------------
 * Replica el visual del demo Guía Visual components/popover: panel con border +
 * radius + shadow + bg-white/dark-750. Visualmente similar a ContextualHelp
 * (§64) pero como clases independientes para evitar acoplamiento semántico —
 * Popover != ContextualHelp aunque el styling sea idéntico. Si alguien tunea
 * el ContextualHelp en el futuro, el Popover queda intocado y viceversa.
 *
 * Cada clase lleva prefix `.av-popover-*` — opt-in puro, cero impacto sobre
 * MudPopover de producción.
 *
 * Aplicación:
 *   <MudButton OnClick="@(() => _open = !_open)">Trigger</MudButton>
 *   <MudOverlay Visible="@_open" OnClick="@(() => _open = false)" DarkBackground="false" />
 *   <MudPopover Open="@_open" AnchorOrigin="..." TransformOrigin="...">
 *     <MudPaper Class="av-popover-panel av-popover-panel--w-80">
 *       <h3 class="av-popover-title">Title</h3>
 *       <p class="av-popover-body">Body</p>
 *       <p class="av-popover-meta">Footer meta</p>
 *     </MudPaper>
 *   </MudPopover>
 * ============================================================================ */

/* Panel — surface base con border + radius + shadow + bg. Width via modifier. */
.av-popover-panel.mud-paper {
  padding: 16px;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-elevation-3);
  overflow: hidden;
}

html.dark .av-popover-panel.mud-paper {
  background-color: var(--color-dark-750);
  border-color: var(--color-dark-500);
  box-shadow: none;
}

/* Width modifiers — replican w-64 / w-72 / w-80 / w-96 del demo. */
.av-popover-panel.av-popover-panel--w-64.mud-paper {
  width: 256px;
}

.av-popover-panel.av-popover-panel--w-72.mud-paper {
  width: 288px;
}

.av-popover-panel.av-popover-panel--w-80.mud-paper {
  width: 320px;
}

.av-popover-panel.av-popover-panel--w-96.mud-paper {
  width: 384px;
}

/* Padding modifier — algunos panels (Links, Filter) usan zero-padding al
   wrapper porque tienen sub-sections con su propio padding (footer gray bg). */
.av-popover-panel.av-popover-panel--p-0.mud-paper {
  padding: 0;
}

/* Title — h3 14 px / 600 / gray-800 (similar a contextual help pero independiente). */
.av-popover-title {
  margin: 0 0 8px;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.025em;
  color: var(--color-gray-800);
}

html.dark .av-popover-title {
  color: var(--color-dark-100);
}

/* Subtitle — text 14 px / 500 / gray-600 (entre title y body). */
.av-popover-subtitle {
  margin: 0 0 4px;
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-gray-600);
}

html.dark .av-popover-subtitle {
  color: var(--color-dark-100);
}

/* Body — text 14 px regular gray-500 (muted, mismo nivel que ContextualHelp). */
.av-popover-body {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-gray-500);
}

html.dark .av-popover-body {
  color: var(--color-dark-200);
}

/* Meta — text 12 px muted al final del panel (timestamps, hints). */
.av-popover-meta {
  margin: 0;
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--color-gray-400);
}

html.dark .av-popover-meta {
  color: var(--color-dark-300);
}

/* Divider — hr separator entre secciones del panel (forms, links). */
.av-popover-divider {
  margin: 16px 0;
  border: 0;
  border-top: 1px solid var(--color-gray-200);
}

html.dark .av-popover-divider {
  border-top-color: var(--color-dark-500);
}

/* Section gray — footer con bg gray-100 que extiende edge-to-edge dentro
   del panel (cuando av-popover-panel--p-0 está activo). */
.av-popover-section-gray {
  padding: 16px 28px;
  background-color: var(--color-gray-100);
}

html.dark .av-popover-section-gray {
  background-color: var(--color-dark-800);
}

/* Link card — patrón del demo Links: row clickeable con icon + name + desc,
   hover bg gray-100. */
.av-popover-link-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: background-color 150ms ease;
}

.av-popover-link-card:hover {
  background-color: var(--color-gray-100);
}

html.dark .av-popover-link-card:hover {
  background-color: var(--color-dark-600);
}

.av-popover-link-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background-color: var(--color-gray-100);
  color: var(--color-primary-500);
  flex-shrink: 0;
}

html.dark .av-popover-link-card__icon {
  background-color: var(--color-dark-600);
  color: var(--color-primary-400);
}

.av-popover-link-card__title {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-gray-800);
  margin: 0 0 2px;
}

html.dark .av-popover-link-card__title {
  color: var(--color-dark-50);
}

.av-popover-link-card__desc {
  display: block;
  font-size: var(--text-xs-plus);
  color: var(--color-gray-500);
  margin: 0;
}

html.dark .av-popover-link-card__desc {
  color: var(--color-dark-200);
}

/* Link plain — quita text-decoration del <a> dentro del footer gray sin
   convertirlo en link-card (mantiene tipografía propia). */
.av-popover-link-plain {
  text-decoration: none;
  color: inherit;
}

.av-popover-link-plain:hover {
  text-decoration: underline;
}

/* Title inline modifier — quita el margin-bottom 8px para cuando el title
   va en un row flex (Filter header, etc.). */
.av-popover-title.av-popover-title--inline {
  margin: 0;
}

/* Section gray compact — padding 12/16/8 cuando el footer/header lleva
   un input dentro y necesita menos breathing room. */
.av-popover-section-gray.av-popover-section-gray--compact {
  padding: 12px 16px 8px;
}

/* Avatar stack — fila de avatars con overlap negativo (Advanced section). */
.av-popover-avatar-stack {
  display: flex;
  flex-direction: row;
}

.av-popover-avatar-stack > * + * {
  margin-left: -6px;
}

.av-popover-avatar-stack .mud-avatar {
  border: 2px solid var(--color-white);
}

html.dark .av-popover-avatar-stack .mud-avatar {
  border-color: var(--color-dark-700);
}

/* List scroll — max-height + overflow-y para listas largas dentro del panel
   (Filter section con 6+ people). overflow-x: hidden evita shifts cuando
   la scrollbar Y aparece y consume ancho. */
.av-popover-list-scroll {
  max-height: 360px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Person item — fila clickeable con avatar + name + position. Selected
   state pinta bg primary + text white (replica Combobox del demo). El
   padding-right es menor que padding-left para compensar el width que
   consume la scrollbar Y del list-scroll padre (visualmente queda parejo). */
.av-popover-person-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 8px 10px 12px;
  background-color: transparent;
  border: 0;
  cursor: pointer;
  text-align: start;
  transition: background-color 150ms ease;
}

.av-popover-person-item:hover {
  background-color: var(--color-gray-100);
}

html.dark .av-popover-person-item:hover {
  background-color: var(--color-dark-600);
}

.av-popover-person-item.av-popover-person-item--selected {
  background-color: var(--color-primary-600);
}

html.dark .av-popover-person-item.av-popover-person-item--selected {
  background-color: var(--color-primary-500);
}

.av-popover-person-item.av-popover-person-item--selected
  .av-popover-link-card__title,
.av-popover-person-item.av-popover-person-item--selected
  .av-popover-link-card__desc {
  color: var(--color-white);
}

.av-popover-person-item.av-popover-person-item--selected
  .av-popover-link-card__desc {
  color: rgb(from var(--color-white) r g b / 0.85);
}

/* Body xs-plus modifier — para body más compact en Forms description. */
.av-popover-body.av-popover-body--xs-plus {
  font-size: var(--text-xs-plus);
}

/* People list — wrapper para MudList nativo usado en sec Filter. Override
   defaults Mud para edge-to-edge sin padding extra + selected state primary
   saturated (replica el demo Guía Visual). */
.av-popover-people-list.mud-list {
  padding: 0;
  max-height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: transparent;
}

.av-popover-people-list .mud-list-item {
  padding: 10px 16px;
}

.av-popover-people-list .mud-list-item:hover {
  background-color: var(--color-gray-100);
}

html.dark .av-popover-people-list .mud-list-item:hover {
  background-color: var(--color-dark-600);
}

/* Selected state — bg primary saturado + text white. */
.av-popover-people-list .mud-list-item.mud-selected-item,
.av-popover-people-list .mud-list-item-selected {
  background-color: var(--color-primary-600) !important;
  color: var(--color-white) !important;
}

html.dark .av-popover-people-list .mud-list-item.mud-selected-item,
html.dark .av-popover-people-list .mud-list-item-selected {
  background-color: var(--color-primary-500) !important;
}

.av-popover-people-list .mud-list-item.mud-selected-item .mud-list-item-text,
.av-popover-people-list .mud-list-item-selected .mud-list-item-text,
.av-popover-people-list
  .mud-list-item.mud-selected-item
  .mud-list-item-secondary-text,
.av-popover-people-list .mud-list-item-selected .mud-list-item-secondary-text {
  color: var(--color-white);
}

/* Typography del item — tighter alineado con el demo Guía Visual. */
.av-popover-people-list .mud-list-item-text {
  font-size: var(--text-xs-plus);
  font-weight: 500;
  line-height: 1.4;
}

.av-popover-people-list .mud-list-item-secondary-text {
  font-size: var(--text-xs);
  margin-top: 2px;
  color: var(--color-gray-500);
}

html.dark .av-popover-people-list .mud-list-item-secondary-text {
  color: var(--color-dark-300);
}

/* Avatar slot — margin-right tight. */
.av-popover-people-list .mud-list-item-avatar {
  min-width: 0;
  margin-right: 12px;
}

/* Advanced trigger — width 256 + padding vertical generoso + justify space-between
   para layouts rich (avatar + name + role + chevron). Replica el patrón del
   demo Guía Visual Advanced. Modifier aditivo sobre av-btn / av-btn-outlined. */
.av-dropdown-advanced-trigger.mud-button-root {
  width: 256px;
  padding: 18px 16px !important;
  justify-content: space-between;
  height: auto !important;
}

.av-dropdown-advanced-trigger.mud-button-root .mud-button-label {
  justify-content: space-between;
  width: 100%;
  gap: 12px;
}

/* Prevent scroll horizontal en el panel + el list interno. Por default Mud
   aplica .mud-list { overflow-y: auto } que muestra scrollbar Y ocupando
   width y empujando el contenido a generar scroll X. Override a hidden
   en ambos ejes cuando NO es scrollable. */
.av-dropdown-menu,
.av-dropdown-menu.mud-popover {
  overflow: hidden !important;
  box-sizing: border-box;
}

.av-dropdown-menu .mud-menu-item,
.av-dropdown-menu .mud-list-item {
  white-space: nowrap;
}

/* av-info-section__title-block / __subtitle — opt-in extension of the
   canonical av-info-section header for cards that need a one-line
   description under the section title. Composes with av-section-title
   (Typo.h5) on top and Typo.body2 on the description. */
.av-info-section__title-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.av-info-section__title-block .av-section-title.mud-typography {
  margin: 0;
}

.av-info-section__subtitle.mud-typography {
  color: var(--color-gray-500);
  margin: 0;
}

html.dark .av-info-section__subtitle.mud-typography {
  color: var(--color-dark-300);
}

/* ────────────────────────────────────────────────────────────────────────
   av-family-* — Family tab visual skin (ViewContact > Family).
   Five cards stacked vertically: Header (no chevron), Current
   Relationships (chevron), Marriage Information (chevron), Marriage
   History (chevron + left badge), Family Members table (no chevron).
   ──────────────────────────────────────────────────────────────────────── */

.av-family-tab {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.av-family-tab__toolbar {
  display: flex;
  justify-content: flex-end;
}

.av-family-card.av-card {
  padding: 0;
  overflow: hidden;
}

.av-family-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-gray-200);
}

html.dark .av-family-card__head {
  border-bottom-color: var(--color-dark-500);
}

.av-family-card__head-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}

.av-family-card__body {
  padding: 14px 16px;
}

.av-family-card__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--color-gray-500);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    background-color 120ms ease,
    color 120ms ease;
  flex-shrink: 0;
}

html.dark .av-family-card__chevron {
  color: var(--color-dark-300);
}

.av-family-card__chevron:hover {
  background: var(--color-gray-100);
  color: var(--color-gray-700);
}

html.dark .av-family-card__chevron:hover {
  background: var(--color-dark-600);
  color: var(--color-dark-100);
}

.av-family-card__chevron .mud-icon-root {
  width: 18px;
  height: 18px;
  color: inherit;
  transition: transform 200ms ease;
}

.av-family-card__chevron.is-open .mud-icon-root {
  transform: rotate(180deg);
}

.av-family-card__head-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  background: var(--color-gray-800);
  color: var(--color-white);
  flex-shrink: 0;
}

html.dark .av-family-card__head-badge {
  background: var(--color-dark-300);
  color: var(--color-dark-800);
}

.av-family-card__head-badge .mud-icon-root {
  width: 14px;
  height: 14px;
  color: inherit;
}

/* ── Header card ───────────────────────────────────────────────────────── */

.av-family-header__avatar.mud-avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.av-family-header__title.mud-typography {
  color: var(--color-gray-800);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.dark .av-family-header__title.mud-typography {
  color: var(--color-dark-50);
}

.av-family-header__menu-btn {
  margin-left: auto;
  color: var(--color-gray-500);
}

html.dark .av-family-header__menu-btn {
  color: var(--color-dark-300);
}

.av-family-header__rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.av-family-header__row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.av-family-header__row-label.mud-typography {
  color: var(--color-gray-500);
  min-width: 72px;
}

html.dark .av-family-header__row-label.mud-typography {
  color: var(--color-dark-300);
}

.av-family-header__row-value.mud-typography {
  color: var(--color-gray-800);
}

html.dark .av-family-header__row-value.mud-typography {
  color: var(--color-dark-100);
}

.av-family-header__row-value--accent.mud-typography {
  color: var(--color-primary-600);
}

html.dark .av-family-header__row-value--accent.mud-typography {
  color: var(--color-primary-400);
}

/* ── Current Relationships ────────────────────────────────────────────── */

.av-family-rel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.av-family-rel-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--color-gray-100);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  min-width: 0;
}

html.dark .av-family-rel-item {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

.av-family-rel-item__avatar.mud-avatar {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.av-family-rel-item__text {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.av-family-rel-item__role.mud-typography {
  color: var(--color-gray-800);
  flex-shrink: 0;
}

html.dark .av-family-rel-item__role.mud-typography {
  color: var(--color-dark-50);
}

.av-family-rel-item__name.mud-typography {
  color: var(--color-primary-600);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

html.dark .av-family-rel-item__name.mud-typography {
  color: var(--color-primary-400);
}

.av-family-rel-item__chip.av-chip {
  flex-shrink: 0;
}

/* ── Marriage Information ─────────────────────────────────────────────── */

.av-family-marriage-panel {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
}

html.dark .av-family-marriage-panel {
  border-color: var(--color-dark-500);
}

.av-family-marriage-panel__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--color-gray-100);
  border-bottom: 1px solid var(--color-gray-200);
}

html.dark .av-family-marriage-panel__head {
  background: var(--color-dark-700);
  border-bottom-color: var(--color-dark-500);
}

.av-family-marriage-panel__heart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--color-error);
  flex-shrink: 0;
}

.av-family-marriage-panel__heart .mud-icon-root {
  width: 22px;
  height: 22px;
  color: inherit;
}

.av-family-marriage-panel__title.mud-typography {
  color: var(--color-gray-700);
}

html.dark .av-family-marriage-panel__title.mud-typography {
  color: var(--color-dark-200);
}

.av-family-marriage-panel__title-name.mud-typography {
  color: var(--color-primary-600);
  margin-left: 4px;
}

html.dark .av-family-marriage-panel__title-name.mud-typography {
  color: var(--color-primary-400);
}

.av-family-marriage-panel__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 10px 12px 10px 54px;
}

.av-family-marriage-panel__meta-item {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.av-family-marriage-panel__meta-label.mud-typography {
  color: var(--color-gray-500);
}

html.dark .av-family-marriage-panel__meta-label.mud-typography {
  color: var(--color-dark-300);
}

.av-family-marriage-panel__meta-value.mud-typography {
  color: var(--color-gray-800);
}

html.dark .av-family-marriage-panel__meta-value.mud-typography {
  color: var(--color-dark-100);
}

.av-family-marriage-panel__meta-sep.mud-typography {
  color: var(--color-gray-400);
  padding: 0 4px;
}

html.dark .av-family-marriage-panel__meta-sep.mud-typography {
  color: var(--color-dark-400);
}

/* ── Marriage History ─────────────────────────────────────────────────── */

.av-family-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.av-family-history-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.av-family-history-item__dash.mud-typography {
  color: var(--color-gray-400);
  flex-shrink: 0;
}

html.dark .av-family-history-item__dash.mud-typography {
  color: var(--color-dark-400);
}

.av-family-history-item__name.mud-typography {
  color: var(--color-gray-800);
  flex-shrink: 0;
}

html.dark .av-family-history-item__name.mud-typography {
  color: var(--color-dark-50);
}

.av-family-history-item__range.mud-typography {
  color: var(--color-gray-500);
}

html.dark .av-family-history-item__range.mud-typography {
  color: var(--color-dark-300);
}

/* ── Family Members table ─────────────────────────────────────────────── */

.av-family-members__name {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.av-family-members__name-avatar.mud-avatar {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.av-family-members__email.mud-typography {
  color: var(--color-primary-600);
}

html.dark .av-family-members__email.mud-typography {
  color: var(--color-primary-400);
}

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .av-family-rel-grid {
    grid-template-columns: 1fr;
  }

  .av-family-marriage-panel__meta {
    padding-left: 12px;
  }

  .av-family-header__row-label.mud-typography {
    min-width: 64px;
  }
}

/* ────────────────────────────────────────────────────────────────────────
   av-profile-header / av-page-eyebrow / av-back-link / av-priority —
   skin for the shared contact / company / household details header.
   ──────────────────────────────────────────────────────────────────────── */

/* Eyebrow above the back button: small uppercase tag + muted subtitle. */
.av-page-eyebrow {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 4px 4px;
}

.av-page-eyebrow__tag.mud-typography {
  color: var(--color-gray-500);
  letter-spacing: 0.08em;
}

html.dark .av-page-eyebrow__tag.mud-typography {
  color: var(--color-dark-300);
}

.av-page-eyebrow__subtitle.mud-typography {
  color: var(--color-gray-600);
}

html.dark .av-page-eyebrow__subtitle.mud-typography {
  color: var(--color-dark-200);
}

/* "Back to Contacts" — flat text button, no card chrome. */
.av-back-link-wrap {
  padding: 6px 0 10px;
}

.av-back-link.mud-button-root {
  text-transform: none;
  color: var(--color-gray-600);
  padding: 4px 8px;
  border-radius: var(--radius-md);
}

html.dark .av-back-link.mud-button-root {
  color: var(--color-dark-200);
}

.av-back-link.mud-button-root:hover {
  background: var(--color-gray-100);
  color: var(--color-gray-800);
}

html.dark .av-back-link.mud-button-root:hover {
  background: var(--color-dark-600);
  color: var(--color-dark-50);
}

.av-back-link .mud-icon-root {
  width: 16px;
  height: 16px;
}

/* ────────────────────────────────────────────────────────────────────────
   av-profile-header — Tailux-style contact details header.
   Layout (mobile-first, flex-row on >=1024px):
     [avatar column]  [identity column (grow)]  [priority column]
   ──────────────────────────────────────────────────────────────────────── */

.av-profile-header.av-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 24px 28px;
}

/* TOP ROW — avatar / identity / priority. Mobile = column, >=1024px = row.
   The responsive flex-row used to live on .av-profile-header.av-card itself,
   but the card now hosts both the top row AND the info row below the divider,
   so the row layout moved here. */
.av-profile-header__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

@media (min-width: 1024px) {
  .av-profile-header__top {
    flex-direction: row;
    align-items: center;
    gap: 24px;
  }
}

/* Avatar column — favorite overlays the avatar, upload trigger below. */
.av-profile-header__avatar-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.av-profile-header__avatar-box {
  position: relative;
  width: 7rem;
  height: 7rem;
  flex-shrink: 0;
}

/* AvatarShared renders either an <img class="cv-avatar-img"> or a
   <div class="cv-avatar"> (initials fallback). Both get the same disc
   treatment so the layout doesn't shift between the two states.
   Size bumped to 7rem (112 px) to match the hero avatar in the
   contact details header. */
.av-profile-header__avatar-box .cv-avatar,
.av-profile-header__avatar-box .cv-avatar-img {
  width: 7rem;
  height: 7rem;
  border-radius: var(--radius-full);
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 26px;
  color: var(--color-white);
  background: linear-gradient(
    135deg,
    var(--color-primary-500) 0%,
    var(--color-primary-700) 100%
  );
}

/* AvatarShared renders BpFileUpload inside `.cv-upload-action`. That
   component owns both the hidden <InputFile> AND the visible MudButton
   acting as <label for="..."> — the latter is what actually opens the
   file picker. BpFileUpload randomizes the id at OnInitialized, so we
   CANNOT route clicks through an external <label> with a fixed id.
   Instead we keep the BpFileUpload MudButton visible and reshape it
   into a tiny pencil-icon circle overlapping the bottom-right corner of
   the avatar (Tailux's "edit avatar" affordance). */

/* Outer "ring" — 30×30 white disc anchored to the avatar's bottom-right
   corner with a -4 px outset (matches Tailux `-m-1`). `overflow:hidden`
   clips anything the Mud scaffolding tries to render beyond the disc,
   so the circle stays perfect no matter what MudGrid / MudStack do. */
.av-profile-header__avatar-box .cv-upload-action {
  position: absolute;
  bottom: -4px;
  right: -4px;
  z-index: 1;
  width: 30px;
  height: 30px;
  padding: 3px;
  box-sizing: border-box;
  background: var(--color-white);
  border-radius: var(--radius-full);
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

html.dark .av-profile-header__avatar-box .cv-upload-action {
  background: var(--color-dark-700);
}

/* MudGrid / MudGridItem / MudStack scaffolding — collapse them to a 24×24
   slot so the button doesn't inherit `xs="12"` full-width / row-flex
   stretch. Width pinned + min-width / max-width clamp prevents Mud's
   `width:100%` from winning at higher specificity. */
.av-profile-header__avatar-box .cv-upload-action .mud-grid,
.av-profile-header__avatar-box .cv-upload-action .mud-grid-item,
.av-profile-header__avatar-box .cv-upload-action .mud-stack {
  margin: 0 !important;
  padding: 0 !important;
  width: 24px !important;
  min-width: 0 !important;
  max-width: 24px !important;
  height: 24px !important;
  flex-basis: 24px !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  gap: 0 !important;
  align-items: center !important;
  justify-content: center !important;
}

/* The actual visible button — 24×24 gray circle. Five-class selector +
   !important wins against Mud's internal `min-width: 64px` etc. */
.av-profile-header.av-card
  .av-profile-header__avatar-box
  .cv-upload-action
  .mud-button-root {
  margin: 0 !important;
  padding: 0 !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  border: none !important;
  background: var(--color-gray-150, #ebebeb) !important;
  color: var(--color-gray-900) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border-radius: var(--radius-full) !important;
  box-shadow: none !important;
  transition: background-color 120ms ease;
}

html.dark
  .av-profile-header.av-card
  .av-profile-header__avatar-box
  .cv-upload-action
  .mud-button-root {
  background: var(--color-dark-600) !important;
  color: var(--color-dark-50) !important;
}

.av-profile-header.av-card
  .av-profile-header__avatar-box
  .cv-upload-action
  .mud-button-root:hover {
  background: var(--color-gray-200) !important;
}

html.dark
  .av-profile-header.av-card
  .av-profile-header__avatar-box
  .cv-upload-action
  .mud-button-root:hover {
  background: var(--color-dark-500) !important;
}

/* Replace the "Upload Avatar" text inside the MudButton with a pencil
   glyph injected via ::before. The text node is collapsed (font-size 0)
   so only the icon shows. SVG path is Heroicons "PencilSquare" in mini /
   tabler-pencil style — matches the Tailux reference's edit affordance. */
.av-profile-header__avatar-box .cv-upload-action .mud-button-label {
  font-size: 0 !important;
  line-height: 0 !important;
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.av-profile-header__avatar-box .cv-upload-action .mud-button-label::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='black'><path d='M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z'/></svg>")
    no-repeat center / contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='black'><path d='M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z'/></svg>")
    no-repeat center / contain;
  vertical-align: middle;
}

/* Favorite — small circular badge overlapping the top-right of the avatar.
   With the bumped 7rem (112 px) circular avatar, the badge sits INSIDE the
   disc at 10/10 from the corner instead of overflowing it with -4/-4. */
.av-profile-header__favorite {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
}

.av-profile-header__favorite .cv-favorite-btn {
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: var(--radius-full);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
  color: var(--color-gray-400);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    color 120ms ease,
    border-color 120ms ease,
    transform 120ms ease;
}

html.dark .av-profile-header__favorite .cv-favorite-btn {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
  color: var(--color-dark-300);
}

.av-profile-header__favorite .cv-favorite-btn:hover:not(:disabled) {
  color: var(--color-warning);
  border-color: var(--color-warning);
  transform: scale(1.1);
}

.av-profile-header__favorite .cv-favorite-btn.active {
  color: var(--color-warning);
  border-color: rgb(from var(--color-warning) r g b / 0.35);
  background: rgb(from var(--color-warning) r g b / 0.12);
}

html.dark .av-profile-header__favorite .cv-favorite-btn.active {
  background: rgb(from var(--color-warning) r g b / 0.18);
}

.av-profile-header__favorite .cv-favorite-btn .mud-icon-root {
  width: 14px;
  height: 14px;
  color: inherit;
}

.av-profile-header__favorite .cv-favorite-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Identity column — name row + subtitle row. */
.av-profile-header__identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

@media (min-width: 1024px) {
  .av-profile-header__identity {
    align-items: flex-start;
  }
}

.av-profile-header__name-row {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  min-width: 0;
}

@media (min-width: 1024px) {
  .av-profile-header__name-row {
    justify-content: flex-start;
  }
}

.av-profile-header__name.mud-typography {
  color: var(--color-gray-800);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.dark .av-profile-header__name.mud-typography {
  color: var(--color-dark-50);
}

/* Preferred name — sits inline next to the formal name like the Tailux
   Follow link. Primary color, no border, small text. */
.av-profile-header__preferred {
  color: var(--color-primary-600);
  font-size: 12px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.dark .av-profile-header__preferred {
  color: var(--color-primary-400);
}

/* Name pronunciation hint — same look as "Goes by", with a small speaker icon. */
.av-profile-header__pronunciation {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.av-profile-header__pronunciation .mud-icon-root {
  width: 14px;
  height: 14px;
}

/* Pencil for "Edit Name & Identity" — small neutral disc. Matches the
   av-edit-btn pattern used on the PersonalInfo card so the affordance reads
   the same wherever it shows up. */
/* Generic round icon-action button (edit / remove / etc.). Originally lived only
   as the profile-header name-edit button; `.av-icon-action-btn` is the reusable,
   non-header-specific alias — use it for inline row/card actions anywhere. Both
   selectors share the exact same look: 32px gray pill, hover → brand primary. */
.av-profile-header__name-edit.mud-icon-button,
.av-icon-action-btn.mud-icon-button {
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    border-radius: 9999px;
    color: var(--color-gray-500);
    background: var(--color-gray-100);
    transition: color 120ms ease, background-color 120ms ease;
}

html.dark .av-profile-header__name-edit.mud-icon-button,
html.dark .av-icon-action-btn.mud-icon-button {
    color: var(--color-dark-200);
    background: var(--color-dark-600);
}

.av-profile-header__name-edit.mud-icon-button:hover,
.av-icon-action-btn.mud-icon-button:hover {
    color: var(--color-primary-600);
    background: rgb(from var(--color-primary-600) r g b / 0.10);
}

html.dark .av-profile-header__name-edit.mud-icon-button:hover,
html.dark .av-icon-action-btn.mud-icon-button:hover {
    color: var(--color-primary-400);
    background: rgb(from var(--color-primary-400) r g b / 0.15);
}

.av-profile-header__name-edit .mud-icon-root,
.av-icon-action-btn .mud-icon-root {
    width: 16px;
    height: 16px;
}

/* Soft-success square icon button — light green surface + green icon (sibling of
   av-soft-btn-primary / av-edit-btn). Used for the convert-to-partner affordance. */
.av-soft-btn-success.mud-icon-button {
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0;
    border-radius: var(--radius-lg);
    background: rgb(from var(--color-success) r g b / 0.12);
    color: var(--color-success);
    transition: background-color 150ms ease, color 150ms ease;
}

.av-soft-btn-success.mud-icon-button:hover {
    background: rgb(from var(--color-success) r g b / 0.20);
    color: var(--color-success-darker);
}

html.dark .av-soft-btn-success.mud-icon-button {
    background: rgb(from var(--color-success-lighter) r g b / 0.15);
    color: var(--color-success-lighter);
}

.av-soft-btn-success.mud-icon-button .mud-icon-root,
.av-soft-btn-success.mud-icon-button svg {
    width: 18px;
    height: 18px;
}

/* Danger modifier — idle stays neutral gray (like the base), but hover reveals the
   destructive color. Use on remove/delete actions: `av-icon-action-btn av-icon-action-btn--danger`.
   Placed after the base hover so it wins at equal specificity. */
.av-icon-action-btn--danger.mud-icon-button:hover {
    color: var(--color-error);
    background: rgb(from var(--color-error) r g b / 0.10);
}

html.dark .av-icon-action-btn--danger.mud-icon-button:hover {
    color: var(--color-error-lighter);
    background: rgb(from var(--color-error-lighter) r g b / 0.15);
}

/* ── Employment profile cards (Professional Information tab) ─────────────── */
.av-emp-card.mud-paper {
  border-radius: 12px;
}

.av-emp-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.av-emp-card__head-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.av-emp-card__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Delete reuses the name-edit chrome but hovers in the danger color. */
.av-emp-card__delete.mud-icon-button:hover {
  color: var(--color-error);
  background: rgb(from var(--color-error) r g b / 0.1);
}

html.dark .av-emp-card__delete.mud-icon-button:hover {
  color: var(--color-error-lighter);
  background: rgb(from var(--color-error-lighter) r g b / 0.15);
}

/* Even, responsive label/value grid so the details read cleanly. */
.av-emp-card__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 16px 24px;
}

.av-emp-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.av-emp-field__label.mud-typography {
  color: var(--color-gray-500);
}

html.dark .av-emp-field__label.mud-typography {
  color: var(--color-dark-300);
}

.av-emp-field__value.mud-typography {
  color: var(--color-gray-800);
  overflow-wrap: anywhere;
}

html.dark .av-emp-field__value.mud-typography {
  color: var(--color-dark-100);
}

/* ── Chips row — salutation pill + gender pill + sync badge + briefing.
   Sits directly below the name row, wraps gracefully on narrow widths. */
.av-profile-header__chips-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  justify-content: center;
}

@media (min-width: 1024px) {
  .av-profile-header__chips-row {
    justify-content: flex-start;
  }
}

/* Meta block under the name (Individual header): Age · Pronunciation / Marital Status ·
   Gender / Google sync. Stacked lines, centered on mobile, left-aligned on desktop. */
.av-profile-header__meta {
  display: flex;
  flex-direction: column;
  /* Children share the same left edge (Age / chips / Google sync all aligned);
       the block itself is centered as a unit under the name by the identity column. */
  align-items: flex-start;
  gap: 6px;
  margin-top: 8px;
}

.av-profile-header__meta-line {
  color: var(--color-gray-600);
}

html.dark .av-profile-header__meta-line {
  color: var(--color-dark-200);
}

/* Line 1 of the meta block — Age + pronunciation hint, side by side. */
.av-profile-header__age-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* Chips row inside the meta block (Marital Status + Gender). */
.av-profile-header__meta-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Solid pill — base geometry. Filled background, white text, rounded
   rectangle (NOT pill-shape) to match the brand chip recipe.
   Typography (size/weight) comes from MudText Typo="Typo.subtitle2" on the
   markup side; this class owns only color, background, padding, geometry. */
.av-profile-header__pill.mud-typography {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 16px;
  border-radius: var(--radius-md);
  color: var(--color-white);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Salutation pill — brand primary (theme-aware via design tokens). */
.av-profile-header__pill--salutation {
  background: var(--color-primary-600);
}

html.dark .av-profile-header__pill--salutation {
  background: var(--color-primary-500);
}

/* Gender pill — success green. Used as a quick visual differentiator from
   the salutation chip; not semantic of state. */
.av-profile-header__pill--gender {
  background: var(--color-success);
}

html.dark .av-profile-header__pill--gender {
  background: var(--color-success-lighter, var(--color-success));
}

/* Marital status pill — info/sky, to differentiate from the gender chip. */
.av-profile-header__pill--marital {
  background: var(--color-info);
}

html.dark .av-profile-header__pill--marital {
  background: var(--color-info-lighter, var(--color-info));
}

/* Military status pill — blue. */
.av-profile-header__pill--military {
  background: var(--color-blue-600);
}

html.dark .av-profile-header__pill--military {
  background: var(--color-blue-500);
}

/* Military spouse pill — purple. */
.av-profile-header__pill--military-spouse {
  background: var(--color-purple-600);
}

html.dark .av-profile-header__pill--military-spouse {
  background: var(--color-purple-500);
}

/* ── Divider between the top row and the info row. */
.av-profile-header__divider.mud-divider {
  width: 100%;
  margin: 20px 0 16px;
  border-color: var(--color-gray-200);
}

html.dark .av-profile-header__divider.mud-divider {
  border-color: var(--color-dark-500);
}

/* ── Info row — Email · Phone · Address · Place of Birth · Birthday,
   pipe-separated. Each item is a label + value pair; vertical "|" separators
   are painted with ::after on every item except the last (skipped via
   :last-child). Wraps on narrow viewports — the wrapped lines drop the
   separator. */
.av-profile-header__info-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  width: 100%;
}

/* Address sits on its own line below the data row — separated so it doesn't
   crowd the items above (which keep their own intra-row gap). */
.av-profile-header__info-row--address {
  margin-top: 10px;
}

.av-profile-header__info-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  padding-right: 20px;
  color: var(--color-gray-700);
}

html.dark .av-profile-header__info-item {
  color: var(--color-dark-100);
}

.av-profile-header__info-item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 16px;
  background: var(--color-gray-300);
}

html.dark .av-profile-header__info-item:not(:last-child)::after {
  background: var(--color-dark-400);
}

.av-profile-header__info-icon.mud-icon-root {
  width: 18px;
  height: 18px;
  color: var(--color-gray-500);
  flex-shrink: 0;
}

html.dark .av-profile-header__info-icon.mud-icon-root {
  color: var(--color-dark-300);
}

.av-profile-header__info-label.mud-typography {
  color: var(--color-gray-500);
  letter-spacing: 0.04em;
}

html.dark .av-profile-header__info-label.mud-typography {
  color: var(--color-dark-300);
}

.av-profile-header__info-value.mud-typography {
  color: var(--color-gray-800);
  font-weight: 600;
}

html.dark .av-profile-header__info-value.mud-typography {
  color: var(--color-dark-50);
}

/* Subtitle row — category type + briefing pill, inline. */
.av-profile-header__subtitle {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 2px;
}

@media (min-width: 1024px) {
  .av-profile-header__subtitle {
    justify-content: flex-start;
  }
}

.av-profile-header__category.mud-typography {
  color: var(--color-gray-600);
  text-transform: capitalize;
}

html.dark .av-profile-header__category.mud-typography {
  color: var(--color-dark-200);
}

.av-profile-header__category--individual.mud-typography {
  color: var(--color-primary-600);
}

html.dark .av-profile-header__category--individual.mud-typography {
  color: var(--color-primary-400);
}

.av-profile-header__category--company.mud-typography {
  color: var(--color-info);
}

.av-profile-header__category--family.mud-typography,
.av-profile-header__category--household.mud-typography {
  color: var(--color-success);
}

/* Briefing pill — outlined neutral. */
.av-profile-header__briefing {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: transparent;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-full);
  color: var(--color-gray-700);
  font-size: 12px;
  line-height: 1.2;
  cursor: pointer;
  transition:
    background-color 120ms ease,
    border-color 120ms ease;
}

html.dark .av-profile-header__briefing {
  border-color: var(--color-dark-500);
  color: var(--color-dark-100);
}

.av-profile-header__briefing:hover {
  background: var(--color-gray-100);
  border-color: var(--color-gray-300);
}

html.dark .av-profile-header__briefing:hover {
  background: var(--color-dark-600);
  border-color: var(--color-dark-400);
}

.av-profile-header__briefing .mud-icon-root {
  width: 14px;
  height: 14px;
  color: var(--color-primary-600);
  flex-shrink: 0;
}

html.dark .av-profile-header__briefing .mud-icon-root {
  color: var(--color-primary-400);
}

.av-profile-header__briefing-kbd {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  background: var(--color-gray-100);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  color: var(--color-gray-500);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1;
}

html.dark .av-profile-header__briefing-kbd {
  background: var(--color-dark-600);
  border-color: var(--color-dark-500);
  color: var(--color-dark-300);
}

/* Priority column — right rail (where the Tailux 3-dots menu sits). */
.av-profile-header__priority {
  flex-shrink: 0;
}

/* Desktop: raise the priority control to the top of the header row so it lines
   up with the contact name (instead of being vertically centered on the block). */
@media (min-width: 1024px) {
  .av-profile-header__priority {
    align-self: flex-start;
  }
}

/* Google "Synced" badge — sits directly below the identity subtitle row.
   Reuses av-tag av-tag--success for the canonical success-darker tint.
   The MudText inside is a <span>, not a .mud-button-label, so force the
   inner typography to inherit the badge color. The Google brand SVG keeps
   its own multi-color fills regardless. */
.av-profile-header__google-sync.av-tag {
  margin: 0;
}

.av-profile-header__google-sync .mud-typography {
  color: inherit;
}

/* Google "Push" button — the MudButton sibling of the __google-sync badge.
   Lives in the same chips-row, looks identical at rest but is interactive
   (click → push contact to Google). The .av-tag.av-tag--neutral pair owns
   the visual; this scoping only neutralizes Mud's internal margins/min
   metrics so the pill geometry matches the synced badge pixel-for-pixel. */
.av-profile-header__google-push.mud-button-root {
  margin: 0;
  min-height: auto;
  padding: 4px 8px;
}

.av-profile-header__google-push .mud-button-label {
  color: inherit;
}

/* MudButton's .mud-button-icon-start adds 8 px right-margin by default; the
   av-tag uses gap:4px on the host instead, so kill the Mud margin. */
.av-profile-header__google-push .mud-button-icon-start {
  margin: 0;
}

/* Google brand SVG inside the StartIcon must KEEP its multi-color fills —
   the av-tag's color cascade would otherwise repaint them via currentColor
   on any path that doesn't carry an explicit fill. The brand icon already
   has fills, this just guarantees its child <path>s aren't overridden. */
.av-profile-header__google-push .mud-button-icon-start .mud-icon-root,
.av-profile-header__google-push .mud-button-icon-start svg {
  width: 13px;
  height: 13px;
}

/* ── av-priority — Tailux-style priority chip ─────────────────────────── */

.av-priority {
  display: inline-flex;
  align-items: center;
}

/* Tailux badge recipe — `py-2` (2 px), `px-4` (16 px), `gap-2` (8 px),
   `rounded-full`, `border 1px`. Color + border-color + bg come from the
   per-bucket modifier below; the base selector only owns geometry.
   Native <button> reset (background:none, color:inherit, etc.) is forced
   so the host button doesn't paint over the bucket recipe. */
.av-priority__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 2px 16px;
  border-radius: var(--radius-full);
  background: transparent;
  color: inherit;
  border: 1px solid transparent;
  cursor: pointer;
  font: inherit;
  transition:
    background-color 120ms ease,
    border-color 120ms ease;
}

.av-priority__chip.is-readonly {
  cursor: default;
}

.av-priority__chip-label.mud-typography {
  color: inherit;
  font-size: 12px;
}

.av-priority__chip-caret.mud-icon-root {
  width: 14px;
  height: 14px;
  color: currentColor;
  opacity: 0.7;
}

.av-priority__spinner {
  width: 14px;
  height: 14px;
}

.av-priority__chip--loading {
  background: var(--color-gray-100);
  cursor: progress;
}

/* Dot — inside the chip it inherits `currentColor` so the badge reads
   as a single hue. Inside the popover option rows it keeps the base
   bucket color (option text is neutral gray, so the dot has to carry
   the bucket signal on its own). */
.av-priority__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: currentColor;
  flex-shrink: 0;
}

.av-priority__option--critical .av-priority__dot {
  background: var(--color-error);
}

.av-priority__option--high .av-priority__dot {
  background: var(--color-warning);
}

.av-priority__option--medium .av-priority__dot {
  background: var(--color-warning-light, var(--color-warning));
}

.av-priority__option--low .av-priority__dot {
  background: var(--color-info);
}

.av-priority__option--minimal .av-priority__dot {
  background: var(--color-gray-400);
}

/* Per-bucket chip recipe — Tailux `text-this-darker bg-this-darker/[0.07]
   border-this-darker/20`, dark mode flips to the `lighter` ramp. */
.av-priority__chip--critical {
  background: rgb(from var(--color-error-darker) r g b / 0.07);
  color: var(--color-error-darker);
  border-color: rgb(from var(--color-error-darker) r g b / 0.2);
}

html.dark .av-priority__chip--critical {
  background: rgb(from var(--color-error-lighter) r g b / 0.1);
  color: var(--color-error-lighter);
  border-color: rgb(from var(--color-error-lighter) r g b / 0.2);
}

.av-priority__chip--high {
  background: rgb(from var(--color-warning-darker) r g b / 0.07);
  color: var(--color-warning-darker);
  border-color: rgb(from var(--color-warning-darker) r g b / 0.2);
}

html.dark .av-priority__chip--high {
  background: rgb(from var(--color-warning-lighter) r g b / 0.1);
  color: var(--color-warning-lighter);
  border-color: rgb(from var(--color-warning-lighter) r g b / 0.2);
}

.av-priority__chip--medium {
  background: rgb(from var(--color-warning-darker) r g b / 0.05);
  color: var(--color-warning-darker);
  border-color: rgb(from var(--color-warning-darker) r g b / 0.16);
}

html.dark .av-priority__chip--medium {
  background: rgb(from var(--color-warning-lighter) r g b / 0.08);
  color: var(--color-warning-lighter);
  border-color: rgb(from var(--color-warning-lighter) r g b / 0.16);
}

.av-priority__chip--low {
  background: rgb(from var(--color-info-darker) r g b / 0.07);
  color: var(--color-info-darker);
  border-color: rgb(from var(--color-info-darker) r g b / 0.2);
}

html.dark .av-priority__chip--low {
  background: rgb(from var(--color-info-lighter) r g b / 0.1);
  color: var(--color-info-lighter);
  border-color: rgb(from var(--color-info-lighter) r g b / 0.2);
}

.av-priority__chip--minimal {
  background: rgb(from var(--color-gray-700) r g b / 0.05);
  color: var(--color-gray-700);
  border-color: rgb(from var(--color-gray-700) r g b / 0.18);
}

html.dark .av-priority__chip--minimal {
  background: rgb(from var(--color-dark-200) r g b / 0.08);
  color: var(--color-dark-200);
  border-color: rgb(from var(--color-dark-200) r g b / 0.2);
}

/* Popover & option rows. */
.av-priority__popover .mud-list {
  padding: 4px;
  min-width: 200px;
}

.av-priority__option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px;
  border-radius: var(--radius-md);
  min-width: 0;
  width: 100%;
}

.av-priority__option-label.mud-typography {
  color: var(--color-gray-800);
  flex: 1 1 auto;
  min-width: 0;
}

html.dark .av-priority__option-label.mud-typography {
  color: var(--color-dark-100);
}

.av-priority__option-rank.mud-typography {
  color: var(--color-gray-400);
  font-family: var(--font-mono);
  flex-shrink: 0;
}

html.dark .av-priority__option-rank.mud-typography {
  color: var(--color-dark-400);
}

.av-priority__option-check.mud-icon-root {
  width: 14px;
  height: 14px;
  color: var(--color-primary-600);
  flex-shrink: 0;
}

html.dark .av-priority__option-check.mud-icon-root {
  color: var(--color-primary-400);
}

.av-priority__option.is-active {
  background: rgb(from var(--color-primary-500) r g b / 0.08);
}

html.dark .av-priority__option.is-active {
  background: rgb(from var(--color-primary-400) r g b / 0.14);
}

/* ── Responsive — priority chip alignment ─────────────────────────────── */

/* On mobile the priority chip sits at the top-right corner (absolute);
   the av-priority widget itself stays right-aligned. On desktop it joins
   the flex row and reverts to start-aligned for consistency with the rest
   of the card. */
@media (min-width: 1024px) {
  .av-priority {
    align-items: flex-end;
  }
}

/* ────────────────────────────────────────────────────────────────────────
   av-phone-row — Soft single-line card (one card per phone). Order on
   the row: type chip → phone number (grows) → extension → primary star
   → remove. Card stays white in both modes; primary state ONLY tints
   the 4 px left accent in the brand primary (no bg fill).
   ──────────────────────────────────────────────────────────────────────── */

.av-phone-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.av-phone-rows__add.mud-button-root {
  margin-top: 8px;
  text-transform: none;
  letter-spacing: 0;
  border-radius: var(--radius-full);
  align-self: flex-start;
  /* Primary-outlined pill (Mud's Outlined+Primary reads washed out; pin our brand outline). */
  background: transparent !important;
  border: 1px solid var(--color-primary-500) !important;
  color: var(--color-primary-600) !important;
}

.av-phone-rows__add.mud-button-root:hover {
  background: rgb(from var(--color-primary-500) r g b / 0.08) !important;
  border-color: var(--color-primary-600) !important;
}

html.dark .av-phone-rows__add.mud-button-root {
  border-color: var(--color-primary-400) !important;
  color: var(--color-primary-400) !important;
}

.av-phone-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-left: 4px solid transparent;
  border-radius: var(--radius-lg);
  box-shadow:
    0 0 2px rgb(145 158 171 / 0.15),
    0 8px 18px -6px rgb(145 158 171 / 0.1);
  transition:
    border-color 120ms ease,
    box-shadow 120ms ease;
  min-width: 0;
}

html.dark .av-phone-row {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
  border-left-color: transparent;
  box-shadow: none;
}

.av-phone-row:hover {
  border-color: var(--color-gray-300);
}

html.dark .av-phone-row:hover {
  border-color: var(--color-dark-400);
}

/* Primary modifier — only the left accent flips to primary. Card stays
   white, no background tint. The 1 px outer border keeps its neutral
   gray so the card doesn't shout. */
.av-phone-row--primary {
  border-left-color: var(--color-primary-600);
}

html.dark .av-phone-row--primary {
  border-left-color: var(--color-primary-400);
}

/* Cell sizing — type and ext stay compact, phone grows. */
.av-phone-row__type {
  flex-shrink: 0;
}

.av-phone-row__phone {
  flex: 1 1 auto;
  min-width: 200px;
  position: relative;
}

/* Pull the error / helper text out of the row's flex flow so it does NOT
   add height to the phone input cell. Without this, `align-items: center`
   re-centers every sibling (Type chip, Extension, primary star, trash)
   against the bigger phone-input box the moment "Too long" / "Invalid"
   appears underneath — making the row look misaligned. Absolute positioning
   anchors the message to the input's bottom edge while keeping the row's
   geometry constant. */
.av-phone-row__phone .mud-input-control-helper-container {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 2px;
  pointer-events: none;
}

.av-phone-row__ext {
  width: 95px;
  flex-shrink: 0;
}

/* Type chip — pill activator for the MudMenu. Soft gray neutral so it
   doesn't compete with the row's primary accent; hover bumps the bg one
   step. Color, bg, border come from the surface tokens — geometry only
   in here, typography handled by the inner MudText `Typo.body2`. */
.av-phone-row__type-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  background: var(--color-gray-100);
  color: var(--color-gray-700);
  border: 1px solid var(--color-gray-200);
  cursor: pointer;
  font: inherit;
  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    color 120ms ease;
  min-width: 96px;
}

.av-phone-row__type-chip:hover {
  background: var(--color-gray-200);
  border-color: var(--color-gray-300);
  color: var(--color-gray-900);
}

html.dark .av-phone-row__type-chip {
  background: var(--color-dark-500);
  color: var(--color-dark-100);
  border-color: var(--color-dark-400);
}

html.dark .av-phone-row__type-chip:hover {
  background: var(--color-dark-400);
  color: var(--color-dark-50);
}

.av-phone-row__type-chip-label.mud-typography {
  color: inherit;
  flex: 1 1 auto;
  text-align: left;
}

.av-phone-row__type-chip-caret.mud-icon-root {
  width: 14px;
  height: 14px;
  color: currentColor;
  opacity: 0.7;
  flex-shrink: 0;
}

/* Primary star — when set: solid star, primary color, decorative.
   When not: outlined star icon-button that promotes this phone on click. */
.av-phone-row__primary-icon.mud-icon-root {
  width: 18px;
  height: 18px;
  font-size: 18px;
  color: var(--color-primary-600);
  flex-shrink: 0;
}

/* Row icons follow the 18px button-icon rule (§121: 28×28 box, 18px glyph) — star + trash. */
.av-phone-row__primary-btn.mud-icon-button,
.av-phone-row__remove.mud-icon-button {
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
}

.av-phone-row__primary-btn.mud-icon-button .mud-icon-root,
.av-phone-row__remove.mud-icon-button .mud-icon-root {
  width: 18px;
  height: 18px;
  font-size: 18px;
}

html.dark .av-phone-row__primary-icon.mud-icon-root {
  color: var(--color-primary-400);
}

.av-phone-row__primary-btn.mud-icon-button {
  color: var(--color-gray-400);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.av-phone-row__primary-btn.mud-icon-button:hover {
  background-color: rgb(from var(--color-primary-600) r g b / 0.08);
  color: var(--color-primary-600);
}

html.dark .av-phone-row__primary-btn.mud-icon-button {
  color: var(--color-dark-300);
}

html.dark .av-phone-row__primary-btn.mud-icon-button:hover {
  background-color: rgb(from var(--color-primary-400) r g b / 0.16);
  color: var(--color-primary-400);
}

.av-phone-row__remove.mud-icon-button {
  color: var(--color-gray-400);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.av-phone-row__remove.mud-icon-button:hover:not(:disabled) {
  background-color: rgb(from var(--color-error) r g b / 0.1);
  color: var(--color-error);
}

html.dark .av-phone-row__remove.mud-icon-button {
  color: var(--color-dark-300);
}

/* Responsive: below 720 px the row wraps so the phone input still fits;
   the secondary cells line up below it. */
@media (max-width: 720px) {
  .av-phone-row {
    flex-wrap: wrap;
  }

  .av-phone-row__phone {
    flex-basis: 100%;
    order: 1;
  }

  .av-phone-row__type {
    order: 0;
  }

  .av-phone-row__ext {
    order: 2;
  }
}

/* ────────────────────────────────────────────────────────────────────────
   av-email-row — sibling of av-phone-row for the EmailEditDialog. Same soft
   single-line card; order: type chip → email (grows) → primary star →
   remove. No extension cell. Primary state only tints the 4 px left accent.
   ──────────────────────────────────────────────────────────────────────── */

.av-email-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.av-email-rows__add.mud-button-root {
  margin-top: 8px;
  text-transform: none;
  letter-spacing: 0;
  border-radius: var(--radius-full);
  align-self: flex-start;
  /* Primary-outlined pill (Mud's Outlined+Primary reads washed out; pin our brand outline). */
  background: transparent !important;
  border: 1px solid var(--color-primary-500) !important;
  color: var(--color-primary-600) !important;
}

.av-email-rows__add.mud-button-root:hover {
  background: rgb(from var(--color-primary-500) r g b / 0.08) !important;
  border-color: var(--color-primary-600) !important;
}

html.dark .av-email-rows__add.mud-button-root {
  border-color: var(--color-primary-400) !important;
  color: var(--color-primary-400) !important;
}

.av-email-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-left: 4px solid transparent;
  border-radius: var(--radius-lg);
  box-shadow:
    0 0 2px rgb(145 158 171 / 0.15),
    0 8px 18px -6px rgb(145 158 171 / 0.1);
  transition:
    border-color 120ms ease,
    box-shadow 120ms ease;
  min-width: 0;
}

html.dark .av-email-row {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
  border-left-color: transparent;
  box-shadow: none;
}

.av-email-row:hover {
  border-color: var(--color-gray-300);
}

html.dark .av-email-row:hover {
  border-color: var(--color-dark-400);
}

.av-email-row--primary {
  border-left-color: var(--color-primary-600);
}

html.dark .av-email-row--primary {
  border-left-color: var(--color-primary-400);
}

.av-email-row__type {
  flex-shrink: 0;
}

.av-email-row__email {
  flex: 1 1 auto;
  min-width: 200px;
  position: relative;
}

/* Keep helper/error text out of the row's flex flow so it doesn't re-center
   the siblings when a validation message appears (same trick as phone). */
.av-email-row__email .mud-input-control-helper-container {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 2px;
  pointer-events: none;
}

.av-email-row__type-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  background: var(--color-gray-100);
  color: var(--color-gray-700);
  border: 1px solid var(--color-gray-200);
  cursor: pointer;
  font: inherit;
  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    color 120ms ease;
  min-width: 96px;
}

.av-email-row__type-chip:hover {
  background: var(--color-gray-200);
  border-color: var(--color-gray-300);
  color: var(--color-gray-900);
}

html.dark .av-email-row__type-chip {
  background: var(--color-dark-500);
  color: var(--color-dark-100);
  border-color: var(--color-dark-400);
}

html.dark .av-email-row__type-chip:hover {
  background: var(--color-dark-400);
  color: var(--color-dark-50);
}

/* Locked type chip (linked primary): static, non-interactive — no caret, no hover, no click. */
.av-email-row__type-chip--locked {
  cursor: default;
  pointer-events: none;
}

.av-email-row__type-chip-label.mud-typography {
  color: inherit;
  flex: 1 1 auto;
  text-align: left;
}

.av-email-row__type-chip-caret.mud-icon-root {
  width: 14px;
  height: 14px;
  color: currentColor;
  opacity: 0.7;
  flex-shrink: 0;
}

.av-email-row__primary-icon.mud-icon-root {
  width: 18px;
  height: 18px;
  font-size: 18px;
  color: var(--color-primary-600);
  flex-shrink: 0;
}

/* All row icons follow the 18px button-icon rule (§121: 28×28 box, 18px glyph): the star/trash
   buttons and the read-only lock adornment inside the input. */
.av-email-row__primary-btn.mud-icon-button,
.av-email-row__remove.mud-icon-button {
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
}

.av-email-row__primary-btn.mud-icon-button .mud-icon-root,
.av-email-row__remove.mud-icon-button .mud-icon-root,
.av-email-row__email .mud-input-adornment .mud-icon-root {
  width: 18px;
  height: 18px;
  font-size: 18px;
}

html.dark .av-email-row__primary-icon.mud-icon-root {
  color: var(--color-primary-400);
}

.av-email-row__primary-btn.mud-icon-button {
  color: var(--color-gray-400);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.av-email-row__primary-btn.mud-icon-button:hover {
  background-color: rgb(from var(--color-primary-600) r g b / 0.08);
  color: var(--color-primary-600);
}

html.dark .av-email-row__primary-btn.mud-icon-button {
  color: var(--color-dark-300);
}

html.dark .av-email-row__primary-btn.mud-icon-button:hover {
  background-color: rgb(from var(--color-primary-400) r g b / 0.16);
  color: var(--color-primary-400);
}

.av-email-row__remove.mud-icon-button {
  color: var(--color-gray-400);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.av-email-row__remove.mud-icon-button:hover:not(:disabled) {
  background-color: rgb(from var(--color-error) r g b / 0.1);
  color: var(--color-error);
}

html.dark .av-email-row__remove.mud-icon-button {
  color: var(--color-dark-300);
}

/* Linked-user hint: a full-width note in normal flow (not the input's absolutely-positioned Mud
   helper, which escaped the card and overflowed). Wraps within the dialog body. */
.av-email-locked-note.mud-typography {
  display: block;
  margin-top: 8px;
  color: var(--color-gray-500);
}

html.dark .av-email-locked-note.mud-typography {
  color: var(--color-dark-300);
}

@media (max-width: 720px) {
  .av-email-row {
    flex-wrap: wrap;
  }

  .av-email-row__email {
    flex-basis: 100%;
    order: 1;
  }

  .av-email-row__type {
    order: 0;
  }
}

/* ────────────────────────────────────────────────────────────────────────
   av-property-address — redesigned address card for ViewProperty's
   AddressesTab. Composes with .av-card + .av-info-section: header with
   icon disc + title block + actions; 2-col field grid; notes block.
   ──────────────────────────────────────────────────────────────────────── */

.av-property-address.av-card {
  padding: 16px 20px;
  margin-top: 16px;
}

/* Icon disc — tinted primary circle that anchors the header. Sizes
   match the section-header rhythm (28×28 px so it sits comfortably next
   to a Typo.h5 title). */
.av-property-address__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-lg);
  background: rgb(from var(--color-primary-500) r g b / 0.12);
  color: var(--color-primary-600);
  flex-shrink: 0;
}

html.dark .av-property-address__icon {
  background: rgb(from var(--color-primary-400) r g b / 0.18);
  color: var(--color-primary-300);
}

.av-property-address__icon .mud-icon-root {
  width: 18px;
  height: 18px;
  color: inherit;
}

/* Field grid — two columns at desktop, single column on mobile. Inherits
   the av-info-field label/value typography (overline + body1). Inter-row
   gap matches the rest of the av-info-section family (16 px). */
.av-property-address__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px 24px;
  margin-top: 16px;
}

@media (max-width: 640px) {
  .av-property-address__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
}

/* Period field — pair of dates with an arrow between them. */
.av-property-address__period {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.av-property-address__period-arrow.mud-icon-root {
  width: 14px;
  height: 14px;
  color: var(--color-gray-400);
  flex-shrink: 0;
}

html.dark .av-property-address__period-arrow.mud-icon-root {
  color: var(--color-dark-400);
}

/* Notes block — sticky-note icon + overline label header, body2 text
   underneath. Sits at the bottom of the card with a hairline divider
   above so it reads as its own section. */
.av-property-address__notes {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--color-gray-100);
}

html.dark .av-property-address__notes {
  border-top-color: var(--color-dark-600);
}

.av-property-address__notes-head {
  margin-bottom: 4px;
}

.av-property-address__notes-icon.mud-icon-root {
  width: 14px;
  height: 14px;
  color: var(--color-gray-500);
}

html.dark .av-property-address__notes-icon.mud-icon-root {
  color: var(--color-dark-300);
}

.av-property-address__notes-text.mud-typography {
  color: var(--color-gray-700);
}

html.dark .av-property-address__notes-text.mud-typography {
  color: var(--color-dark-200);
}

/* ============================================================================
 * §23.bis ─── Board drag-drop
 * ----------------------------------------------------------------------------
 * Capa visual del drag-drop entre columnas de status en el BoardView.
 * El comportamiento (drag start/over/leave/drop) vive en BoardCard y
 * BoardColumn; aquí solo definimos los cues visuales:
 *
 *   - Cursor grab en hover sobre las cards (indicador de affordance).
 *   - Cursor grabbing mientras se arrastra.
 *   - Ligera reducción de opacidad de la card durante el drag.
 *   - Highlight de la columna destino (.--drag-over) con tinte primary y
 *     border dashed para señalar el slot de drop.
 *
 * Todos los colores via tokens — respeta data-theme-primary y data-theme-dark.
 * ========================================================================== */

.av-task-board__card {
  cursor: grab;
}

.av-task-board__card:active {
  cursor: grabbing;
}

.av-task-board__card[draggable="true"]:active {
  opacity: 0.6;
}

.av-task-board__column--drag-over {
  background: rgb(from var(--color-primary-500) r g b / 0.06);
  outline: 2px dashed var(--color-primary-500);
  outline-offset: -4px;
}

html.dark .av-task-board__column--drag-over {
  background: rgb(from var(--color-primary-400) r g b / 0.12);
  outline-color: var(--color-primary-400);
}

/* ============================================================
   Notification detail dialog (read-only)
   Shared/Dialog/NotificationDetailDialog. Info-only modal opened from the
   bell preview: fixed header (category icon + title + chip + close), a
   scrollable body, and a fixed footer with Close + optional "Go to". Spacing
   mirrors the form-dialog rhythm for visual consistency. Light + dark.
   ============================================================ */
.av-notif-detail.mud-dialog {
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Header (fixed) */
.av-notif-detail .mud-dialog-title {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 12px 16px;
  background: var(--color-gray-200);
  border-bottom: 1px solid var(--color-gray-100);
}

html.dark .av-notif-detail .mud-dialog-title {
  background: var(--color-dark-800);
  border-bottom-color: var(--color-dark-600);
}

.av-notif-detail__title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.av-notif-detail__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-lg);
  flex-shrink: 0;
  background: var(--mud-palette-action-disabled);
}

.av-notif-detail__icon.type-default {
  background: var(--mud-palette-grey-default, var(--color-gray-400));
}

.av-notif-detail__icon.type-info {
  background: var(--mud-palette-info);
}

.av-notif-detail__icon.type-success {
  background: var(--mud-palette-success);
}

.av-notif-detail__icon.type-warning {
  background: var(--mud-palette-warning);
}

.av-notif-detail__icon.type-error {
  background: var(--mud-palette-error);
}

.av-notif-detail__icon .mud-icon-root {
  width: 20px;
  height: 20px;
  color: var(--color-white);
}

.av-notif-detail__heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.av-notif-detail__title.mud-typography {
  color: var(--color-gray-800);
  word-break: break-word;
}

html.dark .av-notif-detail__title.mud-typography {
  color: var(--color-dark-50);
}

.av-notif-detail__chip.mud-chip {
  align-self: flex-start;
}

.av-notif-detail__close.mud-button-root {
  flex-shrink: 0;
  color: var(--color-gray-500);
}

html.dark .av-notif-detail__close.mud-button-root {
  color: var(--color-dark-300);
}

/* Body (scrollable) */
.av-notif-detail .mud-dialog-content {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px;
}

.av-notif-detail__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.av-notif-detail__section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.av-notif-detail__message-box {
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  background: var(--color-gray-100);
  border: 1px solid var(--color-gray-150);
}

html.dark .av-notif-detail__message-box {
  background: var(--color-dark-700);
  border-color: var(--color-dark-600);
}

.av-notif-detail__message.mud-typography {
  color: var(--color-gray-800);
  white-space: pre-wrap;
  word-break: break-word;
}

html.dark .av-notif-detail__message.mud-typography {
  color: var(--color-dark-100);
}

.av-notif-detail__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.av-notif-detail__meta-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-150);
  background: var(--surface-1);
}

html.dark .av-notif-detail__meta-cell {
  border-color: var(--color-dark-600);
  background: var(--color-dark-700);
}

.av-notif-detail__meta-cell .av-notif-detail__chip {
  align-self: flex-start;
}

.av-notif-detail__received {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-gray-700);
}

html.dark .av-notif-detail__received {
  color: var(--color-dark-200);
}

.av-notif-detail__received-icon.mud-icon-root {
  width: 15px !important;
  height: 15px !important;
  font-size: 15px !important;
  color: var(--color-gray-400);
  flex-shrink: 0;
}

html.dark .av-notif-detail__received-icon.mud-icon-root {
  color: var(--color-dark-400);
}

/* Details — definition-list card with hairline dividers */
.av-notif-detail__fields {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-150);
  overflow: hidden;
}

html.dark .av-notif-detail__fields {
  border-color: var(--color-dark-600);
}

.av-notif-detail__field-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 12px;
}

.av-notif-detail__field-row + .av-notif-detail__field-row {
  border-top: 1px solid var(--color-gray-100);
}

html.dark .av-notif-detail__field-row + .av-notif-detail__field-row {
  border-top-color: var(--color-dark-600);
}

.av-notif-detail__field-label.mud-typography {
  color: var(--color-gray-500);
  flex-shrink: 0;
}

html.dark .av-notif-detail__field-label.mud-typography {
  color: var(--color-dark-300);
}

.av-notif-detail__field-value.mud-typography {
  color: var(--color-gray-800);
  text-align: right;
  word-break: break-word;
}

html.dark .av-notif-detail__field-value.mud-typography {
  color: var(--color-dark-100);
}

/* Footer (fixed) */
.av-notif-detail .mud-dialog-actions {
  flex: 0 0 auto;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--color-gray-100);
  background: var(--surface-1);
}

html.dark .av-notif-detail .mud-dialog-actions {
  border-top-color: var(--color-dark-600);
}

.av-notif-detail__btn-cancel.mud-button-root,
.av-notif-detail__btn-action.mud-button-root {
  border-radius: 9999px;
}

.av-notif-detail__btn-cancel.mud-button-root {
  color: var(--color-gray-700);
  border: 1px solid var(--color-gray-300);
}

html.dark .av-notif-detail__btn-cancel.mud-button-root {
  color: var(--color-dark-100);
  border-color: var(--color-dark-500);
}

.av-notif-detail__btn-action.mud-button-root {
  background: var(--color-primary-600);
  color: var(--color-white);
}

.av-notif-detail__btn-action.mud-button-root:hover {
  background: var(--color-primary-700);
}

/* Footer secondary actions (toggle read / delete) pinned to the left so the
   primary Close / Go to sit on the right. */
.av-notif-detail__action-group {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-right: auto;
}

.av-notif-detail__icon-action.mud-button-root {
  color: var(--color-gray-600);
}

/* Neutral hover first — color modifiers below override it (equal specificity,
   later source wins) so the toggle/delete tints take precedence. */
.av-notif-detail__icon-action.mud-button-root:hover {
  background: rgb(from var(--color-gray-500) r g b / 0.12);
  color: var(--color-gray-900);
}

/* Toggle read/unread — primary tint on hover */
.av-notif-detail__icon-action--primary.mud-button-root:hover {
  background: rgb(from var(--color-primary-500) r g b / 0.12);
  color: var(--color-primary-600);
}

/* Delete — danger tint on hover */
.av-notif-detail__icon-action--danger.mud-button-root:hover {
  background: rgb(from var(--mud-palette-error) r g b / 0.12);
  color: var(--mud-palette-error);
}

html.dark .av-notif-detail__icon-action.mud-button-root {
  color: var(--color-dark-200);
}

html.dark .av-notif-detail__icon-action.mud-button-root:hover {
  background: rgb(from var(--color-dark-400) r g b / 0.4);
  color: var(--color-dark-50);
}

html.dark .av-notif-detail__icon-action--primary.mud-button-root:hover {
  background: rgb(from var(--color-primary-400) r g b / 0.2);
  color: var(--color-primary-300);
}

html.dark .av-notif-detail__icon-action--danger.mud-button-root:hover {
  background: rgb(from var(--mud-palette-error) r g b / 0.18);
  color: var(--mud-palette-error);
}

/* ============================================================
   Notification dropdown panel — Tailux refinements
   Scoped under .notification-panel so the shared base classes
   (.notification-item, .notification-icon) reused by the full-page
   AllNotifications view stay untouched. Reuses showcase primitives
   (av-tabs-boxed, av-empty-state, av-btn, av-chip-soft) in the markup.
   ============================================================ */

/* The MudMenu popover IS the floating Tailux card. Neutralize its inner
   list/content padding + background so the panel sits flush — otherwise the
   white popover edge shows as a double border above/below the panel. */
.notification-menu-popover {
  border-radius: var(--radius-xl) !important;
  overflow: hidden;
  border: 1px solid var(--color-gray-200);
  box-shadow: var(--shadow-soft);
}

html.dark .notification-menu-popover {
  border-color: var(--color-dark-600);
  box-shadow: var(--shadow-elevation-3);
}

.notification-menu-popover .mud-list,
.notification-menu-popover .mud-menu-list,
.notification-menu-popover .mud-popover-content {
  padding: 0 !important;
  background: transparent !important;
}

/* Panel no longer carries its own frame — the popover owns it (no double edge). */
.notification-panel {
  border: none;
  box-shadow: none;
  border-radius: 0;
}

/* Segmented filter (av-tabs-boxed) — stretch the 3 tabs to fill the header */
.notification-panel .notification-filter-tabs {
  margin: 8px 0 4px;
}

.notification-panel .notification-filter-tabs .av-tabs-boxed__list {
  display: flex;
  width: 100%;
}

.notification-panel .notification-filter-tabs .av-tabs-boxed__tab {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* List rows — Tailux hover surface + rounded corners, compact rhythm */
.notification-panel .notification-list-container {
  padding: 8px;
}

.notification-panel .date-group {
  gap: 2px;
}

.notification-panel .date-group + .date-group {
  margin-top: 2px;
}

.notification-panel .notification-item {
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-lg);
  transition: background-color 150ms ease;
}

.notification-panel .notification-item:hover {
  background: var(--color-gray-100);
}

html.dark .notification-panel .notification-item:hover {
  background: var(--color-dark-600);
}

/* Unread emphasis — soft primary tint + dot */
.notification-panel .notification-item.unread {
  background: rgb(from var(--color-primary-500) r g b / 0.05);
}

.notification-panel .notification-item.unread:hover {
  background: rgb(from var(--color-primary-500) r g b / 0.1);
}

html.dark .notification-panel .notification-item.unread {
  background: rgb(from var(--color-primary-400) r g b / 0.08);
}

html.dark .notification-panel .notification-item.unread:hover {
  background: rgb(from var(--color-primary-400) r g b / 0.14);
}

/* Compact vertical rhythm inside the card (title / message / context) */
.notification-panel .notification-content {
  gap: 2px;
}

.notification-panel .notification-message {
  margin-top: 0;
}

/* Title row — icon + title + pill grouped left; time + dot pushed right */
.notification-panel .notification-title-row {
  gap: 6px;
}

.notification-panel .notification-title-row .notification-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  flex-shrink: 0;
}

.notification-panel .notification-title-row .notification-icon .mud-icon-root {
  width: 13px !important;
  height: 13px !important;
  font-size: 13px !important;
}

.notification-panel .notification-title-row .notification-title {
  flex: 0 1 auto;
  min-width: 0;
}

.notification-panel .notification-title-row .notification-type-chip {
  flex-shrink: 0;
}

.notification-panel .notification-title-row .notification-time {
  margin-left: auto;
  padding-left: 6px;
  flex-shrink: 0;
}

.notification-panel .notification-unread-dot {
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  background: var(--color-primary-500);
  flex-shrink: 0;
}

html.dark .notification-panel .notification-unread-dot {
  background: var(--color-primary-400);
}

/* Context line — muted "Case 123 · SMS · John" meta when Data carries it */
.notification-panel .notification-context {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.notification-panel .notification-context-icon.mud-icon-root {
  width: 12px !important;
  height: 12px !important;
  font-size: 12px !important;
  color: var(--color-gray-400);
  flex-shrink: 0;
}

html.dark .notification-panel .notification-context-icon.mud-icon-root {
  color: var(--color-dark-400);
}

.notification-panel .notification-context-text {
  color: var(--color-gray-500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.dark .notification-panel .notification-context-text {
  color: var(--color-dark-300);
}

/* Actions float as a pill over the top-right (time) on hover — no reserved
   gutter, no layout shift. Reveal/transition come from the base rules. */
.notification-panel .notification-actions {
  position: absolute;
  top: 4px;
  right: 6px;
  gap: 2px;
  padding: 2px;
  border-radius: 9999px;
  background: var(--notif-bg);
  box-shadow:
    0 1px 2px rgb(0 0 0 / 0.06),
    0 0 0 1px rgb(0 0 0 / 0.04);
}

html.dark .notification-panel .notification-actions {
  box-shadow:
    0 1px 2px rgb(0 0 0 / 0.4),
    0 0 0 1px rgb(255 255 255 / 0.06);
}

/* Footer — clean bordered strip with a full-width flat primary action */
.notification-panel .notification-footer {
  padding: 8px;
  background: transparent;
  border-top: 1px solid var(--color-gray-100);
}

html.dark .notification-panel .notification-footer {
  border-top-color: var(--color-dark-600);
}

.notification-panel .notification-footer .av-btn {
  width: 100%;
}

/* ============================================================
   Avalme system-message dialog (Pages/SystemMessage/SystemMessageDialog)
   Tailux info dialog: accent icon disc + eyebrow + title in the header,
   message body, and av-btn actions. Accent color comes from the message type.
   ============================================================ */
.av-sysmsg .mud-dialog-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.av-sysmsg__head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.av-sysmsg__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  flex-shrink: 0;
}

.av-sysmsg__icon .mud-icon-root {
  width: 22px;
  height: 22px;
}

.av-sysmsg__icon--info {
  background: rgb(from var(--mud-palette-info) r g b / 0.14);
  color: var(--mud-palette-info);
}

.av-sysmsg__icon--success {
  background: rgb(from var(--mud-palette-success) r g b / 0.14);
  color: var(--mud-palette-success);
}

.av-sysmsg__icon--primary {
  background: rgb(from var(--color-primary-500) r g b / 0.14);
  color: var(--color-primary-600);
}

html.dark .av-sysmsg__icon--primary {
  color: var(--color-primary-300);
}

.av-sysmsg__icon--warning {
  background: rgb(from var(--mud-palette-warning) r g b / 0.14);
  color: var(--mud-palette-warning);
}

.av-sysmsg__head-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.av-sysmsg__eyebrow.mud-typography {
  color: var(--color-gray-500);
}

html.dark .av-sysmsg__eyebrow.mud-typography {
  color: var(--color-dark-300);
}

.av-sysmsg__title.mud-typography {
  color: var(--color-gray-800);
  word-break: break-word;
}

html.dark .av-sysmsg__title.mud-typography {
  color: var(--color-dark-50);
}

.av-sysmsg__close.mud-button-root {
  flex-shrink: 0;
  color: var(--color-gray-500);
}

html.dark .av-sysmsg__close.mud-button-root {
  color: var(--color-dark-300);
}

.av-sysmsg__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.av-sysmsg__content.mud-typography {
  color: var(--color-gray-700);
  word-break: break-word;
}

html.dark .av-sysmsg__content.mud-typography {
  color: var(--color-dark-200);
}

.av-sysmsg__link.mud-button-root {
  align-self: flex-start;
}

/* Push "Don't show again" to the left; Close stays on the right */
.av-sysmsg__btn-dismiss.mud-button-root {
  margin-right: auto;
  color: var(--color-gray-500);
  transition:
    background-color 150ms ease,
    color 150ms ease;
}

/* Clear, neutral hover (the flat default tint is too faint without an accent) */
.av-sysmsg__btn-dismiss.mud-button-root:hover {
  background-color: var(--color-gray-100) !important;
  color: var(--color-gray-900) !important;
}

html.dark .av-sysmsg__btn-dismiss.mud-button-root {
  color: var(--color-dark-300);
}

html.dark .av-sysmsg__btn-dismiss.mud-button-root:hover {
  background-color: rgb(from var(--color-dark-400) r g b / 0.4) !important;
  color: var(--color-dark-50) !important;
}

/* ============================================================
   Loan Officer Pipeline view — moved from inline \3c style>
   (NewLoanOfficerApp1003PipelinesView). HEX -> tokens.
   ============================================================ */

/* Pipeline Summary Active Card */
.pipeline-card-active {
  border: 2px solid var(--color-primary-600) !important;
  box-shadow: 0 4px 12px rgb(from var(--color-primary-500) r g b / 0.15) !important;
}

.pipeline-row {
  cursor: pointer;
}

/* ===== Attention indicator (single av-badge with multi-section tooltip) ===== */
.pipeline-attention-tooltip {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 280px;
  text-align: left;
}

.pipeline-attention-tooltip-title {
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--mud-palette-warning);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-bottom: 4px;
  border-bottom: 1px solid
    color-mix(in srgb, var(--mud-palette-warning) 25%, transparent);
}

.pipeline-attention-tooltip-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.75rem;
  line-height: 1.35;
}

.pipeline-attention-tooltip-section {
  font-weight: 600;
  color: var(--color-white);
}

html.dark .pipeline-attention-tooltip-section {
  color: var(--color-dark-50);
}

.pipeline-attention-tooltip-cause {
  color: color-mix(in srgb, var(--color-white) 70%, transparent);
  font-style: italic;
}

html.dark .pipeline-attention-tooltip-cause {
  color: color-mix(in srgb, var(--color-dark-50) 70%, transparent);
}

/* ===== Borrower contact card (popover) ===== */
.borrower-contact-anchor {
  position: relative;
  display: inline-flex;
}

.borrower-contact-trigger {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--mud-palette-primary);
  background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
  transition:
    background 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.borrower-contact-trigger:hover {
  background: color-mix(in srgb, var(--mud-palette-primary) 16%, transparent);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px
    color-mix(in srgb, var(--mud-palette-primary) 25%, transparent);
}

/* Popover — eleva por encima del overlay del click-outside */
.borrower-contact-popover {
  z-index: 1110 !important;
}

.borrower-contact-popover.mud-popover {
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.borrower-contact-card {
  position: relative;
  width: 320px;
  min-height: 230px;
  font-family: var(--font-sans);
  background: var(--mud-palette-surface);
  color: var(--mud-palette-text-primary);
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.1),
    0 4px 12px rgba(0, 0, 0, 0.06);
  text-align: left;
}

.borrower-contact-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--mud-palette-primary) 12%, transparent) 0%,
    color-mix(in srgb, var(--mud-palette-secondary) 10%, transparent) 100%
  );
  border-bottom: 1px solid
    color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.borrower-contact-avatar {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.5px;
  color: var(--color-white);
  background: linear-gradient(
    135deg,
    var(--mud-palette-primary) 0%,
    var(--mud-palette-secondary) 100%
  );
  box-shadow: 0 4px 12px
    color-mix(in srgb, var(--mud-palette-primary) 35%, transparent);
}

.borrower-contact-headline {
  min-width: 0;
  flex: 1;
}

.borrower-contact-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--mud-palette-text-primary);
  line-height: 1.2;
}

.borrower-contact-subtitle {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mud-palette-text-secondary);
  margin-top: 2px;
}

/* ===== Applicants avatar group (UX 3 — coborrowers en columna AllApplicantsEmails) ===== */
.applicants-avatar-group {
  display: inline-flex;
  align-items: center;
}

.applicants-avatar-stack-item {
  margin-left: -6px;
  position: relative;
}

.applicants-avatar-stack-item:first-child {
  margin-left: 0;
}

.applicants-avatar-trigger {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-white);
  background: linear-gradient(
    135deg,
    var(--mud-palette-primary) 0%,
    var(--mud-palette-secondary) 100%
  );
  border: 2px solid var(--mud-palette-surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    z-index 0s;
}

.applicants-avatar-trigger:hover {
  transform: translateY(-2px) scale(1.08);
  box-shadow: 0 4px 10px
    color-mix(in srgb, var(--mud-palette-primary) 35%, transparent);
  z-index: 5;
}

.applicants-avatar-stack-item:hover {
  z-index: 5;
}

.borrower-contact-card-body {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.borrower-contact-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8125rem;
  color: var(--mud-palette-text-primary);
}

.borrower-contact-row-multi {
  align-items: flex-start;
}

.borrower-contact-row .mud-icon-root {
  color: var(--mud-palette-text-secondary);
  flex: 0 0 18px;
}

.borrower-contact-value {
  flex: 1;
  word-break: break-word;
  line-height: 1.4;
}

.borrower-contact-tag {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 6px;
  color: var(--mud-palette-text-secondary);
  background: color-mix(
    in srgb,
    var(--mud-palette-text-secondary) 10%,
    transparent
  );
}

.borrower-contact-copy {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  color: var(--mud-palette-text-secondary);
  background: transparent;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.borrower-contact-copy:hover {
  color: var(--mud-palette-primary);
  background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.borrower-contact-copy .mud-icon-root {
  color: inherit;
  font-size: 14px;
  flex: none;
}

/* Link/empty inside contact rows */
.borrower-contact-link {
  color: var(--mud-palette-primary);
  text-decoration: none;
}

.borrower-contact-link:hover {
  text-decoration: underline;
}

.borrower-contact-empty {
  color: var(--mud-palette-text-disabled);
  font-style: italic;
}

/* Close button (X) en el header */
.borrower-contact-close {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--mud-palette-text-secondary);
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.borrower-contact-close:hover {
  background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
  color: var(--mud-palette-error);
}

/* Skeleton estático (mientras el fetch está en curso) */
.borrower-contact-skeleton-static {
  display: block;
}

.borrower-contact-skeleton-avatar {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: color-mix(
    in srgb,
    var(--mud-palette-text-secondary) 14%,
    transparent
  );
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--mud-palette-surface) 60%, transparent) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: borrower-contact-shimmer 1.2s infinite linear;
}

.borrower-contact-skeleton-headline {
  flex: 1;
}

.borrower-contact-skeleton-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.borrower-contact-skeleton-dot {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: color-mix(
    in srgb,
    var(--mud-palette-text-secondary) 14%,
    transparent
  );
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--mud-palette-surface) 60%, transparent) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: borrower-contact-shimmer 1.2s infinite linear;
}

.borrower-contact-skeleton-line {
  height: 10px;
  border-radius: 6px;
  background: color-mix(
    in srgb,
    var(--mud-palette-text-secondary) 14%,
    transparent
  );
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--mud-palette-surface) 60%, transparent) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: borrower-contact-shimmer 1.2s infinite linear;
}

@keyframes borrower-contact-shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* ── §69 — av-channel-card — contact channel cards (email + phone) ──────────
   Rich per-channel card used by EmailInfo / PhoneNumberInfo. Each channel
   renders as a card with a colored left accent bar (brand primary when the
   channel is the primary one, neutral gray otherwise), a header row (state
   star + slot label on the left, Primary badge on the right), a prominent
   value, a type meta line, and a right-anchored vertical action rail
   (call/mail · copy · edit) separated by a divider. Typography comes from
   the Typo.X on the markup — this skin owns color / layout / spacing only. */
.av-channel-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ============================================================
   LendersCard — responsive layout for /crm/borrower/loan-officers.
   Scope: .av-lender-cell only. Used inside the MudTd of each row
   to render the borrower's lender list. Two breakpoints:
     ≥ 640 px → row layout, avatar+text on the left grow, CTA pinned right.
     < 640 px → stacked column, CTA spans the full row (mobile card-like).
   ============================================================ */

.av-lender-cell {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.av-lender-cell__main {
  flex: 1 1 auto;
  /* min-width: 0 lets long emails / NMLS chips shrink and wrap instead of
       pushing the CTA off-screen on tight viewports. */
  min-width: 0;
}

.av-lender-cell__head {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.av-lender-cell__contact {
  display: flex;
  flex-direction: column;
  /* Stretch defaults to row width, but we want the phone tag to keep its
       natural pill width on its own line, so each line aligns at the start. */
  align-items: flex-start;
  gap: 4px;
  margin-top: 6px;
}

.av-lender-cell__contact-line {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

.av-lender-cell__cta {
  flex: 0 0 auto;
}

/* The lender's full name is the row's primary content — apply emphasis
   (semibold) only inside .av-lender-cell so other consumers of
   .av-tailux-cell__name (e.g. Tenants) keep the default body1 weight. */
.av-lender-cell .av-tailux-cell__name {
  font-weight: 600;
}

@media (max-width: 639.98px) {
  .av-lender-cell {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .av-lender-cell__cta {
    align-self: stretch;
  }

  .av-lender-cell__cta .mud-button-root {
    width: 100%;
    justify-content: center;
  }
}

/* ------------------------------------------------------------
   Page-level mobile refinements — opt-in modifiers used only by
   /crm/borrower/loan-officers. Each rule is scoped under the
   matching wrapper class so other consumers of the shared
   av-page-filters / av-pagination styles are not affected.
   ------------------------------------------------------------ */

@media (max-width: 639.98px) {
  /* Search bar takes the full row on mobile inside the CRM borrower view. */
  .av-crm-bo-filters .av-page-filters__left {
    width: 100%;
  }

  .av-crm-bo-filters .av-page-filters__search,
  .av-crm-bo-filters .av-page-filters__search .mud-input-control {
    width: 100%;
    flex: 1 1 auto;
  }

  /* Compact "Per page" + select row on mobile — keep on one row,
       reduce the select width so it does not span the viewport. */
  .av-crm-bo-pagination .av-pagination__size {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  .av-crm-bo-pagination .av-pagination__size .av-pagination__select {
    min-width: 80px;
    max-width: 96px;
  }

  /* Mobile only — center the three blocks (info / controls / size).
       Desktop keeps the global default (space-between). */
  .av-crm-bo-pagination .av-pagination {
    justify-content: center;
    gap: 24px;
  }
}

/* Belt-and-suspenders: the base rule .mud-table-pagination:has(.av-pagination)
   already drops padding/min-height when our shared component is used directly,
   but in this view we add a wrapper (.av-crm-bo-pagination) between, and the
   <tr> / <td.mud-table-foot> ancestors of the MudTable footer still carry
   intrinsic min-height that produces a hollow band above/below the pagination.
   Force-zero all vertical chrome on every ancestor that contains our wrapper. */
.mud-table-pagination:has(.av-crm-bo-pagination),
.mud-table-pagination-toolbar:has(.av-crm-bo-pagination),
.mud-table-foot:has(.av-crm-bo-pagination),
tr:has(> td > .av-crm-bo-pagination),
tr:has(> td .av-crm-bo-pagination) {
  padding: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}

/* ============================================================
   av-row--archived — generic row modifier for tables that need
   to soft-highlight archived items. Opt-in via MudTable's
   RowClassFunc returning "av-row--archived" for matching rows.
   First consumer: /pre-approval/loans. Other views can reuse.
   Tints stronger than striping so the modifier wins both on
   even and odd rows. !important because Striped's nth-child(even)
   has equal specificity.
   ============================================================ */
.av-tailux-table .mud-table-body .mud-table-row.av-row--archived,
.av-tailux-table
  .mud-table-body
  .mud-table-row.av-row--archived:nth-child(even) {
  background-color: rgb(from var(--color-error) r g b / 0.05) !important;
}

.av-tailux-table .mud-table-body .mud-table-row.av-row--archived:hover {
  background-color: rgb(from var(--color-error) r g b / 0.1) !important;
}

html.dark .av-tailux-table .mud-table-body .mud-table-row.av-row--archived,
html.dark
  .av-tailux-table
  .mud-table-body
  .mud-table-row.av-row--archived:nth-child(even) {
  background-color: rgb(from var(--color-error) r g b / 0.12) !important;
}

html.dark
  .av-tailux-table
  .mud-table-body
  .mud-table-row.av-row--archived:hover {
  background-color: rgb(from var(--color-error) r g b / 0.18) !important;
}

/* ------------------------------------------------------------
   /pre-approval/loans — page-level mobile refinements + pagination
   centering. Same opt-in pattern as the CRM borrower view: scoped
   by modifier classes (av-crm-loans-filters / av-crm-loans-table
   / av-crm-loans-pagination), zero impact on other consumers of
   av-page-filters, av-pagination and av-tailux-table.
   ------------------------------------------------------------ */

@media (max-width: 639.98px) {
  .av-crm-loans-filters .av-page-filters__left {
    width: 100%;
  }

  .av-crm-loans-filters .av-page-filters__search,
  .av-crm-loans-filters .av-page-filters__search .mud-input-control {
    width: 100%;
    flex: 1 1 auto;
  }

  .av-crm-loans-pagination .av-pagination__size {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  .av-crm-loans-pagination .av-pagination__size .av-pagination__select {
    min-width: 80px;
    max-width: 96px;
  }

  /* Mobile only — center the three blocks (info / controls / size).
       Desktop keeps the global default (space-between). */
  .av-crm-loans-pagination .av-pagination {
    justify-content: center;
    gap: 24px;
  }
}

.mud-table-pagination:has(.av-crm-loans-pagination),
.mud-table-pagination-toolbar:has(.av-crm-loans-pagination),
.mud-table-foot:has(.av-crm-loans-pagination),
tr:has(> td > .av-crm-loans-pagination),
tr:has(> td .av-crm-loans-pagination) {
  padding: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}

/* ============================================================
   av-row--draft — generic row modifier for tables that need to
   soft-highlight draft / unfinished items. Opt-in via MudTable's
   RowClassFunc returning "av-row--draft" for matching rows.
   First consumer: /pre-approval/loan-estimates (LoanEstimate.IsCompleted == false).
   Same conventions as av-row--archived: !important to win over the
   Striped nth-child(even).
   ============================================================ */
.av-tailux-table .mud-table-body .mud-table-row.av-row--draft,
.av-tailux-table .mud-table-body .mud-table-row.av-row--draft:nth-child(even) {
  background-color: rgb(from var(--color-warning) r g b / 0.06) !important;
}

.av-tailux-table .mud-table-body .mud-table-row.av-row--draft:hover {
  background-color: rgb(from var(--color-warning) r g b / 0.12) !important;
}

html.dark .av-tailux-table .mud-table-body .mud-table-row.av-row--draft,
html.dark
  .av-tailux-table
  .mud-table-body
  .mud-table-row.av-row--draft:nth-child(even) {
  background-color: rgb(from var(--color-warning) r g b / 0.14) !important;
}

html.dark .av-tailux-table .mud-table-body .mud-table-row.av-row--draft:hover {
  background-color: rgb(from var(--color-warning) r g b / 0.2) !important;
}

/* ------------------------------------------------------------
   /pre-approval/loan-estimates — page-level scope-restringido.
   Same opt-in pattern as Loans / CRMBorrowerLoanOfficer. Mobile
   refinements + pagination chrome fix + tweaks for the related-
   loan expansion panel and the group header.
   ------------------------------------------------------------ */

@media (max-width: 639.98px) {
  .av-crm-le-filters .av-page-filters__left {
    width: 100%;
  }

  .av-crm-le-filters .av-page-filters__search,
  .av-crm-le-filters .av-page-filters__search .mud-input-control {
    width: 100%;
    flex: 1 1 auto;
  }

  .av-crm-le-pagination .av-pagination__size {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  .av-crm-le-pagination .av-pagination__size .av-pagination__select {
    min-width: 80px;
    max-width: 96px;
  }

  .av-crm-le-pagination .av-pagination {
    justify-content: center;
    gap: 24px;
  }
}

.mud-table-pagination:has(.av-crm-le-pagination),
.mud-table-pagination-toolbar:has(.av-crm-le-pagination),
.mud-table-foot:has(.av-crm-le-pagination),
tr:has(> td > .av-crm-le-pagination),
tr:has(> td .av-crm-le-pagination) {
  padding: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}

/* Related Loan Info — MudCollapse with a custom clickable header (replaces
   MudExpansionPanel because its TitleContent never re-renders dynamic icon /
   text bound to the parent's IsExpanded state). */
.av-crm-le-related-loan {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-gray-50);
}

html.dark .av-crm-le-related-loan {
  border-color: var(--color-dark-500);
  background-color: rgb(from var(--color-dark-700) r g b / 0.6);
}

.av-crm-le-related-loan__header {
  padding: 12px 16px;
  cursor: pointer;
  background-color: transparent;
  user-select: none;
  transition: background-color 150ms ease;
}

.av-crm-le-related-loan__header:hover {
  background-color: rgb(from var(--color-gray-900) r g b / 0.04);
}

html.dark .av-crm-le-related-loan__header:hover {
  background-color: rgb(from var(--color-white) r g b / 0.04);
}

.av-crm-le-related-loan__icon {
  color: var(--color-primary-600);
}

html.dark .av-crm-le-related-loan__icon {
  color: var(--color-primary-400);
}

.av-crm-le-related-loan__chevron {
  color: var(--color-gray-600);
  transition: transform 150ms ease;
}

html.dark .av-crm-le-related-loan__chevron {
  color: var(--color-dark-200);
}

.av-crm-le-related-loan__body {
  padding: 0 16px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Section 1: Loan stats — responsive grid (4 cols desktop / 2 tablet / 1 mobile). */
.av-crm-le-related-loan__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-gray-200);
}

html.dark .av-crm-le-related-loan__grid {
  border-bottom-color: var(--color-dark-500);
}

@media (max-width: 959.98px) {
  .av-crm-le-related-loan__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 599.98px) {
  .av-crm-le-related-loan__grid {
    grid-template-columns: 1fr;
  }
}

/* Section 2: People — stacked sections with eyebrow + person rows. */
.av-crm-le-related-loan__people {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.av-crm-le-related-loan__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.av-crm-le-related-loan__section-title {
  color: var(--color-primary-600) !important;
  letter-spacing: 0.04em;
}

html.dark .av-crm-le-related-loan__section-title {
  color: var(--color-primary-400) !important;
}

/* Person row — avatar (initials) + name + meta line. */
.av-crm-le-related-loan__person {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
}

.av-crm-le-related-loan__person-avatar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgb(from var(--color-primary-500) r g b / 0.12);
  color: var(--color-primary-700);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
}

html.dark .av-crm-le-related-loan__person-avatar {
  background-color: rgb(from var(--color-primary-400) r g b / 0.2);
  color: var(--color-primary-200);
}

.av-crm-le-related-loan__person-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}

.av-crm-le-related-loan__person-name {
  color: var(--color-gray-900);
  font-weight: 500;
  line-height: 1.3;
}

html.dark .av-crm-le-related-loan__person-name {
  color: var(--color-dark-50);
}

.av-crm-le-related-loan__person-meta {
  color: var(--color-gray-600);
  line-height: 1.35;
  word-break: break-word;
}

html.dark .av-crm-le-related-loan__person-meta {
  color: var(--color-dark-200);
}

.av-crm-le-related-loan__bullet {
  color: var(--color-gray-400);
  margin: 0 6px;
  user-select: none;
}

html.dark .av-crm-le-related-loan__bullet {
  color: var(--color-dark-400);
}

/* Section 3: Observations — block at the end with icon + body text. */
.av-crm-le-related-loan__observations {
  padding-top: 16px;
  border-top: 1px solid var(--color-gray-200);
}

html.dark .av-crm-le-related-loan__observations {
  border-top-color: var(--color-dark-500);
}

.av-crm-le-related-loan__observations-header {
  margin-bottom: 6px;
}

.av-crm-le-related-loan__obs-icon {
  color: var(--color-primary-600) !important;
  width: 18px;
  height: 18px;
}

html.dark .av-crm-le-related-loan__obs-icon {
  color: var(--color-primary-400) !important;
}

/* Group header inside the MudTable — soft gray strip with subtle
   text emphasis. Replaces the legacy GroupHeaderStyle inline. */
.av-crm-le-table .mud-table-body .mud-table-cell.av-crm-le-group-header {
  background-color: var(--color-gray-100);
  font-weight: 500;
  padding: 10px 16px;
}

html.dark
  .av-crm-le-table
  .mud-table-body
  .mud-table-cell.av-crm-le-group-header {
  background-color: rgb(from var(--color-dark-600) r g b / 0.5);
}

/* Striped rows — opt-in for /crm/borrower/loan-officers using project tokens
   so the colors track light/dark mode without relying on Mud palette tokens.
   The .av-crm-bo-table class modifier is applied to the MudTable in this view. */
.av-crm-bo-table.av-tailux-table
  .mud-table-body
  .mud-table-row:nth-child(even) {
  background-color: var(--color-gray-50);
}

html.dark
  .av-crm-bo-table.av-tailux-table
  .mud-table-body
  .mud-table-row:nth-child(even) {
  background-color: rgb(from var(--color-dark-600) r g b / 0.4);
}

/* ───────────────────────────────────────────────────────────────────
   View Loan Estimate (/pre-approval/loan-estimates/view-loan-estimate/{id})
   Scope-restricted skin for the read-only detail view.
   ─────────────────────────────────────────────────────────────────── */

/* Header — Go Back stays right-aligned on desktop, drops below on mobile. */
.av-crm-vle-header .av-page-header__actions {
  flex-shrink: 0;
}

/* Address block + Property Appraiser link sitting under the AddressDisplay. */
.av-crm-vle-address {
  display: block;
  margin-bottom: 1.5rem;
}

.av-crm-vle-appraiser {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius-md);
  background-color: var(--color-gray-100);
  border: 1px solid var(--color-gray-200);
}

html.dark .av-crm-vle-appraiser {
  background-color: rgb(from var(--color-dark-600) r g b / 0.5);
  border-color: var(--color-dark-500);
}

.av-crm-vle-appraiser__icon {
  color: var(--color-primary-600);
}

html.dark .av-crm-vle-appraiser__icon {
  color: var(--color-primary-400);
}

.av-crm-vle-appraiser__link {
  font-size: var(--text-sm);
  color: var(--color-primary-600);
  word-break: break-all;
}

html.dark .av-crm-vle-appraiser__link {
  color: var(--color-primary-400);
}

/* Cards — Loan Terms + Cash to Close share the same chrome on top of av-table-card. */
.av-crm-vle-card {
  margin-bottom: 1.5rem;
}

.av-crm-vle-card__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-gray-200);
}

html.dark .av-crm-vle-card__header {
  border-bottom-color: var(--color-dark-500);
}

.av-crm-vle-card__icon {
  color: var(--color-primary-600);
  width: 20px;
  height: 20px;
}

html.dark .av-crm-vle-card__icon {
  color: var(--color-primary-400);
}

.av-crm-vle-card__title {
  color: var(--color-gray-900);
}

html.dark .av-crm-vle-card__title {
  color: var(--color-dark-50);
}

.av-crm-vle-card__body {
  padding: 1.25rem;
}

/* Tables (summary + detail A..J) — the legacy .le-summary-table / .le-detail-table
   classes are replaced by scope-restricted av-crm-vle-table modifiers. */
.av-crm-vle-table {
  border: none !important;
  box-shadow: none !important;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.av-crm-vle-table thead tr {
  background: var(--color-gray-100);
}

html.dark .av-crm-vle-table thead tr {
  background: rgb(from var(--color-dark-600) r g b / 0.6);
}

/* Deliberate exception to CLAUDE.md §Typography: MudSimpleTable does NOT wrap
   <th>/<td> in .mud-typography-* and applying the class cell-by-cell would
   mean ~260 edits across detail tables A..J for zero functional gain on a
   read-only view. Metrics here CONSUME the same tokens (--text-xs, etc.) the
   .mud-typography-overline/body2 classes consume, so the scale stays the
   single source of truth — only the application point shifts. */
.av-crm-vle-table thead th {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold, 600);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-gray-600);
  padding: 0.625rem 1rem;
  white-space: nowrap;
  border-bottom: 1px solid var(--color-gray-200);
}

html.dark .av-crm-vle-table thead th {
  color: var(--color-dark-200);
  border-bottom-color: var(--color-dark-500);
}

.av-crm-vle-table tbody tr {
  transition: background-color 150ms ease;
  border-bottom: 1px solid var(--color-gray-100);
}

html.dark .av-crm-vle-table tbody tr {
  border-bottom-color: rgb(from var(--color-dark-500) r g b / 0.4);
}

.av-crm-vle-table tbody tr:last-child {
  border-bottom: none;
}

.av-crm-vle-table tbody tr:hover {
  background: var(--color-gray-50) !important;
}

html.dark .av-crm-vle-table tbody tr:hover {
  background: rgb(from var(--color-dark-600) r g b / 0.4) !important;
}

.av-crm-vle-table tbody td {
  font-size: var(--text-xs-plus);
  padding: 0.5rem 1rem;
  color: var(--color-gray-800);
}

html.dark .av-crm-vle-table tbody td {
  color: var(--color-dark-100);
}

/* Summary table — first column 60% / second 40%. */
.av-crm-vle-table--summary th:first-child,
.av-crm-vle-table--summary td:first-child {
  width: 60%;
}

.av-crm-vle-table--summary th:last-child,
.av-crm-vle-table--summary td:last-child {
  width: 40%;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Detail tables A..J — uniform 6-column grid so every table lines up column
   for column. Columns: 1 index · 2 count · 3 period · 4 description ·
   5 At Closing · 6 Before Closing. Tables that don't use count/period span
   the index across columns 1-3 (colspan="3"); table G uses all six. A shared
   <colgroup> + table-layout:fixed guarantees identical column x-positions
   across the separate tables. */
.av-crm-vle-table--detail,
.av-crm-vle-table--detail table {
  table-layout: fixed;
  width: 100%;
}

.av-crm-vle-table__c1 { width: 5%; }
.av-crm-vle-table__c2 { width: 6%; }
.av-crm-vle-table__c3 { width: 9%; }
.av-crm-vle-table__c4 { width: 40%; }
.av-crm-vle-table__c5 { width: 20%; }
.av-crm-vle-table__c6 { width: 20%; }

/* Index column for tables without count/period — spans the same 20% as
   G's columns 1-3 combined, so the description column (c4) starts at the
   same x in every table. */
.av-crm-vle-table__cidx { width: 20%; }

/* Legacy width helpers — kept for the header letter/label cells (widths now
   come from the colgroup; these stay harmless). */
.av-crm-vle-table__num {
  width: 5%;
}

.av-crm-vle-table__label {
  width: 40%;
}

.av-crm-vle-table__col {
  width: 20%;
}

/* Value columns = the last two cells of every row. Works for both the
   colspan rows (index spans 1-3) and table G's six individual cells. */
.av-crm-vle-table--detail thead th:nth-last-child(-n+2),
.av-crm-vle-table--detail tbody td:nth-last-child(-n+2) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Long section labels wrap instead of overflowing the fixed column. */
.av-crm-vle-table--detail th,
.av-crm-vle-table--detail td {
  overflow-wrap: anywhere;
}

/* Row variants — same exception block as the header/cell rules above. */
.av-crm-vle-table__row--subtotal td {
  color: var(--color-primary-700);
  font-weight: var(--font-weight-semibold, 600);
  background: rgb(from var(--color-primary-500) r g b / 0.06);
}

html.dark .av-crm-vle-table__row--subtotal td {
  color: var(--color-primary-300);
  background: rgb(from var(--color-primary-400) r g b / 0.12);
}

.av-crm-vle-table__row--muted td {
  color: var(--color-gray-600);
}

html.dark .av-crm-vle-table__row--muted td {
  color: var(--color-dark-300);
}

.av-crm-vle-table__total--ok td {
  color: var(--color-success-darker);
  font-weight: var(--font-weight-bold, 700);
  background: rgb(from var(--color-success-light) r g b / 0.1);
}

html.dark .av-crm-vle-table__total--ok td {
  color: var(--color-success-lighter);
  background: rgb(from var(--color-success-lighter) r g b / 0.16);
}

.av-crm-vle-table__total--bad td {
  color: var(--color-error-darker);
  font-weight: var(--font-weight-bold, 700);
  background: rgb(from var(--color-error-light) r g b / 0.1);
}

html.dark .av-crm-vle-table__total--bad td {
  color: var(--color-error-lighter);
  background: rgb(from var(--color-error-lighter) r g b / 0.16);
}

/* Additional Close Information — MudCollapse + custom clickable header
   (same pattern as .av-crm-le-related-loan: MudExpansionPanel's TitleContent
   would not re-render the dynamic chevron / label bound to isOpen). */
.av-crm-vle-additional {
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

html.dark .av-crm-vle-additional {
  background: rgb(from var(--color-dark-700) r g b / 0.4);
  border-color: var(--color-dark-500);
}

.av-crm-vle-additional__header {
  padding: 0.875rem 1.125rem;
  cursor: pointer;
  background-color: transparent;
  user-select: none;
  transition: background-color 150ms ease;
}

.av-crm-vle-additional__header:hover {
  background-color: rgb(from var(--color-gray-900) r g b / 0.04);
}

html.dark .av-crm-vle-additional__header:hover {
  background-color: rgb(from var(--color-white) r g b / 0.04);
}

.av-crm-vle-additional__title {
  width: 100%;
}

.av-crm-vle-additional__title .mud-icon-root {
  color: var(--color-primary-600);
}

html.dark .av-crm-vle-additional__title .mud-icon-root {
  color: var(--color-primary-400);
}

.av-crm-vle-additional__chevron {
  color: var(--color-gray-600) !important;
}

html.dark .av-crm-vle-additional__chevron {
  color: var(--color-dark-200) !important;
}

.av-crm-vle-additional__body {
  padding: 0 1.125rem 1.125rem 1.125rem;
}

/* Read-only "toggle" — overline label + badge value pair. Replaces MudSwitch
   Disabled (which renders unreadable in this view's grid; and the thumb
   geometry breaks under dark + small size + disabled). The badge expresses
   the value statically without affordance for interaction. */
.av-crm-vle-readonly-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
}

.av-crm-vle-readonly-toggle__label {
  color: var(--color-gray-600);
}

html.dark .av-crm-vle-readonly-toggle__label {
  color: var(--color-dark-200);
}

/* ───────────────────────────────────────────────────────────────────
   Add Loan Estimate (/pre-approval/loan-estimates/add-loan-estimate/{LoanId})
   ─────────────────────────────────────────────────────────────────── */

/* Canonical Tailux form-actions row: justify-end + 12px gap (space-x-3).
   Pattern from demo/src/app/pages/forms/add-product-form/steps/{General,Images}.jsx.
   Cancel left (outline), primary CTA right (Calculate -> Confirm). */
.av-crm-ale-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 16px;
  margin-bottom: 24px;
}

@media (max-width: 599.98px) {
  .av-crm-ale-form-actions {
    flex-direction: column-reverse;
  }

  .av-crm-ale-form-actions .av-btn {
    width: 100%;
  }
}

/* Two-step progress indicator (Loan Terms -> Review & Confirm). Layout/color
   only — text size comes from Typo.* in markup. */
.av-crm-vle-steps {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.av-crm-vle-steps__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.av-crm-vle-steps__marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 9999px;
  background: var(--color-gray-200);
  color: var(--color-gray-600);
  flex-shrink: 0;
}

html.dark .av-crm-vle-steps__marker {
  background: var(--color-dark-500);
  color: var(--color-dark-100);
}

.av-crm-vle-steps__item--active .av-crm-vle-steps__marker {
  background: var(--color-primary-600);
  color: var(--color-white);
}

html.dark .av-crm-vle-steps__item--active .av-crm-vle-steps__marker {
  background: var(--color-primary-500);
}

.av-crm-vle-steps__item--done .av-crm-vle-steps__marker {
  background: var(--color-success);
  color: var(--color-white);
}

.av-crm-vle-steps__label {
  color: var(--color-gray-500);
}

html.dark .av-crm-vle-steps__label {
  color: var(--color-dark-300);
}

.av-crm-vle-steps__item--active .av-crm-vle-steps__label {
  color: var(--color-gray-900);
}

html.dark .av-crm-vle-steps__item--active .av-crm-vle-steps__label {
  color: var(--color-dark-50);
}

.av-crm-vle-steps__connector {
  flex: 1 1 32px;
  min-width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-gray-200);
}

html.dark .av-crm-vle-steps__connector {
  background: var(--color-dark-500);
}

.av-crm-vle-steps__connector--done {
  background: var(--color-success);
}

/* Sticky live summary column (desktop only). Keeps Loan Terms / PITI visible
   while the user edits the inputs. */
@media (min-width: 1264px) {
  .av-crm-vle-summary-sticky {
    position: sticky;
    top: 16px;
  }
}

/* ───────────────────────────────────────────────────────────────────
   View Loan (/pre-approval/loans/view-loan/{LoanId})
   Read-only detail view organized in tabs.
   ─────────────────────────────────────────────────────────────────── */

.av-crm-vl-header .av-page-header__actions {
  flex-shrink: 0;
}

/* Loan Officer / labelled value block (Attendees tab). */
.av-crm-vl-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0;
}

.av-crm-vl-section__title {
  color: var(--color-primary-600);
  letter-spacing: 0.04em;
}

html.dark .av-crm-vl-section__title {
  color: var(--color-primary-400);
}

.av-crm-vl-section__value {
  color: var(--color-gray-800);
}

html.dark .av-crm-vl-section__value {
  color: var(--color-dark-100);
}

/* Pagination footer of the Credits tab — same surface chrome as the
   shared .av-crm-loans-pagination / .av-crm-le-pagination patterns, but
   scope-restricted because the tab panel hosts it (no av-table-card
   wrapper around the MudTable inside this view). */
.av-crm-vl-credits-pagination {
  border-top: 1px solid var(--color-gray-200);
  padding-top: 12px;
}

html.dark .av-crm-vl-credits-pagination {
  border-top-color: var(--color-dark-500);
}

/* Read-only "toggle" — overline label + badge value pair (same pattern as
   .av-crm-vle-readonly-toggle, scope-restricted to this view). */
.av-crm-vl-readonly-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
}

.av-crm-vl-readonly-toggle__label {
  color: var(--color-gray-600);
}

html.dark .av-crm-vl-readonly-toggle__label {
  color: var(--color-dark-200);
}

.av-crm-vl-readonly-toggle__value {
  min-width: 96px;
  max-width: 140px;
}

/* Additional Loan Information subsection (Loan Info tab right column). */
.av-crm-vl-subsection {
  padding-top: 8px;
  border-top: 1px dashed var(--color-gray-200);
}

html.dark .av-crm-vl-subsection {
  border-top-color: var(--color-dark-500);
}

.av-crm-vl-subsection__icon {
  color: var(--color-primary-600);
}

html.dark .av-crm-vl-subsection__icon {
  color: var(--color-primary-400);
}

.av-crm-vl-subsection__title {
  color: var(--color-gray-900);
}

html.dark .av-crm-vl-subsection__title {
  color: var(--color-dark-50);
}

/* ───────────────────────────────────────────────────────────────────
   Add Loan — wizard (/pre-approval/loans/add-loan)
   MudStepper-based creation wizard. Reuses av-page-card, av-form-sections,
   av-form-section, av-table-card, av-tailux-table, av-info-field, av-badge,
   av-chip. Only the bits below are wizard-specific. Typography comes from
   Typo.* — no font metrics here.
   ─────────────────────────────────────────────────────────────────── */

/* Wizard nav row rendered inside MudStepper ActionContent:
   Back on the left, Next / Confirm on the right. */
.av-crm-loan-form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 8px;
}

.av-crm-loan-form-actions__right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

@media (max-width: 599.98px) {
  .av-crm-loan-form-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .av-crm-loan-form-actions__right {
    flex-direction: column-reverse;
    align-items: stretch;
    margin-left: 0;
  }

  .av-crm-loan-form-actions .av-btn {
    width: 100%;
  }
}

/* Loan Officer Assistants picker surface inside the Participants step. */
.av-crm-loan-form-loa {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
}

html.dark .av-crm-loan-form-loa {
  border-color: var(--color-dark-500);
}

/* Review step — person row (borrower / realtor with badge). */
.av-crm-loan-form-review__person {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}

.av-crm-loan-form-review__person + .av-crm-loan-form-review__person {
  border-top: 1px solid var(--color-gray-100);
}

html.dark .av-crm-loan-form-review__person + .av-crm-loan-form-review__person {
  border-top-color: var(--color-dark-600);
}

/* Borrower name in a person row grows to fill the width; actions stay at the
   end. Ellipsis so long names never push the action buttons off the aside. */
.av-crm-loan-form-review__person-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Summary panel: borrower list under the count. Small top gap from the count. */
.av-crm-loan-form-aside-people {
  display: flex;
  flex-direction: column;
  margin-top: 4px;
}

/* Wizard body: full-width stepper (nav spans the whole card). */
.av-crm-loan-form-body {
  padding: 1.25rem;
}

/* Per-step content: form on the left, help + live summary on the right
   (below the stepper nav). Single column under 992px (aside drops below). */
.av-crm-loan-form-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

@media (min-width: 992px) {
  .av-crm-loan-form-step {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  }
}

.av-crm-loan-form-step__aside {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

/* Validation banner message list — spacing only; text size comes from Typo.body2. */
.av-validation-banner__list {
  margin: 0;
  padding-left: 1.1rem;
}

/* Aside card — subtle surface for the contextual help + live summary. */
.av-crm-loan-form-aside-card {
  background: var(--color-gray-100);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: 1rem 1.125rem;
}

html.dark .av-crm-loan-form-aside-card {
  background: var(--color-dark-600);
  border-color: var(--color-dark-500);
}

.av-crm-loan-form-aside-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.av-crm-loan-form-aside-card__icon {
  color: var(--color-primary-600);
}

html.dark .av-crm-loan-form-aside-card__icon {
  color: var(--color-primary-400);
}

.av-crm-loan-form-aside-summary {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Summary head with the Loan Type badge pinned to the corner (WI #1085). */
.av-crm-loan-form-aside-card__head--between {
  justify-content: space-between;
}

.av-crm-loan-form-aside-card__head-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* Summary participant region (borrowers / realtors): a tinted box with a left
   accent so each group is identifiable at a glance. Borrowers use the primary
   accent, realtors the info accent. Color/layout only — typography via Typo.*
   (WI #1085). */
.av-summary-region {
  border-radius: var(--radius-md);
  padding: 8px 10px;
  border-left: 3px solid var(--color-primary-500);
  background: rgb(from var(--color-primary-500) r g b / 0.06);
}

html.dark .av-summary-region {
  border-left-color: var(--color-primary-400);
  background: rgb(from var(--color-primary-400) r g b / 0.12);
}

.av-summary-region--realtor {
  border-left-color: var(--color-info-500);
  background: rgb(from var(--color-info-500) r g b / 0.06);
}

html.dark .av-summary-region--realtor {
  border-left-color: var(--color-info-400);
  background: rgb(from var(--color-info-400) r g b / 0.12);
}

.av-summary-region__label {
  display: block;
  margin-bottom: 4px;
}

/* Tightly-packed participant names inside a summary region. */
.av-summary-region__people {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.av-summary-region__people .av-crm-loan-form-review__person {
  padding: 1px 0;
}

.av-summary-region__people .av-crm-loan-form-review__person + .av-crm-loan-form-review__person {
  border-top: none;
}

/* ───────────────────────────────────────────────────────────────────
   Generic CRM form wizard scaffolding (av-crm-form-*)
   Shared, domain-agnostic layout for any MudStepper-based creation wizard
   (first consumer: /identity/users/add-user). Mirrors the loan wizard layout
   above but without the "loan" name so other creation flows can reuse it.
   Layout/spacing only — typography comes from Typo.*.
   ─────────────────────────────────────────────────────────────────── */

/* Wizard body: full-width stepper (nav spans the whole card). */
.av-crm-form-body {
  padding: 1.25rem;
}

/* Per-step content: form on the left, help + live summary on the right
   (below the stepper nav). Single column under 992px (aside drops below). */
.av-crm-form-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

@media (min-width: 992px) {
  .av-crm-form-step {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  }
}

.av-crm-form-step__aside {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

/* Wizard nav row rendered inside MudStepper ActionContent:
   Back on the left, Cancel / Next / Confirm on the right. */
.av-crm-form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 8px;
}

.av-crm-form-actions__right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

@media (max-width: 599.98px) {
  .av-crm-form-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .av-crm-form-actions__right {
    flex-direction: column-reverse;
    align-items: stretch;
    margin-left: 0;
  }

  .av-crm-form-actions .av-btn {
    width: 100%;
  }
}

/* Aside card — subtle surface for the contextual help + live summary. */
.av-crm-form-aside-card {
  background: var(--color-gray-100);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: 1rem 1.125rem;
}

html.dark .av-crm-form-aside-card {
  background: var(--color-dark-600);
  border-color: var(--color-dark-500);
}

.av-crm-form-aside-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.av-crm-form-aside-card__icon {
  color: var(--color-primary-600);
}

html.dark .av-crm-form-aside-card__icon {
  color: var(--color-primary-400);
}

.av-crm-form-aside-summary {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Summary panel: item list under the count. Small top gap from the count. */
.av-crm-form-aside-people {
  display: flex;
  flex-direction: column;
  margin-top: 4px;
}

/* Review step — item row (name + badge/actions). */
.av-crm-form-review__person {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}

.av-crm-form-review__person + .av-crm-form-review__person {
  border-top: 1px solid var(--color-gray-100);
}

html.dark .av-crm-form-review__person + .av-crm-form-review__person {
  border-top-color: var(--color-dark-600);
}

/* Name grows to fill the width; actions stay at the end. Ellipsis so long
   names never push the action buttons off the aside. */
.av-crm-form-review__person-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ───────────────────────────────────────────────────────────────────
   Borrower Applications List (/1003-form/new-borrower-application-1003-list)
   Cards grid + list view of the borrower's 1003 forms with status + people.
   Replaces the legacy \3c style> block (~720 lines with rgba HEX hardcoded).
   ─────────────────────────────────────────────────────────────────── */

.av-crm-bal-header .av-page-header__actions {
  flex-shrink: 0;
}

.av-crm-bal-filters {
  padding: 16px 20px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  margin-top: 16px;
}

html.dark .av-crm-bal-filters {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

.av-crm-bal-filters__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.av-crm-bal-filters__icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background-color: rgb(from var(--color-primary-500) r g b / 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-600);
}

html.dark .av-crm-bal-filters__icon {
  background-color: rgb(from var(--color-primary-400) r g b / 0.12);
  color: var(--color-primary-400);
}

.av-crm-bal-filters__label {
  color: var(--color-gray-800);
}

html.dark .av-crm-bal-filters__label {
  color: var(--color-dark-100);
}

.av-crm-bal-filters__lo-select {
  min-width: 240px;
  max-width: 360px;
}

.av-crm-bal-filters__lo-option {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.av-crm-bal-filters__lo-company {
  color: var(--color-gray-500);
}

html.dark .av-crm-bal-filters__lo-company {
  color: var(--color-dark-300);
}

.av-crm-bal-status-chips {
  flex-shrink: 0;
}

.av-crm-bal-view-toggle {
  display: inline-flex;
  gap: 4px;
}

/* Card (grid view) */
.av-crm-bal-card {
  padding: 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-200);
  background: var(--color-white);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease;
}

html.dark .av-crm-bal-card {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

.av-crm-bal-card:hover {
  border-color: var(--color-gray-300);
  box-shadow: 0 2px 8px rgb(from var(--color-gray-900) r g b / 0.04);
}

html.dark .av-crm-bal-card:hover {
  border-color: var(--color-dark-400);
  box-shadow: 0 2px 8px rgb(from var(--color-black) r g b / 0.16);
}

.av-crm-bal-card--completed {
  border-left: 3px solid rgb(from var(--color-success-light) r g b / 0.6);
}

.av-crm-bal-card--pending {
  border-left: 3px solid rgb(from var(--color-warning-light) r g b / 0.6);
}

.av-crm-bal-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.av-crm-bal-card__avatar-section {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.av-crm-bal-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-weight: 600;
  font-size: 13px;
  flex-shrink: 0;
}

.av-crm-bal-card__avatar--success {
  background-color: var(--color-success-light);
}

.av-crm-bal-card__avatar--warning {
  background-color: var(--color-warning-light);
}

.av-crm-bal-card__user-info {
  flex: 1;
  min-width: 0;
}

.av-crm-bal-card__user-name {
  color: var(--color-gray-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.dark .av-crm-bal-card__user-name {
  color: var(--color-dark-50);
}

.av-crm-bal-card__user-company {
  color: var(--color-gray-500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.dark .av-crm-bal-card__user-company {
  color: var(--color-dark-300);
}

.av-crm-bal-card__menu {
  opacity: 0.6;
  transition: opacity 150ms ease;
  flex-shrink: 0;
}

.av-crm-bal-card:hover .av-crm-bal-card__menu {
  opacity: 1;
}

.av-crm-bal-card__status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
}

html.dark .av-crm-bal-card__status {
  background: rgb(from var(--color-dark-600) r g b / 0.4);
}

.av-crm-bal-card__tasks-badge {
  cursor: pointer;
}

.av-crm-bal-card__consent-alert {
  padding: 10px 12px;
  background: rgb(from var(--color-warning-light) r g b / 0.08);
  border-radius: var(--radius-md);
  border: 1px solid rgb(from var(--color-warning-light) r g b / 0.2);
}

html.dark .av-crm-bal-card__consent-alert {
  background: rgb(from var(--color-warning-lighter) r g b / 0.12);
  border-color: rgb(from var(--color-warning-lighter) r g b / 0.28);
}

.av-crm-bal-card__consent-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  color: var(--color-warning-darker);
}

html.dark .av-crm-bal-card__consent-header {
  color: var(--color-warning-lighter);
}

.av-crm-bal-card__consent-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.av-crm-bal-card__consent-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.av-crm-bal-card__consent-name {
  color: var(--color-gray-800);
  overflow: hidden;
  text-overflow: ellipsis;
}

html.dark .av-crm-bal-card__consent-name {
  color: var(--color-dark-100);
}

/* Card details */
.av-crm-bal-card__details {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.av-crm-bal-card__detail-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.av-crm-bal-card__detail-row--full {
  align-items: center;
}

.av-crm-bal-card__detail-grow {
  flex: 1;
  min-width: 0;
}

.av-crm-bal-card__detail-row--primary-borrower {
  padding: 8px;
  background: rgb(from var(--color-primary-500) r g b / 0.06);
  border-radius: var(--radius-md);
}

html.dark .av-crm-bal-card__detail-row--primary-borrower {
  background: rgb(from var(--color-primary-400) r g b / 0.1);
}

.av-crm-bal-card__detail-icon--primary {
  color: var(--color-primary-600);
}

html.dark .av-crm-bal-card__detail-icon--primary {
  color: var(--color-primary-400);
}

.av-crm-bal-card__detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 599.98px) {
  .av-crm-bal-card__detail-grid {
    grid-template-columns: 1fr;
  }
}

.av-crm-bal-card__detail-value {
  color: var(--color-gray-800);
  word-break: break-word;
}

html.dark .av-crm-bal-card__detail-value {
  color: var(--color-dark-100);
}

.av-crm-bal-card__amount {
  color: var(--color-primary-700);
  font-weight: 500;
}

html.dark .av-crm-bal-card__amount {
  color: var(--color-primary-300);
}

.av-crm-bal-card__address,
.av-crm-bal-card__coborrower {
  color: var(--color-gray-800);
  word-break: break-word;
}

html.dark .av-crm-bal-card__address,
html.dark .av-crm-bal-card__coborrower {
  color: var(--color-dark-100);
}

.av-crm-bal-card__expiration {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgb(from var(--color-warning-light) r g b / 0.08);
  color: var(--color-warning-darker);
  border-radius: var(--radius-md);
  width: fit-content;
}

html.dark .av-crm-bal-card__expiration {
  background: rgb(from var(--color-warning-lighter) r g b / 0.12);
  color: var(--color-warning-lighter);
}

.av-crm-bal-card__action {
  margin-top: auto;
}

/* Add new application card (grid view) */
.av-crm-bal-add-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 16px;
  border-radius: var(--radius-lg);
  border: 2px dashed var(--color-gray-300);
  background: rgb(from var(--color-gray-100) r g b / 0.4);
  height: 100%;
  cursor: pointer;
  transition:
    border-color 150ms ease,
    background-color 150ms ease;
  text-align: center;
}

html.dark .av-crm-bal-add-card {
  border-color: var(--color-dark-400);
  background: rgb(from var(--color-dark-600) r g b / 0.3);
}

.av-crm-bal-add-card:hover {
  border-color: var(--color-primary-500);
  background: rgb(from var(--color-primary-500) r g b / 0.04);
}

html.dark .av-crm-bal-add-card:hover {
  border-color: var(--color-primary-400);
  background: rgb(from var(--color-primary-400) r g b / 0.06);
}

.av-crm-bal-add-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgb(from var(--color-primary-500) r g b / 0.1);
  color: var(--color-primary-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

html.dark .av-crm-bal-add-card__icon {
  background: rgb(from var(--color-primary-400) r g b / 0.16);
  color: var(--color-primary-400);
}

.av-crm-bal-add-card__title {
  color: var(--color-primary-700);
}

html.dark .av-crm-bal-add-card__title {
  color: var(--color-primary-300);
}

/* List view row */
.av-crm-bal-list-row {
  padding: 12px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-200);
  background: var(--color-white);
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease;
}

html.dark .av-crm-bal-list-row {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

.av-crm-bal-list-row:hover {
  border-color: var(--color-gray-300);
}

html.dark .av-crm-bal-list-row:hover {
  border-color: var(--color-dark-400);
}

.av-crm-bal-list-row--completed {
  border-left: 3px solid rgb(from var(--color-success-light) r g b / 0.6);
}

.av-crm-bal-list-row--pending {
  border-left: 3px solid rgb(from var(--color-warning-light) r g b / 0.6);
}

.av-crm-bal-list-row__content {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.av-crm-bal-list-row__details {
  flex-wrap: wrap;
}

/* Summary footer */
.av-crm-bal-summary {
  padding: 12px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-200);
  background: var(--color-gray-50);
  margin-top: 16px;
}

html.dark .av-crm-bal-summary {
  background: rgb(from var(--color-dark-600) r g b / 0.4);
  border-color: var(--color-dark-500);
}

.av-crm-bal-summary__stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-gray-700);
}

html.dark .av-crm-bal-summary__stat {
  color: var(--color-dark-200);
}

.av-crm-bal-summary__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.av-crm-bal-summary__dot--warning {
  background-color: var(--color-warning-light);
}

.av-crm-bal-summary__dot--success {
  background-color: var(--color-success-light);
}

/* Loading state */
.av-crm-bal-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 64px 24px;
  background: transparent;
}

/* ───────────────────────────────────────────────────────────────────
   Applicant Consent component
   Consumed by: ConsentAndCreateForm1003Dialog (inside av-form-dialog skin)
                and ApplicantConsentPage (standalone consent route).
   ─────────────────────────────────────────────────────────────────── */
.av-applicant-consent {
  padding: 24px;
  background: transparent;
}

.av-applicant-consent__illustration {
  align-self: center;
  max-width: 280px;
  margin-bottom: 8px;
}

.av-applicant-consent__title {
  color: var(--color-gray-900);
}

html.dark .av-applicant-consent__title {
  color: var(--color-dark-50);
}

.av-applicant-consent__description {
  color: var(--color-gray-700);
  line-height: 1.6;
}

html.dark .av-applicant-consent__description {
  color: var(--color-dark-200);
}

.av-applicant-consent__highlight {
  color: var(--color-primary-600);
  font-style: italic;
  font-weight: 500;
}

html.dark .av-applicant-consent__highlight {
  color: var(--color-primary-400);
}

.av-applicant-consent__list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.av-applicant-consent__list-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-gray-200);
}

html.dark .av-applicant-consent__list-item {
  background: rgb(from var(--color-dark-600) r g b / 0.4);
  border-color: var(--color-dark-500);
}

.av-applicant-consent__list-icon {
  color: var(--color-success);
  flex-shrink: 0;
  margin-top: 2px;
}

html.dark .av-applicant-consent__list-icon {
  color: var(--color-success-lighter);
}

.av-applicant-consent__checkbox {
  flex-shrink: 0;
}

/* Row container: checkbox a la izquierda + footer note inline a la derecha,
   alineados verticalmente al centro. En mobile se apilan en columna. */
.av-applicant-consent__consent-row {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.av-applicant-consent__footer-note {
  color: var(--color-gray-500);
  font-style: italic;
  line-height: 1.4;
  flex: 1;
  min-width: 0;
}

html.dark .av-applicant-consent__footer-note {
  color: var(--color-dark-300);
}

.av-applicant-consent__actions {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding-top: 8px;
}

@media (max-width: 599.98px) {
  .av-applicant-consent {
    padding: 16px;
  }

  .av-applicant-consent__actions {
    justify-content: stretch;
  }

  .av-applicant-consent__actions .av-btn {
    width: 100%;
  }

  .av-applicant-consent__consent-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .av-applicant-consent__footer-note {
    padding-left: 32px;
    /* alinear con el label del checkbox cuando se apila */
  }
}

/* ─────────────────────────────────────────────────────────────
   av-applicant-consent-page — outer page wrapper for /applicant-consent
   3 secondary states (loading / error / success-redirecting). The
   main "give consent" state is rendered by <ApplicantConsent> (its
   own scope av-applicant-consent).
   ───────────────────────────────────────────────────────────── */

.av-applicant-consent-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 200px);
  padding: 24px 16px;
}

.av-applicant-consent-page__state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 40px 32px;
  border-radius: var(--radius-xl);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  text-align: center;
  max-width: 480px;
  width: 100%;
  animation: avConsentFadeIn 250ms ease-out;
}

html.dark .av-applicant-consent-page__state {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

@keyframes avConsentFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.av-applicant-consent-page__state-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.av-applicant-consent-page__state-icon .mud-icon-root {
  width: 36px;
  height: 36px;
}

.av-applicant-consent-page__state-icon--neutral {
  background: rgb(from var(--color-primary-500) r g b / 0.1);
  color: var(--color-primary-600);
}

html.dark .av-applicant-consent-page__state-icon--neutral {
  background: rgb(from var(--color-primary-400) r g b / 0.18);
  color: var(--color-primary-300);
}

.av-applicant-consent-page__state-icon--error {
  background: rgb(from var(--color-error) r g b / 0.1);
  color: var(--color-error);
}

html.dark .av-applicant-consent-page__state-icon--error {
  background: rgb(from var(--color-error-lighter) r g b / 0.18);
  color: var(--color-error-lighter);
}

.av-applicant-consent-page__state-icon--success {
  background: rgb(from var(--color-success) r g b / 0.1);
  color: var(--color-success);
}

html.dark .av-applicant-consent-page__state-icon--success {
  background: rgb(from var(--color-success-lighter) r g b / 0.18);
  color: var(--color-success-lighter);
}

.av-applicant-consent-page__state-title.mud-typography {
  font-weight: 600;
  color: var(--color-gray-900);
  line-height: 1.3;
  max-width: 360px;
}

html.dark .av-applicant-consent-page__state-title.mud-typography {
  color: var(--color-dark-50);
}

.av-applicant-consent-page__state-subtitle.mud-typography {
  line-height: 1.5;
  max-width: 360px;
}

.av-applicant-consent-page__state-progress {
  width: 100%;
  margin-top: 8px;
}

.av-applicant-consent-page__state--loading
  .av-applicant-consent-page__state-icon
  .mud-progress-circular {
  width: 44px;
  height: 44px;
}

@media (max-width: 599.98px) {
  .av-applicant-consent-page {
    padding: 16px;
    min-height: calc(100vh - 160px);
  }

  .av-applicant-consent-page__state {
    padding: 32px 20px;
  }

  .av-applicant-consent-page__state-icon {
    width: 64px;
    height: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .av-applicant-consent-page__state {
    animation: none;
  }
}

/* ───────────────────────────────────────────────────────────────────
   1003 Form shell (/1003-form/new-borrower-application-1003/{FormId})
   Multi-step form wizard with sidebar nav desktop + drawer mobile.
   Replaces the inline `\3c style>` block (form-scroll-container, active_link,
   mobile-nav-toggle, scroll-to-top-btn) with tokens-based scope.
   ─────────────────────────────────────────────────────────────────── */

/* Scroll container around the active subsection content. */
.av-1003-form-scroll {
  min-height: calc(100vh - 280px);
  max-height: calc(100vh - 280px);
  overflow-y: auto;
  overflow-x: clip;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

html.dark .av-1003-form-scroll {
  border-color: var(--color-dark-500);
  background: var(--color-dark-700);
}

/* Inner paper that wraps the active subsection. */
.av-1003-form-content {
  padding: 16px;
  min-height: 100%;
  background: transparent;
}

@media (min-width: 600px) {
  .av-1003-form-content {
    padding: 24px;
  }
}

/* Footer actions — canonical Tailux pattern: justify-end + gap + Cancel/Back left,
   primary CTA right. */
.av-1003-form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 12px 16px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

html.dark .av-1003-form-actions {
  border-color: var(--color-dark-500);
  background: var(--color-dark-700);
}

@media (max-width: 599.98px) {
  .av-1003-form-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .av-1003-form-actions .av-btn {
    width: 100%;
  }
}

/* ── DESKTOP SIDEBAR NAV (1003 wizard) ────────────────────────────────
   Card wrapper + Tailux-style nav with consistent parent / child rows,
   visible "pending" dot when an item has no status icon, hover bg,
   active accent bar, animated chevron. Scope `.av-1003-form-nav`.
   ─────────────────────────────────────────────────────────────────── */

.av-1003-form-nav {
  min-height: calc(100vh - 280px);
  max-height: calc(100vh - 280px);
  overflow-y: auto;
  overflow-x: clip;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  padding: 12px;
}

html.dark .av-1003-form-nav {
  border-color: var(--color-dark-500);
  background: var(--color-dark-700);
}

/* Mobile drawer — same chrome inside, just different container. */
.av-1003-form-nav-drawer .mud-drawer-content {
  background: var(--color-white);
  padding: 12px;
}

html.dark .av-1003-form-nav-drawer .mud-drawer-content {
  background: var(--color-dark-700);
}

/* ── HEADER ──────────────────────────────────────────────────────── */

.av-1003-form-nav__header {
  padding: 4px 12px 12px;
  border-bottom: 1px solid var(--color-gray-100);
  margin-bottom: 8px;
}

html.dark .av-1003-form-nav__header {
  border-bottom-color: var(--color-dark-500);
}

.av-1003-form-nav__title {
  display: block;
  font-weight: 600;
  color: var(--color-gray-900);
  margin-bottom: 2px;
}

html.dark .av-1003-form-nav__title {
  color: var(--color-dark-50);
}

.av-1003-form-nav__subtitle {
  display: block;
  color: var(--color-gray-500);
  line-height: 1.4;
}

html.dark .av-1003-form-nav__subtitle {
  color: var(--color-dark-300);
}

/* ── NAV MENU CONTAINER ──────────────────────────────────────────── */

.av-1003-form-nav .av-1003-form-nav__menu {
  padding: 0;
}

/* ── PARENT ITEMS (NavGroup header + top-level NavLink) ──────────── */

/* NOTA — MudNavLink renderiza un wrapper `.mud-nav-item` (donde aplica la
   Class= que le pasamos) + un `.mud-nav-link` interno. Los estilos visuales
   (padding, flex, etc.) van en el inner `.mud-nav-link`. Por eso los selectores
   del top-link descienden a `.av-1003-form-nav__top-link .mud-nav-link`.
   MudNavGroup renderiza un `.mud-nav-link` directo como su header (es el
   button collapsible), por eso ese selector NO desciende. */
.av-1003-form-nav .mud-nav-group > .mud-nav-link,
.av-1003-form-nav .av-1003-form-nav__top-link .mud-nav-link,
.av-1003-form-nav-drawer .mud-nav-group > .mud-nav-link,
.av-1003-form-nav-drawer .av-1003-form-nav__top-link .mud-nav-link {
  display: flex;
  align-items: center;
  border-radius: 8px;
  padding: 10px 12px;
  margin: 2px 0;
  min-height: 0;
  transition:
    background-color 150ms ease,
    color 150ms ease;
  color: var(--color-gray-800);
  font-weight: 600;
}

html.dark .av-1003-form-nav .mud-nav-group > .mud-nav-link,
html.dark .av-1003-form-nav .av-1003-form-nav__top-link .mud-nav-link,
html.dark .av-1003-form-nav-drawer .mud-nav-group > .mud-nav-link,
html.dark .av-1003-form-nav-drawer .av-1003-form-nav__top-link .mud-nav-link {
  color: var(--color-dark-100);
}

.av-1003-form-nav
  .mud-nav-group
  > .mud-nav-link:hover:not(.av-1003-form-nav__link--active),
.av-1003-form-nav
  .av-1003-form-nav__top-link:not(.av-1003-form-nav__link--active)
  .mud-nav-link:hover {
  background-color: var(--color-gray-100);
}

html.dark
  .av-1003-form-nav
  .mud-nav-group
  > .mud-nav-link:hover:not(.av-1003-form-nav__link--active),
html.dark
  .av-1003-form-nav
  .av-1003-form-nav__top-link:not(.av-1003-form-nav__link--active)
  .mud-nav-link:hover {
  background-color: var(--color-dark-600);
}

/* Active state for top-link wrapper — paint the inner .mud-nav-link bg. */
.av-1003-form-nav
  .av-1003-form-nav__top-link.av-1003-form-nav__link--active
  .mud-nav-link,
.av-1003-form-nav-drawer
  .av-1003-form-nav__top-link.av-1003-form-nav__link--active
  .mud-nav-link {
  background-color: rgb(from var(--color-primary-500) r g b / 0.1);
  color: var(--color-primary-700);
}

html.dark
  .av-1003-form-nav
  .av-1003-form-nav__top-link.av-1003-form-nav__link--active
  .mud-nav-link,
html.dark
  .av-1003-form-nav-drawer
  .av-1003-form-nav__top-link.av-1003-form-nav__link--active
  .mud-nav-link {
  background-color: rgb(from var(--color-primary-400) r g b / 0.18);
  color: var(--color-primary-200);
}

/* Parent label (Mud renders `.mud-nav-link-text`) — mismo size + weight en
   los 2 tipos de parent (NavGroup button y NavLink wrapper). Mud aplica
   font-weight: normal al `.mud-nav-link-text` interno por default (sobreescribe
   el 600 del `.mud-nav-link`), por eso lo forzamos a 600 explícito acá. */
.av-1003-form-nav .mud-nav-group > .mud-nav-link .mud-nav-link-text,
.av-1003-form-nav .av-1003-form-nav__top-link .mud-nav-link .mud-nav-link-text,
.av-1003-form-nav-drawer .mud-nav-group > .mud-nav-link .mud-nav-link-text,
.av-1003-form-nav-drawer
  .av-1003-form-nav__top-link
  .mud-nav-link
  .mud-nav-link-text {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.25;
}

/* Suppress hover bg on the inner .mud-nav-link-text — Mud applies its own
   hover bg + ripple on the text wrapper which stacks ON TOP of the outer
   link's hover/active bg, producing a visible "double hover" halo on the
   text area. Only the outer link should carry the bg. */
.av-1003-form-nav .av-1003-form-nav__top-link .mud-nav-link-text,
.av-1003-form-nav .av-1003-form-nav__top-link .mud-nav-link-text:hover,
.av-1003-form-nav .av-1003-form-nav__top-link:hover .mud-nav-link-text,
.av-1003-form-nav-drawer .av-1003-form-nav__top-link .mud-nav-link-text,
.av-1003-form-nav-drawer .av-1003-form-nav__top-link .mud-nav-link-text:hover,
.av-1003-form-nav-drawer .av-1003-form-nav__top-link:hover .mud-nav-link-text {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Parent status icon — render the SVG as a 20-px disc with consistent
   stroke. Color follows MudBlazor's Color.X param (Success / Error). */
.av-1003-form-nav .mud-nav-group > .mud-nav-link .mud-nav-link-icon,
.av-1003-form-nav .av-1003-form-nav__top-link .mud-nav-link .mud-nav-link-icon,
.av-1003-form-nav-drawer .mud-nav-group > .mud-nav-link .mud-nav-link-icon,
.av-1003-form-nav-drawer
  .av-1003-form-nav__top-link
  .mud-nav-link
  .mud-nav-link-icon {
  width: 20px;
  height: 20px;
  margin-right: 12px;
  flex-shrink: 0;
}

.av-1003-form-nav .mud-nav-group > .mud-nav-link .mud-nav-link-icon svg,
.av-1003-form-nav
  .av-1003-form-nav__top-link
  .mud-nav-link
  .mud-nav-link-icon
  svg,
.av-1003-form-nav-drawer .mud-nav-group > .mud-nav-link .mud-nav-link-icon svg,
.av-1003-form-nav-drawer
  .av-1003-form-nav__top-link
  .mud-nav-link
  .mud-nav-link-icon
  svg {
  width: 100%;
  height: 100%;
}

/* Neutralize Mud's inner .mud-nav-link-icon-button: when MudNavLink has
   `Icon=...`, Mud wraps the icon in an IconButton-like element which carries
   its own button-like hover bg + circular border-radius + padding + ripple.
   Without this, hovering the link shows TWO overlapping bg layers (the inner
   icon-button + our outer link) AND a visible circular halo around the icon. */
.av-1003-form-nav .mud-nav-group > .mud-nav-link .mud-nav-link-icon-button,
.av-1003-form-nav .av-1003-form-nav__top-link .mud-nav-link-icon-button {
  background-color: transparent !important;
  background-image: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  border: none !important;
  min-width: auto !important;
  min-height: auto !important;
  width: auto !important;
  height: auto !important;
}

.av-1003-form-nav
  .mud-nav-group
  > .mud-nav-link
  .mud-nav-link-icon-button:hover,
.av-1003-form-nav .av-1003-form-nav__top-link .mud-nav-link-icon-button:hover,
.av-1003-form-nav
  .mud-nav-group
  > .mud-nav-link:hover
  .mud-nav-link-icon-button,
.av-1003-form-nav .av-1003-form-nav__top-link:hover .mud-nav-link-icon-button {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Kill Mud's ripple overlay (`.mud-ripple-container`) inside the icon-button —
   it adds a circular animation on click that visually pulses an opaque disc. */
.av-1003-form-nav .mud-nav-link-icon-button .mud-ripple,
.av-1003-form-nav .mud-nav-link-icon-button .mud-ripple-container {
  display: none !important;
}

/* Cuando un parent NO tiene status icon (Mud omite el `.mud-nav-link-icon`
   cuando `Icon=null`), reservamos un spacer invisible del mismo ancho que
   el icon-slot (20px icon + 12px margin = 32px) para que el label alinee
   verticalmente con los parents que SÍ tienen icon. NO dibujamos placeholder
   visible (dashed circle) porque mete ruido al menú. */
.av-1003-form-nav
  .mud-nav-group
  > .mud-nav-link:not(:has(.mud-nav-link-icon))::before,
.av-1003-form-nav
  .av-1003-form-nav__top-link
  .mud-nav-link:not(:has(.mud-nav-link-icon))::before,
.av-1003-form-nav-drawer
  .mud-nav-group
  > .mud-nav-link:not(:has(.mud-nav-link-icon))::before,
.av-1003-form-nav-drawer
  .av-1003-form-nav__top-link
  .mud-nav-link:not(:has(.mud-nav-link-icon))::before {
  content: "";
  width: 20px;
  height: 20px;
  margin-right: 12px;
  flex-shrink: 0;
}

/* Chevron on parent NavGroups — bigger transition, neutral color. */
.av-1003-form-nav .mud-nav-group .mud-nav-link-expand-icon {
  width: 16px;
  height: 16px;
  color: var(--color-gray-400);
  transition: transform 200ms ease;
}

html.dark .av-1003-form-nav .mud-nav-group .mud-nav-link-expand-icon {
  color: var(--color-dark-300);
}

.av-1003-form-nav
  .mud-nav-group.mud-expanded
  > .mud-nav-link
  .mud-nav-link-expand-icon,
.av-1003-form-nav
  .mud-nav-group
  .mud-nav-link[aria-expanded="true"]
  .mud-nav-link-expand-icon {
  transform: rotate(90deg);
}

/* ── CHILD ITEMS (NavLinks inside a NavGroup) ────────────────────── */

.av-1003-form-nav .mud-collapse-container .mud-nav-link {
  position: relative;
  border-radius: 8px;
  padding: 7px 12px 7px 44px;
  /* 44 px indent so child status disc aligns
                                   8 px past parent label start */
  margin: 1px 4px 1px 8px;
  min-height: 0;
  transition:
    background-color 150ms ease,
    color 150ms ease;
  color: var(--color-gray-600);
  font-weight: 500;
}

html.dark .av-1003-form-nav .mud-collapse-container .mud-nav-link {
  color: var(--color-dark-200);
}

.av-1003-form-nav
  .mud-collapse-container
  .mud-nav-link:hover:not(.av-1003-form-nav__link--active) {
  background-color: var(--color-gray-100);
}

html.dark
  .av-1003-form-nav
  .mud-collapse-container
  .mud-nav-link:hover:not(.av-1003-form-nav__link--active) {
  background-color: var(--color-dark-600);
}

/* Child row — Mud wraps inner content in a MudStack; we just shrink the
   inner gap and force a single typography size. */
.av-1003-form-nav .mud-collapse-container .mud-nav-link .mud-stack {
  gap: 8px;
}

.av-1003-form-nav .mud-collapse-container .mud-nav-link .mud-typography-body2 {
  font-size: 13px;
  line-height: 1.4;
}

/* Child status icon — the `<MudIcon Size=Small>` inside each child row.
   Force 16 px so success/error read the same regardless of source SVG. */
.av-1003-form-nav
  .mud-collapse-container
  .mud-nav-link
  .mud-stack
  .mud-icon-root {
  width: 16px;
  height: 16px;
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  flex-shrink: 0;
}

/* Pending dot — appears when the child row has NO status icon (Mud
   didn't render any `.mud-icon-root` because `IsXxxValid == null`).
   `:not(:has())` keeps every child visually aligned with its siblings. */
.av-1003-form-nav
  .mud-collapse-container
  .mud-nav-link:not(:has(.mud-stack .mud-icon-root))::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-gray-300);
}

html.dark
  .av-1003-form-nav
  .mud-collapse-container
  .mud-nav-link:not(:has(.mud-stack .mud-icon-root))::before {
  background-color: var(--color-dark-400);
}

/* ── ACTIVE STATE (child + top-level) ─────────────────────────────────
   MudNavLink renderiza `.mud-nav-item` wrapper + `.mud-nav-link` interno.
   La clase `av-1003-form-nav__link--active` viene en el wrapper. El bg/color
   visual aplica al `.mud-nav-link` interno. El item activo se marca como UNA
   LÍNEA RECTA full-width (sin border-radius, sin margen lateral) — diseño
   pedido en el shell del 1003. Scope-restringido a .av-1003-form-nav* para no
   afectar al nav principal del MainLayout. */

/* Child NavLinks dentro del NavGroup expanded (Personal, Contact, Address, etc.)
   La fila active se extiende borde-a-borde del wrapper `.av-1003-form-nav` (que
   tiene padding: 12px) via margin negativo de -12px en cada lado. El padding
   interior se recalcula para mantener el texto alineado con los items normales:
   - padding-left: 44 (child base) + 12 (wrapper padding compensado) = 56
   - padding-right: 12 + 12 = 24 */
.av-1003-form-nav
  .mud-collapse-container
  .mud-nav-item.av-1003-form-nav__link--active
  .mud-nav-link,
.av-1003-form-nav-drawer
  .mud-collapse-container
  .mud-nav-item.av-1003-form-nav__link--active
  .mud-nav-link {
  background-color: rgb(from var(--color-primary-500) r g b / 0.12);
  color: var(--color-primary-700);
  font-weight: 600;
  border-radius: 0 !important;
  margin: 0 -12px !important;
  padding: 7px 24px 7px 56px !important;
}

html.dark
  .av-1003-form-nav
  .mud-collapse-container
  .mud-nav-item.av-1003-form-nav__link--active
  .mud-nav-link,
html.dark
  .av-1003-form-nav-drawer
  .mud-collapse-container
  .mud-nav-item.av-1003-form-nav__link--active
  .mud-nav-link {
  background-color: rgb(from var(--color-primary-400) r g b / 0.2);
  color: var(--color-primary-300);
}

/* Status icon del item active: ajustar la posición absoluta para compensar el
   margin negativo de -12px (el icon estaba en left: 18px, ahora va a 30px) */
.av-1003-form-nav
  .mud-collapse-container
  .mud-nav-item.av-1003-form-nav__link--active
  .mud-nav-link
  .mud-stack
  .mud-icon-root,
.av-1003-form-nav-drawer
  .mud-collapse-container
  .mud-nav-item.av-1003-form-nav__link--active
  .mud-nav-link
  .mud-stack
  .mud-icon-root {
  left: 30px;
}

/* Pending dot del item active (cuando no tiene icon): compensar también */
.av-1003-form-nav
  .mud-collapse-container
  .mud-nav-item.av-1003-form-nav__link--active
  .mud-nav-link:not(:has(.mud-stack .mud-icon-root))::before,
.av-1003-form-nav-drawer
  .mud-collapse-container
  .mud-nav-item.av-1003-form-nav__link--active
  .mud-nav-link:not(:has(.mud-stack .mud-icon-root))::before {
  left: 35px;
}

/* Disabled state — softer than Mud's default. */
.av-1003-form-nav .mud-nav-link.mud-nav-link-disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* ── CTA Review & Submit (final destination, distinct from NavGroups) ── */

.av-1003-form-nav__cta-divider.mud-divider,
.av-1003-form-nav-drawer .av-1003-form-nav__cta-divider.mud-divider {
  margin: 16px 4px 12px;
  border-color: var(--color-gray-150);
}

html.dark .av-1003-form-nav__cta-divider.mud-divider,
html.dark .av-1003-form-nav-drawer .av-1003-form-nav__cta-divider.mud-divider {
  border-color: var(--color-dark-500);
}

/* Base — MudButton Variant.Text en estado inactivo. Aplicamos bg + border
   custom encima del Mud-default Text variant (que es transparente). */
.av-1003-form-nav .mud-button-root.av-1003-form-nav__cta-rs,
.av-1003-form-nav-drawer .mud-button-root.av-1003-form-nav__cta-rs {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 14px 14px;
  margin: 0 0 4px;
  border-radius: var(--radius-xl);
  background-color: rgb(from var(--color-primary-500) r g b / 0.08);
  border: 1px solid rgb(from var(--color-primary-500) r g b / 0.22);
  color: var(--color-primary-700);
  transition:
    background-color 200ms ease,
    border-color 200ms ease,
    transform 150ms ease,
    box-shadow 200ms ease;
  min-height: 0;
  text-transform: none;
  letter-spacing: 0;
  width: 100%;
}

html.dark .av-1003-form-nav .mud-button-root.av-1003-form-nav__cta-rs,
html.dark .av-1003-form-nav-drawer .mud-button-root.av-1003-form-nav__cta-rs {
  background-color: rgb(from var(--color-primary-400) r g b / 0.14);
  border-color: rgb(from var(--color-primary-400) r g b / 0.3);
  color: var(--color-primary-200);
}

.av-1003-form-nav
  .mud-button-root.av-1003-form-nav__cta-rs:hover:not(
    .av-1003-form-nav__cta-rs--active
  ),
.av-1003-form-nav-drawer
  .mud-button-root.av-1003-form-nav__cta-rs:hover:not(
    .av-1003-form-nav__cta-rs--active
  ) {
  background-color: rgb(from var(--color-primary-500) r g b / 0.14);
  border-color: rgb(from var(--color-primary-500) r g b / 0.35);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgb(from var(--color-primary-500) r g b / 0.18);
}

html.dark
  .av-1003-form-nav
  .mud-button-root.av-1003-form-nav__cta-rs:hover:not(
    .av-1003-form-nav__cta-rs--active
  ),
html.dark
  .av-1003-form-nav-drawer
  .mud-button-root.av-1003-form-nav__cta-rs:hover:not(
    .av-1003-form-nav__cta-rs--active
  ) {
  background-color: rgb(from var(--color-primary-400) r g b / 0.22);
  border-color: rgb(from var(--color-primary-400) r g b / 0.45);
  box-shadow: 0 4px 12px rgb(from var(--color-primary-400) r g b / 0.3);
}

/* Active — MudButton.Filled.Primary aporta el bg primary nativo. Forzamos
   blanco explícito en TODOS los hijos (Mud's contrast-text token puede
   resolver a un color del theme que no contrasta bien con primary-600). */
.av-1003-form-nav
  .mud-button-root.av-1003-form-nav__cta-rs.av-1003-form-nav__cta-rs--active,
.av-1003-form-nav-drawer
  .mud-button-root.av-1003-form-nav__cta-rs.av-1003-form-nav__cta-rs--active {
  border: 1px solid var(--color-primary-700);
  color: var(--color-white) !important;
  box-shadow: 0 4px 12px rgb(from var(--color-primary-500) r g b / 0.3);
}

html.dark
  .av-1003-form-nav
  .mud-button-root.av-1003-form-nav__cta-rs.av-1003-form-nav__cta-rs--active,
html.dark
  .av-1003-form-nav-drawer
  .mud-button-root.av-1003-form-nav__cta-rs.av-1003-form-nav__cta-rs--active {
  border-color: var(--color-primary-400);
  box-shadow: 0 4px 12px rgb(from var(--color-primary-400) r g b / 0.3);
}

/* Título y subtítulo unificados en blanco — misma legibilidad/jerarquía
   visual, sin gradación de opacidad. */
.av-1003-form-nav__cta-rs--active .mud-button-label,
.av-1003-form-nav__cta-rs--active
  .av-1003-form-nav__cta-rs-title.mud-typography,
.av-1003-form-nav__cta-rs--active
  .av-1003-form-nav__cta-rs-subtitle.mud-typography,
.av-1003-form-nav__cta-rs--active .av-1003-form-nav__cta-rs-chevron,
.av-1003-form-nav__cta-rs--active
  .av-1003-form-nav__cta-rs-chevron
  .mud-svg-icon,
.av-1003-form-nav__cta-rs--active .av-1003-form-nav__cta-rs-icon .mud-icon-root,
html.dark .av-1003-form-nav__cta-rs--active .mud-button-label,
html.dark
  .av-1003-form-nav__cta-rs--active
  .av-1003-form-nav__cta-rs-title.mud-typography,
html.dark
  .av-1003-form-nav__cta-rs--active
  .av-1003-form-nav__cta-rs-subtitle.mud-typography,
html.dark .av-1003-form-nav__cta-rs--active .av-1003-form-nav__cta-rs-chevron,
html.dark
  .av-1003-form-nav__cta-rs--active
  .av-1003-form-nav__cta-rs-chevron
  .mud-svg-icon,
html.dark
  .av-1003-form-nav__cta-rs--active
  .av-1003-form-nav__cta-rs-icon
  .mud-icon-root {
  color: var(--color-white) !important;
}

.av-1003-form-nav__cta-rs--active .av-1003-form-nav__cta-rs-chevron {
  opacity: 0.85;
}

/* MudButton wrapps inner content en .mud-button-label — la convertimos en
   el flex container del CTA */
.av-1003-form-nav__cta-rs .mud-button-label {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 12px;
  color: inherit;
  font-weight: inherit;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.3;
}

.av-1003-form-nav__cta-rs-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgb(from var(--color-primary-500) r g b / 0.12);
  color: var(--color-primary-700);
  transition:
    background 200ms ease,
    color 200ms ease;
}

html.dark .av-1003-form-nav__cta-rs-icon {
  background: rgb(from var(--color-primary-400) r g b / 0.2);
  color: var(--color-primary-200);
}

.av-1003-form-nav__cta-rs--active .av-1003-form-nav__cta-rs-icon,
html.dark .av-1003-form-nav__cta-rs--active .av-1003-form-nav__cta-rs-icon {
  background: rgb(from var(--color-white) r g b / 0.2);
  color: var(--color-white);
}

.av-1003-form-nav__cta-rs-icon .mud-icon-root {
  width: 20px;
  height: 20px;
}

.av-1003-form-nav__cta-rs-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.av-1003-form-nav__cta-rs-title.mud-typography {
  font-weight: 600;
  color: inherit;
  letter-spacing: 0;
  line-height: 1.2;
}

.av-1003-form-nav__cta-rs-subtitle.mud-typography {
  color: rgb(from var(--color-primary-700) r g b / 0.75);
  line-height: 1.3;
  letter-spacing: 0.02em;
}

html.dark .av-1003-form-nav__cta-rs-subtitle.mud-typography {
  color: rgb(from var(--color-primary-200) r g b / 0.85);
}

.av-1003-form-nav__cta-rs--active
  .av-1003-form-nav__cta-rs-subtitle.mud-typography,
html.dark
  .av-1003-form-nav__cta-rs--active
  .av-1003-form-nav__cta-rs-subtitle.mud-typography {
  color: rgb(from var(--color-white) r g b / 0.85);
}

.av-1003-form-nav__cta-rs-chevron {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: inherit;
  opacity: 0.6;
  transition:
    transform 200ms ease,
    opacity 200ms ease;
}

.av-1003-form-nav__cta-rs:hover .av-1003-form-nav__cta-rs-chevron {
  transform: translateX(2px);
  opacity: 1;
}

/* Mobile nav toggle — fixed top-right, only visible <= sm. */
.av-1003-form-mobile-toggle {
  position: fixed;
  top: 58px;
  /* below the app's MudAppBar */
  right: 16px;
  z-index: 1100;
  background-color: var(--color-white);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgb(from var(--color-gray-900) r g b / 0.1);
}

html.dark .av-1003-form-mobile-toggle {
  background-color: var(--color-dark-700);
  box-shadow: 0 2px 4px rgb(from var(--color-black) r g b / 0.4);
}

.av-1003-form-mobile-toggle:hover {
  background-color: var(--color-gray-50);
}

html.dark .av-1003-form-mobile-toggle:hover {
  background-color: var(--color-dark-600);
}

/* Scroll-to-top floating button. JS interop toggles the `visible` class
   when the user scrolls past a threshold in the form content container. */
.av-1003-form-scroll-top {
  position: fixed;
  bottom: 90px;
  right: 24px;
  z-index: 1000;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-primary-600);
  color: var(--color-white);
  box-shadow: 0 4px 12px rgb(from var(--color-gray-900) r g b / 0.15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition:
    opacity 300ms ease,
    transform 300ms ease,
    box-shadow 300ms ease,
    background-color 150ms ease;
}

html.dark .av-1003-form-scroll-top {
  background-color: var(--color-primary-500);
  box-shadow: 0 4px 12px rgb(from var(--color-black) r g b / 0.4);
}

.av-1003-form-scroll-top .mud-icon-root {
  color: var(--color-white);
}

.av-1003-form-scroll-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.av-1003-form-scroll-top:hover {
  background-color: var(--color-primary-700);
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgb(from var(--color-gray-900) r g b / 0.2);
}

html.dark .av-1003-form-scroll-top:hover {
  background-color: var(--color-primary-600);
}

@media (max-width: 959.98px) {
  .av-1003-form-scroll-top {
    bottom: 80px;
    right: 16px;
    width: 44px;
    height: 44px;
  }
}

/* ───────────────────────────────────────────────────────────────────
   1003 Form — BI_Intro (Borrower Information intro subsection)

   Hero card (gradient + dot pattern + decorative blobs + loan-officer
   mini-card) → trust strip (3 inline value props with tinted icons +
   vertical dividers) → 3 info cards (each with a tinted icon disc +
   colored top-border accent).

   Token-driven, light + dark, scope `.av-bi-intro`.
   ─────────────────────────────────────────────────────────────────── */

.av-bi-intro {
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: avBiIntroFadeIn 0.45s ease-out;
}

@keyframes avBiIntroFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── SHELL CONTAINMENT — defensive opt-out ───────────────────────────
   When this subsection is mounted, the outer wizard shell
   (`.av-1003-form-scroll` + `.av-1003-form-content`) turns transparent
   so the hero card with its gradient/pattern/blobs floats directly
   on the page background. Other subsections keep the white card. */

.av-1003-form-scroll:has(.av-bi-intro),
.av-1003-form-scroll:has(.av-ab-intro),
.av-1003-form-scroll:has(.av-ld-intro) {
  border: none;
  background: transparent;
}

html.dark .av-1003-form-scroll:has(.av-bi-intro),
html.dark .av-1003-form-scroll:has(.av-ab-intro),
html.dark .av-1003-form-scroll:has(.av-ld-intro) {
  background: transparent;
}

.av-1003-form-scroll:has(.av-bi-intro) .av-1003-form-content,
.av-1003-form-scroll:has(.av-ab-intro) .av-1003-form-content,
.av-1003-form-scroll:has(.av-ld-intro) .av-1003-form-content {
  padding: 0;
}

/* ── HERO CARD ───────────────────────────────────────────────────── */

.av-bi-intro__hero {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  padding: 32px 36px;
  background: linear-gradient(
    135deg,
    rgb(from var(--color-primary-500) r g b / 0.08) 0%,
    rgb(from var(--color-primary-600) r g b / 0.04) 45%,
    rgb(from var(--color-success) r g b / 0.06) 100%
  );
}

html.dark .av-bi-intro__hero {
  border-color: var(--color-dark-500);
  background: linear-gradient(
    135deg,
    rgb(from var(--color-primary-400) r g b / 0.16) 0%,
    rgb(from var(--color-primary-500) r g b / 0.08) 45%,
    rgb(from var(--color-success-lighter) r g b / 0.1) 100%
  );
}

/* Dot pattern overlay — subtle texture, masked diagonally so it fades
   from the top-right corner. */
.av-bi-intro__hero-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(
    rgb(from var(--color-primary-600) r g b / 0.1) 1px,
    transparent 1px
  );
  background-size: 18px 18px;
  mask-image: linear-gradient(
    135deg,
    transparent 0%,
    rgb(0 0 0 / 0.4) 60%,
    rgb(0 0 0 / 1) 100%
  );
  -webkit-mask-image: linear-gradient(
    135deg,
    transparent 0%,
    rgb(0 0 0 / 0.4) 60%,
    rgb(0 0 0 / 1) 100%
  );
  opacity: 0.7;
}

html.dark .av-bi-intro__hero-pattern {
  background-image: radial-gradient(
    rgb(from var(--color-primary-300) r g b / 0.12) 1px,
    transparent 1px
  );
  opacity: 0.5;
}

/* Two decorative blobs — pure CSS soft-light circles, one primary, one
   success, positioned at the corners to give the card depth. */
.av-bi-intro__hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
  opacity: 0.55;
}

.av-bi-intro__hero-blob--a {
  width: 220px;
  height: 220px;
  right: -60px;
  top: -80px;
  background: radial-gradient(
    circle,
    var(--color-primary-300) 0%,
    transparent 70%
  );
}

.av-bi-intro__hero-blob--b {
  width: 180px;
  height: 180px;
  right: 30%;
  bottom: -100px;
  background: radial-gradient(
    circle,
    var(--color-success-lighter) 0%,
    transparent 70%
  );
}

html.dark .av-bi-intro__hero-blob {
  opacity: 0.3;
}

html.dark .av-bi-intro__hero-blob--a {
  background: radial-gradient(
    circle,
    var(--color-primary-500) 0%,
    transparent 70%
  );
}

html.dark .av-bi-intro__hero-blob--b {
  background: radial-gradient(
    circle,
    var(--color-success-light) 0%,
    transparent 70%
  );
}

.av-bi-intro__hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.65fr);
  align-items: center;
  gap: 28px;
}

.av-bi-intro__hero-text {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.av-bi-intro__hero-art {
  display: flex;
  justify-content: center;
  align-items: center;
}

.av-bi-intro__hero-img {
  max-height: 200px;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 24px rgb(from var(--color-gray-900) r g b / 0.1));
}

html.dark .av-bi-intro__hero-img {
  filter: drop-shadow(0 8px 24px rgb(from var(--color-black) r g b / 0.5));
}

.av-bi-intro__started-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
}

.av-bi-intro__started-badge-icon {
  width: 16px;
  height: 16px;
}

.av-bi-intro__greeting {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--color-gray-900);
}

html.dark .av-bi-intro__greeting {
  color: var(--color-dark-50);
}

.av-bi-intro__lead {
  margin: 0;
  line-height: 1.6;
  max-width: 60ch;
  color: var(--color-gray-700);
}

html.dark .av-bi-intro__lead {
  color: var(--color-dark-200);
}

/* Loan-officer mini-card — sits over the hero gradient, glass-like
   surface so it reads as a discrete module without breaking the
   hero's color story. */
.av-bi-intro__lo {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px 12px 14px;
  border-radius: var(--radius-lg);
  background: rgb(from var(--color-white) r g b / 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--color-gray-200);
  box-shadow: 0 1px 2px rgb(from var(--color-gray-900) r g b / 0.04);
  align-self: flex-start;
  max-width: 100%;
}

html.dark .av-bi-intro__lo {
  background: rgb(from var(--color-dark-700) r g b / 0.65);
  border-color: var(--color-dark-500);
  box-shadow: 0 1px 2px rgb(from var(--color-black) r g b / 0.3);
}

.av-bi-intro__lo-avatar {
  width: 44px;
  height: 44px;
  font-size: 15px;
  font-weight: 600;
  background-color: var(--color-primary-600);
  color: var(--color-white);
  flex-shrink: 0;
}

html.dark .av-bi-intro__lo-avatar {
  background-color: var(--color-primary-500);
}

.av-bi-intro__lo-body {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}

.av-bi-intro__lo-label {
  color: var(--color-gray-500);
  letter-spacing: 0.06em;
}

html.dark .av-bi-intro__lo-label {
  color: var(--color-dark-300);
}

.av-bi-intro__lo-name {
  font-weight: 600;
  color: var(--color-gray-900);
  line-height: 1.3;
}

html.dark .av-bi-intro__lo-name {
  color: var(--color-dark-50);
}

.av-bi-intro__lo-meta {
  color: var(--color-gray-500);
}

html.dark .av-bi-intro__lo-meta {
  color: var(--color-dark-300);
}

/* ── TRUST STRIP ─────────────────────────────────────────────────── */

.av-bi-intro__strip {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 16px 20px;
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
}

html.dark .av-bi-intro__strip {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

.av-bi-intro__strip-item {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 8px;
  min-width: 0;
}

.av-bi-intro__strip-divider {
  margin: 4px 0;
  border-color: var(--color-gray-200);
}

html.dark .av-bi-intro__strip-divider {
  border-color: var(--color-dark-500);
}

.av-bi-intro__strip-icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.av-bi-intro__strip-icon-wrap .mud-icon-root {
  width: 20px;
  height: 20px;
}

.av-bi-intro__strip-icon-wrap--success {
  background: rgb(from var(--color-success) r g b / 0.1);
  color: var(--color-success-darker);
}

html.dark .av-bi-intro__strip-icon-wrap--success {
  background: rgb(from var(--color-success-lighter) r g b / 0.18);
  color: var(--color-success-lighter);
}

.av-bi-intro__strip-icon-wrap--warning {
  background: rgb(from var(--color-warning) r g b / 0.1);
  color: var(--color-warning-darker);
}

html.dark .av-bi-intro__strip-icon-wrap--warning {
  background: rgb(from var(--color-warning-lighter) r g b / 0.18);
  color: var(--color-warning-lighter);
}

.av-bi-intro__strip-icon-wrap--info {
  background: rgb(from var(--color-info) r g b / 0.1);
  color: var(--color-info-darker);
}

html.dark .av-bi-intro__strip-icon-wrap--info {
  background: rgb(from var(--color-info-lighter) r g b / 0.18);
  color: var(--color-info-lighter);
}

.av-bi-intro__strip-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.av-bi-intro__strip-title {
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-gray-900);
}

html.dark .av-bi-intro__strip-title {
  color: var(--color-dark-50);
}

.av-bi-intro__strip-sub {
  color: var(--color-gray-500);
  line-height: 1.3;
}

html.dark .av-bi-intro__strip-sub {
  color: var(--color-dark-300);
}

/* ── INFO CARDS ──────────────────────────────────────────────────── */

.av-bi-intro__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.av-bi-intro__card {
  position: relative;
  padding: 24px 22px;
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  overflow: hidden;
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease;
}

html.dark .av-bi-intro__card {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

/* Top-edge accent — 3 px colored strip that subtly identifies each card. */
.av-bi-intro__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}

.av-bi-intro__card--success::before {
  background: var(--color-success);
}

.av-bi-intro__card--info::before {
  background: var(--color-info);
}

.av-bi-intro__card--primary::before {
  background: var(--color-primary-600);
}

html.dark .av-bi-intro__card--success::before {
  background: var(--color-success-lighter);
}

html.dark .av-bi-intro__card--info::before {
  background: var(--color-info-lighter);
}

html.dark .av-bi-intro__card--primary::before {
  background: var(--color-primary-400);
}

.av-bi-intro__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgb(from var(--color-gray-900) r g b / 0.08);
  border-color: var(--color-gray-300);
}

html.dark .av-bi-intro__card:hover {
  box-shadow: 0 12px 28px rgb(from var(--color-black) r g b / 0.4);
  border-color: var(--color-dark-400);
}

.av-bi-intro__card-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.av-bi-intro__card-icon .mud-icon-root {
  width: 24px;
  height: 24px;
}

.av-bi-intro__card--success .av-bi-intro__card-icon {
  background: rgb(from var(--color-success) r g b / 0.12);
  color: var(--color-success-darker);
}

html.dark .av-bi-intro__card--success .av-bi-intro__card-icon {
  background: rgb(from var(--color-success-lighter) r g b / 0.18);
  color: var(--color-success-lighter);
}

.av-bi-intro__card--info .av-bi-intro__card-icon {
  background: rgb(from var(--color-info) r g b / 0.12);
  color: var(--color-info-darker);
}

html.dark .av-bi-intro__card--info .av-bi-intro__card-icon {
  background: rgb(from var(--color-info-lighter) r g b / 0.18);
  color: var(--color-info-lighter);
}

.av-bi-intro__card--primary .av-bi-intro__card-icon {
  background: rgb(from var(--color-primary-600) r g b / 0.12);
  color: var(--color-primary-700);
}

html.dark .av-bi-intro__card--primary .av-bi-intro__card-icon {
  background: rgb(from var(--color-primary-400) r g b / 0.18);
  color: var(--color-primary-300);
}

.av-bi-intro__card-title {
  margin: 0 0 6px;
  font-weight: 600;
  color: var(--color-gray-900);
}

html.dark .av-bi-intro__card-title {
  color: var(--color-dark-50);
}

.av-bi-intro__card-body {
  margin: 0;
  color: var(--color-gray-600);
  line-height: 1.55;
}

html.dark .av-bi-intro__card-body {
  color: var(--color-dark-200);
}

/* ── RESPONSIVE ──────────────────────────────────────────────────── */

@media (max-width: 1199.98px) {
  .av-bi-intro__hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.55fr);
  }
}

@media (max-width: 959.98px) {
  .av-bi-intro__hero {
    padding: 28px 24px;
  }

  .av-bi-intro__hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .av-bi-intro__cards {
    grid-template-columns: 1fr;
  }

  .av-bi-intro__strip {
    flex-direction: column;
    align-items: stretch;
  }

  .av-bi-intro__strip-divider {
    display: none;
  }
}

@media (max-width: 599.98px) {
  .av-bi-intro__hero {
    padding: 22px 18px;
    border-radius: var(--radius-lg);
  }

  .av-bi-intro__greeting {
    font-size: 1.5rem;
  }

  .av-bi-intro__lo {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .av-bi-intro,
  .av-bi-intro__card {
    animation: none;
    transition: none;
    transform: none;
  }
}

/* ───────────────────────────────────────────────────────────────────
   1003 Form — BI_Personal (Personal Information subsection)

   Header (h5 + subtitle) → grouped section cards (light bg, border,
   radius) → Yes/No chip rows + counter widget for dependents → relation-
   ships block with icon header. Inputs adopt the Tailux border state
   machine automatically (bridge §LAST-3) via Variant.Outlined.
   Scope `.av-bi-personal`.
   ─────────────────────────────────────────────────────────────────── */

.av-bi-personal {
  display: flex;
  flex-direction: column;
  gap: 28px;
  animation: avBiPersonalFadeIn 0.35s ease-out;
}

@keyframes avBiPersonalFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── HEADER ──────────────────────────────────────────────────────── */

.av-bi-personal__header {
  margin-bottom: 4px;
}

.av-bi-personal__title {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-gray-900);
}

html.dark .av-bi-personal__title {
  color: var(--color-dark-50);
}

.av-bi-personal__subtitle {
  margin-top: 4px;
  line-height: 1.5;
}

/* ── SECTION GROUPS (no wrapper card — inputs sit directly on the
   shell. The class only exists for layout / scope; no border or bg). */

.av-bi-personal__section {
  display: block;
}

/* Eyebrow above each section — pill with contextual icon + uppercase
   label in primary tint. Replaces the wrapper card as the visual
   grouping anchor so groups don't feel monotonous without their box. */
.av-bi-personal__section-eyebrow {
  display: inline-flex;
  align-self: flex-start;
  width: fit-content;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 4px 12px 4px 8px;
  border-radius: 9999px;
  background: rgb(from var(--color-primary-500) r g b / 0.08);
  line-height: 1;
}

html.dark .av-bi-personal__section-eyebrow {
  background: rgb(from var(--color-primary-400) r g b / 0.14);
}

.av-bi-personal__section-eyebrow-icon {
  width: 14px;
  height: 14px;
  color: var(--color-primary-600);
  flex-shrink: 0;
}

html.dark .av-bi-personal__section-eyebrow-icon {
  color: var(--color-primary-300);
}

.av-bi-personal__section-eyebrow .av-bi-personal__section-eyebrow-text {
  color: var(--color-primary-700);
  line-height: 1 !important;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin: 0 !important;
  padding: 0 !important;
}

html.dark .av-bi-personal__section-eyebrow-text {
  color: var(--color-primary-300);
}

/* Dependents block — keeps a soft tinted backdrop because it carries a
   different UX (Yes/No question + counter) and benefits from being
   visually grouped. */
.av-bi-personal__section--tinted {
  padding: 20px 24px;
  border-radius: var(--radius-lg);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-150);
}

html.dark .av-bi-personal__section--tinted {
  background: var(--color-dark-750);
  border-color: var(--color-dark-500);
}

/* Section-level header inside a card (icon + title, used by the
   Relationships block). */
.av-bi-personal__section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-gray-100);
}

html.dark .av-bi-personal__section-header {
  border-bottom-color: var(--color-dark-500);
}

.av-bi-personal__section-header .mud-typography {
  font-weight: 600;
  color: var(--color-gray-900);
}

html.dark .av-bi-personal__section-header .mud-typography {
  color: var(--color-dark-50);
}

.av-bi-personal__section-header-icon {
  color: var(--color-gray-500);
  width: 18px;
  height: 18px;
}

html.dark .av-bi-personal__section-header-icon {
  color: var(--color-dark-300);
}

.av-bi-personal__section-hint {
  margin-bottom: 12px;
  line-height: 1.5;
}

/* ── YES / NO QUESTION ROW (used by Dependents + Domestic Rel.) ──── */

.av-bi-personal__yes-no-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.av-bi-personal__yes-no-label {
  font-weight: 500;
  flex: 1;
  min-width: 200px;
  color: var(--color-gray-900);
}

html.dark .av-bi-personal__yes-no-label {
  color: var(--color-dark-50);
}

.av-bi-personal__chips {
  flex-shrink: 0;
}

.av-bi-personal__chips .mud-chip {
  min-width: 60px;
  justify-content: center;
}

/* ── DEPENDENTS COUNTER ──────────────────────────────────────────── */

.av-bi-personal__counter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  background: var(--color-white);
}

html.dark .av-bi-personal__counter {
  border-color: var(--color-dark-500);
  background: var(--color-dark-700);
}

.av-bi-personal__counter-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.av-bi-personal__counter-value {
  min-width: 32px;
  text-align: center;
  font-weight: 600;
  color: var(--color-gray-900);
}

html.dark .av-bi-personal__counter-value {
  color: var(--color-dark-50);
}

.av-bi-personal__counter-btn {
  border-radius: 8px !important;
  border-color: var(--color-gray-300) !important;
}

html.dark .av-bi-personal__counter-btn {
  border-color: var(--color-dark-400) !important;
}

.av-bi-personal__counter-btn:hover:not(:disabled) {
  background-color: var(--color-gray-100) !important;
}

html.dark .av-bi-personal__counter-btn:hover:not(:disabled) {
  background-color: var(--color-dark-600) !important;
}

/* ── RESPONSIVE ──────────────────────────────────────────────────── */

@media (max-width: 599.98px) {
  .av-bi-personal__section--tinted {
    padding: 16px;
  }

  .av-bi-personal__yes-no-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .av-bi-personal__yes-no-label {
    text-align: center;
    min-width: unset;
  }

  .av-bi-personal__chips {
    align-self: center;
  }

  .av-bi-personal__counter {
    flex-direction: column;
    gap: 12px;
    padding: 16px;
  }

  .av-bi-personal__counter-controls {
    width: 100%;
    justify-content: space-between;
  }
}

@media (prefers-reduced-motion: reduce) {
  .av-bi-personal {
    animation: none;
  }

  .av-bi-personal__counter-btn {
    transition: none;
  }
}

/* ───────────────────────────────────────────────────────────────────
   Validation dialog (1003 wizard — fires from any subsection's
   Next/Submit when required fields are still empty). Header with
   warning icon + subtitle; collapsible panels per subsection; one
   error item per missing field. Token-driven, light + dark, scope
   restricted to `.av-validation-dialog`.
   ─────────────────────────────────────────────────────────────────── */

.av-validation-dialog .mud-dialog-content {
  padding: 16px 20px !important;
  max-height: 70vh;
  overflow-y: auto;
}

.av-validation-dialog__content {
  min-width: 340px;
}

/* ── HEADER ──────────────────────────────────────────────────────── */

.av-validation-dialog__header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 0 16px;
  border-bottom: 1px solid var(--color-gray-150);
  margin-bottom: 16px;
}

html.dark .av-validation-dialog__header {
  border-bottom-color: var(--color-dark-500);
}

.av-validation-dialog__header-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgb(from var(--color-warning) r g b / 0.12);
  color: var(--color-warning-darker);
}

html.dark .av-validation-dialog__header-icon {
  background: rgb(from var(--color-warning-lighter) r g b / 0.18);
  color: var(--color-warning-lighter);
}

.av-validation-dialog__header-icon .mud-icon-root {
  width: 24px;
  height: 24px;
}

.av-validation-dialog__header-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.av-validation-dialog__header-subtitle {
  color: var(--color-gray-600);
  line-height: 1.4;
  font-weight: 500;
}

html.dark .av-validation-dialog__header-subtitle {
  color: var(--color-dark-200);
}

/* ── PANELS ──────────────────────────────────────────────────────── */

.av-validation-dialog__panels {
  background: transparent !important;
}

.av-validation-dialog__panel {
  background: rgb(from var(--color-error) r g b / 0.03) !important;
  border: 1px solid rgb(from var(--color-error) r g b / 0.2) !important;
  border-radius: var(--radius-lg) !important;
  margin-bottom: 8px !important;
}

html.dark .av-validation-dialog__panel {
  background: rgb(from var(--color-error-lighter) r g b / 0.06) !important;
  border-color: rgb(from var(--color-error-lighter) r g b / 0.25) !important;
}

.av-validation-dialog__panel .mud-expand-panel-header {
  padding: 10px 14px !important;
  min-height: auto !important;
}

.av-validation-dialog__panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.av-validation-dialog__panel-title {
  font-weight: 600;
  color: var(--color-gray-900);
}

html.dark .av-validation-dialog__panel-title {
  color: var(--color-dark-50);
}

.av-validation-dialog__panel-body {
  padding: 6px 0 2px;
}

/* ── ERROR ITEMS ─────────────────────────────────────────────────── */

.av-validation-dialog__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: rgb(from var(--color-error) r g b / 0.05);
  border-radius: var(--radius-md);
  border-left: 2px solid var(--color-error);
}

html.dark .av-validation-dialog__item {
  background: rgb(from var(--color-error-lighter) r g b / 0.1);
  border-left-color: var(--color-error-lighter);
}

.av-validation-dialog__item .mud-typography {
  font-size: 13px;
  color: var(--color-gray-800);
}

html.dark .av-validation-dialog__item .mud-typography {
  color: var(--color-dark-100);
}

.av-validation-dialog__item .mud-icon-root {
  flex-shrink: 0;
}

/* ── RESPONSIVE ──────────────────────────────────────────────────── */

@media (max-width: 599.98px) {
  .av-validation-dialog__content {
    min-width: auto;
  }

  .av-validation-dialog .mud-dialog-content {
    max-height: 60vh;
  }
}

/* ── FOOTER ACTIONS ──────────────────────────────────────────────── */

.av-validation-dialog .mud-dialog-actions {
  padding: 12px 20px !important;
  border-top: 1px solid var(--color-gray-150);
  background: var(--color-gray-50);
}

html.dark .av-validation-dialog .mud-dialog-actions {
  border-top-color: var(--color-dark-500);
  background: var(--color-dark-750);
}

.av-validation-dialog__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  width: 100%;
}

.av-validation-dialog__btn-cancel.mud-button-root,
.av-validation-dialog__btn-continue.mud-button-root {
  height: 36px;
  padding: 0 18px !important;
  border-radius: 9999px !important;
  font-weight: 500;
  text-transform: none;
  box-shadow: none !important;
  min-width: 0;
}

.av-validation-dialog__btn-cancel.mud-button-root {
  background: transparent !important;
  border: 1px solid var(--color-gray-300) !important;
  color: var(--color-gray-700) !important;
}

.av-validation-dialog__btn-cancel.mud-button-root:hover {
  background: var(--color-gray-100) !important;
  border-color: var(--color-gray-400) !important;
}

html.dark .av-validation-dialog__btn-cancel.mud-button-root {
  border-color: var(--color-dark-400) !important;
  color: var(--color-dark-100) !important;
}

html.dark .av-validation-dialog__btn-cancel.mud-button-root:hover {
  background: var(--color-dark-600) !important;
  border-color: var(--color-dark-300) !important;
}

.av-validation-dialog__btn-continue.mud-button-root {
  background: var(--color-warning) !important;
  border: 1px solid var(--color-warning) !important;
  color: var(--color-white) !important;
}

.av-validation-dialog__btn-continue.mud-button-root:hover {
  background: var(--color-warning-darker) !important;
  border-color: var(--color-warning-darker) !important;
}

html.dark .av-validation-dialog__btn-continue.mud-button-root {
  background: var(--color-warning-light) !important;
  border-color: var(--color-warning-light) !important;
}

html.dark .av-validation-dialog__btn-continue.mud-button-root:hover {
  background: var(--color-warning) !important;
  border-color: var(--color-warning) !important;
}

.av-validation-dialog__btn-continue .mud-button-icon-end .mud-icon-root {
  width: 16px;
  height: 16px;
}

/* ───────────────────────────────────────────────────────────────────
   1003 Form — BI_Contact (Contact Info subsection)

   Follows the same recipe as BI_Personal: open layout (no wrapper
   cards), eyebrow pill per section with contextual icon + uppercase
   label in primary tint, inputs adopt the Tailux border state machine
   via Variant.Outlined. Scope `.av-bi-contact`.
   ─────────────────────────────────────────────────────────────────── */

.av-bi-contact {
  display: flex;
  flex-direction: column;
  gap: 28px;
  animation: avBiContactFadeIn 0.35s ease-out;
}

@keyframes avBiContactFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── HEADER ──────────────────────────────────────────────────────── */

.av-bi-contact__header {
  margin-bottom: 4px;
}

.av-bi-contact__title {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-gray-900);
}

html.dark .av-bi-contact__title {
  color: var(--color-dark-50);
}

.av-bi-contact__subtitle {
  margin-top: 4px;
  line-height: 1.5;
}

/* ── SECTION GROUPS (no wrapper card — layout / scope only). */

.av-bi-contact__section {
  display: block;
}

/* Eyebrow above each section — pill with icon + uppercase label,
   matching the BI_Personal recipe so every Borrower Information
   subsection reads the same. */
.av-bi-contact__section-eyebrow {
  display: inline-flex;
  align-self: flex-start;
  width: fit-content;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 4px 12px 4px 8px;
  border-radius: 9999px;
  background: rgb(from var(--color-primary-500) r g b / 0.08);
  line-height: 1;
}

html.dark .av-bi-contact__section-eyebrow {
  background: rgb(from var(--color-primary-400) r g b / 0.14);
}

.av-bi-contact__section-eyebrow-icon {
  width: 14px;
  height: 14px;
  color: var(--color-primary-600);
  flex-shrink: 0;
}

html.dark .av-bi-contact__section-eyebrow-icon {
  color: var(--color-primary-300);
}

.av-bi-contact__section-eyebrow .av-bi-contact__section-eyebrow-text {
  color: var(--color-primary-700);
  line-height: 1 !important;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin: 0 !important;
  padding: 0 !important;
}

html.dark .av-bi-contact__section-eyebrow-text {
  color: var(--color-primary-300);
}

.av-bi-contact__section-hint {
  margin-top: -6px;
  margin-bottom: 12px;
  line-height: 1.5;
}

/* ── RESPONSIVE ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .av-bi-contact {
    animation: none;
  }
}

/* ───────────────────────────────────────────────────────────────────
   1003 Form — BI_Address (Address History subsection)

   Same recipe as BI_Personal / BI_Contact: open layout, eyebrow pill
   per section, inputs Outlined. Former addresses repeat the eyebrow
   pattern with a numbered title + delete IconButton, and a left-edge
   accent border to differentiate them from the current address group.
   Mailing block keeps a tinted backdrop (it asks a Yes/No question
   first, so it needs visual grouping like the Dependents block).
   Scope `.av-bi-address`.
   ─────────────────────────────────────────────────────────────────── */

.av-bi-address {
  display: flex;
  flex-direction: column;
  gap: 28px;
  animation: avBiAddressFadeIn 0.35s ease-out;
}

@keyframes avBiAddressFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── HEADER ──────────────────────────────────────────────────────── */

.av-bi-address__header {
  margin-bottom: 4px;
}

.av-bi-address__title {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-gray-900);
}

html.dark .av-bi-address__title {
  color: var(--color-dark-50);
}

.av-bi-address__subtitle {
  margin-top: 4px;
  line-height: 1.5;
}

/* ── SECTION GROUPS (open layout — no wrapper card by default). */

.av-bi-address__section {
  display: block;
}

/* Former addresses get a subtle left-edge accent to read as a related
   sub-group (visual repetition without becoming a heavy card). */
.av-bi-address__section--former {
  padding-left: 16px;
  border-left: 3px solid var(--color-primary-300);
}

html.dark .av-bi-address__section--former {
  border-left-color: var(--color-primary-500);
}

/* Mailing block keeps its tinted backdrop because of the Yes/No
   question + conditional reveal pattern. */
.av-bi-address__section--tinted {
  padding: 20px 24px;
  border-radius: var(--radius-lg);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-150);
}

html.dark .av-bi-address__section--tinted {
  background: var(--color-dark-750);
  border-color: var(--color-dark-500);
}

/* Eyebrow above each section — pill with icon + uppercase label. */
.av-bi-address__section-eyebrow {
  display: inline-flex;
  align-self: flex-start;
  width: fit-content;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 4px 12px 4px 8px;
  border-radius: 9999px;
  background: rgb(from var(--color-primary-500) r g b / 0.08);
  line-height: 1;
}

html.dark .av-bi-address__section-eyebrow {
  background: rgb(from var(--color-primary-400) r g b / 0.14);
}

.av-bi-address__section-eyebrow-icon {
  width: 14px;
  height: 14px;
  color: var(--color-primary-600);
  flex-shrink: 0;
}

html.dark .av-bi-address__section-eyebrow-icon {
  color: var(--color-primary-300);
}

.av-bi-address__section-eyebrow .av-bi-address__section-eyebrow-text {
  color: var(--color-primary-700);
  line-height: 1 !important;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin: 0 !important;
  padding: 0 !important;
}

html.dark .av-bi-address__section-eyebrow-text {
  color: var(--color-primary-300);
}

/* Former address — eyebrow row hosts pill + delete icon together. */
.av-bi-address__section-eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.av-bi-address__section-eyebrow-row .av-bi-address__section-eyebrow {
  margin-bottom: 0;
}

.av-bi-address__delete-btn {
  opacity: 0.7;
  transition:
    opacity 200ms ease,
    background-color 200ms ease;
}

.av-bi-address__delete-btn:hover {
  opacity: 1;
  background-color: rgb(from var(--color-error) r g b / 0.1) !important;
}

html.dark .av-bi-address__delete-btn:hover {
  background-color: rgb(
    from var(--color-error-lighter) r g b / 0.16
  ) !important;
}

/* ── ADDRESS FIELD (readonly input that opens the address dialog) ── */

.av-bi-address__field {
  cursor: pointer;
}

.av-bi-address__field .mud-input-slot {
  cursor: pointer !important;
}

/* ── DURATION ROW (Move-in to Move-out duration display) ─────────── */

.av-bi-address__duration {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 9999px;
  background: var(--color-gray-100);
  color: var(--color-gray-700);
}

html.dark .av-bi-address__duration {
  background: var(--color-dark-600);
  color: var(--color-dark-100);
}

.av-bi-address__duration-icon {
  width: 14px;
  height: 14px;
  color: var(--color-gray-500);
  flex-shrink: 0;
}

html.dark .av-bi-address__duration-icon {
  color: var(--color-dark-300);
}

/* ── YES / NO QUESTION ROW (mailing toggle) ──────────────────────── */

.av-bi-address__yes-no-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.av-bi-address__yes-no-label {
  font-weight: 500;
  flex: 1;
  min-width: 200px;
  color: var(--color-gray-900);
}

html.dark .av-bi-address__yes-no-label {
  color: var(--color-dark-50);
}

.av-bi-address__chips {
  flex-shrink: 0;
}

.av-bi-address__chips .mud-chip {
  min-width: 60px;
  justify-content: center;
}

/* ── ADD FORMER ADDRESS BUTTON (av-btn-style ghost) ──────────────── */

.av-bi-address__add-btn.mud-button-root {
  align-self: flex-start;
  height: 36px;
  padding: 0 18px !important;
  border-radius: 9999px !important;
  border: 1px dashed var(--color-primary-400) !important;
  background: transparent !important;
  color: var(--color-primary-700) !important;
  font-weight: 500;
  text-transform: none;
  box-shadow: none !important;
}

.av-bi-address__add-btn.mud-button-root:hover {
  background: rgb(from var(--color-primary-500) r g b / 0.06) !important;
  border-color: var(--color-primary-600) !important;
  border-style: solid !important;
}

html.dark .av-bi-address__add-btn.mud-button-root {
  border-color: var(--color-primary-500) !important;
  color: var(--color-primary-300) !important;
}

html.dark .av-bi-address__add-btn.mud-button-root:hover {
  background: rgb(from var(--color-primary-400) r g b / 0.12) !important;
  border-color: var(--color-primary-400) !important;
}

.av-bi-address__add-btn .mud-button-icon-start .mud-icon-root {
  width: 16px;
  height: 16px;
}

/* ── ALERT (2-year requirement) ──────────────────────────────────── */

.av-bi-address__alert {
  border-radius: var(--radius-lg);
}

/* ── RESPONSIVE ──────────────────────────────────────────────────── */

@media (max-width: 599.98px) {
  .av-bi-address__section--tinted {
    padding: 16px;
  }

  .av-bi-address__yes-no-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .av-bi-address__yes-no-label {
    text-align: center;
    min-width: unset;
  }

  .av-bi-address__chips {
    align-self: center;
  }

  .av-bi-address__add-btn.mud-button-root {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .av-bi-address {
    animation: none;
  }

  .av-bi-address__delete-btn,
  .av-bi-address__add-btn.mud-button-root {
    transition: none;
  }
}

/* ───────────────────────────────────────────────────────────────────
   Address picker dialog (small "select from previous" picker).
   Opens before the AddressSelector for users who already used some
   address before. Token-driven, light + dark, scope `.av-address-picker`.
   ─────────────────────────────────────────────────────────────────── */

.av-address-picker .mud-dialog-content {
  padding: 16px 24px !important;
  min-width: 320px;
}

.av-address-picker__title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.av-address-picker__title-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgb(from var(--color-primary-500) r g b / 0.1);
  color: var(--color-primary-700);
}

html.dark .av-address-picker__title-icon {
  background: rgb(from var(--color-primary-400) r g b / 0.16);
  color: var(--color-primary-300);
}

.av-address-picker__title-icon .mud-icon-root {
  width: 18px;
  height: 18px;
}

.av-address-picker__title-text {
  font-weight: 600;
  color: var(--color-gray-900);
}

html.dark .av-address-picker__title-text {
  color: var(--color-dark-50);
}

.av-address-picker__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.av-address-picker__section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 4px 12px 4px 8px;
  border-radius: 9999px;
  background: rgb(from var(--color-primary-500) r g b / 0.08);
}

html.dark .av-address-picker__section-eyebrow {
  background: rgb(from var(--color-primary-400) r g b / 0.14);
}

.av-address-picker__section-eyebrow-icon {
  width: 14px;
  height: 14px;
  color: var(--color-primary-600);
}

html.dark .av-address-picker__section-eyebrow-icon {
  color: var(--color-primary-300);
}

.av-address-picker__section-eyebrow-text {
  color: var(--color-primary-700);
  letter-spacing: 0.06em;
  font-weight: 600;
}

html.dark .av-address-picker__section-eyebrow-text {
  color: var(--color-primary-300);
}

.av-address-picker__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
}

.av-address-picker__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  cursor: pointer;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    transform 150ms ease;
  text-align: left;
  font: inherit;
  color: inherit;
}

html.dark .av-address-picker__item {
  border-color: var(--color-dark-500);
  background: var(--color-dark-700);
}

.av-address-picker__item:hover {
  border-color: var(--color-primary-400);
  background: rgb(from var(--color-primary-500) r g b / 0.04);
}

html.dark .av-address-picker__item:hover {
  border-color: var(--color-primary-400);
  background: rgb(from var(--color-primary-400) r g b / 0.1);
}

.av-address-picker__item:active {
  transform: scale(0.99);
}

.av-address-picker__item-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgb(from var(--color-primary-500) r g b / 0.1);
  color: var(--color-primary-700);
}

html.dark .av-address-picker__item-icon {
  background: rgb(from var(--color-primary-400) r g b / 0.18);
  color: var(--color-primary-300);
}

.av-address-picker__item-icon .mud-icon-root {
  width: 16px;
  height: 16px;
}

.av-address-picker__item-text {
  flex: 1;
  line-height: 1.4;
  color: var(--color-gray-800);
}

html.dark .av-address-picker__item-text {
  color: var(--color-dark-100);
}

.av-address-picker__item-arrow {
  width: 16px;
  height: 16px;
  color: var(--color-gray-400);
  opacity: 0;
  transition:
    opacity 150ms ease,
    transform 150ms ease;
}

.av-address-picker__item:hover .av-address-picker__item-arrow {
  opacity: 1;
  transform: translateX(2px);
}

html.dark .av-address-picker__item-arrow {
  color: var(--color-dark-300);
}

.av-address-picker__divider {
  border-color: var(--color-gray-150);
}

html.dark .av-address-picker__divider {
  border-color: var(--color-dark-500);
}

.av-address-picker__search-btn.mud-button-root {
  height: 40px;
  padding: 0 16px !important;
  border-radius: var(--radius-lg) !important;
  background: var(--color-primary-600) !important;
  color: var(--color-white) !important;
  text-transform: none;
  font-weight: 500;
  box-shadow: none !important;
}

.av-address-picker__search-btn.mud-button-root:hover {
  background: var(--color-primary-700) !important;
}

html.dark .av-address-picker__search-btn.mud-button-root {
  background: var(--color-primary-500) !important;
}

html.dark .av-address-picker__search-btn.mud-button-root:hover {
  background: var(--color-primary-400) !important;
}

.av-address-picker__btn-cancel.mud-button-root {
  height: 36px;
  padding: 0 18px !important;
  border-radius: 9999px !important;
  border: 1px solid var(--color-gray-300) !important;
  background: transparent !important;
  color: var(--color-gray-700) !important;
  text-transform: none;
  font-weight: 500;
  box-shadow: none !important;
}

.av-address-picker__btn-cancel.mud-button-root:hover {
  background: var(--color-gray-100) !important;
  border-color: var(--color-gray-400) !important;
}

html.dark .av-address-picker__btn-cancel.mud-button-root {
  border-color: var(--color-dark-400) !important;
  color: var(--color-dark-100) !important;
}

html.dark .av-address-picker__btn-cancel.mud-button-root:hover {
  background: var(--color-dark-600) !important;
  border-color: var(--color-dark-300) !important;
}

@media (max-width: 599.98px) {
  .av-address-picker .mud-dialog-content {
    min-width: unset !important;
  }
}

/* ───────────────────────────────────────────────────────────────────
   Address selector dialog (full address capture: search to confirm
   stepper, autocomplete + manual fallback, foreign address mode,
   InteractiveMap preview, validation summary). Replaces the legacy
   premium-orb chrome (.asel-* in avalme-legacy.css). Token-driven,
   light + dark, scope `.av-address-selector`.
   ─────────────────────────────────────────────────────────────────── */

.av-address-selector .mud-dialog-content {
  padding: 0 !important;
  /* This dialog has a taller chrome than the standard form-dialog: a stepper
     header (icon 44px + padding) plus a footer whose hint + buttons can wrap
     to two rows on narrow widths. The base `.av-form-dialog` reserves only
     120px (calc(90vh - 120px)), which underestimates it — so on short (laptop)
     viewports the body keeps too much height and the footer overflows past the
     frame's 90vh `overflow:hidden`, getting clipped. Reserve ~190px instead so
     the body scrolls internally and the footer stays visible. `!important` is
     required to beat the base rule's own `!important` at equal specificity.
     Bug #910. */
  max-height: calc(90vh - 190px) !important;
  overflow-y: auto !important;
}

.av-address-selector .mud-dialog-title {
  padding: 16px 24px 14px !important;
  border-bottom: 1px solid var(--color-gray-150);
  background: var(--color-white);
}

html.dark .av-address-selector .mud-dialog-title {
  border-bottom-color: var(--color-dark-500);
  background: var(--color-dark-700);
}

.av-address-selector__title {
  display: flex;
  align-items: center;
  gap: 14px;
}

.av-address-selector__title-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgb(from var(--color-primary-500) r g b / 0.1);
  color: var(--color-primary-700);
}

html.dark .av-address-selector__title-icon {
  background: rgb(from var(--color-primary-400) r g b / 0.16);
  color: var(--color-primary-300);
}

.av-address-selector__title-icon .mud-icon-root {
  width: 22px;
  height: 22px;
}

.av-address-selector__title-heading {
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-gray-900);
}

html.dark .av-address-selector__title-heading {
  color: var(--color-dark-50);
}

.av-address-selector__title-hint {
  color: var(--color-gray-500);
  line-height: 1.3;
}

html.dark .av-address-selector__title-hint {
  color: var(--color-dark-300);
}

.av-address-selector__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px 24px;
}

.av-address-selector__stepper {
  display: flex;
  align-items: center;
  gap: 12px;
}

.av-address-selector__step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-gray-500);
}

html.dark .av-address-selector__step {
  color: var(--color-dark-300);
}

.av-address-selector__step-bubble {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  background: var(--color-gray-100);
  color: var(--color-gray-600);
  border: 1px solid var(--color-gray-200);
  transition: all 200ms ease;
}

html.dark .av-address-selector__step-bubble {
  background: var(--color-dark-600);
  color: var(--color-dark-200);
  border-color: var(--color-dark-500);
}

.av-address-selector__step-bubble .mud-icon-root {
  width: 16px;
  height: 16px;
}

.av-address-selector__step.is-active .av-address-selector__step-bubble {
  background: var(--color-primary-600);
  color: var(--color-white);
  border-color: var(--color-primary-600);
}

.av-address-selector__step.is-done .av-address-selector__step-bubble {
  background: var(--color-success);
  color: var(--color-white);
  border-color: var(--color-success);
}

html.dark
  .av-address-selector__step.is-active
  .av-address-selector__step-bubble {
  background: var(--color-primary-500);
  border-color: var(--color-primary-500);
}

html.dark .av-address-selector__step.is-done .av-address-selector__step-bubble {
  background: var(--color-success-light);
  border-color: var(--color-success-light);
}

.av-address-selector__step.is-active,
.av-address-selector__step.is-done {
  color: var(--color-gray-900);
}

html.dark .av-address-selector__step.is-active,
html.dark .av-address-selector__step.is-done {
  color: var(--color-dark-50);
}

.av-address-selector__step-label {
  font-weight: 500;
}

.av-address-selector__step-track {
  flex: 1;
  height: 3px;
  background: var(--color-gray-200);
  border-radius: 9999px;
  overflow: hidden;
}

html.dark .av-address-selector__step-track {
  background: var(--color-dark-500);
}

.av-address-selector__step-progress {
  width: 0;
  height: 100%;
  background: var(--color-success);
  transition: width 300ms ease;
}

.av-address-selector__step-progress.is-full {
  width: 100%;
}

html.dark .av-address-selector__step-progress {
  background: var(--color-success-light);
}

.av-address-selector__panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

html.dark .av-address-selector__panel {
  border-color: var(--color-dark-500);
  background: var(--color-dark-700);
}

.av-address-selector__panel-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.av-address-selector__panel-header-text {
  flex: 1;
  min-width: 0;
}

.av-address-selector__panel-icon {
  width: 16px;
  height: 16px;
  color: var(--color-primary-600);
  flex-shrink: 0;
}

html.dark .av-address-selector__panel-icon {
  color: var(--color-primary-300);
}

.av-address-selector__panel-title {
  margin: 0;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-gray-900);
}

html.dark .av-address-selector__panel-title {
  color: var(--color-dark-50);
}

.av-address-selector__panel-hint {
  margin-top: 2px;
  line-height: 1.3;
  color: var(--color-gray-500);
}

html.dark .av-address-selector__panel-hint {
  color: var(--color-dark-300);
}

.av-address-selector__back-btn.mud-button-root {
  margin-left: auto;
  height: 30px;
  padding: 0 12px !important;
  border-radius: 9999px !important;
  background: transparent !important;
  color: var(--color-gray-700) !important;
  border: 1px solid var(--color-gray-300) !important;
  text-transform: none;
  font-weight: 500;
  box-shadow: none !important;
  font-size: 12px;
}

.av-address-selector__back-btn.mud-button-root:hover {
  background: var(--color-gray-100) !important;
}

html.dark .av-address-selector__back-btn.mud-button-root {
  color: var(--color-dark-100) !important;
  border-color: var(--color-dark-400) !important;
}

html.dark .av-address-selector__back-btn.mud-button-root:hover {
  background: var(--color-dark-600) !important;
}

.av-address-selector__back-btn .mud-button-icon-start .mud-icon-root {
  width: 14px;
  height: 14px;
}

.av-address-selector__result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 4px;
}

.av-address-selector__result-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--color-gray-100);
  color: var(--color-gray-600);
}

html.dark .av-address-selector__result-icon {
  background: var(--color-dark-600);
  color: var(--color-dark-200);
}

.av-address-selector__result.is-complete .av-address-selector__result-icon {
  background: rgb(from var(--color-success) r g b / 0.14);
  color: var(--color-success-darker);
}

html.dark
  .av-address-selector__result.is-complete
  .av-address-selector__result-icon {
  background: rgb(from var(--color-success-lighter) r g b / 0.18);
  color: var(--color-success-lighter);
}

.av-address-selector__result-icon .mud-icon-root {
  width: 16px;
  height: 16px;
}

.av-address-selector__result-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.av-address-selector__result-primary {
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-gray-900);
}

html.dark .av-address-selector__result-primary {
  color: var(--color-dark-50);
}

.av-address-selector__result-secondary {
  color: var(--color-gray-500);
  line-height: 1.3;
}

html.dark .av-address-selector__result-secondary {
  color: var(--color-dark-300);
}

.av-address-selector__foreign-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 14px 16px;
  border: 1px dashed var(--color-gray-300);
  border-radius: var(--radius-lg);
  background: var(--color-gray-50);
}

.av-address-selector__foreign-row
  .av-address-selector__foreign-btn.mud-button-root {
  align-self: flex-start;
}

html.dark .av-address-selector__foreign-row {
  border-color: var(--color-dark-400);
  background: var(--color-dark-600);
}

.av-address-selector__foreign-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-gray-600);
}

html.dark .av-address-selector__foreign-text {
  color: var(--color-dark-200);
}

.av-address-selector__foreign-text .mud-icon-root {
  width: 16px;
  height: 16px;
  color: var(--color-gray-500);
}

html.dark .av-address-selector__foreign-text .mud-icon-root {
  color: var(--color-dark-300);
}

.av-address-selector__foreign-btn.mud-button-root {
  height: auto !important;
  min-height: 52px;
  padding: 10px 18px !important;
  border-radius: var(--radius-lg) !important;
  background: var(--color-primary-600) !important;
  color: var(--color-white) !important;
  text-transform: none;
  box-shadow: none !important;
  text-align: center;
  justify-content: center;
}

.av-address-selector__foreign-btn.mud-button-root:hover {
  background: var(--color-primary-700) !important;
}

html.dark .av-address-selector__foreign-btn.mud-button-root {
  background: var(--color-primary-500) !important;
}

html.dark .av-address-selector__foreign-btn.mud-button-root:hover {
  background: var(--color-primary-400) !important;
}

/* Stack the 2-line label vertically (top: small/light meta, bottom: bold action). */
.av-address-selector__foreign-btn .mud-button-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  line-height: 1.25;
  text-align: center;
}

.av-address-selector__foreign-btn-top {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.02em;
  opacity: 0.85;
}

.av-address-selector__foreign-btn-bottom {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.av-address-selector__foreign-btn-arrow {
  width: 14px;
  height: 14px;
}

.av-address-selector__preview {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Section card used as an equal-height column in the 3-up channel grid
   (Email / Phone / Address). MudGrid stretches each item to the tallest
   row, this fills the item so the cards bottom-align; grid spacing owns the
   gutters so the card drops its own margin-bottom. */
/* Channel summary card inside the 2-up grid. Sizes to its own content (no
   forced equal-height stretch — that left the single-item card with an ugly
   internal gap); the grid gutters own the spacing so it drops margin-bottom. */
.av-info-section--fill.mud-paper {
  margin-bottom: 0;
}

/* "View All" footer link — opens the multi-item manage dialog. Rendered as a
   MudLink (Typo.body2) so it reads at the same size as the footer meta text;
   the chevron rides inline. */
.av-channel-viewall.mud-typography {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--color-primary-600);
  cursor: pointer;
}

html.dark .av-channel-viewall.mud-typography {
  color: var(--color-primary-300);
}

.av-channel-viewall .mud-icon-root {
  width: 16px !important;
  height: 16px !important;
  font-size: 16px !important;
}

/* ── Clean channel summary (borderless) ───────────────────────────────────
   The summary body inside Email / Phone / Address: a solid icon disc in the
   header, then divider · primary value (+ type chip) · divider · footer
   (count meta + "View All"). No inner card border — reads as one clean panel.
   The footer pins to the bottom so the 2-up columns bottom-align. */

/* Section header icon — Tailux "avatar" pattern: a 40px squircle filled with
   a soft 10% tint of the channel color + the icon rendered in the darker shade
   (lighter in dark mode). Pair with a color-chain class (av-color-info /
   -success / -warning …) + the squircle mask (av-mask av-mask-squircle). */
.av-channel-head__icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--av-this-darker);
  background: rgb(from var(--av-this-darker) r g b / 0.1);
}

html.dark .av-channel-head__icon {
  color: var(--av-this-lighter);
  background: rgb(from var(--av-this-lighter) r g b / 0.1);
}

.av-channel-head__icon .mud-icon-root {
  width: 20px !important;
  height: 20px !important;
  font-size: 20px !important;
}

/* Plain channel header icon (Connections av-conn__group-icon style): 18px,
   colored per channel via the av-color-X chain. No disc. */
.av-channel-head-ico.mud-icon-root {
  width: 18px;
  height: 18px;
  color: var(--av-this-darker);
  flex-shrink: 0;
}

html.dark .av-channel-head-ico.mud-icon-root {
  color: var(--av-this-lighter);
}

/* Channel header title — matches the Connections group title (subtitle2). */
.av-channel-head-title.mud-typography {
  color: var(--color-gray-800);
}

html.dark .av-channel-head-title.mud-typography {
  color: var(--color-dark-100);
}

/* Hairline dividers above the value and above the footer. */
.av-channel-divider.mud-divider {
  margin: 12px 0;
  border-color: var(--color-gray-150);
}

html.dark .av-channel-divider.mud-divider {
  border-color: var(--color-dark-500);
}

/* Address card — full-width Notes box (overline label + icon header, body or
   italic placeholder when empty). Subtle inner box nested in the address card. */
.av-address-notes {
    margin-top: 20px;
    padding: 12px 16px;
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-150);
    border-radius: var(--radius-lg);
}

html.dark .av-address-notes {
    background: var(--color-dark-700);
    border-color: var(--color-dark-500);
}

.av-address-notes__head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.av-address-notes__icon.mud-icon-root {
    width: 14px;
    height: 14px;
    color: var(--color-gray-500);
}

html.dark .av-address-notes__icon.mud-icon-root {
    color: var(--color-dark-300);
}

/* Primary value block. */
.av-channel-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.av-address-selector__preview-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 4px 12px 4px 8px;
  border-radius: 9999px;
  background: rgb(from var(--color-success) r g b / 0.12);
  color: var(--color-success-darker);
}

html.dark .av-address-selector__preview-check {
  background: rgb(from var(--color-success-lighter) r g b / 0.18);
  color: var(--color-success-lighter);
}

.av-address-selector__preview-check .mud-icon-root {
  width: 16px;
  height: 16px;
}

.av-address-selector__preview-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-150);
}

html.dark .av-address-selector__preview-body {
  background: var(--color-dark-600);
  border-color: var(--color-dark-500);
}

.av-address-selector__preview-text {
  font-weight: 500;
  color: var(--color-gray-900);
}

html.dark .av-address-selector__preview-text {
  color: var(--color-dark-50);
}

.av-address-selector__preview-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-gray-600);
}

html.dark .av-address-selector__preview-meta {
  color: var(--color-dark-200);
}

.av-address-selector__preview-meta .mud-icon-root {
  width: 14px;
  height: 14px;
}

.av-address-selector__map-wrap {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-gray-200);
}

html.dark .av-address-selector__map-wrap {
  border-color: var(--color-dark-500);
}

.av-address-selector__preview-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-gray-500);
}

html.dark .av-address-selector__preview-note {
  color: var(--color-dark-300);
}

.av-address-selector__preview-note .mud-icon-root {
  width: 14px;
  height: 14px;
}

.av-address-selector__preview-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.av-address-selector__field-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.av-address-selector__field-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-gray-600);
  letter-spacing: 0.06em;
}

html.dark .av-address-selector__field-label {
  color: var(--color-dark-200);
}

.av-address-selector__field-label .mud-icon-root {
  width: 14px;
  height: 14px;
  color: var(--color-primary-600);
}

html.dark .av-address-selector__field-label .mud-icon-root {
  color: var(--color-primary-300);
}

.av-address-selector__locked-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 9999px;
  background: var(--color-gray-100);
  color: var(--color-gray-600);
}

html.dark .av-address-selector__locked-hint {
  background: var(--color-dark-600);
  color: var(--color-dark-200);
}

.av-address-selector__locked-hint .mud-icon-root {
  width: 14px;
  height: 14px;
}

.av-address-selector .mud-dialog-actions {
  padding: 14px 24px !important;
  border-top: 1px solid var(--color-gray-150);
  background: var(--color-gray-50);
}

html.dark .av-address-selector .mud-dialog-actions {
  border-top-color: var(--color-dark-500);
  background: var(--color-dark-750);
}

.av-address-selector__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  flex-wrap: wrap;
}

.av-address-selector__footer-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
  color: var(--color-gray-600);
}

html.dark .av-address-selector__footer-hint {
  color: var(--color-dark-200);
}

.av-address-selector__footer-hint-icon {
  width: 16px;
  height: 16px;
  color: var(--color-warning-darker);
  flex-shrink: 0;
}

html.dark .av-address-selector__footer-hint-icon {
  color: var(--color-warning-lighter);
}

.av-address-selector__footer-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.av-address-selector__btn-ghost.mud-button-root {
  height: 36px;
  padding: 0 18px !important;
  border-radius: 9999px !important;
  border: 1px solid var(--color-gray-300) !important;
  background: transparent !important;
  color: var(--color-gray-700) !important;
  text-transform: none;
  font-weight: 500;
  box-shadow: none !important;
}

.av-address-selector__btn-ghost.mud-button-root:hover {
  background: var(--color-gray-100) !important;
  border-color: var(--color-gray-400) !important;
}

html.dark .av-address-selector__btn-ghost.mud-button-root {
  border-color: var(--color-dark-400) !important;
  color: var(--color-dark-100) !important;
}

html.dark .av-address-selector__btn-ghost.mud-button-root:hover {
  background: var(--color-dark-600) !important;
  border-color: var(--color-dark-300) !important;
}

.av-address-selector__btn-primary.mud-button-root {
  height: 36px;
  padding: 0 18px !important;
  border-radius: 9999px !important;
  background: var(--color-primary-600) !important;
  border: 1px solid var(--color-primary-600) !important;
  color: var(--color-white) !important;
  text-transform: none;
  font-weight: 500;
  box-shadow: none !important;
}

.av-address-selector__btn-primary.mud-button-root:hover {
  background: var(--color-primary-700) !important;
  border-color: var(--color-primary-700) !important;
}

html.dark .av-address-selector__btn-primary.mud-button-root {
  background: var(--color-primary-500) !important;
  border-color: var(--color-primary-500) !important;
}

html.dark .av-address-selector__btn-primary.mud-button-root:hover {
  background: var(--color-primary-400) !important;
  border-color: var(--color-primary-400) !important;
}

.av-address-selector__btn-ghost .mud-button-icon-start .mud-icon-root,
.av-address-selector__btn-ghost .mud-button-icon-end .mud-icon-root,
.av-address-selector__btn-primary .mud-button-icon-start .mud-icon-root,
.av-address-selector__btn-primary .mud-button-icon-end .mud-icon-root {
  width: 16px;
  height: 16px;
}

@media (max-width: 599.98px) {
  .av-address-selector__title {
    align-items: flex-start;
  }

  .av-address-selector__body {
    padding: 16px;
  }

  .av-address-selector__panel-header {
    flex-wrap: wrap;
  }

  .av-address-selector__back-btn.mud-button-root {
    margin-left: 0;
    margin-top: 8px;
  }

  .av-address-selector__footer {
    flex-direction: column;
    align-items: stretch;
  }

  .av-address-selector__footer-actions {
    justify-content: flex-end;
  }
}

/* ───────────────────────────────────────────────────────────────────
   1003 Form — BI_Incomes (Employment + Other Income listing)

   Card-based list: each employment / income source is a card with
   icon disc + title row (chips: current / self-employed / incomplete)
   + body grid (address + dates + income breakdown). Incomplete cards
   highlight via left-edge accent + warning chip + missing-fields strip.
   Total summary card at the bottom + 24-month gap warning card.
   Token-driven, light + dark, scope `.av-bi-incomes`.
   ─────────────────────────────────────────────────────────────────── */

.av-bi-incomes {
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: avBiIncomesFadeIn 0.35s ease-out;
}

@keyframes avBiIncomesFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── HEADER ──────────────────────────────────────────────────────── */

.av-bi-incomes__header {
  margin-bottom: 4px;
}

.av-bi-incomes__title {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-gray-900);
}

html.dark .av-bi-incomes__title {
  color: var(--color-dark-50);
}

.av-bi-incomes__subtitle {
  margin-top: 4px;
  line-height: 1.5;
}

/* ── ADD BUTTON (dashed-ghost CTA, matches BI_Address add) ───────── */

.av-bi-incomes__add-btn.mud-button-root {
  align-self: flex-start;
  height: 36px;
  padding: 0 18px !important;
  border-radius: 9999px !important;
  border: 1px dashed var(--color-primary-400) !important;
  background: transparent !important;
  color: var(--color-primary-700) !important;
  font-weight: 500;
  text-transform: none;
  box-shadow: none !important;
}

.av-bi-incomes__add-btn.mud-button-root:hover {
  background: rgb(from var(--color-primary-500) r g b / 0.06) !important;
  border-color: var(--color-primary-600) !important;
  border-style: solid !important;
}

html.dark .av-bi-incomes__add-btn.mud-button-root {
  border-color: var(--color-primary-500) !important;
  color: var(--color-primary-300) !important;
}

html.dark .av-bi-incomes__add-btn.mud-button-root:hover {
  background: rgb(from var(--color-primary-400) r g b / 0.12) !important;
  border-color: var(--color-primary-400) !important;
}

.av-bi-incomes__add-btn .mud-button-icon-start .mud-icon-root {
  width: 16px;
  height: 16px;
}

/* ── CARD (employment or income) ─────────────────────────────────── */

.av-bi-incomes__card {
  padding: 16px 20px;
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  transition:
    border-color 200ms ease,
    box-shadow 200ms ease;
}

html.dark .av-bi-incomes__card {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

.av-bi-incomes__card:hover {
  border-color: var(--color-gray-300);
  box-shadow: 0 2px 8px rgb(from var(--color-gray-900) r g b / 0.04);
}

html.dark .av-bi-incomes__card:hover {
  border-color: var(--color-dark-400);
  box-shadow: 0 2px 8px rgb(from var(--color-black) r g b / 0.3);
}

/* Type modifiers — left-edge accent stripe so employment vs income
   reads at a glance. */
.av-bi-incomes__card--employment {
  border-left: 3px solid var(--color-info);
}

html.dark .av-bi-incomes__card--employment {
  border-left-color: var(--color-info-light);
}

.av-bi-incomes__card--current {
  border-left-color: var(--color-success);
  background: linear-gradient(
    to right,
    rgb(from var(--color-success) r g b / 0.03),
    transparent
  );
}

html.dark .av-bi-incomes__card--current {
  border-left-color: var(--color-success-light);
  background: linear-gradient(
    to right,
    rgb(from var(--color-success-lighter) r g b / 0.06),
    transparent
  );
}

.av-bi-incomes__card--income {
  border-left: 3px solid var(--color-success);
}

html.dark .av-bi-incomes__card--income {
  border-left-color: var(--color-success-light);
}

/* Incomplete state — error accent (overrides type accent). */
.av-bi-incomes__card--incomplete {
  border-left-color: var(--color-error) !important;
  background: linear-gradient(
    to right,
    rgb(from var(--color-error) r g b / 0.03),
    transparent
  );
}

html.dark .av-bi-incomes__card--incomplete {
  border-left-color: var(--color-error-lighter) !important;
  background: linear-gradient(
    to right,
    rgb(from var(--color-error-lighter) r g b / 0.06),
    transparent
  );
}

/* ── CARD HEADER (icon + title + chips + actions) ────────────────── */

.av-bi-incomes__card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-gray-100);
}

html.dark .av-bi-incomes__card-header {
  border-bottom-color: var(--color-dark-500);
}

.av-bi-incomes__card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.av-bi-incomes__card-icon .mud-icon-root {
  width: 20px;
  height: 20px;
}

.av-bi-incomes__card-icon--employment {
  background: rgb(from var(--color-info) r g b / 0.12);
  color: var(--color-info-darker);
}

html.dark .av-bi-incomes__card-icon--employment {
  background: rgb(from var(--color-info-lighter) r g b / 0.18);
  color: var(--color-info-lighter);
}

.av-bi-incomes__card-icon--income {
  background: rgb(from var(--color-success) r g b / 0.12);
  color: var(--color-success-darker);
}

html.dark .av-bi-incomes__card-icon--income {
  background: rgb(from var(--color-success-lighter) r g b / 0.18);
  color: var(--color-success-lighter);
}

.av-bi-incomes__card-icon--warning {
  background: rgb(from var(--color-error) r g b / 0.12);
  color: var(--color-error);
}

html.dark .av-bi-incomes__card-icon--warning {
  background: rgb(from var(--color-error-lighter) r g b / 0.18);
  color: var(--color-error-lighter);
}

.av-bi-incomes__card-title-section {
  flex: 1;
  min-width: 0;
}

.av-bi-incomes__card-title {
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-gray-900);
}

html.dark .av-bi-incomes__card-title {
  color: var(--color-dark-50);
}

.av-bi-incomes__chip {
  height: 22px !important;
  min-height: 22px !important;
  padding: 0 8px !important;
  border-radius: 9999px !important;
  font-size: 11px !important;
  letter-spacing: 0.02em;
}

.av-bi-incomes__card-actions {
  flex-shrink: 0;
}

/* ── CARD BODY (info rows + breakdown) ───────────────────────────── */

.av-bi-incomes__card-body {
  padding-top: 12px;
}

.av-bi-incomes__card-body--income {
  padding-top: 16px;
}

.av-bi-incomes__info-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-gray-700);
}

html.dark .av-bi-incomes__info-row {
  color: var(--color-dark-100);
}

.av-bi-incomes__info-row .mud-icon-root {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.av-bi-incomes__info-row--missing {
  color: var(--color-error);
}

html.dark .av-bi-incomes__info-row--missing {
  color: var(--color-error-lighter);
}

.av-bi-incomes__info-text {
  line-height: 1.4;
}

/* ── INCOME BREAKDOWN (Base / Overtime / Bonus / Commission) ─────── */

.av-bi-incomes__summary,
.av-bi-incomes__breakdown {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
  text-align: right;
}

.av-bi-incomes__line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  width: 100%;
}

.av-bi-incomes__line--missing {
  color: var(--color-error);
}

html.dark .av-bi-incomes__line--missing {
  color: var(--color-error-lighter);
}

.av-bi-incomes__amount {
  font-weight: 600;
  color: var(--color-gray-900);
}

html.dark .av-bi-incomes__amount {
  color: var(--color-dark-50);
}

.av-bi-incomes__amount--income {
  color: var(--color-success-darker);
  font-weight: 600;
}

html.dark .av-bi-incomes__amount--income {
  color: var(--color-success-lighter);
}

.av-bi-incomes__amount--loss {
  color: var(--color-error);
  font-weight: 600;
}

html.dark .av-bi-incomes__amount--loss {
  color: var(--color-error-lighter);
}

.av-bi-incomes__amount--success {
  color: var(--color-success-darker);
  font-weight: 700;
}

html.dark .av-bi-incomes__amount--success {
  color: var(--color-success-lighter);
}

.av-bi-incomes__amount-period {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-gray-500);
  margin-left: 2px;
}

html.dark .av-bi-incomes__amount-period {
  color: var(--color-dark-300);
}

/* ── MISSING FIELDS STRIP (alert at the bottom of incomplete card) ─ */

.av-bi-incomes__alert {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: rgb(from var(--color-error) r g b / 0.06);
  color: var(--color-error);
  border-left: 2px solid var(--color-error);
}

html.dark .av-bi-incomes__alert {
  background: rgb(from var(--color-error-lighter) r g b / 0.1);
  color: var(--color-error-lighter);
  border-left-color: var(--color-error-lighter);
}

.av-bi-incomes__alert .mud-icon-root {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ── MISSING / ASTERISK MARKERS ──────────────────────────────────── */

.av-bi-incomes__asterisk {
  color: var(--color-error);
  font-weight: 700;
  margin-right: 2px;
}

html.dark .av-bi-incomes__asterisk {
  color: var(--color-error-lighter);
}

.av-bi-incomes__missing {
  color: var(--color-error);
  font-weight: 600;
}

html.dark .av-bi-incomes__missing {
  color: var(--color-error-lighter);
}

.av-bi-incomes__missing-subtle {
  color: var(--color-error);
  opacity: 0.8;
}

html.dark .av-bi-incomes__missing-subtle {
  color: var(--color-error-lighter);
}

/* ── TOTAL SUMMARY CARD ──────────────────────────────────────────── */

.av-bi-incomes__total {
  padding: 16px 20px;
  border-radius: var(--radius-lg);
  background: rgb(from var(--color-success) r g b / 0.06);
  border: 1px solid rgb(from var(--color-success) r g b / 0.2);
}

html.dark .av-bi-incomes__total {
  background: rgb(from var(--color-success-lighter) r g b / 0.1);
  border-color: rgb(from var(--color-success-lighter) r g b / 0.25);
}

.av-bi-incomes__total .mud-icon-root {
  color: var(--color-success-darker);
}

html.dark .av-bi-incomes__total .mud-icon-root {
  color: var(--color-success-lighter);
}

/* ── EMPTY STATE ─────────────────────────────────────────────────── */

.av-bi-incomes__empty {
  padding: 40px 24px;
  border-radius: var(--radius-lg);
  background: var(--color-gray-50);
  border: 1px dashed var(--color-gray-300);
  text-align: center;
}

html.dark .av-bi-incomes__empty {
  background: var(--color-dark-750);
  border-color: var(--color-dark-400);
}

.av-bi-incomes__empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgb(from var(--color-primary-500) r g b / 0.08);
  color: var(--color-primary-600);
}

html.dark .av-bi-incomes__empty-icon {
  background: rgb(from var(--color-primary-400) r g b / 0.14);
  color: var(--color-primary-300);
}

.av-bi-incomes__empty-icon .mud-icon-root {
  width: 32px;
  height: 32px;
}

/* ── WARNING CARD (employment history < 2 years) ─────────────────── */

.av-bi-incomes__warning {
  padding: 16px 20px;
  border-radius: var(--radius-lg);
  background: rgb(from var(--color-warning) r g b / 0.06);
  border: 1px solid rgb(from var(--color-warning) r g b / 0.3);
  border-left: 4px solid var(--color-warning);
}

html.dark .av-bi-incomes__warning {
  background: rgb(from var(--color-warning-lighter) r g b / 0.1);
  border-color: rgb(from var(--color-warning-lighter) r g b / 0.3);
  border-left-color: var(--color-warning-light);
}

.av-bi-incomes__warning-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgb(from var(--color-warning) r g b / 0.16);
  color: var(--color-warning-darker);
}

html.dark .av-bi-incomes__warning-icon {
  background: rgb(from var(--color-warning-lighter) r g b / 0.2);
  color: var(--color-warning-lighter);
}

.av-bi-incomes__warning-icon .mud-icon-root {
  width: 18px;
  height: 18px;
}

.av-bi-incomes__warning-title {
  font-weight: 600;
  color: var(--color-gray-900);
}

html.dark .av-bi-incomes__warning-title {
  color: var(--color-dark-50);
}

.av-bi-incomes__timeline-btn.mud-button-root {
  align-self: flex-start;
  height: 32px;
  padding: 0 14px !important;
  border-radius: 9999px !important;
  background: var(--color-warning) !important;
  color: var(--color-white) !important;
  text-transform: none;
  font-weight: 500;
  box-shadow: none !important;
  font-size: 12px;
}

.av-bi-incomes__timeline-btn.mud-button-root:hover {
  background: var(--color-warning-darker) !important;
}

html.dark .av-bi-incomes__timeline-btn.mud-button-root {
  background: var(--color-warning-light) !important;
}

html.dark .av-bi-incomes__timeline-btn.mud-button-root:hover {
  background: var(--color-warning) !important;
}

.av-bi-incomes__timeline-btn .mud-button-icon-start .mud-icon-root {
  width: 14px;
  height: 14px;
}

/* ── RESPONSIVE ──────────────────────────────────────────────────── */

@media (max-width: 599.98px) {
  .av-bi-incomes__card {
    padding: 14px 16px;
  }

  .av-bi-incomes__card-header {
    flex-wrap: wrap;
  }

  .av-bi-incomes__add-btn.mud-button-root,
  .av-bi-incomes__timeline-btn.mud-button-root {
    width: 100%;
  }

  .av-bi-incomes__empty {
    padding: 32px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .av-bi-incomes {
    animation: none;
  }

  .av-bi-incomes__card,
  .av-bi-incomes__add-btn.mud-button-root,
  .av-bi-incomes__timeline-btn.mud-button-root {
    transition: none;
  }
}

/* ───────────────────────────────────────────────────────────────────
   Income type picker dialog (entry point when adding income/employment
   from BI_Incomes). Grid of 6 clickable cards: Employment (featured,
   full row) + Retirement + Social Security + Alimony + Other + No
   Income (muted). Token-driven, light + dark, scope `.av-income-picker`.
   ─────────────────────────────────────────────────────────────────── */

.av-income-picker .mud-dialog-content {
  padding: 24px !important;
  min-width: 460px;
}

.av-income-picker__title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.av-income-picker__title-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgb(from var(--color-primary-500) r g b / 0.1);
  color: var(--color-primary-700);
}

html.dark .av-income-picker__title-icon {
  background: rgb(from var(--color-primary-400) r g b / 0.16);
  color: var(--color-primary-300);
}

.av-income-picker__title-icon .mud-icon-root {
  width: 20px;
  height: 20px;
}

.av-income-picker__title-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.av-income-picker__title-heading {
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-gray-900);
}

html.dark .av-income-picker__title-heading {
  color: var(--color-dark-50);
}

.av-income-picker__title-hint {
  color: var(--color-gray-500);
  line-height: 1.3;
}

html.dark .av-income-picker__title-hint {
  color: var(--color-dark-300);
}

/* ── CONTENT WRAPPER (AssetNewFormDialog picker mode: the dialog
   content has padding:0 because the form mode owns its body padding,
   so the picker wrapper must bring its own. SelectIncomeTypeDialog
   uses the `.mud-dialog-content` padding rule above instead.) */

.av-income-picker__content {
  padding: 24px;
  min-width: 460px;
}

/* ── GRID ────────────────────────────────────────────────────────── */

.av-income-picker__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* ── CARD (clickable button) ─────────────────────────────────────── */

.av-income-picker__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 20px 12px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  cursor: pointer;
  transition:
    border-color 200ms ease,
    background-color 200ms ease,
    transform 200ms ease,
    box-shadow 200ms ease;
  text-align: center;
  font: inherit;
  color: inherit;
  width: 100%;
}

html.dark .av-income-picker__card {
  border-color: var(--color-dark-500);
  background: var(--color-dark-700);
}

.av-income-picker__card:hover {
  border-color: var(--color-primary-400);
  background: rgb(from var(--color-primary-500) r g b / 0.04);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgb(from var(--color-gray-900) r g b / 0.06);
}

html.dark .av-income-picker__card:hover {
  border-color: var(--color-primary-400);
  background: rgb(from var(--color-primary-400) r g b / 0.1);
  box-shadow: 0 4px 12px rgb(from var(--color-black) r g b / 0.3);
}

.av-income-picker__card:active {
  transform: translateY(0);
}

/* Featured employment card — full row, primary-tinted gradient. */
.av-income-picker__card--featured {
  grid-column: span 3;
  padding: 24px;
  border-color: var(--color-primary-400);
  background: linear-gradient(
    135deg,
    rgb(from var(--color-primary-500) r g b / 0.04) 0%,
    transparent 100%
  );
}

.av-income-picker__card--featured:hover {
  background: linear-gradient(
    135deg,
    rgb(from var(--color-primary-500) r g b / 0.08) 0%,
    transparent 100%
  );
  border-color: var(--color-primary-500);
}

html.dark .av-income-picker__card--featured {
  border-color: var(--color-primary-500);
  background: linear-gradient(
    135deg,
    rgb(from var(--color-primary-400) r g b / 0.1) 0%,
    transparent 100%
  );
}

html.dark .av-income-picker__card--featured:hover {
  background: linear-gradient(
    135deg,
    rgb(from var(--color-primary-400) r g b / 0.16) 0%,
    transparent 100%
  );
  border-color: var(--color-primary-400);
}

/* Muted card — "No Income". Lower opacity baseline, restores on hover. */
.av-income-picker__card--muted {
  opacity: 0.7;
}

.av-income-picker__card--muted:hover {
  opacity: 1;
}

/* ── BADGE (Most Common chip on the featured card) ───────────────── */

.av-income-picker__badge {
  position: absolute;
  top: -10px;
  right: 16px;
  padding: 3px 12px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--color-primary-600);
  color: var(--color-white);
  box-shadow: 0 2px 6px rgb(from var(--color-primary-600) r g b / 0.3);
}

html.dark .av-income-picker__badge {
  background: var(--color-primary-500);
  box-shadow: 0 2px 6px rgb(from var(--color-primary-500) r g b / 0.4);
}

/* ── CARD ICON (disc tinted) ─────────────────────────────────────── */

.av-income-picker__card-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgb(from var(--color-primary-500) r g b / 0.08);
  color: var(--color-primary-700);
}

html.dark .av-income-picker__card-icon {
  background: rgb(from var(--color-primary-400) r g b / 0.14);
  color: var(--color-primary-300);
}

.av-income-picker__card-icon .mud-icon-root {
  width: 26px;
  height: 26px;
}

.av-income-picker__card-icon--featured {
  width: 60px;
  height: 60px;
  background: rgb(from var(--color-primary-500) r g b / 0.12);
}

html.dark .av-income-picker__card-icon--featured {
  background: rgb(from var(--color-primary-400) r g b / 0.22);
}

.av-income-picker__card-icon--featured .mud-icon-root {
  width: 30px;
  height: 30px;
}

.av-income-picker__card-icon--muted {
  background: var(--color-gray-100);
  color: var(--color-gray-500);
}

html.dark .av-income-picker__card-icon--muted {
  background: var(--color-dark-600);
  color: var(--color-dark-300);
}

/* ── CARD TEXT ───────────────────────────────────────────────────── */

.av-income-picker__card-title {
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-gray-900);
  margin: 0;
}

html.dark .av-income-picker__card-title {
  color: var(--color-dark-50);
}

.av-income-picker__card-desc {
  line-height: 1.35;
  color: var(--color-gray-500);
  margin: 0;
}

html.dark .av-income-picker__card-desc {
  color: var(--color-dark-300);
}

/* ── FOOTER CANCEL BTN ───────────────────────────────────────────── */

.av-income-picker__btn-cancel.mud-button-root {
  height: 36px;
  padding: 0 18px !important;
  border-radius: 9999px !important;
  border: 1px solid var(--color-gray-300) !important;
  background: transparent !important;
  color: var(--color-gray-700) !important;
  text-transform: none;
  font-weight: 500;
  box-shadow: none !important;
}

.av-income-picker__btn-cancel.mud-button-root:hover {
  background: var(--color-gray-100) !important;
  border-color: var(--color-gray-400) !important;
}

html.dark .av-income-picker__btn-cancel.mud-button-root {
  border-color: var(--color-dark-400) !important;
  color: var(--color-dark-100) !important;
}

html.dark .av-income-picker__btn-cancel.mud-button-root:hover {
  background: var(--color-dark-600) !important;
  border-color: var(--color-dark-300) !important;
}

/* ── RESPONSIVE ──────────────────────────────────────────────────── */

@media (max-width: 599.98px) {
  .av-income-picker .mud-dialog-content {
    min-width: unset !important;
    padding: 16px !important;
  }

  .av-income-picker__content {
    min-width: unset;
    padding: 16px;
  }

  .av-income-picker__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .av-income-picker__card--featured {
    grid-column: span 2;
    padding: 16px;
  }

  .av-income-picker__card {
    padding: 14px 10px;
  }

  .av-income-picker__card-icon {
    width: 44px;
    height: 44px;
  }

  .av-income-picker__card-icon--featured {
    width: 52px;
    height: 52px;
  }

  .av-income-picker__card-desc {
    display: none;
  }
}

/* ───────────────────────────────────────────────────────────────────
   Income new/edit form dialog (used for non-employment income sources:
   Retirement / Social Security / Alimony / Other). Source selector +
   conditional Description (for "Other") + tinted Monthly Amount group
   with annual estimate preview. Token-driven, light + dark, scope
   `.av-income-form`.
   ─────────────────────────────────────────────────────────────────── */

.av-income-form .mud-dialog-content {
  padding: 0 !important;
  max-height: 75vh;
  overflow-y: auto;
}

.av-income-form .mud-dialog-title {
  padding: 14px 22px !important;
  border-bottom: 1px solid var(--color-gray-150);
  background: var(--color-white);
}

html.dark .av-income-form .mud-dialog-title {
  border-bottom-color: var(--color-dark-500);
  background: var(--color-dark-700);
}

.av-income-form__title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.av-income-form__title-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgb(from var(--color-success) r g b / 0.12);
  color: var(--color-success-darker);
}

html.dark .av-income-form__title-icon {
  background: rgb(from var(--color-success-lighter) r g b / 0.18);
  color: var(--color-success-lighter);
}

.av-income-form__title-icon .mud-icon-root {
  width: 20px;
  height: 20px;
}

.av-income-form__title-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.av-income-form__title-heading {
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-gray-900);
}

html.dark .av-income-form__title-heading {
  color: var(--color-dark-50);
}

.av-income-form__title-hint {
  color: var(--color-gray-500);
  line-height: 1.3;
}

html.dark .av-income-form__title-hint {
  color: var(--color-dark-300);
}

/* ── BODY ────────────────────────────────────────────────────────── */

.av-income-form__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px 22px;
  min-width: 400px;
}

/* ── MONTHLY AMOUNT SECTION (tinted group with eyebrow + field + preview) ── */

.av-income-form__amount-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-150);
}

html.dark .av-income-form__amount-section {
  background: var(--color-dark-750);
  border-color: var(--color-dark-500);
}

.av-income-form__amount-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  width: fit-content;
  padding: 4px 12px 4px 8px;
  border-radius: 9999px;
  background: rgb(from var(--color-success) r g b / 0.12);
  line-height: 1;
}

html.dark .av-income-form__amount-eyebrow {
  background: rgb(from var(--color-success-lighter) r g b / 0.18);
}

.av-income-form__amount-eyebrow-icon {
  width: 14px;
  height: 14px;
  color: var(--color-success-darker);
}

html.dark .av-income-form__amount-eyebrow-icon {
  color: var(--color-success-lighter);
}

.av-income-form__amount-eyebrow .av-income-form__amount-eyebrow-text {
  color: var(--color-success-darker);
  letter-spacing: 0.06em;
  font-weight: 600;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

html.dark .av-income-form__amount-eyebrow-text {
  color: var(--color-success-lighter);
}

/* ── ANNUAL ESTIMATE STRIP ───────────────────────────────────────── */

.av-income-form__annual {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: rgb(from var(--color-success) r g b / 0.06);
  border: 1px dashed rgb(from var(--color-success) r g b / 0.3);
}

html.dark .av-income-form__annual {
  background: rgb(from var(--color-success-lighter) r g b / 0.1);
  border-color: rgb(from var(--color-success-lighter) r g b / 0.3);
}

.av-income-form__annual-label {
  color: var(--color-gray-600);
}

html.dark .av-income-form__annual-label {
  color: var(--color-dark-200);
}

.av-income-form__annual-value {
  font-weight: 700;
  color: var(--color-success-darker);
}

html.dark .av-income-form__annual-value {
  color: var(--color-success-lighter);
}

/* ── FOOTER ACTIONS ──────────────────────────────────────────────── */

.av-income-form .mud-dialog-actions {
  padding: 12px 22px !important;
  border-top: 1px solid var(--color-gray-150);
  background: var(--color-gray-50);
}

html.dark .av-income-form .mud-dialog-actions {
  border-top-color: var(--color-dark-500);
  background: var(--color-dark-750);
}

.av-income-form__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  width: 100%;
}

.av-income-form__btn-cancel.mud-button-root,
.av-income-form__btn-confirm.mud-button-root {
  height: 36px;
  padding: 0 18px !important;
  border-radius: 9999px !important;
  text-transform: none;
  font-weight: 500;
  box-shadow: none !important;
  min-width: 0;
}

.av-income-form__btn-cancel.mud-button-root {
  background: transparent !important;
  border: 1px solid var(--color-gray-300) !important;
  color: var(--color-gray-700) !important;
}

.av-income-form__btn-cancel.mud-button-root:hover {
  background: var(--color-gray-100) !important;
  border-color: var(--color-gray-400) !important;
}

html.dark .av-income-form__btn-cancel.mud-button-root {
  border-color: var(--color-dark-400) !important;
  color: var(--color-dark-100) !important;
}

html.dark .av-income-form__btn-cancel.mud-button-root:hover {
  background: var(--color-dark-600) !important;
  border-color: var(--color-dark-300) !important;
}

.av-income-form__btn-confirm.mud-button-root {
  background: var(--color-primary-600) !important;
  border: 1px solid var(--color-primary-600) !important;
  color: var(--color-white) !important;
}

.av-income-form__btn-confirm.mud-button-root:hover {
  background: var(--color-primary-700) !important;
  border-color: var(--color-primary-700) !important;
}

.av-income-form__btn-confirm.mud-button-root:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

html.dark .av-income-form__btn-confirm.mud-button-root {
  background: var(--color-primary-500) !important;
  border-color: var(--color-primary-500) !important;
}

html.dark .av-income-form__btn-confirm.mud-button-root:hover {
  background: var(--color-primary-400) !important;
  border-color: var(--color-primary-400) !important;
}

.av-income-form__btn-confirm .mud-button-icon-start .mud-icon-root {
  width: 16px;
  height: 16px;
}

@media (max-width: 599.98px) {
  .av-income-form__body {
    min-width: unset;
    padding: 16px;
  }
}

/* ───────────────────────────────────────────────────────────────────
   Employment timeline dialog (read-only with edit affordance on gaps).
   Shows: header + 3 summary cards (employments / gaps explained /
   2-year status) + MudTimeline with employment + gap items + empty
   state. Token-driven, light + dark, scope `.av-emp-timeline`.
   ─────────────────────────────────────────────────────────────────── */

.av-emp-timeline .mud-dialog-content {
  padding: 0 !important;
  max-height: 80vh;
  overflow-y: auto;
}

.av-emp-timeline .mud-dialog-title {
  padding: 14px 22px !important;
  border-bottom: 1px solid var(--color-gray-150);
  background: var(--color-white);
}

html.dark .av-emp-timeline .mud-dialog-title {
  border-bottom-color: var(--color-dark-500);
  background: var(--color-dark-700);
}

.av-emp-timeline__title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.av-emp-timeline__title-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgb(from var(--color-primary-500) r g b / 0.1);
  color: var(--color-primary-700);
}

html.dark .av-emp-timeline__title-icon {
  background: rgb(from var(--color-primary-400) r g b / 0.16);
  color: var(--color-primary-300);
}

.av-emp-timeline__title-icon .mud-icon-root {
  width: 20px;
  height: 20px;
}

.av-emp-timeline__title-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.av-emp-timeline__title-heading {
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-gray-900);
}

html.dark .av-emp-timeline__title-heading {
  color: var(--color-dark-50);
}

.av-emp-timeline__title-hint {
  color: var(--color-gray-500);
  line-height: 1.3;
}

html.dark .av-emp-timeline__title-hint {
  color: var(--color-dark-300);
}

.av-emp-timeline__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px 22px;
  min-width: 560px;
}

/* ── SUMMARY CARDS ───────────────────────────────────────────────── */

.av-emp-timeline__summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.av-emp-timeline__summary-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

html.dark .av-emp-timeline__summary-card {
  border-color: var(--color-dark-500);
  background: var(--color-dark-700);
}

.av-emp-timeline__summary-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.av-emp-timeline__summary-icon .mud-icon-root {
  width: 18px;
  height: 18px;
}

.av-emp-timeline__summary-icon--primary {
  background: rgb(from var(--color-primary-500) r g b / 0.1);
  color: var(--color-primary-700);
}

html.dark .av-emp-timeline__summary-icon--primary {
  background: rgb(from var(--color-primary-400) r g b / 0.16);
  color: var(--color-primary-300);
}

.av-emp-timeline__summary-icon--success {
  background: rgb(from var(--color-success) r g b / 0.12);
  color: var(--color-success-darker);
}

html.dark .av-emp-timeline__summary-icon--success {
  background: rgb(from var(--color-success-lighter) r g b / 0.18);
  color: var(--color-success-lighter);
}

.av-emp-timeline__summary-icon--warning {
  background: rgb(from var(--color-warning) r g b / 0.12);
  color: var(--color-warning-darker);
}

html.dark .av-emp-timeline__summary-icon--warning {
  background: rgb(from var(--color-warning-lighter) r g b / 0.18);
  color: var(--color-warning-lighter);
}

.av-emp-timeline__summary-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.av-emp-timeline__summary-label {
  color: var(--color-gray-500);
  letter-spacing: 0.02em;
}

html.dark .av-emp-timeline__summary-label {
  color: var(--color-dark-300);
}

.av-emp-timeline__summary-value {
  font-weight: 700;
  color: var(--color-gray-900);
  line-height: 1.2;
}

html.dark .av-emp-timeline__summary-value {
  color: var(--color-dark-50);
}

.av-emp-timeline__summary-sub {
  color: var(--color-gray-500);
  line-height: 1.2;
  font-size: 10px;
}

html.dark .av-emp-timeline__summary-sub {
  color: var(--color-dark-300);
}

/* ── SCROLL CONTAINER ────────────────────────────────────────────── */

.av-emp-timeline__scroll {
  max-height: 50vh;
  overflow-y: auto;
  padding-right: 4px;
}

.av-emp-timeline__scroll::-webkit-scrollbar {
  width: 4px;
}

.av-emp-timeline__scroll::-webkit-scrollbar-thumb {
  background-color: var(--color-gray-300);
  border-radius: 2px;
}

html.dark .av-emp-timeline__scroll::-webkit-scrollbar-thumb {
  background-color: var(--color-dark-400);
}

/* ── TIMELINE ITEM CARDS ─────────────────────────────────────────── */

.av-emp-timeline__date {
  color: var(--color-gray-500);
  letter-spacing: 0.02em;
}

html.dark .av-emp-timeline__date {
  color: var(--color-dark-300);
}

.av-emp-timeline__card {
  padding: 12px 14px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition:
    background-color 150ms ease,
    border-color 150ms ease;
}

html.dark .av-emp-timeline__card {
  border-color: var(--color-dark-500);
  background: var(--color-dark-700);
}

.av-emp-timeline__card--employment {
  border-left: 3px solid var(--color-success);
}

html.dark .av-emp-timeline__card--employment {
  border-left-color: var(--color-success-light);
}

.av-emp-timeline__card--gap-explained {
  border-left: 3px solid var(--color-info);
}

html.dark .av-emp-timeline__card--gap-explained {
  border-left-color: var(--color-info-light);
}

.av-emp-timeline__card--gap-unexplained {
  border-left: 3px solid var(--color-warning);
  background: rgb(from var(--color-warning) r g b / 0.04);
}

html.dark .av-emp-timeline__card--gap-unexplained {
  border-left-color: var(--color-warning-light);
  background: rgb(from var(--color-warning-lighter) r g b / 0.08);
}

.av-emp-timeline__card--clickable {
  cursor: pointer;
}

.av-emp-timeline__card--clickable:hover {
  border-color: var(--color-gray-300);
  background: var(--color-gray-50);
}

html.dark .av-emp-timeline__card--clickable:hover {
  border-color: var(--color-dark-400);
  background: var(--color-dark-600);
}

.av-emp-timeline__card--gap-unexplained.av-emp-timeline__card--clickable:hover {
  background: rgb(from var(--color-warning) r g b / 0.08);
}

html.dark
  .av-emp-timeline__card--gap-unexplained.av-emp-timeline__card--clickable:hover {
  background: rgb(from var(--color-warning-lighter) r g b / 0.14);
}

.av-emp-timeline__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.av-emp-timeline__card-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.av-emp-timeline__card-title-icon {
  width: 16px;
  height: 16px;
  color: var(--color-primary-600);
  flex-shrink: 0;
}

html.dark .av-emp-timeline__card-title-icon {
  color: var(--color-primary-300);
}

.av-emp-timeline__card-title-icon--info {
  color: var(--color-info-darker);
}

html.dark .av-emp-timeline__card-title-icon--info {
  color: var(--color-info-lighter);
}

.av-emp-timeline__card-title-icon--warning {
  color: var(--color-warning-darker);
}

html.dark .av-emp-timeline__card-title-icon--warning {
  color: var(--color-warning-lighter);
}

.av-emp-timeline__card-title {
  font-weight: 600;
  color: var(--color-gray-900);
  line-height: 1.3;
}

html.dark .av-emp-timeline__card-title {
  color: var(--color-dark-50);
}

.av-emp-timeline__card-subtitle {
  color: var(--color-gray-600);
  line-height: 1.3;
}

html.dark .av-emp-timeline__card-subtitle {
  color: var(--color-dark-200);
}

.av-emp-timeline__card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.av-emp-timeline__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-gray-500);
}

html.dark .av-emp-timeline__meta-item {
  color: var(--color-dark-300);
}

.av-emp-timeline__meta-item .mud-icon-root {
  width: 14px;
  height: 14px;
}

.av-emp-timeline__card-description {
  margin-top: 4px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  background: var(--color-gray-50);
  color: var(--color-gray-700);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

html.dark .av-emp-timeline__card-description {
  background: var(--color-dark-600);
  color: var(--color-dark-100);
}

/* ── GAP CTA (click to explain) ──────────────────────────────────── */

.av-emp-timeline__card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  color: var(--color-warning-darker);
  font-weight: 500;
}

html.dark .av-emp-timeline__card-cta {
  color: var(--color-warning-lighter);
}

.av-emp-timeline__card-cta .mud-icon-root {
  width: 14px;
  height: 14px;
}

.av-emp-timeline__card-empty-note {
  color: var(--color-gray-500);
  font-style: italic;
}

html.dark .av-emp-timeline__card-empty-note {
  color: var(--color-dark-300);
}

/* ── CARD ACTIONS (edit + remove for explained gaps) ─────────────── */

.av-emp-timeline__card-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--color-gray-150);
}

html.dark .av-emp-timeline__card-actions {
  border-top-color: var(--color-dark-500);
}

.av-emp-timeline__action-btn.mud-button-root {
  height: 28px;
  padding: 0 10px !important;
  border-radius: 9999px !important;
  background: transparent !important;
  color: var(--color-gray-700) !important;
  text-transform: none;
  font-weight: 500;
  font-size: 12px;
  box-shadow: none !important;
}

.av-emp-timeline__action-btn.mud-button-root:hover {
  background: var(--color-gray-100) !important;
}

html.dark .av-emp-timeline__action-btn.mud-button-root {
  color: var(--color-dark-100) !important;
}

html.dark .av-emp-timeline__action-btn.mud-button-root:hover {
  background: var(--color-dark-600) !important;
}

.av-emp-timeline__action-btn--danger.mud-button-root {
  color: var(--color-error) !important;
}

.av-emp-timeline__action-btn--danger.mud-button-root:hover {
  background: rgb(from var(--color-error) r g b / 0.08) !important;
}

html.dark .av-emp-timeline__action-btn--danger.mud-button-root {
  color: var(--color-error-lighter) !important;
}

html.dark .av-emp-timeline__action-btn--danger.mud-button-root:hover {
  background: rgb(from var(--color-error-lighter) r g b / 0.12) !important;
}

.av-emp-timeline__action-btn .mud-button-icon-start .mud-icon-root {
  width: 14px;
  height: 14px;
}

/* ── CHIPS ───────────────────────────────────────────────────────── */

.av-emp-timeline__chip {
  height: 22px !important;
  min-height: 22px !important;
  padding: 0 8px !important;
  border-radius: 9999px !important;
  font-size: 11px !important;
}

.av-emp-timeline__chip--current {
  background: var(--color-success) !important;
  color: var(--color-white) !important;
}

html.dark .av-emp-timeline__chip--current {
  background: var(--color-success-light) !important;
}

.av-emp-timeline__chip--duration {
  background: var(--color-gray-100) !important;
  color: var(--color-gray-700) !important;
}

html.dark .av-emp-timeline__chip--duration {
  background: var(--color-dark-600) !important;
  color: var(--color-dark-100) !important;
}

/* ── EMPTY STATE ─────────────────────────────────────────────────── */

.av-emp-timeline__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 40px 24px;
  border-radius: var(--radius-lg);
  background: var(--color-gray-50);
  border: 1px dashed var(--color-gray-300);
  text-align: center;
}

html.dark .av-emp-timeline__empty {
  background: var(--color-dark-750);
  border-color: var(--color-dark-400);
}

.av-emp-timeline__empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgb(from var(--color-primary-500) r g b / 0.1);
  color: var(--color-primary-600);
  margin-bottom: 4px;
}

html.dark .av-emp-timeline__empty-icon {
  background: rgb(from var(--color-primary-400) r g b / 0.16);
  color: var(--color-primary-300);
}

.av-emp-timeline__empty-icon .mud-icon-root {
  width: 28px;
  height: 28px;
}

.av-emp-timeline__empty-title {
  font-weight: 600;
  color: var(--color-gray-900);
  margin: 0;
}

html.dark .av-emp-timeline__empty-title {
  color: var(--color-dark-50);
}

.av-emp-timeline__empty-hint {
  color: var(--color-gray-500);
  margin: 0;
}

html.dark .av-emp-timeline__empty-hint {
  color: var(--color-dark-300);
}

/* ── FOOTER ──────────────────────────────────────────────────────── */

.av-emp-timeline .mud-dialog-actions {
  padding: 12px 22px !important;
  border-top: 1px solid var(--color-gray-150);
  background: var(--color-gray-50);
}

html.dark .av-emp-timeline .mud-dialog-actions {
  border-top-color: var(--color-dark-500);
  background: var(--color-dark-750);
}

.av-emp-timeline__btn-close.mud-button-root {
  height: 36px;
  padding: 0 18px !important;
  border-radius: 9999px !important;
  border: 1px solid var(--color-gray-300) !important;
  background: transparent !important;
  color: var(--color-gray-700) !important;
  text-transform: none;
  font-weight: 500;
  box-shadow: none !important;
}

.av-emp-timeline__btn-close.mud-button-root:hover {
  background: var(--color-gray-100) !important;
  border-color: var(--color-gray-400) !important;
}

html.dark .av-emp-timeline__btn-close.mud-button-root {
  border-color: var(--color-dark-400) !important;
  color: var(--color-dark-100) !important;
}

html.dark .av-emp-timeline__btn-close.mud-button-root:hover {
  background: var(--color-dark-600) !important;
  border-color: var(--color-dark-300) !important;
}

@media (max-width: 599.98px) {
  .av-emp-timeline__body {
    min-width: unset;
    padding: 16px;
  }

  .av-emp-timeline__summary {
    grid-template-columns: 1fr;
  }
}

/* ───────────────────────────────────────────────────────────────────
   Employment new/edit form dialog (large form: business info + period
   + self-employment / income breakdown + experience). 5 sections with
   eyebrow pills, Yes/No question rows, currency fields. Token-driven,
   light + dark, scope `.av-emp-form`.
   ─────────────────────────────────────────────────────────────────── */

.av-emp-form .mud-dialog-content {
  padding: 0 !important;
  max-height: 75vh;
  overflow-y: auto;
}

.av-emp-form .mud-dialog-title {
  padding: 14px 22px !important;
  border-bottom: 1px solid var(--color-gray-150);
  background: var(--color-white);
}

html.dark .av-emp-form .mud-dialog-title {
  border-bottom-color: var(--color-dark-500);
  background: var(--color-dark-700);
}

.av-emp-form__title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.av-emp-form__title-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.av-emp-form__title-icon--info {
  background: rgb(from var(--color-info) r g b / 0.12);
  color: var(--color-info-darker);
}

html.dark .av-emp-form__title-icon--info {
  background: rgb(from var(--color-info-lighter) r g b / 0.18);
  color: var(--color-info-lighter);
}

.av-emp-form__title-icon .mud-icon-root {
  width: 20px;
  height: 20px;
}

.av-emp-form__title-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.av-emp-form__title-heading {
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-gray-900);
}

html.dark .av-emp-form__title-heading {
  color: var(--color-dark-50);
}

.av-emp-form__title-hint {
  color: var(--color-gray-500);
  line-height: 1.3;
}

html.dark .av-emp-form__title-hint {
  color: var(--color-dark-300);
}

/* ── BODY ────────────────────────────────────────────────────────── */

.av-emp-form__body {
  padding: 20px 22px;
  min-width: 540px;
}

/* ── SECTION CARDS ───────────────────────────────────────────────── */

.av-emp-form__section {
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
}

html.dark .av-emp-form__section {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

.av-emp-form__section-eyebrow {
  display: inline-flex;
  align-self: flex-start;
  width: fit-content;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 4px 12px 4px 8px;
  border-radius: 9999px;
  background: rgb(from var(--color-primary-500) r g b / 0.08);
  line-height: 1;
}

html.dark .av-emp-form__section-eyebrow {
  background: rgb(from var(--color-primary-400) r g b / 0.14);
}

.av-emp-form__section-eyebrow-icon {
  width: 14px;
  height: 14px;
  color: var(--color-primary-600);
  flex-shrink: 0;
}

html.dark .av-emp-form__section-eyebrow-icon {
  color: var(--color-primary-300);
}

/* Force-reset Mud Typography defaults — overline renders as `<p>` with
   `margin-block: 0.35em` that asymmetric-shifts the text inside the pill. */
.av-emp-form__section-eyebrow .av-emp-form__section-eyebrow-text {
  color: var(--color-primary-700);
  letter-spacing: 0.06em;
  font-weight: 600;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

html.dark .av-emp-form__section-eyebrow .av-emp-form__section-eyebrow-text {
  color: var(--color-primary-300);
}

/* ── YES / NO QUESTION ROW ───────────────────────────────────────── */

.av-emp-form__yes-no-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
}

html.dark .av-emp-form__yes-no-row {
  background: var(--color-dark-750);
}

.av-emp-form__chips {
  flex-shrink: 0;
}

.av-emp-form__chips .mud-chip {
  min-width: 52px;
  justify-content: center;
  font-weight: 500;
}

/* ── INCOME ROW (overtime/bonus/commission/military/other) ───────── */

.av-emp-form__income-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-gray-150);
}

html.dark .av-emp-form__income-row {
  border-bottom-color: var(--color-dark-500);
}

.av-emp-form__income-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.av-emp-form__income-field {
  margin-top: 4px;
}

/* ── ADDRESS FIELD (cursor pointer) ──────────────────────────────── */

.av-emp-form__address-field {
  cursor: pointer;
}

.av-emp-form__address-field .mud-input-slot {
  cursor: pointer !important;
}

/* ── FOOTER ACTIONS ──────────────────────────────────────────────── */

.av-emp-form .mud-dialog-actions {
  padding: 12px 22px !important;
  border-top: 1px solid var(--color-gray-150);
  background: var(--color-gray-50);
}

html.dark .av-emp-form .mud-dialog-actions {
  border-top-color: var(--color-dark-500);
  background: var(--color-dark-750);
}

.av-emp-form__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  width: 100%;
}

.av-emp-form__btn-cancel.mud-button-root,
.av-emp-form__btn-confirm.mud-button-root {
  height: 36px;
  padding: 0 18px !important;
  border-radius: 9999px !important;
  text-transform: none;
  font-weight: 500;
  box-shadow: none !important;
  min-width: 0;
}

.av-emp-form__btn-cancel.mud-button-root {
  background: transparent !important;
  border: 1px solid var(--color-gray-300) !important;
  color: var(--color-gray-700) !important;
}

.av-emp-form__btn-cancel.mud-button-root:hover {
  background: var(--color-gray-100) !important;
  border-color: var(--color-gray-400) !important;
}

html.dark .av-emp-form__btn-cancel.mud-button-root {
  border-color: var(--color-dark-400) !important;
  color: var(--color-dark-100) !important;
}

html.dark .av-emp-form__btn-cancel.mud-button-root:hover {
  background: var(--color-dark-600) !important;
  border-color: var(--color-dark-300) !important;
}

.av-emp-form__btn-confirm.mud-button-root {
  background: var(--color-primary-600) !important;
  border: 1px solid var(--color-primary-600) !important;
  color: var(--color-white) !important;
}

.av-emp-form__btn-confirm.mud-button-root:hover {
  background: var(--color-primary-700) !important;
  border-color: var(--color-primary-700) !important;
}

html.dark .av-emp-form__btn-confirm.mud-button-root {
  background: var(--color-primary-500) !important;
  border-color: var(--color-primary-500) !important;
}

html.dark .av-emp-form__btn-confirm.mud-button-root:hover {
  background: var(--color-primary-400) !important;
  border-color: var(--color-primary-400) !important;
}

.av-emp-form__btn-confirm .mud-button-icon-start .mud-icon-root {
  width: 16px;
  height: 16px;
}

/* ── RESPONSIVE ──────────────────────────────────────────────────── */

@media (max-width: 599.98px) {
  .av-emp-form__body {
    min-width: unset;
    padding: 16px;
  }

  .av-emp-form__section {
    padding: 14px 16px;
  }

  .av-emp-form__yes-no-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .av-emp-form__chips {
    align-self: center;
  }
}

@media (min-width: 600px) and (max-width: 960px) {
  .av-emp-form__body {
    min-width: 440px;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .av-emp-form__section,
  .av-emp-form__address-field {
    transition: none;
  }
}

/* ───────────────────────────────────────────────────────────────────
   1003 Form — BI_Assets (Assets listing)

   Same recipe as BI_Incomes: header + add btn ghost dashed + cards
   listing with illustration + total summary + empty state. Each card
   has a left-accent stripe primary (or error if incomplete) + icon
   disc + title + financial institution + account number masked +
   cash/market value highlighted. Token-driven, light + dark, scope
   `.av-bi-assets`.
   ─────────────────────────────────────────────────────────────────── */

.av-bi-assets {
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: avBiAssetsFadeIn 0.35s ease-out;
}

@keyframes avBiAssetsFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.av-bi-assets__header {
  margin-bottom: 4px;
}

.av-bi-assets__title {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-gray-900);
}

html.dark .av-bi-assets__title {
  color: var(--color-dark-50);
}

.av-bi-assets__subtitle {
  margin-top: 4px;
  line-height: 1.5;
}

/* ── ADD BUTTON ─────────────────────────────────────────────────── */

.av-bi-assets__add-btn.mud-button-root {
  align-self: flex-start;
  height: 36px;
  padding: 0 18px !important;
  border-radius: 9999px !important;
  border: 1px dashed var(--color-primary-400) !important;
  background: transparent !important;
  color: var(--color-primary-700) !important;
  font-weight: 500;
  text-transform: none;
  box-shadow: none !important;
}

.av-bi-assets__add-btn.mud-button-root:hover {
  background: rgb(from var(--color-primary-500) r g b / 0.06) !important;
  border-color: var(--color-primary-600) !important;
  border-style: solid !important;
}

html.dark .av-bi-assets__add-btn.mud-button-root {
  border-color: var(--color-primary-500) !important;
  color: var(--color-primary-300) !important;
}

html.dark .av-bi-assets__add-btn.mud-button-root:hover {
  background: rgb(from var(--color-primary-400) r g b / 0.12) !important;
  border-color: var(--color-primary-400) !important;
}

.av-bi-assets__add-btn .mud-button-icon-start .mud-icon-root {
  width: 16px;
  height: 16px;
}

/* ── CARDS ──────────────────────────────────────────────────────── */

.av-bi-assets__card {
  padding: 16px 20px;
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-left: 3px solid var(--color-primary-500);
  transition:
    border-color 200ms ease,
    box-shadow 200ms ease;
}

html.dark .av-bi-assets__card {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
  border-left-color: var(--color-primary-400);
}

.av-bi-assets__card:hover {
  border-color: var(--color-gray-300);
  border-left-color: var(--color-primary-600);
  box-shadow: 0 2px 8px rgb(from var(--color-gray-900) r g b / 0.04);
}

html.dark .av-bi-assets__card:hover {
  border-color: var(--color-dark-400);
  border-left-color: var(--color-primary-300);
  box-shadow: 0 2px 8px rgb(from var(--color-black) r g b / 0.3);
}

.av-bi-assets__card--incomplete {
  border-left-color: var(--color-error) !important;
  background: linear-gradient(
    to right,
    rgb(from var(--color-error) r g b / 0.03),
    transparent
  );
}

html.dark .av-bi-assets__card--incomplete {
  border-left-color: var(--color-error-lighter) !important;
  background: linear-gradient(
    to right,
    rgb(from var(--color-error-lighter) r g b / 0.06),
    transparent
  );
}

/* ── CARD HEADER ────────────────────────────────────────────────── */

.av-bi-assets__card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-gray-100);
}

html.dark .av-bi-assets__card-header {
  border-bottom-color: var(--color-dark-500);
}

.av-bi-assets__card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.av-bi-assets__card-icon .mud-icon-root {
  width: 20px;
  height: 20px;
}

.av-bi-assets__card-icon--asset {
  background: rgb(from var(--color-primary-500) r g b / 0.12);
  color: var(--color-primary-700);
}

html.dark .av-bi-assets__card-icon--asset {
  background: rgb(from var(--color-primary-400) r g b / 0.18);
  color: var(--color-primary-300);
}

.av-bi-assets__card-icon--warning {
  background: rgb(from var(--color-error) r g b / 0.12);
  color: var(--color-error);
}

html.dark .av-bi-assets__card-icon--warning {
  background: rgb(from var(--color-error-lighter) r g b / 0.18);
  color: var(--color-error-lighter);
}

.av-bi-assets__card-title-section {
  flex: 1;
  min-width: 0;
}

.av-bi-assets__card-title {
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html.dark .av-bi-assets__card-title {
  color: var(--color-dark-50);
}

.av-bi-assets__chip {
  height: 22px !important;
  min-height: 22px !important;
  padding: 0 8px !important;
  border-radius: 9999px !important;
  font-size: 11px !important;
  letter-spacing: 0.02em;
}

.av-bi-assets__card-actions {
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity 150ms ease;
}

.av-bi-assets__card:hover .av-bi-assets__card-actions {
  opacity: 1;
}

/* ── CARD BODY (illustration + info) ────────────────────────────── */

.av-bi-assets__card-body {
  padding-top: 12px;
}

.av-bi-assets__image-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 80px;
}

.av-bi-assets__image {
  max-height: 96px;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgb(from var(--color-gray-900) r g b / 0.06));
}

html.dark .av-bi-assets__image {
  filter: drop-shadow(0 2px 6px rgb(from var(--color-black) r g b / 0.3));
}

.av-bi-assets__info-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-gray-700);
}

html.dark .av-bi-assets__info-row {
  color: var(--color-dark-100);
}

.av-bi-assets__info-row .mud-icon-root {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.av-bi-assets__icon-error {
  color: var(--color-error) !important;
}

html.dark .av-bi-assets__icon-error {
  color: var(--color-error-lighter) !important;
}

/* ── CASH/MARKET VALUE BLOCK ────────────────────────────────────── */

.av-bi-assets__value {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--color-gray-50);
  border-left: 2px solid var(--color-success);
}

html.dark .av-bi-assets__value {
  background: var(--color-dark-600);
  border-left-color: var(--color-success-light);
}

.av-bi-assets__amount--success {
  color: var(--color-success-darker);
  font-weight: 700;
}

html.dark .av-bi-assets__amount--success {
  color: var(--color-success-lighter);
}

/* ── MISSING / ASTERISK MARKERS ─────────────────────────────────── */

.av-bi-assets__asterisk {
  color: var(--color-error);
  font-weight: 700;
  margin-right: 2px;
}

html.dark .av-bi-assets__asterisk {
  color: var(--color-error-lighter);
}

.av-bi-assets__missing {
  color: var(--color-error);
  font-weight: 600;
}

html.dark .av-bi-assets__missing {
  color: var(--color-error-lighter);
}

.av-bi-assets__missing-subtle {
  color: var(--color-error);
  opacity: 0.8;
}

html.dark .av-bi-assets__missing-subtle {
  color: var(--color-error-lighter);
}

.av-bi-assets__alert {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: rgb(from var(--color-error) r g b / 0.06);
  color: var(--color-error);
  border-left: 2px solid var(--color-error);
}

html.dark .av-bi-assets__alert {
  background: rgb(from var(--color-error-lighter) r g b / 0.1);
  color: var(--color-error-lighter);
  border-left-color: var(--color-error-lighter);
}

.av-bi-assets__alert .mud-icon-root {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ── TOTAL SUMMARY CARD ─────────────────────────────────────────── */

.av-bi-assets__total {
  padding: 16px 20px;
  border-radius: var(--radius-lg);
  background: rgb(from var(--color-success) r g b / 0.06);
  border: 1px solid rgb(from var(--color-success) r g b / 0.2);
}

html.dark .av-bi-assets__total {
  background: rgb(from var(--color-success-lighter) r g b / 0.1);
  border-color: rgb(from var(--color-success-lighter) r g b / 0.25);
}

.av-bi-assets__total .mud-icon-root {
  color: var(--color-success-darker);
}

html.dark .av-bi-assets__total .mud-icon-root {
  color: var(--color-success-lighter);
}

/* ── EMPTY STATE ────────────────────────────────────────────────── */

.av-bi-assets__empty {
  padding: 40px 24px;
  border-radius: var(--radius-lg);
  background: var(--color-gray-50);
  border: 1px dashed var(--color-gray-300);
  text-align: center;
}

html.dark .av-bi-assets__empty {
  background: var(--color-dark-750);
  border-color: var(--color-dark-400);
}

.av-bi-assets__empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgb(from var(--color-primary-500) r g b / 0.08);
  color: var(--color-primary-600);
}

html.dark .av-bi-assets__empty-icon {
  background: rgb(from var(--color-primary-400) r g b / 0.14);
  color: var(--color-primary-300);
}

.av-bi-assets__empty-icon .mud-icon-root {
  width: 32px;
  height: 32px;
}

@media (max-width: 599.98px) {
  .av-bi-assets__card {
    padding: 14px 16px;
  }

  .av-bi-assets__card-header {
    flex-wrap: wrap;
  }

  .av-bi-assets__add-btn.mud-button-root {
    width: 100%;
  }

  .av-bi-assets__empty {
    padding: 32px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .av-bi-assets {
    animation: none;
  }

  .av-bi-assets__card,
  .av-bi-assets__add-btn.mud-button-root,
  .av-bi-assets__card-actions {
    transition: none;
  }
}

/* ───────────────────────────────────────────────────────────────────
   Asset new/edit form dialog. 2 modes:
   1) Type picker — reuses `.av-income-picker__*` grid scope
      (same visual recipe; nothing extra needed here).
   2) Form mode — account type / financial institution / account number
      / cash-or-market value. Token-driven, light + dark, scope
      `.av-asset-form`.
   ─────────────────────────────────────────────────────────────────── */

.av-asset-form .mud-dialog-content {
  padding: 0 !important;
  max-height: 75vh;
  overflow-y: auto;
}

.av-asset-form .mud-dialog-title {
  padding: 14px 22px !important;
  border-bottom: 1px solid var(--color-gray-150);
  background: var(--color-white);
}

html.dark .av-asset-form .mud-dialog-title {
  border-bottom-color: var(--color-dark-500);
  background: var(--color-dark-700);
}

.av-asset-form__title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.av-asset-form__title-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.av-asset-form__title-icon--primary {
  background: rgb(from var(--color-primary-500) r g b / 0.12);
  color: var(--color-primary-700);
}

html.dark .av-asset-form__title-icon--primary {
  background: rgb(from var(--color-primary-400) r g b / 0.18);
  color: var(--color-primary-300);
}

.av-asset-form__title-icon .mud-icon-root {
  width: 20px;
  height: 20px;
}

.av-asset-form__title-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.av-asset-form__title-heading {
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-gray-900);
}

html.dark .av-asset-form__title-heading {
  color: var(--color-dark-50);
}

.av-asset-form__title-hint {
  color: var(--color-gray-500);
  line-height: 1.3;
}

html.dark .av-asset-form__title-hint {
  color: var(--color-dark-300);
}

.av-asset-form__body {
  padding: 20px 22px;
  min-width: 420px;
}

.av-asset-form__section {
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
}

html.dark .av-asset-form__section {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

/* ── CASH/MARKET VALUE GROUP (tinted with eyebrow + field) ───────── */

.av-asset-form__amount-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-150);
}

html.dark .av-asset-form__amount-section {
  background: var(--color-dark-750);
  border-color: var(--color-dark-500);
}

.av-asset-form__amount-eyebrow {
  display: inline-flex;
  align-self: flex-start;
  width: fit-content;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 8px;
  border-radius: 9999px;
  background: rgb(from var(--color-success) r g b / 0.12);
  line-height: 1;
}

html.dark .av-asset-form__amount-eyebrow {
  background: rgb(from var(--color-success-lighter) r g b / 0.18);
}

.av-asset-form__amount-eyebrow-icon {
  width: 14px;
  height: 14px;
  color: var(--color-success-darker);
  flex-shrink: 0;
}

html.dark .av-asset-form__amount-eyebrow-icon {
  color: var(--color-success-lighter);
}

.av-asset-form__amount-eyebrow .av-asset-form__amount-eyebrow-text {
  color: var(--color-success-darker);
  letter-spacing: 0.06em;
  font-weight: 600;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

html.dark .av-asset-form__amount-eyebrow .av-asset-form__amount-eyebrow-text {
  color: var(--color-success-lighter);
}

/* ── FOOTER ACTIONS ──────────────────────────────────────────────── */

.av-asset-form .mud-dialog-actions {
  padding: 12px 22px !important;
  border-top: 1px solid var(--color-gray-150);
  background: var(--color-gray-50);
}

html.dark .av-asset-form .mud-dialog-actions {
  border-top-color: var(--color-dark-500);
  background: var(--color-dark-750);
}

.av-asset-form__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  width: 100%;
}

.av-asset-form__btn-cancel.mud-button-root,
.av-asset-form__btn-confirm.mud-button-root {
  height: 36px;
  padding: 0 18px !important;
  border-radius: 9999px !important;
  text-transform: none;
  font-weight: 500;
  box-shadow: none !important;
  min-width: 0;
}

.av-asset-form__btn-cancel.mud-button-root {
  background: transparent !important;
  border: 1px solid var(--color-gray-300) !important;
  color: var(--color-gray-700) !important;
}

.av-asset-form__btn-cancel.mud-button-root:hover {
  background: var(--color-gray-100) !important;
  border-color: var(--color-gray-400) !important;
}

html.dark .av-asset-form__btn-cancel.mud-button-root {
  border-color: var(--color-dark-400) !important;
  color: var(--color-dark-100) !important;
}

html.dark .av-asset-form__btn-cancel.mud-button-root:hover {
  background: var(--color-dark-600) !important;
  border-color: var(--color-dark-300) !important;
}

.av-asset-form__btn-confirm.mud-button-root {
  background: var(--color-primary-600) !important;
  border: 1px solid var(--color-primary-600) !important;
  color: var(--color-white) !important;
}

.av-asset-form__btn-confirm.mud-button-root:hover {
  background: var(--color-primary-700) !important;
  border-color: var(--color-primary-700) !important;
}

.av-asset-form__btn-confirm.mud-button-root:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

html.dark .av-asset-form__btn-confirm.mud-button-root {
  background: var(--color-primary-500) !important;
  border-color: var(--color-primary-500) !important;
}

html.dark .av-asset-form__btn-confirm.mud-button-root:hover {
  background: var(--color-primary-400) !important;
  border-color: var(--color-primary-400) !important;
}

.av-asset-form__btn-confirm .mud-button-icon-start .mud-icon-root {
  width: 16px;
  height: 16px;
}

@media (max-width: 599.98px) {
  .av-asset-form__body {
    min-width: unset;
    padding: 16px;
  }
}

/* ───────────────────────────────────────────────────────────────────
   1003 Form — BI_Liabilities (Liabilities listing)

   Mirrors BI_Assets but with TWO amount rows (Unpaid Balance +
   Monthly Payment) and a two-column total card (Total Balance +
   Monthly Payments). Left-accent stripe uses warning (debt visual
   semantic) instead of primary. Token-driven, light + dark, scope
   `.av-bi-liabilities`.
   ─────────────────────────────────────────────────────────────────── */

.av-bi-liabilities {
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: avBiLiabilitiesFadeIn 0.35s ease-out;
}

@keyframes avBiLiabilitiesFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.av-bi-liabilities__header {
  margin-bottom: 4px;
}

.av-bi-liabilities__title {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-gray-900);
}

html.dark .av-bi-liabilities__title {
  color: var(--color-dark-50);
}

.av-bi-liabilities__subtitle {
  margin-top: 4px;
  line-height: 1.5;
}

/* ── ADD BUTTON ─────────────────────────────────────────────────── */

.av-bi-liabilities__add-btn.mud-button-root {
  align-self: flex-start;
  height: 36px;
  padding: 0 18px !important;
  border-radius: 9999px !important;
  border: 1px dashed var(--color-primary-400) !important;
  background: transparent !important;
  color: var(--color-primary-700) !important;
  font-weight: 500;
  text-transform: none;
  box-shadow: none !important;
}

.av-bi-liabilities__add-btn.mud-button-root:hover {
  background: rgb(from var(--color-primary-500) r g b / 0.06) !important;
  border-color: var(--color-primary-600) !important;
  border-style: solid !important;
}

html.dark .av-bi-liabilities__add-btn.mud-button-root {
  border-color: var(--color-primary-500) !important;
  color: var(--color-primary-300) !important;
}

html.dark .av-bi-liabilities__add-btn.mud-button-root:hover {
  background: rgb(from var(--color-primary-400) r g b / 0.12) !important;
  border-color: var(--color-primary-400) !important;
}

.av-bi-liabilities__add-btn .mud-button-icon-start .mud-icon-root {
  width: 16px;
  height: 16px;
}

/* ── CARDS ──────────────────────────────────────────────────────── */

.av-bi-liabilities__card {
  padding: 16px 20px;
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-left: 3px solid var(--color-warning);
  transition:
    border-color 200ms ease,
    box-shadow 200ms ease;
}

html.dark .av-bi-liabilities__card {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
  border-left-color: var(--color-warning-light);
}

.av-bi-liabilities__card:hover {
  border-color: var(--color-gray-300);
  border-left-color: var(--color-warning-darker);
  box-shadow: 0 2px 8px rgb(from var(--color-gray-900) r g b / 0.04);
}

html.dark .av-bi-liabilities__card:hover {
  border-color: var(--color-dark-400);
  border-left-color: var(--color-warning);
  box-shadow: 0 2px 8px rgb(from var(--color-black) r g b / 0.3);
}

.av-bi-liabilities__card--incomplete {
  border-left-color: var(--color-error) !important;
  background: linear-gradient(
    to right,
    rgb(from var(--color-error) r g b / 0.03),
    transparent
  );
}

html.dark .av-bi-liabilities__card--incomplete {
  border-left-color: var(--color-error-lighter) !important;
  background: linear-gradient(
    to right,
    rgb(from var(--color-error-lighter) r g b / 0.06),
    transparent
  );
}

/* ── CARD HEADER ────────────────────────────────────────────────── */

.av-bi-liabilities__card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-gray-100);
}

html.dark .av-bi-liabilities__card-header {
  border-bottom-color: var(--color-dark-500);
}

.av-bi-liabilities__card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.av-bi-liabilities__card-icon .mud-icon-root {
  width: 20px;
  height: 20px;
}

.av-bi-liabilities__card-icon--liability {
  background: rgb(from var(--color-warning) r g b / 0.12);
  color: var(--color-warning-darker);
}

html.dark .av-bi-liabilities__card-icon--liability {
  background: rgb(from var(--color-warning-lighter) r g b / 0.18);
  color: var(--color-warning-lighter);
}

.av-bi-liabilities__card-icon--warning {
  background: rgb(from var(--color-error) r g b / 0.12);
  color: var(--color-error);
}

html.dark .av-bi-liabilities__card-icon--warning {
  background: rgb(from var(--color-error-lighter) r g b / 0.18);
  color: var(--color-error-lighter);
}

.av-bi-liabilities__card-title-section {
  flex: 1;
  min-width: 0;
}

.av-bi-liabilities__card-title {
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html.dark .av-bi-liabilities__card-title {
  color: var(--color-dark-50);
}

.av-bi-liabilities__chip {
  height: 22px !important;
  min-height: 22px !important;
  padding: 0 8px !important;
  border-radius: 9999px !important;
  font-size: 11px !important;
  letter-spacing: 0.02em;
}

.av-bi-liabilities__card-actions {
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity 150ms ease;
}

.av-bi-liabilities__card:hover .av-bi-liabilities__card-actions {
  opacity: 1;
}

/* ── CARD BODY ─────────────────────────────────────────────────── */

.av-bi-liabilities__card-body {
  padding-top: 12px;
}

.av-bi-liabilities__image-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 80px;
}

.av-bi-liabilities__image {
  max-height: 96px;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgb(from var(--color-gray-900) r g b / 0.06));
}

html.dark .av-bi-liabilities__image {
  filter: drop-shadow(0 2px 6px rgb(from var(--color-black) r g b / 0.3));
}

.av-bi-liabilities__info-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-gray-700);
}

html.dark .av-bi-liabilities__info-row {
  color: var(--color-dark-100);
}

.av-bi-liabilities__info-row .mud-icon-root {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.av-bi-liabilities__icon-error {
  color: var(--color-error) !important;
}

html.dark .av-bi-liabilities__icon-error {
  color: var(--color-error-lighter) !important;
}

/* ── AMOUNT ROWS (Unpaid Balance + Monthly Payment) ─────────────── */

.av-bi-liabilities__amounts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.av-channel-summary__main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.av-channel-summary__value.mud-typography {
  color: var(--color-gray-900);
  overflow-wrap: anywhere;
}

html.dark .av-channel-summary__value.mud-typography {
  color: var(--color-dark-50);
}

/* Inline extension suffix after the number. */
.av-channel-summary__ext.mud-typography {
  color: var(--color-gray-500);
  margin-left: 4px;
}

html.dark .av-channel-summary__ext.mud-typography {
  color: var(--color-dark-300);
}

.av-channel-summary__updated.mud-typography {
  color: var(--color-gray-400);
}

html.dark .av-channel-summary__updated.mud-typography {
  color: var(--color-dark-300);
}

/* Secondary line under the value (e.g. address locality below the street). */
.av-channel-summary__sub.mud-typography {
  color: var(--color-gray-600);
}

html.dark .av-channel-summary__sub.mud-typography {
  color: var(--color-dark-200);
}

/* Footer — pinned to the bottom of the (flex-column) card so the 2-up row
   bottom-aligns. Count meta on the left, "View All" on the right. */
.av-channel-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}

.av-channel-foot__meta.mud-typography {
  color: var(--color-gray-500);
}

html.dark .av-channel-foot__meta.mud-typography {
  color: var(--color-dark-300);
}

.av-channel-card {
  display: flex;
  align-items: stretch;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-left: 4px solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    box-shadow 150ms ease;
}

.av-channel-card:hover {
  border-color: var(--color-gray-300);
  box-shadow: var(--shadow-sm);
}

html.dark .av-channel-card {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
  border-left-color: var(--color-dark-400);
}

/* Primary channel — white background, only the blue left accent bar marks it
   as primary (no body tint). */
.av-channel-card--primary {
  border-left-color: var(--color-primary-600);
}

html.dark .av-channel-card--primary {
  border-left-color: var(--color-primary-400);
}

/* Content column. min-width:0 so long emails ellipsis instead of overflow.
   Tight vertical rhythm so the card stays compact for a single value. */
.av-channel-card__body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Small breathing room above the value (separates it from the header row). */
.av-channel-card__value.mud-typography {
  margin-top: 2px;
}

/* "Last updated …" footer line — faded, smallest text in the card. */
.av-channel-card__updated.mud-typography {
  color: var(--color-gray-400);
  margin-top: 2px;
}

html.dark .av-channel-card__updated.mud-typography {
  color: var(--color-dark-300);
}

.av-channel-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* State star — outline gray for a secondary channel, solid blue for primary. */
.av-channel-card__head-star.mud-icon-root {
  width: 18px !important;
  height: 18px !important;
  font-size: 18px !important;
  color: var(--color-gray-400);
  flex-shrink: 0;
}

html.dark .av-channel-card__head-star.mud-icon-root {
  color: var(--color-dark-300);
}

.av-channel-card--primary .av-channel-card__head-star.mud-icon-root {
  color: var(--color-primary-600);
}

html.dark .av-channel-card--primary .av-channel-card__head-star.mud-icon-root {
  color: var(--color-primary-400);
}

.av-channel-card__slot.mud-typography {
  color: var(--color-gray-600);
}

html.dark .av-channel-card__slot.mud-typography {
  color: var(--color-dark-200);
}

.av-channel-card--primary .av-channel-card__slot.mud-typography {
  color: var(--color-primary-700);
}

html.dark .av-channel-card--primary .av-channel-card__slot.mud-typography {
  color: var(--color-primary-300);
}

/* Star inside the Primary badge — small, inherits the badge color. */
.av-channel-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.av-channel-card__badge .mud-icon-root {
  width: 12px !important;
  height: 12px !important;
  font-size: 12px !important;
}

/* Prominent value (number / email). overflow-wrap so long emails break
   instead of forcing the action rail off-card. */
.av-channel-card__value.mud-typography {
  color: var(--color-gray-900);
  overflow-wrap: anywhere;
}

html.dark .av-channel-card__value.mud-typography {
  color: var(--color-dark-50);
}

/* Inline extension suffix after the number — faded secondary detail. */
.av-channel-card__ext.mud-typography {
  color: var(--color-gray-500);
  margin-left: 4px;
}

html.dark .av-channel-card__ext.mud-typography {
  color: var(--color-dark-300);
}

.av-channel-card__meta.mud-typography {
  color: var(--color-gray-500);
}

html.dark .av-channel-card__meta.mud-typography {
  color: var(--color-dark-300);
}

/* Right action rail — vertical icon column with a visible left divider. */
.av-channel-card__actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 6px;
  border-left: 1px solid var(--color-gray-200);
}

html.dark .av-channel-card__actions {
  border-left-color: var(--color-dark-500);
}

.av-channel-card__action.mud-icon-button {
  color: var(--color-gray-500);
  border-radius: var(--radius-md);
  padding: 5px;
  transition:
    color 150ms ease,
    background-color 150ms ease;
}

.av-channel-card__action.mud-icon-button:hover {
  color: var(--color-primary-600);
  background: rgb(from var(--color-primary-500) r g b / 0.1);
}

html.dark .av-channel-card__action.mud-icon-button {
  color: var(--color-dark-200);
}

html.dark .av-channel-card__action.mud-icon-button:hover {
  color: var(--color-primary-300);
  background: rgb(from var(--color-primary-400) r g b / 0.15);
}

.av-channel-card__action .mud-icon-root {
  width: 18px !important;
  height: 18px !important;
  font-size: 18px !important;
}

/* Stack the action rail under the content on very narrow viewports. */
@media (max-width: 480px) {
  .av-channel-card {
    flex-direction: column;
  }

  .av-channel-card__actions {
    flex-direction: row;
    justify-content: flex-end;
    border-left: none;
    border-top: 1px solid var(--color-gray-200);
  }

  html.dark .av-channel-card__actions {
    border-top-color: var(--color-dark-500);
  }
}

/* ============================================================================
   §COMM · Communication Preferences (design mock)

   Two-column card layout on a gray canvas, inside the Account/Manage
   "Communication" tab. Bleeds out of the page-card panel padding to paint the
   gray canvas edge-to-edge, then lays out white cards in two columns. Typography
   is owned by Typo.* on the markup (chips use the av-badge primitive); these
   rules declare only layout / color / spacing. Icons via HeroIcons / Lucide.
   ============================================================================ */

.av-page-card .mud-tabs-panels .av-comm {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Page header */
.av-comm__pagehead {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

/* Inside the contact's Communication tab the head sits flush (no gray band below). */
.av-page-card .mud-tabs-panels .av-comm .av-comm__pagehead {
  margin-bottom: 0;
}

.av-comm__pagetitle {
  color: var(--color-gray-900);
}

html.dark .av-comm__pagetitle {
  color: var(--color-dark-50);
}

.av-comm__header-spacer {
  flex: 1 1 auto;
}

/* Outline button (Edit / Set date) */
.av-comm__btn.mud-button-root {
  min-width: 0;
  padding: 4px 18px;
  border-radius: 9999px;
  border: 1px solid var(--color-gray-300);
  background: var(--color-white);
  color: var(--color-gray-700);
  text-transform: none;
  box-shadow: var(
    --shadow-sm,
    0 1px 2px rgb(from var(--color-gray-900) r g b / 0.04)
  );
}

.av-comm__btn.mud-button-root:hover {
  background: var(--color-gray-50);
  border-color: var(--color-gray-400);
  box-shadow: none;
}

/* Compact variant (e.g. per-card Edit) */
.av-comm__btn--sm.mud-button-root {
  padding: 2px 12px;
}

.av-comm__btn--sm.mud-button-root .mud-icon-root {
  width: 14px;
  height: 14px;
}

html.dark .av-comm__btn.mud-button-root {
  background: var(--color-dark-700);
  border-color: var(--color-dark-400);
  color: var(--color-dark-100);
}

/* Pencil icon — keep it small + spaced like the reference pill */
.av-comm__btn.mud-button-root .mud-icon-root {
  width: 16px;
  height: 16px;
}

.av-comm__btn.mud-button-root .mud-button-icon-start {
  margin-right: 8px;
  margin-left: -2px;
}

/* Square icon-only edit button (e.g. per-card Edit) */
.av-comm__btn-icon.mud-icon-button-root {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-300);
  background: var(--color-white);
  color: var(--color-gray-600);
  box-shadow: var(
    --shadow-sm,
    0 1px 2px rgb(from var(--color-gray-900) r g b / 0.04)
  );
}

.av-comm__btn-icon.mud-icon-button-root:hover {
  background: var(--color-gray-50);
  border-color: var(--color-gray-400);
  color: var(--color-gray-800);
  box-shadow: none;
}

.av-comm__btn-icon.mud-icon-button-root .mud-icon-root {
  width: 16px;
  height: 16px;
}

html.dark .av-comm__btn-icon.mud-icon-button-root {
  background: var(--color-dark-700);
  border-color: var(--color-dark-400);
  color: var(--color-dark-200);
}

html.dark .av-comm__btn-icon.mud-icon-button-root:hover {
  background: var(--color-dark-600);
  border-color: var(--color-dark-300);
  color: var(--color-dark-50);
}

/* "More options" ghost icon button (header) */
.av-comm__more.mud-icon-button-root {
  width: 36px;
  height: 36px;
  color: var(--color-gray-500);
}

.av-comm__more.mud-icon-button-root:hover {
  background: var(--color-gray-100);
  color: var(--color-gray-700);
}

html.dark .av-comm__more.mud-icon-button-root {
  color: var(--color-dark-300);
}

html.dark .av-comm__more.mud-icon-button-root:hover {
  background: var(--color-dark-600);
  color: var(--color-dark-100);
}

.av-comm__more .mud-icon-root {
  width: 20px;
  height: 20px;
}

.av-bi-liabilities__amount-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: var(--color-gray-50);
  border-left: 2px solid var(--color-warning);
}

html.dark .av-bi-liabilities__amount-row {
  background: var(--color-dark-600);
  border-left-color: var(--color-warning-light);
}

.av-bi-liabilities__amount--error {
  color: var(--color-warning-darker);
  font-weight: 700;
}

html.dark .av-bi-liabilities__amount--error {
  color: var(--color-warning-lighter);
}

.av-bi-liabilities__amount-period {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-gray-500);
  margin-left: 2px;
}

html.dark .av-bi-liabilities__amount-period {
  color: var(--color-dark-300);
}

/* ── MISSING / ASTERISK MARKERS ─────────────────────────────────── */

.av-bi-liabilities__asterisk {
  color: var(--color-error);
  font-weight: 700;
  margin-right: 2px;
}

html.dark .av-bi-liabilities__asterisk {
  color: var(--color-error-lighter);
}

.av-bi-liabilities__missing {
  color: var(--color-error);
  font-weight: 600;
}

html.dark .av-bi-liabilities__missing {
  color: var(--color-error-lighter);
}

.av-bi-liabilities__missing-subtle {
  color: var(--color-error);
  opacity: 0.8;
}

html.dark .av-bi-liabilities__missing-subtle {
  color: var(--color-error-lighter);
}

.av-bi-liabilities__alert {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: rgb(from var(--color-error) r g b / 0.06);
  color: var(--color-error);
  border-left: 2px solid var(--color-error);
}

html.dark .av-bi-liabilities__alert {
  background: rgb(from var(--color-error-lighter) r g b / 0.1);
  color: var(--color-error-lighter);
  border-left-color: var(--color-error-lighter);
}

.av-bi-liabilities__alert .mud-icon-root {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ── TOTAL SUMMARY CARD (two columns) ───────────────────────────── */

.av-bi-liabilities__total {
  padding: 16px 20px;
  border-radius: var(--radius-lg);
  background: rgb(from var(--color-warning) r g b / 0.06);
  border: 1px solid rgb(from var(--color-warning) r g b / 0.2);
}

html.dark .av-bi-liabilities__total {
  background: rgb(from var(--color-warning-lighter) r g b / 0.1);
  border-color: rgb(from var(--color-warning-lighter) r g b / 0.25);
}

.av-bi-liabilities__total .mud-icon-root {
  color: var(--color-warning-darker);
}

html.dark .av-bi-liabilities__total .mud-icon-root {
  color: var(--color-warning-lighter);
}

/* ── EMPTY STATE ────────────────────────────────────────────────── */

.av-bi-liabilities__empty {
  padding: 40px 24px;
  border-radius: var(--radius-lg);
  background: var(--color-gray-50);
  border: 1px dashed var(--color-gray-300);
  text-align: center;
}

html.dark .av-bi-liabilities__empty {
  background: var(--color-dark-750);
  border-color: var(--color-dark-400);
}

.av-bi-liabilities__empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgb(from var(--color-primary-500) r g b / 0.08);
  color: var(--color-primary-600);
}

html.dark .av-bi-liabilities__empty-icon {
  background: rgb(from var(--color-primary-400) r g b / 0.14);
  color: var(--color-primary-300);
}

.av-bi-liabilities__empty-icon .mud-icon-root {
  width: 32px;
  height: 32px;
}

@media (max-width: 599.98px) {
  .av-bi-liabilities__card {
    padding: 14px 16px;
  }

  .av-bi-liabilities__card-header {
    flex-wrap: wrap;
  }

  .av-bi-liabilities__add-btn.mud-button-root {
    width: 100%;
  }

  .av-bi-liabilities__empty {
    padding: 32px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .av-bi-liabilities {
    animation: none;
  }

  .av-bi-liabilities__card,
  .av-bi-liabilities__add-btn.mud-button-root,
  .av-bi-liabilities__card-actions {
    transition: none;
  }
}

/* ───────────────────────────────────────────────────────────────────
   Liability new/edit form dialog. 2 modes (picker + form). Picker
   reuses `.av-income-picker__*`. Form mode uses warning-tinted accent
   (debt semantic). Token-driven, light + dark, scope `.av-liability-form`.
   ─────────────────────────────────────────────────────────────────── */

.av-liability-form .mud-dialog-content {
  padding: 0 !important;
  max-height: 75vh;
  overflow-y: auto;
}

.av-liability-form .mud-dialog-title {
  padding: 14px 22px !important;
  border-bottom: 1px solid var(--color-gray-150);
  background: var(--color-white);
}

html.dark .av-liability-form .mud-dialog-title {
  border-bottom-color: var(--color-dark-500);
  background: var(--color-dark-700);
}

.av-liability-form__title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.av-liability-form__title-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.av-liability-form__title-icon--warning {
  background: rgb(from var(--color-warning) r g b / 0.12);
  color: var(--color-warning-darker);
}

html.dark .av-liability-form__title-icon--warning {
  background: rgb(from var(--color-warning-lighter) r g b / 0.18);
  color: var(--color-warning-lighter);
}

.av-liability-form__title-icon .mud-icon-root {
  width: 20px;
  height: 20px;
}

/* Two columns */
.av-comm__cols {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.av-comm__col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.av-liability-form__title-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.av-liability-form__title-heading {
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-gray-900);
}

html.dark .av-liability-form__title-heading {
  color: var(--color-dark-50);
}

.av-liability-form__title-hint {
  color: var(--color-gray-500);
  line-height: 1.3;
}

html.dark .av-liability-form__title-hint {
  color: var(--color-dark-300);
}

.av-liability-form__body {
  padding: 20px 22px;
  min-width: 460px;
}

.av-liability-form__section {
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
}

html.dark .av-liability-form__section {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

/* ── DEBT DETAILS GROUP (tinted with eyebrow + 2-col fields) ─────── */

.av-liability-form__amount-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-150);
}

html.dark .av-liability-form__amount-section {
  background: var(--color-dark-750);
  border-color: var(--color-dark-500);
}

.av-liability-form__amount-eyebrow {
  display: inline-flex;
  align-self: flex-start;
  width: fit-content;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 8px;
  border-radius: 9999px;
  background: rgb(from var(--color-warning) r g b / 0.12);
  line-height: 1;
}

html.dark .av-liability-form__amount-eyebrow {
  background: rgb(from var(--color-warning-lighter) r g b / 0.18);
}

.av-liability-form__amount-eyebrow-icon {
  width: 14px;
  height: 14px;
  color: var(--color-warning-darker);
  flex-shrink: 0;
}

html.dark .av-liability-form__amount-eyebrow-icon {
  color: var(--color-warning-lighter);
}

.av-liability-form__amount-eyebrow .av-liability-form__amount-eyebrow-text {
  color: var(--color-warning-darker);
  letter-spacing: 0.06em;
  font-weight: 600;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

html.dark
  .av-liability-form__amount-eyebrow
  .av-liability-form__amount-eyebrow-text {
  color: var(--color-warning-lighter);
}

/* ── FOOTER ACTIONS ──────────────────────────────────────────────── */

.av-liability-form .mud-dialog-actions {
  padding: 12px 22px !important;
  border-top: 1px solid var(--color-gray-150);
  background: var(--color-gray-50);
}

html.dark .av-liability-form .mud-dialog-actions {
  border-top-color: var(--color-dark-500);
  background: var(--color-dark-750);
}

.av-liability-form__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  width: 100%;
}

.av-liability-form__btn-cancel.mud-button-root,
.av-liability-form__btn-confirm.mud-button-root {
  height: 36px;
  padding: 0 18px !important;
  border-radius: 9999px !important;
  text-transform: none;
  font-weight: 500;
  box-shadow: none !important;
  min-width: 0;
}

.av-liability-form__btn-cancel.mud-button-root {
  background: transparent !important;
  border: 1px solid var(--color-gray-300) !important;
  color: var(--color-gray-700) !important;
}

.av-liability-form__btn-cancel.mud-button-root:hover {
  background: var(--color-gray-100) !important;
  border-color: var(--color-gray-400) !important;
}

html.dark .av-liability-form__btn-cancel.mud-button-root {
  border-color: var(--color-dark-400) !important;
  color: var(--color-dark-100) !important;
}

html.dark .av-liability-form__btn-cancel.mud-button-root:hover {
  background: var(--color-dark-600) !important;
  border-color: var(--color-dark-300) !important;
}

.av-liability-form__btn-confirm.mud-button-root {
  background: var(--color-primary-600) !important;
  border: 1px solid var(--color-primary-600) !important;
  color: var(--color-white) !important;
}

.av-liability-form__btn-confirm.mud-button-root:hover {
  background: var(--color-primary-700) !important;
  border-color: var(--color-primary-700) !important;
}

.av-liability-form__btn-confirm.mud-button-root:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

html.dark .av-liability-form__btn-confirm.mud-button-root {
  background: var(--color-primary-500) !important;
  border-color: var(--color-primary-500) !important;
}

html.dark .av-liability-form__btn-confirm.mud-button-root:hover {
  background: var(--color-primary-400) !important;
  border-color: var(--color-primary-400) !important;
}

.av-liability-form__btn-confirm .mud-button-icon-start .mud-icon-root {
  width: 16px;
  height: 16px;
}

@media (max-width: 599.98px) {
  .av-liability-form__body {
    min-width: unset;
    padding: 16px;
  }
}

/* ───────────────────────────────────────────────────────────────────
   1003 Form — BI_OwnedProperties (Properties You Own listing)

   Yes/No question card on top + add btn + cards listing with REO N
   title + status chip + address + property value + occupancy/HOA/
   mortgage/expenses info rows. Token-driven, light + dark, scope
   `.av-bi-properties`.
   ─────────────────────────────────────────────────────────────────── */

.av-bi-properties {
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: avBiPropertiesFadeIn 0.35s ease-out;
}

@keyframes avBiPropertiesFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.av-bi-properties__header {
  margin-bottom: 4px;
}

.av-bi-properties__title {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-gray-900);
}

html.dark .av-bi-properties__title {
  color: var(--color-dark-50);
}

.av-bi-properties__subtitle {
  margin-top: 4px;
  line-height: 1.5;
}

/* ── QUESTION CARD (Yes/No real estate?) ────────────────────────── */

.av-bi-properties__question {
  padding: 16px 20px;
  border-radius: var(--radius-lg);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-150);
}

html.dark .av-bi-properties__question {
  background: var(--color-dark-750);
  border-color: var(--color-dark-500);
}

.av-bi-properties__question-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.av-bi-properties__question-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgb(from var(--color-primary-500) r g b / 0.1);
  color: var(--color-primary-700);
}

html.dark .av-bi-properties__question-icon {
  background: rgb(from var(--color-primary-400) r g b / 0.16);
  color: var(--color-primary-300);
}

.av-bi-properties__question-icon .mud-icon-root {
  width: 18px;
  height: 18px;
}

.av-bi-properties__question-label {
  font-weight: 500;
  flex: 1;
  min-width: 200px;
  color: var(--color-gray-900);
}

html.dark .av-bi-properties__question-label {
  color: var(--color-dark-50);
}

.av-bi-properties__chips {
  flex-shrink: 0;
}

.av-bi-properties__chips .mud-chip {
  min-width: 60px;
  justify-content: center;
}

/* ── ADD BUTTON ─────────────────────────────────────────────────── */

.av-bi-properties__add-btn.mud-button-root {
  align-self: flex-start;
  height: 36px;
  padding: 0 18px !important;
  border-radius: 9999px !important;
  border: 1px dashed var(--color-primary-400) !important;
  background: transparent !important;
  color: var(--color-primary-700) !important;
  font-weight: 500;
  text-transform: none;
  box-shadow: none !important;
}

.av-bi-properties__add-btn.mud-button-root:hover {
  background: rgb(from var(--color-primary-500) r g b / 0.06) !important;
  border-color: var(--color-primary-600) !important;
  border-style: solid !important;
}

html.dark .av-bi-properties__add-btn.mud-button-root {
  border-color: var(--color-primary-500) !important;
  color: var(--color-primary-300) !important;
}

html.dark .av-bi-properties__add-btn.mud-button-root:hover {
  background: rgb(from var(--color-primary-400) r g b / 0.12) !important;
  border-color: var(--color-primary-400) !important;
}

.av-bi-properties__add-btn .mud-button-icon-start .mud-icon-root {
  width: 16px;
  height: 16px;
}

/* ── CARDS ──────────────────────────────────────────────────────── */

.av-bi-properties__card {
  padding: 16px 20px;
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-left: 3px solid var(--color-primary-500);
  transition:
    border-color 200ms ease,
    box-shadow 200ms ease;
}

html.dark .av-bi-properties__card {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
  border-left-color: var(--color-primary-400);
}

.av-bi-properties__card:hover {
  border-color: var(--color-gray-300);
  border-left-color: var(--color-primary-600);
  box-shadow: 0 2px 8px rgb(from var(--color-gray-900) r g b / 0.04);
}

html.dark .av-bi-properties__card:hover {
  border-color: var(--color-dark-400);
  border-left-color: var(--color-primary-300);
  box-shadow: 0 2px 8px rgb(from var(--color-black) r g b / 0.3);
}

.av-bi-properties__card--incomplete {
  border-left-color: var(--color-error) !important;
  background: linear-gradient(
    to right,
    rgb(from var(--color-error) r g b / 0.03),
    transparent
  );
}

html.dark .av-bi-properties__card--incomplete {
  border-left-color: var(--color-error-lighter) !important;
  background: linear-gradient(
    to right,
    rgb(from var(--color-error-lighter) r g b / 0.06),
    transparent
  );
}

/* ── CARD HEADER ────────────────────────────────────────────────── */

.av-bi-properties__card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-gray-100);
}

html.dark .av-bi-properties__card-header {
  border-bottom-color: var(--color-dark-500);
}

.av-bi-properties__card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.av-bi-properties__card-icon .mud-icon-root {
  width: 20px;
  height: 20px;
}

.av-bi-properties__card-icon--property {
  background: rgb(from var(--color-primary-500) r g b / 0.12);
  color: var(--color-primary-700);
}

html.dark .av-bi-properties__card-icon--property {
  background: rgb(from var(--color-primary-400) r g b / 0.18);
  color: var(--color-primary-300);
}

.av-bi-properties__card-icon--warning {
  background: rgb(from var(--color-error) r g b / 0.12);
  color: var(--color-error);
}

html.dark .av-bi-properties__card-icon--warning {
  background: rgb(from var(--color-error-lighter) r g b / 0.18);
  color: var(--color-error-lighter);
}

.av-bi-properties__card-title-section {
  flex: 1;
  min-width: 0;
}

.av-bi-properties__card-title {
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-gray-900);
}

html.dark .av-bi-properties__card-title {
  color: var(--color-dark-50);
}

.av-bi-properties__address-text {
  line-height: 1.4;
}

.av-bi-properties__chip {
  height: 22px !important;
  min-height: 22px !important;
  padding: 0 8px !important;
  border-radius: 9999px !important;
  font-size: 11px !important;
  letter-spacing: 0.02em;
}

.av-bi-properties__mini-chip {
  height: 20px !important;
  min-height: 20px !important;
  padding: 0 6px !important;
  border-radius: 9999px !important;
  font-size: 10px !important;
}

.av-bi-properties__card-actions {
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity 150ms ease;
}

.av-bi-properties__card:hover .av-bi-properties__card-actions {
  opacity: 1;
}

/* ── CARD BODY ─────────────────────────────────────────────────── */

.av-bi-properties__card-body {
  padding-top: 12px;
}

.av-bi-properties__value {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--color-gray-50);
  border-left: 2px solid var(--color-primary-500);
}

html.dark .av-bi-properties__value {
  background: var(--color-dark-600);
  border-left-color: var(--color-primary-400);
}

.av-bi-properties__amount--primary {
  color: var(--color-primary-700);
  font-weight: 700;
}

html.dark .av-bi-properties__amount--primary {
  color: var(--color-primary-300);
}

.av-bi-properties__info-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-gray-700);
}

html.dark .av-bi-properties__info-row {
  color: var(--color-dark-100);
}

.av-bi-properties__info-row .mud-icon-root {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.av-bi-properties__info-row--error {
  color: var(--color-error);
}

html.dark .av-bi-properties__info-row--error {
  color: var(--color-error-lighter);
}

.av-bi-properties__icon-error {
  color: var(--color-error) !important;
}

html.dark .av-bi-properties__icon-error {
  color: var(--color-error-lighter) !important;
}

/* ── MISSING / ASTERISK MARKERS ─────────────────────────────────── */

.av-bi-properties__asterisk {
  color: var(--color-error);
  font-weight: 700;
  margin-right: 2px;
}

html.dark .av-bi-properties__asterisk {
  color: var(--color-error-lighter);
}

.av-bi-properties__missing {
  color: var(--color-error);
  font-weight: 600;
}

html.dark .av-bi-properties__missing {
  color: var(--color-error-lighter);
}

.av-bi-properties__missing-subtle {
  color: var(--color-error);
  opacity: 0.8;
}

html.dark .av-bi-properties__missing-subtle {
  color: var(--color-error-lighter);
}

.av-bi-properties__alert {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: rgb(from var(--color-error) r g b / 0.06);
  color: var(--color-error);
  border-left: 2px solid var(--color-error);
}

html.dark .av-bi-properties__alert {
  background: rgb(from var(--color-error-lighter) r g b / 0.1);
  color: var(--color-error-lighter);
  border-left-color: var(--color-error-lighter);
}

.av-bi-properties__alert .mud-icon-root {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ── TOTAL SUMMARY CARD ─────────────────────────────────────────── */

.av-bi-properties__total {
  padding: 16px 20px;
  border-radius: var(--radius-lg);
  background: rgb(from var(--color-primary-500) r g b / 0.06);
  border: 1px solid rgb(from var(--color-primary-500) r g b / 0.2);
}

html.dark .av-bi-properties__total {
  background: rgb(from var(--color-primary-400) r g b / 0.1);
  border-color: rgb(from var(--color-primary-400) r g b / 0.25);
}

.av-bi-properties__total .mud-icon-root {
  color: var(--color-primary-700);
}

html.dark .av-bi-properties__total .mud-icon-root {
  color: var(--color-primary-300);
}

/* ── EMPTY STATE ────────────────────────────────────────────────── */

.av-bi-properties__empty {
  padding: 40px 24px;
  border-radius: var(--radius-lg);
  background: var(--color-gray-50);
  border: 1px dashed var(--color-gray-300);
  text-align: center;
}

html.dark .av-bi-properties__empty {
  background: var(--color-dark-750);
  border-color: var(--color-dark-400);
}

.av-bi-properties__empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgb(from var(--color-primary-500) r g b / 0.08);
  color: var(--color-primary-600);
}

html.dark .av-bi-properties__empty-icon {
  background: rgb(from var(--color-primary-400) r g b / 0.14);
  color: var(--color-primary-300);
}

.av-bi-properties__empty-icon .mud-icon-root {
  width: 32px;
  height: 32px;
}

@media (max-width: 599.98px) {
  .av-bi-properties__card {
    padding: 14px 16px;
  }

  .av-bi-properties__card-header {
    flex-wrap: wrap;
  }

  .av-bi-properties__add-btn.mud-button-root {
    width: 100%;
  }

  .av-bi-properties__question-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .av-bi-properties__chips {
    align-self: center;
  }

  .av-bi-properties__empty {
    padding: 32px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .av-bi-properties {
    animation: none;
  }

  .av-bi-properties__card,
  .av-bi-properties__add-btn.mud-button-root,
  .av-bi-properties__card-actions {
    transition: none;
  }
}

/* ───────────────────────────────────────────────────────────────────
   Owned property new/edit form dialog. 5 sections with eyebrow pills.
   Token-driven, light + dark, scope `.av-property-form`.
   ─────────────────────────────────────────────────────────────────── */

.av-property-form .mud-dialog-content {
  padding: 0 !important;
  max-height: 75vh;
  overflow-y: auto;
}

.av-property-form .mud-dialog-title {
  padding: 14px 22px !important;
  border-bottom: 1px solid var(--color-gray-150);
  background: var(--color-white);
}

html.dark .av-property-form .mud-dialog-title {
  border-bottom-color: var(--color-dark-500);
  background: var(--color-dark-700);
}

.av-property-form__title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.av-property-form__title-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.av-property-form__title-icon--primary {
  background: rgb(from var(--color-primary-500) r g b / 0.12);
  color: var(--color-primary-700);
}

html.dark .av-property-form__title-icon--primary {
  background: rgb(from var(--color-primary-400) r g b / 0.18);
  color: var(--color-primary-300);
}

.av-property-form__title-icon .mud-icon-root {
  width: 20px;
  height: 20px;
}

.av-property-form__title-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.av-property-form__title-heading {
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-gray-900);
}

html.dark .av-property-form__title-heading {
  color: var(--color-dark-50);
}

.av-property-form__title-hint {
  color: var(--color-gray-500);
  line-height: 1.3;
}

html.dark .av-property-form__title-hint {
  color: var(--color-dark-300);
}

.av-property-form__body {
  padding: 20px 22px;
  min-width: 500px;
}

/* ── SECTIONS + EYEBROW PILL ────────────────────────────────────── */

.av-property-form__section {
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
}

html.dark .av-property-form__section {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

.av-property-form__section-eyebrow {
  display: inline-flex;
  align-self: flex-start;
  width: fit-content;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 4px 12px 4px 8px;
  border-radius: 9999px;
  background: rgb(from var(--color-primary-500) r g b / 0.08);
  line-height: 1;
}

html.dark .av-property-form__section-eyebrow {
  background: rgb(from var(--color-primary-400) r g b / 0.14);
}

.av-property-form__section-eyebrow-icon {
  width: 14px;
  height: 14px;
  color: var(--color-primary-600);
  flex-shrink: 0;
}

html.dark .av-property-form__section-eyebrow-icon {
  color: var(--color-primary-300);
}

.av-property-form__section-eyebrow .av-property-form__section-eyebrow-text {
  color: var(--color-primary-700);
  letter-spacing: 0.06em;
  font-weight: 600;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

html.dark
  .av-property-form__section-eyebrow
  .av-property-form__section-eyebrow-text {
  color: var(--color-primary-300);
}

/* ── YES/NO ROW + CHIPS ─────────────────────────────────────────── */

.av-property-form__yes-no-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
}

html.dark .av-property-form__yes-no-row {
  background: var(--color-dark-750);
}

.av-property-form__chips {
  flex-shrink: 0;
}

.av-property-form__chips .mud-chip {
  min-width: 52px;
  justify-content: center;
  font-weight: 500;
}

/* ── ESCROW SWITCH ROW ──────────────────────────────────────────── */

.av-property-form__escrow-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: var(--color-gray-50);
}

html.dark .av-property-form__escrow-row {
  background: var(--color-dark-750);
}

/* ── ADDRESS FIELD (cursor pointer) ─────────────────────────────── */

.av-property-form__address-field {
  cursor: pointer;
}

.av-property-form__address-field .mud-input-slot {
  cursor: pointer !important;
}

/* ── EXPENSES LIST ──────────────────────────────────────────────── */

.av-property-form__expenses-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.av-property-form__expense-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-150);
}

html.dark .av-property-form__expense-item {
  background: var(--color-dark-600);
  border-color: var(--color-dark-500);
}

.av-property-form__expense-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: rgb(from var(--color-success) r g b / 0.06);
  border-left: 2px solid var(--color-success);
}

html.dark .av-property-form__expense-total {
  background: rgb(from var(--color-success-lighter) r g b / 0.1);
  border-left-color: var(--color-success-light);
}

.av-property-form__add-expense-btn.mud-button-root {
  align-self: flex-start;
  height: 30px;
  padding: 0 14px !important;
  border-radius: 9999px !important;
  border: 1px dashed var(--color-primary-400) !important;
  background: transparent !important;
  color: var(--color-primary-700) !important;
  font-weight: 500;
  font-size: 12px;
  text-transform: none;
  box-shadow: none !important;
}

.av-property-form__add-expense-btn.mud-button-root:hover {
  background: rgb(from var(--color-primary-500) r g b / 0.06) !important;
  border-style: solid !important;
}

html.dark .av-property-form__add-expense-btn.mud-button-root {
  border-color: var(--color-primary-500) !important;
  color: var(--color-primary-300) !important;
}

html.dark .av-property-form__add-expense-btn.mud-button-root:hover {
  background: rgb(from var(--color-primary-400) r g b / 0.12) !important;
}

.av-property-form__add-expense-btn .mud-button-icon-start .mud-icon-root {
  width: 14px;
  height: 14px;
}

/* ── FOOTER ACTIONS ─────────────────────────────────────────────── */

.av-property-form .mud-dialog-actions {
  padding: 12px 22px !important;
  border-top: 1px solid var(--color-gray-150);
  background: var(--color-gray-50);
}

html.dark .av-property-form .mud-dialog-actions {
  border-top-color: var(--color-dark-500);
  background: var(--color-dark-750);
}

.av-property-form__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  width: 100%;
}

.av-property-form__btn-cancel.mud-button-root,
.av-property-form__btn-confirm.mud-button-root {
  height: 36px;
  padding: 0 18px !important;
  border-radius: 9999px !important;
  text-transform: none;
  font-weight: 500;
  box-shadow: none !important;
  min-width: 0;
}

.av-property-form__btn-cancel.mud-button-root {
  background: transparent !important;
  border: 1px solid var(--color-gray-300) !important;
  color: var(--color-gray-700) !important;
}

.av-property-form__btn-cancel.mud-button-root:hover {
  background: var(--color-gray-100) !important;
  border-color: var(--color-gray-400) !important;
}

html.dark .av-property-form__btn-cancel.mud-button-root {
  border-color: var(--color-dark-400) !important;
  color: var(--color-dark-100) !important;
}

html.dark .av-property-form__btn-cancel.mud-button-root:hover {
  background: var(--color-dark-600) !important;
  border-color: var(--color-dark-300) !important;
}

.av-property-form__btn-confirm.mud-button-root {
  background: var(--color-primary-600) !important;
  border: 1px solid var(--color-primary-600) !important;
  color: var(--color-white) !important;
}

.av-property-form__btn-confirm.mud-button-root:hover {
  background: var(--color-primary-700) !important;
  border-color: var(--color-primary-700) !important;
}

.av-property-form__btn-confirm.mud-button-root:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

html.dark .av-property-form__btn-confirm.mud-button-root {
  background: var(--color-primary-500) !important;
  border-color: var(--color-primary-500) !important;
}

html.dark .av-property-form__btn-confirm.mud-button-root:hover {
  background: var(--color-primary-400) !important;
  border-color: var(--color-primary-400) !important;
}

.av-property-form__btn-confirm .mud-button-icon-start .mud-icon-root {
  width: 16px;
  height: 16px;
}

@media (max-width: 599.98px) {
  .av-property-form__body {
    min-width: unset;
    padding: 16px;
  }

  .av-property-form__yes-no-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .av-property-form__chips {
    align-self: center;
  }
}

/* ───────────────────────────────────────────────────────────────────
   BI Military Service — Question + Service Status options + Expiration
   Token-driven, light + dark, scope `.av-bi-military`.
   ─────────────────────────────────────────────────────────────────── */

.av-bi-military {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Header ─────────────────────────────────────────────────────── */

.av-bi-military__header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 4px;
}

.av-bi-military__title {
  font-weight: 600;
  color: var(--color-gray-900);
  line-height: 1.2;
}

html.dark .av-bi-military__title {
  color: var(--color-dark-50);
}

.av-bi-military__subtitle {
  color: var(--color-gray-500);
  line-height: 1.5;
}

html.dark .av-bi-military__subtitle {
  color: var(--color-dark-300);
}

/* ── Question Card (Currently serving?) ─────────────────────────── */

.av-bi-military__question {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--radius-lg);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-150);
}

html.dark .av-bi-military__question {
  background: var(--color-dark-750);
  border-color: var(--color-dark-500);
}

.av-bi-military__question-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgb(from var(--color-primary-500) r g b / 0.1);
  color: var(--color-primary-700);
}

html.dark .av-bi-military__question-icon {
  background: rgb(from var(--color-primary-400) r g b / 0.16);
  color: var(--color-primary-300);
}

.av-bi-military__question-icon .mud-icon-root {
  width: 18px;
  height: 18px;
}

.av-bi-military__question-label {
  flex: 1;
  min-width: 0;
  font-weight: 500;
  color: var(--color-gray-900);
}

html.dark .av-bi-military__question-label {
  color: var(--color-dark-50);
}

.av-bi-military__chips {
  flex-shrink: 0;
}

.av-bi-military__chips .mud-chip {
  min-width: 52px;
  justify-content: center;
  font-weight: 500;
}

/* ── Section + Eyebrow Pill ─────────────────────────────────────── */

.av-bi-military__section {
  display: flex;
  flex-direction: column;
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
}

html.dark .av-bi-military__section {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

.av-bi-military__section-eyebrow {
  display: inline-flex;
  align-self: flex-start;
  width: fit-content;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 4px 12px 4px 8px;
  border-radius: 9999px;
  background: rgb(from var(--color-primary-500) r g b / 0.08);
  line-height: 1;
}

html.dark .av-bi-military__section-eyebrow {
  background: rgb(from var(--color-primary-400) r g b / 0.14);
}

.av-bi-military__section-eyebrow-icon {
  width: 14px;
  height: 14px;
  color: var(--color-primary-600);
  flex-shrink: 0;
}

html.dark .av-bi-military__section-eyebrow-icon {
  color: var(--color-primary-300);
}

.av-bi-military__section-eyebrow .av-bi-military__section-eyebrow-text {
  color: var(--color-primary-700);
  letter-spacing: 0.06em;
  font-weight: 600;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

html.dark
  .av-bi-military__section-eyebrow
  .av-bi-military__section-eyebrow-text {
  color: var(--color-primary-300);
}

/* ── Hint Row ──────────────────────────────────────────────────── */

.av-bi-military__hint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: rgb(from var(--color-info) r g b / 0.06);
  color: var(--color-gray-700);
}

html.dark .av-bi-military__hint {
  background: rgb(from var(--color-info-lighter) r g b / 0.1);
  color: var(--color-dark-100);
}

.av-bi-military__hint-icon {
  width: 16px;
  height: 16px;
  color: var(--color-info);
  flex-shrink: 0;
}

html.dark .av-bi-military__hint-icon {
  color: var(--color-info-lighter);
}

/* ── Option Grid + Option Card ─────────────────────────────────── */

.av-bi-military__options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.av-bi-military__option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  transition:
    border-color 0.18s ease,
    background-color 0.18s ease,
    box-shadow 0.18s ease;
}

html.dark .av-bi-military__option {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

.av-bi-military__option--clickable {
  cursor: pointer;
}

.av-bi-military__option--clickable:hover {
  border-color: var(--color-primary-400);
  background: rgb(from var(--color-primary-500) r g b / 0.04);
}

html.dark .av-bi-military__option--clickable:hover {
  border-color: var(--color-primary-500);
  background: rgb(from var(--color-primary-400) r g b / 0.1);
}

.av-bi-military__option--selected {
  border-color: var(--color-primary-500) !important;
  background: rgb(from var(--color-primary-500) r g b / 0.06) !important;
  box-shadow: 0 0 0 1px var(--color-primary-500);
}

html.dark .av-bi-military__option--selected {
  border-color: var(--color-primary-400) !important;
  background: rgb(from var(--color-primary-400) r g b / 0.12) !important;
  box-shadow: 0 0 0 1px var(--color-primary-400);
}

.av-bi-military__option-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--color-gray-100);
  color: var(--color-gray-600);
  transition:
    background-color 0.18s ease,
    color 0.18s ease;
}

html.dark .av-bi-military__option-icon {
  background: var(--color-dark-600);
  color: var(--color-dark-200);
}

.av-bi-military__option-icon .mud-icon-root {
  width: 18px;
  height: 18px;
}

.av-bi-military__option-icon--active {
  background: rgb(from var(--color-primary-500) r g b / 0.14) !important;
  color: var(--color-primary-700) !important;
}

html.dark .av-bi-military__option-icon--active {
  background: rgb(from var(--color-primary-400) r g b / 0.2) !important;
  color: var(--color-primary-300) !important;
}

.av-bi-military__option-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.av-bi-military__option-title {
  font-weight: 500;
  color: var(--color-gray-900);
  line-height: 1.25;
}

html.dark .av-bi-military__option-title {
  color: var(--color-dark-50);
}

.av-bi-military__option-subtitle {
  color: var(--color-gray-500);
  line-height: 1.3;
}

html.dark .av-bi-military__option-subtitle {
  color: var(--color-dark-300);
}

.av-bi-military__option-check {
  width: 20px;
  height: 20px;
  color: var(--color-primary-600);
  flex-shrink: 0;
}

html.dark .av-bi-military__option-check {
  color: var(--color-primary-300);
}

/* ── Summary card ──────────────────────────────────────────────── */

.av-bi-military__summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: rgb(from var(--color-success) r g b / 0.06);
  border-left: 3px solid var(--color-success);
  color: var(--color-gray-800);
}

html.dark .av-bi-military__summary {
  background: rgb(from var(--color-success-lighter) r g b / 0.1);
  border-left-color: var(--color-success-light);
  color: var(--color-dark-100);
}

.av-bi-military__summary-icon {
  width: 18px;
  height: 18px;
  color: var(--color-success);
  flex-shrink: 0;
}

html.dark .av-bi-military__summary-icon {
  color: var(--color-success-lighter);
}

/* ── Responsive ────────────────────────────────────────────────── */

@media (max-width: 599.98px) {
  .av-bi-military__question {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .av-bi-military__chips {
    align-self: center;
  }

  .av-bi-military__options {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .av-bi-military__option {
    transition: none;
  }

  .av-bi-military__option-icon {
    transition: none;
  }
}

/* ───────────────────────────────────────────────────────────────────
   BI Declarations — Two sections A & B with yes/no questions + bankruptcy
   Token-driven, light + dark, scope `.av-bi-declarations`.
   ─────────────────────────────────────────────────────────────────── */

.av-bi-declarations {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

@media (max-width: 900px) {
  .av-comm__cols {
    flex-direction: column;
  }
}

/* Card */
.av-comm-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  box-shadow: var(
    --shadow-sm,
    0 1px 2px rgb(from var(--color-gray-900) r g b / 0.04)
  );
  overflow: hidden;
}

html.dark .av-comm-card {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

/* ── Header ─────────────────────────────────────────────────────── */

.av-bi-declarations__header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 4px;
}

.av-bi-declarations__title {
  font-weight: 600;
  color: var(--color-gray-900);
  line-height: 1.2;
}

html.dark .av-bi-declarations__title {
  color: var(--color-dark-50);
}

.av-bi-declarations__subtitle {
  color: var(--color-gray-500);
  line-height: 1.5;
}

html.dark .av-bi-declarations__subtitle {
  color: var(--color-dark-300);
}

/* ── Section card ──────────────────────────────────────────────── */

.av-bi-declarations__section {
  display: flex;
  flex-direction: column;
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  overflow: hidden;
}

html.dark .av-bi-declarations__section {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

.av-comm-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-gray-100);
}

html.dark .av-comm-card__head {
  border-bottom-color: var(--color-dark-600);
}

/* Clickable card header used as a collapsible toggle (e.g. Connected partners). */
.av-comm-card__head--toggle {
  cursor: pointer;
  user-select: none;
}

.av-comm-card__title {
  color: var(--color-gray-900);
}

html.dark .av-comm-card__title {
  color: var(--color-dark-50);
}

.av-comm-card__body {
  padding: 16px 20px;
}

.av-comm-card__body--fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Section eyebrow (letter + title) ──────────────────────────── */

.av-bi-declarations__section-eyebrow {
  display: inline-flex;
  align-self: flex-start;
  width: fit-content;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 4px 14px 4px 4px;
  border-radius: 9999px;
  background: rgb(from var(--color-primary-500) r g b / 0.08);
  line-height: 1;
}

html.dark .av-bi-declarations__section-eyebrow {
  background: rgb(from var(--color-primary-400) r g b / 0.14);
}

.av-bi-declarations__section-eyebrow--b {
  background: rgb(
    from var(--color-secondary, var(--color-primary-500)) r g b / 0.08
  );
}

html.dark .av-bi-declarations__section-eyebrow--b {
  background: rgb(
    from var(--color-secondary, var(--color-primary-400)) r g b / 0.14
  );
}

.av-bi-declarations__section-letter {
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  background: var(--color-primary-600);
  color: var(--color-white);
  flex-shrink: 0;
}

html.dark .av-bi-declarations__section-letter {
  background: var(--color-primary-500);
}

.av-bi-declarations__section-letter--b {
  background: var(--color-secondary, var(--color-primary-600));
}

html.dark .av-bi-declarations__section-letter--b {
  background: var(--color-secondary, var(--color-primary-500));
}

.av-bi-declarations__section-eyebrow .av-bi-declarations__section-eyebrow-text {
  color: var(--color-primary-700);
  letter-spacing: 0.06em;
  font-weight: 600;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

html.dark
  .av-bi-declarations__section-eyebrow
  .av-bi-declarations__section-eyebrow-text {
  color: var(--color-primary-300);
}

.av-bi-declarations__section-eyebrow-text--b {
  color: var(--color-secondary, var(--color-primary-700)) !important;
}

html.dark .av-bi-declarations__section-eyebrow-text--b {
  color: var(--color-secondary, var(--color-primary-300)) !important;
}

/* ── Questions list ─────────────────────────────────────────────── */

.av-bi-declarations__questions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.av-bi-declarations__question {
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-150);
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease;
}

html.dark .av-bi-declarations__question {
  background: var(--color-dark-750);
  border-color: var(--color-dark-500);
}

.av-bi-declarations__question--last {
  /* No special treatment — each question is its own card now */
}

.av-bi-declarations__question--nested {
  margin-left: 16px;
  background: rgb(from var(--color-primary-500) r g b / 0.04);
  border-color: rgb(from var(--color-primary-500) r g b / 0.25);
  border-left: 3px solid var(--color-primary-500);
}

html.dark .av-bi-declarations__question--nested {
  background: rgb(from var(--color-primary-400) r g b / 0.1);
  border-color: rgb(from var(--color-primary-400) r g b / 0.3);
  border-left-color: var(--color-primary-400);
}

html.dark .av-bi-declarations__question--nested {
  background: rgb(from var(--color-primary-400) r g b / 0.08);
  border-left-color: var(--color-primary-400);
}

.av-bi-declarations__question--error {
  background: rgb(from var(--color-error) r g b / 0.04);
  border-radius: var(--radius-md);
  padding-left: 12px;
  padding-right: 12px;
  border-bottom-color: var(--color-error-lighter);
}

html.dark .av-bi-declarations__question--error {
  background: rgb(from var(--color-error-lighter) r g b / 0.1);
  border-bottom-color: var(--color-error-light);
}

.av-bi-declarations__question-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.av-bi-declarations__question-text {
  flex: 1;
  line-height: 1.5;
  padding-top: 4px;
  color: var(--color-gray-800);
}

html.dark .av-bi-declarations__question-text {
  color: var(--color-dark-100);
}

.av-bi-declarations__chips {
  flex-shrink: 0;
}

.av-bi-declarations__chips .mud-chip {
  min-width: 52px;
  justify-content: center;
  font-weight: 500;
}

/* ── Follow-up explanation row ─────────────────────────────────── */

.av-bi-declarations__follow-up {
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--color-gray-50);
}

html.dark .av-bi-declarations__follow-up {
  background: var(--color-dark-750);
}

/* ── Bankruptcy chapters ───────────────────────────────────────── */

.av-bi-declarations__bankruptcy-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  border-radius: var(--radius-md);
  background: rgb(from var(--color-info) r g b / 0.06);
  color: var(--color-gray-700);
}

html.dark .av-bi-declarations__bankruptcy-hint {
  background: rgb(from var(--color-info-lighter) r g b / 0.1);
  color: var(--color-dark-100);
}

.av-bi-declarations__bankruptcy-hint-icon {
  width: 16px;
  height: 16px;
  color: var(--color-info);
  flex-shrink: 0;
}

html.dark .av-bi-declarations__bankruptcy-hint-icon {
  color: var(--color-info-lighter);
}

.av-bi-declarations__bankruptcy-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.av-bi-declarations__bankruptcy-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  transition:
    border-color 0.18s ease,
    background-color 0.18s ease;
}

html.dark .av-bi-declarations__bankruptcy-option {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

.av-bi-declarations__bankruptcy-option--clickable {
  cursor: pointer;
}

.av-bi-declarations__bankruptcy-option--clickable:hover {
  border-color: var(--color-primary-400);
  background: rgb(from var(--color-primary-500) r g b / 0.04);
}

html.dark .av-bi-declarations__bankruptcy-option--clickable:hover {
  border-color: var(--color-primary-500);
  background: rgb(from var(--color-primary-400) r g b / 0.1);
}

.av-bi-declarations__bankruptcy-option--selected {
  border-color: var(--color-primary-500) !important;
  background: rgb(from var(--color-primary-500) r g b / 0.06) !important;
  box-shadow: 0 0 0 1px var(--color-primary-500);
}

html.dark .av-bi-declarations__bankruptcy-option--selected {
  border-color: var(--color-primary-400) !important;
  background: rgb(from var(--color-primary-400) r g b / 0.12) !important;
  box-shadow: 0 0 0 1px var(--color-primary-400);
}

.av-bi-declarations__bankruptcy-option-text {
  font-weight: 500;
  color: var(--color-gray-900);
}

html.dark .av-bi-declarations__bankruptcy-option-text {
  color: var(--color-dark-50);
}

.av-bi-declarations__bankruptcy-option-check {
  width: 18px;
  height: 18px;
  color: var(--color-primary-600);
  flex-shrink: 0;
}

html.dark .av-bi-declarations__bankruptcy-option-check {
  color: var(--color-primary-300);
}

/* ── Responsive ────────────────────────────────────────────────── */

@media (max-width: 599.98px) {
  .av-bi-declarations__question-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .av-bi-declarations__chips {
    align-self: flex-end;
  }

  .av-bi-declarations__question--nested {
    padding-left: 12px;
  }

  .av-bi-declarations__bankruptcy-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .av-bi-declarations__question,
  .av-bi-declarations__bankruptcy-option {
    transition: none;
  }
}

/* ───────────────────────────────────────────────────────────────────
   BI Demographic — Ethnicity / Race / Sex selectors with sub-options
   Token-driven, light + dark, scope `.av-bi-demographic`.
   ─────────────────────────────────────────────────────────────────── */

.av-bi-demographic {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Header ─────────────────────────────────────────────────────── */

.av-bi-demographic__header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 4px;
}

.av-bi-demographic__title {
  font-weight: 600;
  color: var(--color-gray-900);
  line-height: 1.2;
}

html.dark .av-bi-demographic__title {
  color: var(--color-dark-50);
}

.av-bi-demographic__subtitle {
  color: var(--color-gray-500);
  line-height: 1.5;
}

html.dark .av-bi-demographic__subtitle {
  color: var(--color-dark-300);
}

/* ── Hint banner ───────────────────────────────────────────────── */

.av-bi-demographic__hint {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: rgb(from var(--color-info) r g b / 0.06);
  color: var(--color-gray-700);
}

html.dark .av-bi-demographic__hint {
  background: rgb(from var(--color-info-lighter) r g b / 0.1);
  color: var(--color-dark-100);
}

.av-bi-demographic__hint-icon {
  width: 16px;
  height: 16px;
  color: var(--color-info);
  flex-shrink: 0;
}

html.dark .av-bi-demographic__hint-icon {
  color: var(--color-info-lighter);
}

/* ── Section card ──────────────────────────────────────────────── */

.av-bi-demographic__section {
  display: flex;
  flex-direction: column;
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  height: 100%;
}

html.dark .av-bi-demographic__section {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

.av-bi-demographic__section--error {
  border-color: var(--color-error) !important;
  background: rgb(from var(--color-error) r g b / 0.03);
}

html.dark .av-bi-demographic__section--error {
  border-color: var(--color-error-lighter) !important;
  background: rgb(from var(--color-error-lighter) r g b / 0.08);
}

/* ── Eyebrow pill ──────────────────────────────────────────────── */

.av-bi-demographic__section-eyebrow {
  display: inline-flex;
  align-self: flex-start;
  width: fit-content;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 4px 12px 4px 8px;
  border-radius: 9999px;
  background: rgb(from var(--color-primary-500) r g b / 0.08);
  line-height: 1;
}

html.dark .av-bi-demographic__section-eyebrow {
  background: rgb(from var(--color-primary-400) r g b / 0.14);
}

.av-bi-demographic__section-eyebrow-icon {
  width: 14px;
  height: 14px;
  color: var(--color-primary-600);
  flex-shrink: 0;
}

html.dark .av-bi-demographic__section-eyebrow-icon {
  color: var(--color-primary-300);
}

.av-bi-demographic__section-eyebrow .av-bi-demographic__section-eyebrow-text {
  color: var(--color-primary-700);
  letter-spacing: 0.06em;
  font-weight: 600;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

html.dark
  .av-bi-demographic__section-eyebrow
  .av-bi-demographic__section-eyebrow-text {
  color: var(--color-primary-300);
}

/* ── Options list ──────────────────────────────────────────────── */

.av-bi-demographic__options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.av-bi-demographic__options--row {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}

.av-bi-demographic__options--row .av-bi-demographic__option {
  flex: 1 1 0;
  min-width: 160px;
}

.av-bi-demographic__options--scroll {
  max-height: 420px;
  overflow-y: auto;
  padding-right: 4px;
}

.av-bi-demographic__section-hint {
  color: var(--color-gray-500);
  margin-top: -8px;
  margin-bottom: 12px;
  line-height: 1.3;
}

html.dark .av-bi-demographic__section-hint {
  color: var(--color-dark-300);
}

.av-bi-demographic__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  transition:
    border-color 0.18s ease,
    background-color 0.18s ease;
}

html.dark .av-bi-demographic__option {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

.av-bi-demographic__option--clickable {
  cursor: pointer;
}

.av-bi-demographic__option--clickable:hover {
  border-color: var(--color-primary-400);
  background: rgb(from var(--color-primary-500) r g b / 0.04);
}

html.dark .av-bi-demographic__option--clickable:hover {
  border-color: var(--color-primary-500);
  background: rgb(from var(--color-primary-400) r g b / 0.1);
}

.av-bi-demographic__option--selected {
  border-color: var(--color-primary-500) !important;
  background: rgb(from var(--color-primary-500) r g b / 0.06) !important;
  box-shadow: 0 0 0 1px var(--color-primary-500);
}

html.dark .av-bi-demographic__option--selected {
  border-color: var(--color-primary-400) !important;
  background: rgb(from var(--color-primary-400) r g b / 0.12) !important;
  box-shadow: 0 0 0 1px var(--color-primary-400);
}

.av-bi-demographic__option-check {
  width: 18px;
  height: 18px;
  color: var(--color-primary-600);
  flex-shrink: 0;
}

html.dark .av-bi-demographic__option-check {
  color: var(--color-primary-300);
}

/* ── Sub-options ───────────────────────────────────────────────── */

.av-bi-demographic__sub-options {
  padding: 8px 0 8px 14px;
  margin-left: 8px;
  border-left: 2px solid var(--color-primary-400);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

html.dark .av-bi-demographic__sub-options {
  border-left-color: var(--color-primary-500);
}

.av-bi-demographic__sub-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}

html.dark .av-bi-demographic__sub-option {
  background: var(--color-dark-750);
  border-color: var(--color-dark-500);
}

.av-bi-demographic__sub-option:hover {
  border-color: var(--color-primary-400);
}

.av-bi-demographic__sub-option--selected {
  border-color: var(--color-primary-500) !important;
  background: rgb(from var(--color-primary-500) r g b / 0.04) !important;
}

html.dark .av-bi-demographic__sub-option--selected {
  border-color: var(--color-primary-400) !important;
  background: rgb(from var(--color-primary-400) r g b / 0.1) !important;
}

.av-bi-demographic__sub-option-check {
  width: 14px;
  height: 14px;
  color: var(--color-primary-600);
  flex-shrink: 0;
}

html.dark .av-bi-demographic__sub-option-check {
  color: var(--color-primary-300);
}

.av-bi-demographic__other-input {
  margin-top: 4px;
}

/* ── Responsive ────────────────────────────────────────────────── */

@media (max-width: 599.98px) {
  .av-bi-demographic__section {
    padding: 14px 16px;
  }

  .av-bi-demographic__option {
    padding: 8px 12px;
  }

  .av-bi-demographic__options--scroll {
    max-height: 360px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .av-bi-demographic__option,
  .av-bi-demographic__sub-option {
    transition: none;
  }
}

/* ───────────────────────────────────────────────────────────────────
   BI Additional Questions — Language / IRS / Referral Source
   Token-driven, light + dark, scope `.av-bi-additional`.
   ─────────────────────────────────────────────────────────────────── */

.av-bi-additional {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Header ─────────────────────────────────────────────────────── */

.av-bi-additional__header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 4px;
}

.av-bi-additional__title {
  font-weight: 600;
  color: var(--color-gray-900);
  line-height: 1.2;
}

html.dark .av-bi-additional__title {
  color: var(--color-dark-50);
}

.av-bi-additional__subtitle {
  color: var(--color-gray-500);
  line-height: 1.5;
}

html.dark .av-bi-additional__subtitle {
  color: var(--color-dark-300);
}

/* ── Section card ──────────────────────────────────────────────── */

.av-bi-additional__section {
  display: flex;
  flex-direction: column;
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
}

html.dark .av-bi-additional__section {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

/* ── Eyebrow pill ──────────────────────────────────────────────── */

.av-bi-additional__section-eyebrow {
  display: inline-flex;
  align-self: flex-start;
  width: fit-content;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 4px 12px 4px 8px;
  border-radius: 9999px;
  background: rgb(from var(--color-primary-500) r g b / 0.08);
  line-height: 1;
}

html.dark .av-bi-additional__section-eyebrow {
  background: rgb(from var(--color-primary-400) r g b / 0.14);
}

.av-bi-additional__section-eyebrow-icon {
  width: 14px;
  height: 14px;
  color: var(--color-primary-600);
  flex-shrink: 0;
}

html.dark .av-bi-additional__section-eyebrow-icon {
  color: var(--color-primary-300);
}

.av-bi-additional__section-eyebrow .av-bi-additional__section-eyebrow-text {
  color: var(--color-primary-700);
  letter-spacing: 0.06em;
  font-weight: 600;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

html.dark
  .av-bi-additional__section-eyebrow
  .av-bi-additional__section-eyebrow-text {
  color: var(--color-primary-300);
}

/* ── IRS Question (similar al de Military) ─────────────────────── */

.av-bi-additional__question {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--radius-lg);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-150);
}

html.dark .av-bi-additional__question {
  background: var(--color-dark-750);
  border-color: var(--color-dark-500);
}

.av-bi-additional__question-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgb(from var(--color-primary-500) r g b / 0.1);
  color: var(--color-primary-700);
}

html.dark .av-bi-additional__question-icon {
  background: rgb(from var(--color-primary-400) r g b / 0.16);
  color: var(--color-primary-300);
}

.av-bi-additional__question-icon .mud-icon-root {
  width: 18px;
  height: 18px;
}

.av-bi-additional__question-label {
  flex: 1;
  min-width: 0;
  font-weight: 500;
  color: var(--color-gray-900);
}

html.dark .av-bi-additional__question-label {
  color: var(--color-dark-50);
}

.av-bi-additional__chips {
  flex-shrink: 0;
}

.av-bi-additional__chips .mud-chip {
  min-width: 52px;
  justify-content: center;
  font-weight: 500;
}

/* ── Hint text under eyebrow ───────────────────────────────────── */

.av-bi-additional__hint-text {
  margin-bottom: 12px;
}

/* ── Referral options column ───────────────────────────────────── */

.av-bi-additional__referral-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.av-bi-additional__referral-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  transition:
    border-color 0.18s ease,
    background-color 0.18s ease;
}

html.dark .av-bi-additional__referral-option {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

.av-bi-additional__referral-option--clickable {
  cursor: pointer;
}

.av-bi-additional__referral-option--clickable:hover {
  border-color: var(--color-primary-400);
  background: rgb(from var(--color-primary-500) r g b / 0.04);
}

html.dark .av-bi-additional__referral-option--clickable:hover {
  border-color: var(--color-primary-500);
  background: rgb(from var(--color-primary-400) r g b / 0.1);
}

.av-bi-additional__referral-option--selected {
  border-color: var(--color-primary-500) !important;
  background: rgb(from var(--color-primary-500) r g b / 0.06) !important;
  box-shadow: 0 0 0 1px var(--color-primary-500);
}

html.dark .av-bi-additional__referral-option--selected {
  border-color: var(--color-primary-400) !important;
  background: rgb(from var(--color-primary-400) r g b / 0.12) !important;
  box-shadow: 0 0 0 1px var(--color-primary-400);
}

.av-bi-additional__referral-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--color-gray-100);
  color: var(--color-gray-600);
  transition:
    background-color 0.18s ease,
    color 0.18s ease;
}

html.dark .av-bi-additional__referral-icon {
  background: var(--color-dark-600);
  color: var(--color-dark-200);
}

.av-bi-additional__referral-icon .mud-icon-root {
  width: 16px;
  height: 16px;
}

.av-bi-additional__referral-icon--active {
  background: rgb(from var(--color-primary-500) r g b / 0.14) !important;
  color: var(--color-primary-700) !important;
}

html.dark .av-bi-additional__referral-icon--active {
  background: rgb(from var(--color-primary-400) r g b / 0.2) !important;
  color: var(--color-primary-300) !important;
}

.av-bi-additional__referral-label {
  flex: 1;
  min-width: 0;
}

.av-bi-additional__referral-check {
  width: 18px;
  height: 18px;
  color: var(--color-primary-600);
  flex-shrink: 0;
}

html.dark .av-bi-additional__referral-check {
  color: var(--color-primary-300);
}

/* ── Referral details panel ────────────────────────────────────── */

.av-bi-additional__referral-details {
  display: flex;
  flex-direction: column;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-left: 3px solid var(--color-primary-500);
  min-height: 200px;
}

html.dark .av-bi-additional__referral-details {
  background: var(--color-dark-750);
  border-color: var(--color-dark-500);
  border-left-color: var(--color-primary-400);
}

.av-bi-additional__detail-eyebrow {
  display: inline-flex;
  align-self: flex-start;
  width: fit-content;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 4px 12px 4px 8px;
  border-radius: 9999px;
  background: rgb(from var(--color-primary-500) r g b / 0.08);
  line-height: 1;
}

html.dark .av-bi-additional__detail-eyebrow {
  background: rgb(from var(--color-primary-400) r g b / 0.14);
}

.av-bi-additional__detail-eyebrow-icon {
  width: 14px;
  height: 14px;
  color: var(--color-primary-600);
  flex-shrink: 0;
}

html.dark .av-bi-additional__detail-eyebrow-icon {
  color: var(--color-primary-300);
}

.av-bi-additional__detail-eyebrow .av-bi-additional__detail-eyebrow-text {
  color: var(--color-primary-700);
  letter-spacing: 0.06em;
  font-weight: 600;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

html.dark
  .av-bi-additional__detail-eyebrow
  .av-bi-additional__detail-eyebrow-text {
  color: var(--color-primary-300);
}

.av-bi-additional__detail-fields {
  flex: 1;
}

/* ── Social media chips ────────────────────────────────────────── */

.av-bi-additional__social-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.av-bi-additional__social-option {
  padding: 6px 12px;
  border-radius: 9999px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease,
    color 0.15s ease;
}

html.dark .av-bi-additional__social-option {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

.av-bi-additional__social-option:hover {
  border-color: var(--color-primary-400);
}

.av-bi-additional__social-option--selected {
  background: var(--color-primary-600) !important;
  border-color: var(--color-primary-600) !important;
  color: var(--color-white) !important;
}

.av-bi-additional__social-option--selected .mud-typography {
  color: var(--color-white) !important;
}

html.dark .av-bi-additional__social-option--selected {
  background: var(--color-primary-500) !important;
  border-color: var(--color-primary-500) !important;
}

/* ── Placeholder ───────────────────────────────────────────────── */

.av-bi-additional__referral-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 36px 20px;
  border-radius: var(--radius-md);
  background: var(--color-gray-50);
  border: 2px dashed var(--color-gray-200);
  min-height: 200px;
}

html.dark .av-bi-additional__referral-placeholder {
  background: var(--color-dark-750);
  border-color: var(--color-dark-500);
}

.av-bi-additional__referral-placeholder-icon {
  width: 36px;
  height: 36px;
  color: var(--color-gray-400);
}

html.dark .av-bi-additional__referral-placeholder-icon {
  color: var(--color-dark-300);
}

/* ── Responsive ────────────────────────────────────────────────── */

@media (max-width: 599.98px) {
  .av-bi-additional__question {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .av-bi-additional__chips {
    align-self: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .av-bi-additional__referral-option,
  .av-bi-additional__referral-icon,
  .av-bi-additional__social-option {
    transition: none;
  }
}

/* ───────────────────────────────────────────────────────────────────
   AB Intro — Additional Borrowers welcome (hero + info cards)
   Inspirado en av-bi-intro. Token-driven, light + dark.
   ─────────────────────────────────────────────────────────────────── */

.av-ab-intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Hero ──────────────────────────────────────────────────────── */

.av-ab-intro__hero {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  padding: 22px 28px;
  background: linear-gradient(
    135deg,
    rgb(from var(--color-primary-500) r g b / 0.08) 0%,
    rgb(from var(--color-primary-600) r g b / 0.04) 45%,
    rgb(from var(--color-info) r g b / 0.06) 100%
  );
}

html.dark .av-ab-intro__hero {
  border-color: var(--color-dark-500);
  background: linear-gradient(
    135deg,
    rgb(from var(--color-primary-400) r g b / 0.16) 0%,
    rgb(from var(--color-primary-500) r g b / 0.08) 45%,
    rgb(from var(--color-info-lighter) r g b / 0.1) 100%
  );
}

.av-ab-intro__hero-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(
    rgb(from var(--color-primary-600) r g b / 0.1) 1px,
    transparent 1px
  );
  background-size: 18px 18px;
  mask-image: linear-gradient(
    135deg,
    transparent 0%,
    rgb(0 0 0 / 0.4) 60%,
    rgb(0 0 0 / 1) 100%
  );
  -webkit-mask-image: linear-gradient(
    135deg,
    transparent 0%,
    rgb(0 0 0 / 0.4) 60%,
    rgb(0 0 0 / 1) 100%
  );
  opacity: 0.7;
}

html.dark .av-ab-intro__hero-pattern {
  background-image: radial-gradient(
    rgb(from var(--color-primary-300) r g b / 0.12) 1px,
    transparent 1px
  );
  opacity: 0.5;
}

.av-ab-intro__hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
  opacity: 0.55;
}

.av-ab-intro__hero-blob--a {
  width: 220px;
  height: 220px;
  right: -60px;
  top: -80px;
  background: radial-gradient(
    circle,
    var(--color-primary-300) 0%,
    transparent 70%
  );
}

.av-ab-intro__hero-blob--b {
  width: 180px;
  height: 180px;
  right: 30%;
  bottom: -100px;
  background: radial-gradient(
    circle,
    var(--color-info-lighter) 0%,
    transparent 70%
  );
}

html.dark .av-ab-intro__hero-blob {
  opacity: 0.3;
}

html.dark .av-ab-intro__hero-blob--a {
  background: radial-gradient(
    circle,
    var(--color-primary-500) 0%,
    transparent 70%
  );
}

html.dark .av-ab-intro__hero-blob--b {
  background: radial-gradient(
    circle,
    var(--color-info-light) 0%,
    transparent 70%
  );
}

.av-ab-intro__hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.65fr);
  align-items: center;
  gap: 28px;
}

.av-ab-intro__hero-text {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.av-ab-intro__hero-art {
  display: flex;
  justify-content: center;
  align-items: center;
}

.av-ab-intro__hero-img {
  max-height: 160px;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 24px rgb(from var(--color-gray-900) r g b / 0.1));
}

html.dark .av-ab-intro__hero-img {
  filter: drop-shadow(0 8px 24px rgb(from var(--color-black) r g b / 0.5));
}

.av-ab-intro__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
}

.av-ab-intro__badge-icon {
  width: 16px;
  height: 16px;
}

.av-ab-intro__greeting {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--color-gray-900);
}

html.dark .av-ab-intro__greeting {
  color: var(--color-dark-50);
}

.av-ab-intro__lead {
  margin: 0;
  line-height: 1.6;
  max-width: 60ch;
  color: var(--color-gray-700);
}

html.dark .av-ab-intro__lead {
  color: var(--color-dark-200);
}

/* ── Info cards ────────────────────────────────────────────────── */

.av-ab-intro__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.av-ab-intro__card {
  position: relative;
  padding: 18px 18px;
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  overflow: hidden;
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease;
}

html.dark .av-ab-intro__card {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

.av-ab-intro__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}

.av-ab-intro__card--primary::before {
  background: var(--color-primary-600);
}

.av-ab-intro__card--success::before {
  background: var(--color-success);
}

.av-ab-intro__card--info::before {
  background: var(--color-info);
}

html.dark .av-ab-intro__card--primary::before {
  background: var(--color-primary-400);
}

html.dark .av-ab-intro__card--success::before {
  background: var(--color-success-lighter);
}

html.dark .av-ab-intro__card--info::before {
  background: var(--color-info-lighter);
}

.av-ab-intro__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgb(from var(--color-gray-900) r g b / 0.08);
  border-color: var(--color-gray-300);
}

html.dark .av-ab-intro__card:hover {
  box-shadow: 0 12px 28px rgb(from var(--color-black) r g b / 0.4);
  border-color: var(--color-dark-400);
}

.av-ab-intro__card-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.av-ab-intro__card-icon .mud-icon-root {
  width: 24px;
  height: 24px;
}

.av-ab-intro__card--primary .av-ab-intro__card-icon {
  background: rgb(from var(--color-primary-500) r g b / 0.12);
  color: var(--color-primary-700);
}

.av-ab-intro__card--success .av-ab-intro__card-icon {
  background: rgb(from var(--color-success) r g b / 0.12);
  color: var(--color-success-darker);
}

.av-ab-intro__card--info .av-ab-intro__card-icon {
  background: rgb(from var(--color-info) r g b / 0.12);
  color: var(--color-info-darker);
}

html.dark .av-ab-intro__card--primary .av-ab-intro__card-icon {
  background: rgb(from var(--color-primary-400) r g b / 0.2);
  color: var(--color-primary-300);
}

html.dark .av-ab-intro__card--success .av-ab-intro__card-icon {
  background: rgb(from var(--color-success-lighter) r g b / 0.18);
  color: var(--color-success-lighter);
}

html.dark .av-ab-intro__card--info .av-ab-intro__card-icon {
  background: rgb(from var(--color-info-lighter) r g b / 0.18);
  color: var(--color-info-lighter);
}

.av-ab-intro__card-title {
  margin: 0 0 8px 0;
  font-weight: 600;
  color: var(--color-gray-900);
}

html.dark .av-ab-intro__card-title {
  color: var(--color-dark-50);
}

.av-ab-intro__card-body {
  margin: 0;
  line-height: 1.6;
  color: var(--color-gray-600);
}

html.dark .av-ab-intro__card-body {
  color: var(--color-dark-200);
}

/* ── Responsive ────────────────────────────────────────────────── */

@media (max-width: 959.98px) {
  .av-ab-intro__hero {
    padding: 24px 24px;
  }

  .av-ab-intro__hero-grid {
    grid-template-columns: 1fr;
  }

  .av-ab-intro__cards {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .av-ab-intro__card {
    transition: none;
  }

  .av-ab-intro__card:hover {
    transform: none;
  }
}

/* ───────────────────────────────────────────────────────────────────
   LD Intro — Loan Details / Goals welcome + purpose cards
   Inspirado en av-bi-intro. Token-driven, light + dark.
   ─────────────────────────────────────────────────────────────────── */

.av-ld-intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Hero ──────────────────────────────────────────────────────── */

.av-ld-intro__hero {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  padding: 22px 28px;
  background: linear-gradient(
    135deg,
    rgb(from var(--color-primary-500) r g b / 0.08) 0%,
    rgb(from var(--color-primary-600) r g b / 0.04) 45%,
    rgb(from var(--color-warning) r g b / 0.06) 100%
  );
}

html.dark .av-ld-intro__hero {
  border-color: var(--color-dark-500);
  background: linear-gradient(
    135deg,
    rgb(from var(--color-primary-400) r g b / 0.16) 0%,
    rgb(from var(--color-primary-500) r g b / 0.08) 45%,
    rgb(from var(--color-warning-lighter) r g b / 0.1) 100%
  );
}

.av-ld-intro__hero-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(
    rgb(from var(--color-primary-600) r g b / 0.1) 1px,
    transparent 1px
  );
  background-size: 18px 18px;
  mask-image: linear-gradient(
    135deg,
    transparent 0%,
    rgb(0 0 0 / 0.4) 60%,
    rgb(0 0 0 / 1) 100%
  );
  -webkit-mask-image: linear-gradient(
    135deg,
    transparent 0%,
    rgb(0 0 0 / 0.4) 60%,
    rgb(0 0 0 / 1) 100%
  );
  opacity: 0.7;
}

html.dark .av-ld-intro__hero-pattern {
  background-image: radial-gradient(
    rgb(from var(--color-primary-300) r g b / 0.12) 1px,
    transparent 1px
  );
  opacity: 0.5;
}

.av-ld-intro__hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
  opacity: 0.55;
}

.av-ld-intro__hero-blob--a {
  width: 220px;
  height: 220px;
  right: -60px;
  top: -80px;
  background: radial-gradient(
    circle,
    var(--color-primary-300) 0%,
    transparent 70%
  );
}

.av-ld-intro__hero-blob--b {
  width: 180px;
  height: 180px;
  right: 30%;
  bottom: -100px;
  background: radial-gradient(
    circle,
    var(--color-warning-lighter) 0%,
    transparent 70%
  );
}

html.dark .av-ld-intro__hero-blob {
  opacity: 0.3;
}

html.dark .av-ld-intro__hero-blob--a {
  background: radial-gradient(
    circle,
    var(--color-primary-500) 0%,
    transparent 70%
  );
}

html.dark .av-ld-intro__hero-blob--b {
  background: radial-gradient(
    circle,
    var(--color-warning-light) 0%,
    transparent 70%
  );
}

.av-ld-intro__hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.65fr);
  align-items: center;
  gap: 28px;
}

.av-ld-intro__hero-text {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.av-ld-intro__hero-art {
  display: flex;
  justify-content: center;
  align-items: center;
}

.av-ld-intro__hero-img {
  max-height: 150px;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 24px rgb(from var(--color-gray-900) r g b / 0.1));
}

html.dark .av-ld-intro__hero-img {
  filter: drop-shadow(0 8px 24px rgb(from var(--color-black) r g b / 0.5));
}

.av-ld-intro__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
}

.av-ld-intro__badge-icon {
  width: 16px;
  height: 16px;
}

.av-ld-intro__greeting {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--color-gray-900);
}

html.dark .av-ld-intro__greeting {
  color: var(--color-dark-50);
}

.av-ld-intro__lead {
  margin: 0;
  line-height: 1.6;
  max-width: 60ch;
  color: var(--color-gray-700);
}

html.dark .av-ld-intro__lead {
  color: var(--color-dark-200);
}

/* ── Purpose cards grid ────────────────────────────────────────── */

.av-ld-intro__purpose-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.av-ld-intro__purpose-card {
  position: relative;
  overflow: hidden;
  padding: 18px 18px;
  border-radius: var(--radius-xl);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease;
}

html.dark .av-ld-intro__purpose-card {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

.av-ld-intro__purpose-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-primary-400);
  box-shadow: 0 12px 28px rgb(from var(--color-gray-900) r g b / 0.1);
}

html.dark .av-ld-intro__purpose-card:hover {
  border-color: var(--color-primary-500);
  box-shadow: 0 12px 28px rgb(from var(--color-black) r g b / 0.4);
}

.av-ld-intro__purpose-card:hover .av-ld-intro__purpose-action {
  opacity: 1;
  transform: translateX(0);
}

.av-ld-intro__purpose-card--featured {
  border-color: rgb(from var(--color-primary-500) r g b / 0.35);
  background: linear-gradient(
    135deg,
    rgb(from var(--color-primary-500) r g b / 0.04) 0%,
    transparent 100%
  );
}

html.dark .av-ld-intro__purpose-card--featured {
  border-color: rgb(from var(--color-primary-400) r g b / 0.45);
  background: linear-gradient(
    135deg,
    rgb(from var(--color-primary-400) r g b / 0.1) 0%,
    transparent 100%
  );
}

.av-ld-intro__purpose-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 11px;
}

.av-ld-intro__purpose-image {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.av-ld-intro__purpose-image img {
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgb(from var(--color-gray-900) r g b / 0.06));
}

html.dark .av-ld-intro__purpose-image img {
  filter: drop-shadow(0 4px 12px rgb(from var(--color-black) r g b / 0.4));
}

.av-ld-intro__purpose-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.av-ld-intro__purpose-title {
  margin: 0;
  font-weight: 600;
  color: var(--color-gray-900);
}

html.dark .av-ld-intro__purpose-title {
  color: var(--color-dark-50);
}

.av-ld-intro__purpose-desc {
  margin: 0;
  line-height: 1.5;
  color: var(--color-gray-600);
}

html.dark .av-ld-intro__purpose-desc {
  color: var(--color-dark-200);
}

.av-ld-intro__purpose-action {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  opacity: 0;
  transform: translateX(-8px);
  transition:
    opacity 220ms ease,
    transform 220ms ease;
  color: var(--color-primary-600);
}

html.dark .av-ld-intro__purpose-action {
  color: var(--color-primary-300);
}

.av-ld-intro__purpose-action .mud-icon-root {
  width: 20px;
  height: 20px;
}

/* ── Selected state ────────────────────────────────────────────── */

.av-ld-intro__selected {
  padding: 18px 22px;
  border-radius: var(--radius-xl);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

html.dark .av-ld-intro__selected {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

.av-ld-intro__selected-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

/* ── Switch chips (replacement for the old "Or switch to" footer) ── */

.av-ld-intro__switch-chips {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.av-ld-intro__switch-label {
  color: var(--color-gray-500);
  margin-right: 4px;
}

html.dark .av-ld-intro__switch-label {
  color: var(--color-dark-300);
}

.av-ld-intro__switch-chip.mud-button-root {
  height: 26px;
  padding: 0 10px !important;
  min-width: 0;
  border-radius: 9999px !important;
  border: 1px solid var(--color-gray-300) !important;
  background: transparent !important;
  color: var(--color-gray-700) !important;
  font-weight: 500;
  font-size: 12px;
  text-transform: none;
  box-shadow: none !important;
}

.av-ld-intro__switch-chip.mud-button-root:hover {
  border-color: var(--color-primary-400) !important;
  background: rgb(from var(--color-primary-500) r g b / 0.06) !important;
  color: var(--color-primary-700) !important;
}

html.dark .av-ld-intro__switch-chip.mud-button-root {
  border-color: var(--color-dark-400) !important;
  color: var(--color-dark-100) !important;
}

html.dark .av-ld-intro__switch-chip.mud-button-root:hover {
  border-color: var(--color-primary-400) !important;
  background: rgb(from var(--color-primary-400) r g b / 0.12) !important;
  color: var(--color-primary-300) !important;
}

.av-ld-intro__switch-chip .mud-button-icon-start .mud-icon-root {
  width: 13px;
  height: 13px;
}

.av-ld-intro__switch-chip .mud-button-icon-start {
  margin-right: 4px;
}

.av-ld-intro__selected-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.av-ld-intro__selected-badge-icon {
  width: 16px;
  height: 16px;
}

.av-ld-intro__selected-alert {
  margin: 0;
}

.av-ld-intro__selected-body {
  display: flex;
  gap: 20px;
  align-items: center;
}

.av-ld-intro__selected-image {
  width: 120px;
  flex-shrink: 0;
}

.av-ld-intro__selected-image img {
  width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgb(from var(--color-gray-900) r g b / 0.08));
}

html.dark .av-ld-intro__selected-image img {
  filter: drop-shadow(0 4px 12px rgb(from var(--color-black) r g b / 0.45));
}

.av-ld-intro__selected-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.av-ld-intro__selected-title {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-gray-900);
}

html.dark .av-ld-intro__selected-title {
  color: var(--color-dark-50);
}

.av-ld-intro__selected-desc {
  margin: 0;
  line-height: 1.6;
  color: var(--color-gray-600);
}

html.dark .av-ld-intro__selected-desc {
  color: var(--color-dark-200);
}

.av-ld-intro__selected-actions {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}

/* ── Loading state ─────────────────────────────────────────────── */

.av-ld-intro__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  gap: 12px;
}

/* ── Responsive ────────────────────────────────────────────────── */

@media (max-width: 959.98px) {
  .av-ld-intro__hero {
    padding: 24px 24px;
  }

  .av-ld-intro__hero-grid {
    grid-template-columns: 1fr;
  }

  .av-ld-intro__purpose-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .av-ld-intro__purpose-grid .av-ld-intro__purpose-card:last-child {
    grid-column: span 2;
  }

  .av-ld-intro__selected-body {
    flex-direction: column;
    text-align: center;
  }

  .av-ld-intro__selected-image {
    width: 140px;
  }
}

@media (max-width: 599.98px) {
  .av-ld-intro__hero {
    padding: 20px;
  }

  .av-ld-intro__purpose-grid {
    grid-template-columns: 1fr;
  }

  .av-ld-intro__purpose-grid .av-ld-intro__purpose-card:last-child {
    grid-column: span 1;
  }

  .av-ld-intro__purpose-action {
    opacity: 1;
    transform: none;
  }

  .av-ld-intro__selected {
    padding: 18px 18px;
  }

  .av-ld-intro__selected-actions {
    flex-direction: column;
  }

  .av-ld-intro__selected-actions .mud-button-root {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .av-ld-intro__purpose-card,
  .av-ld-intro__purpose-action {
    transition: none;
  }

  .av-ld-intro__purpose-card:hover {
    transform: none;
  }
}

/* ───────────────────────────────────────────────────────────────────
   Borrower Applications List — Tailux v2
   Página /1003-form/new-borrower-application-1003-list
   Hero + KPI strip + toolbar + cards/list + summary.
   Token-driven, light + dark, scope `.av-bal`.
   ─────────────────────────────────────────────────────────────────── */

.av-bal {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── Hero ──────────────────────────────────────────────────────── */

.av-bal__hero {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  padding: 28px 32px;
  background: linear-gradient(
    135deg,
    rgb(from var(--color-primary-500) r g b / 0.08) 0%,
    rgb(from var(--color-primary-600) r g b / 0.04) 45%,
    rgb(from var(--color-info) r g b / 0.06) 100%
  );
}

html.dark .av-bal__hero {
  border-color: var(--color-dark-500);
  background: linear-gradient(
    135deg,
    rgb(from var(--color-primary-400) r g b / 0.16) 0%,
    rgb(from var(--color-primary-500) r g b / 0.08) 45%,
    rgb(from var(--color-info-lighter) r g b / 0.1) 100%
  );
}

.av-bal__hero-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(
    rgb(from var(--color-primary-600) r g b / 0.1) 1px,
    transparent 1px
  );
  background-size: 18px 18px;
  mask-image: linear-gradient(
    135deg,
    transparent 0%,
    rgb(0 0 0 / 0.4) 60%,
    rgb(0 0 0 / 1) 100%
  );
  -webkit-mask-image: linear-gradient(
    135deg,
    transparent 0%,
    rgb(0 0 0 / 0.4) 60%,
    rgb(0 0 0 / 1) 100%
  );
  opacity: 0.7;
}

html.dark .av-bal__hero-pattern {
  background-image: radial-gradient(
    rgb(from var(--color-primary-300) r g b / 0.12) 1px,
    transparent 1px
  );
  opacity: 0.5;
}

.av-bal__hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
  opacity: 0.55;
}

.av-bal__hero-blob--a {
  width: 220px;
  height: 220px;
  right: -60px;
  top: -80px;
  background: radial-gradient(
    circle,
    var(--color-primary-300) 0%,
    transparent 70%
  );
}

.av-bal__hero-blob--b {
  width: 180px;
  height: 180px;
  right: 22%;
  bottom: -100px;
  background: radial-gradient(
    circle,
    var(--color-info-lighter) 0%,
    transparent 70%
  );
}

html.dark .av-bal__hero-blob {
  opacity: 0.3;
}

html.dark .av-bal__hero-blob--a {
  background: radial-gradient(
    circle,
    var(--color-primary-500) 0%,
    transparent 70%
  );
}

html.dark .av-bal__hero-blob--b {
  background: radial-gradient(
    circle,
    var(--color-info-light) 0%,
    transparent 70%
  );
}

.av-bal__hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.av-bal__hero-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  flex: 1 1 320px;
}

.av-bal__hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
}

.av-bal__hero-badge-icon {
  width: 14px;
  height: 14px;
}

.av-bal__hero-title {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--color-gray-900);
}

html.dark .av-bal__hero-title {
  color: var(--color-dark-50);
}

.av-bal__hero-lead {
  margin: 0;
  line-height: 1.55;
  max-width: 60ch;
  color: var(--color-gray-700);
}

html.dark .av-bal__hero-lead {
  color: var(--color-dark-200);
}

.av-bal__hero-cta {
  display: flex;
  flex-shrink: 0;
}

.av-bal__cta-btn {
  height: 40px;
  padding: 0 20px !important;
  border-radius: 9999px !important;
  font-weight: 500;
}

/* ── KPI strip ─────────────────────────────────────────────────── */

.av-bal__kpis {
  display: grid;
  /* WI #1397 — 5 tarjetas desde que Draft e In Progress dejaron de ser una sola: total,
     borrador, en curso, completadas y tareas. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.av-bal__kpi {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease;
}

html.dark .av-bal__kpi {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

.av-bal__kpi:hover {
  border-color: var(--color-gray-300);
  box-shadow: 0 2px 8px rgb(from var(--color-gray-900) r g b / 0.05);
}

html.dark .av-bal__kpi:hover {
  border-color: var(--color-dark-400);
  box-shadow: 0 2px 8px rgb(from var(--color-black) r g b / 0.2);
}

.av-bal__kpi-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.av-bal__kpi-icon .mud-icon-root {
  width: 22px;
  height: 22px;
}

.av-bal__kpi-icon--primary {
  background: rgb(from var(--color-primary-500) r g b / 0.12);
  color: var(--color-primary-700);
}

.av-bal__kpi-icon--warning {
  background: rgb(from var(--color-warning) r g b / 0.12);
  color: var(--color-warning-darker);
}

.av-bal__kpi-icon--success {
  background: rgb(from var(--color-success) r g b / 0.12);
  color: var(--color-success-darker);
}

.av-bal__kpi-icon--error {
  background: rgb(from var(--color-error) r g b / 0.12);
  color: var(--color-error-darker);
}

html.dark .av-bal__kpi-icon--primary {
  background: rgb(from var(--color-primary-400) r g b / 0.2);
  color: var(--color-primary-300);
}

html.dark .av-bal__kpi-icon--warning {
  background: rgb(from var(--color-warning-lighter) r g b / 0.18);
  color: var(--color-warning-lighter);
}

html.dark .av-bal__kpi-icon--success {
  background: rgb(from var(--color-success-lighter) r g b / 0.18);
  color: var(--color-success-lighter);
}

html.dark .av-bal__kpi-icon--error {
  background: rgb(from var(--color-error-lighter) r g b / 0.18);
  color: var(--color-error-lighter);
}

.av-bal__kpi-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.av-bal__kpi-value {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--color-gray-900);
}

html.dark .av-bal__kpi-value {
  color: var(--color-dark-50);
}

.av-bal__kpi-label {
  margin: 2px 0 0 0;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

html.dark .av-bal__kpi-label {
  color: var(--color-dark-300);
}

/* ── Toolbar ──────────────────────────────────────────────────── */

.av-bal__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 18px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  align-items: center;
  justify-content: space-between;
}

html.dark .av-bal__toolbar {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

.av-bal__toolbar-left,
.av-bal__toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.av-bal__lo-select {
  min-width: 240px;
  max-width: 320px;
}

.av-bal__lo-option {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.av-bal__lo-name {
  color: var(--color-gray-900);
}

html.dark .av-bal__lo-name {
  color: var(--color-dark-50);
}

.av-bal__lo-company {
  color: var(--color-gray-500);
}

html.dark .av-bal__lo-company {
  color: var(--color-dark-300);
}

.av-bal__search {
  min-width: 240px;
  max-width: 340px;
}

.av-bal__view-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: 9999px;
  background: var(--color-gray-100);
}

html.dark .av-bal__view-toggle {
  background: var(--color-dark-600);
}

.av-bal__view-btn.mud-icon-button-root {
  border-radius: 9999px !important;
  color: var(--color-gray-500) !important;
  background: transparent !important;
}

.av-bal__view-btn.mud-icon-button-root:hover {
  color: var(--color-gray-700) !important;
  background: rgb(from var(--color-gray-500) r g b / 0.08) !important;
}

html.dark .av-bal__view-btn.mud-icon-button-root {
  color: var(--color-dark-300) !important;
}

html.dark .av-bal__view-btn.mud-icon-button-root:hover {
  color: var(--color-dark-100) !important;
  background: rgb(from var(--color-dark-300) r g b / 0.15) !important;
}

.av-bal__view-btn--active.mud-icon-button-root {
  background: var(--color-white) !important;
  color: var(--color-primary-600) !important;
  box-shadow: 0 1px 2px rgb(from var(--color-gray-900) r g b / 0.08);
}

html.dark .av-bal__view-btn--active.mud-icon-button-root {
  background: var(--color-dark-500) !important;
  color: var(--color-primary-300) !important;
  box-shadow: 0 1px 2px rgb(from var(--color-black) r g b / 0.2);
}

/* ── Grid + cards ──────────────────────────────────────────────── */

.av-bal__grid {
  margin-top: 0;
}

.av-bal-card {
  position: relative;
  overflow: hidden;
  padding: 0;
  border-radius: var(--radius-xl);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease;
}

html.dark .av-bal-card {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

.av-bal-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-gray-300);
  box-shadow: 0 12px 28px rgb(from var(--color-gray-900) r g b / 0.08);
}

html.dark .av-bal-card:hover {
  border-color: var(--color-dark-400);
  box-shadow: 0 12px 28px rgb(from var(--color-black) r g b / 0.4);
}

.av-bal-card__accent {
  height: 4px;
  flex-shrink: 0;
}

.av-bal-card--success .av-bal-card__accent {
  background: linear-gradient(
    90deg,
    var(--color-success) 0%,
    var(--color-success-lighter) 100%
  );
}

.av-bal-card--warning .av-bal-card__accent {
  background: linear-gradient(
    90deg,
    var(--color-warning) 0%,
    var(--color-warning-lighter) 100%
  );
}

.av-bal-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 18px 18px 0 18px;
}

.av-bal-card__user {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.av-bal-card__avatar {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
}

.av-bal-card__avatar--success {
  background: linear-gradient(
    135deg,
    var(--color-success) 0%,
    var(--color-success-light) 100%
  );
}

.av-bal-card__avatar--warning {
  background: linear-gradient(
    135deg,
    var(--color-warning) 0%,
    var(--color-warning-light) 100%
  );
}

.av-bal-card__user-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.av-bal-card__user-name {
  color: var(--color-gray-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  line-height: 1.3;
}

html.dark .av-bal-card__user-name {
  color: var(--color-dark-50);
}

.av-bal-card__user-company {
  color: var(--color-gray-500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.dark .av-bal-card__user-company {
  color: var(--color-dark-300);
}

.av-bal-card__menu {
  opacity: 0.6;
  transition: opacity 150ms ease;
  flex-shrink: 0;
}

.av-bal-card:hover .av-bal-card__menu {
  opacity: 1;
}

.av-bal-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 18px 0 18px;
}

.av-bal-card__tasks-badge {
  cursor: pointer;
}

/* Featured amount row */
.av-bal-card__amount-row {
  margin: 14px 18px 0 18px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: rgb(from var(--color-primary-500) r g b / 0.05);
  border-left: 3px solid var(--color-primary-500);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

html.dark .av-bal-card__amount-row {
  background: rgb(from var(--color-primary-400) r g b / 0.1);
  border-left-color: var(--color-primary-400);
}

.av-bal-card__amount-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.av-bal-card__amount-icon {
  width: 16px;
  height: 16px;
  color: var(--color-primary-600);
}

html.dark .av-bal-card__amount-icon {
  color: var(--color-primary-300);
}

.av-bal-card__amount-eyebrow {
  color: var(--color-primary-700);
  letter-spacing: 0.06em;
  font-weight: 600;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

html.dark .av-bal-card__amount-eyebrow {
  color: var(--color-primary-300);
}

.av-bal-card__amount-value {
  margin: 0;
  font-weight: 700;
  color: var(--color-gray-900);
  letter-spacing: -0.01em;
}

html.dark .av-bal-card__amount-value {
  color: var(--color-dark-50);
}

/* Consent alert */
.av-bal-card__consent-alert {
  margin: 12px 18px 0 18px;
  padding: 14px;
  border-radius: var(--radius-md);
  background: rgb(from var(--color-warning) r g b / 0.07);
  border: 1px solid rgb(from var(--color-warning) r g b / 0.2);
}

html.dark .av-bal-card__consent-alert {
  background: rgb(from var(--color-warning-lighter) r g b / 0.12);
  border-color: rgb(from var(--color-warning-lighter) r g b / 0.25);
}

.av-bal-card__consent-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.av-bal-card__consent-icon {
  width: 16px;
  height: 16px;
  color: var(--color-warning-darker);
}

html.dark .av-bal-card__consent-icon {
  color: var(--color-warning-lighter);
}

.av-bal-card__consent-title {
  color: var(--color-warning-darker);
  font-weight: 600;
}

html.dark .av-bal-card__consent-title {
  color: var(--color-warning-lighter);
}

.av-bal-card__consent-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.av-bal-card__consent-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.av-bal-card__consent-name {
  color: var(--color-gray-800);
}

html.dark .av-bal-card__consent-name {
  color: var(--color-dark-100);
}

.av-bal-card__consent-name-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* "Abrió la invitación · consentimiento pendiente" — marcador sutil ámbar */
.av-bal-card__consent-viewed {
  display: inline-flex;
  align-items: center;
  color: var(--color-warning-darker);
}

html.dark .av-bal-card__consent-viewed {
  color: var(--color-warning-lighter);
}

.av-bal-card__consent-bulk-btn {
  align-self: stretch;
  border-radius: 9999px !important;
  margin-top: 4px;
}

/* Detail list */
.av-bal-card__details {
  margin: 14px 18px 0 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.av-bal-card__detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.av-bal-card__detail {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.av-bal-card__detail--primary {
  padding: 8px 10px;
  border-radius: var(--radius-md);
  background: rgb(from var(--color-info) r g b / 0.06);
}

html.dark .av-bal-card__detail--primary {
  background: rgb(from var(--color-info-lighter) r g b / 0.1);
}

.av-bal-card__detail-icon {
  width: 16px;
  height: 16px;
  color: var(--color-gray-500);
  flex-shrink: 0;
  margin-top: 2px;
}

html.dark .av-bal-card__detail-icon {
  color: var(--color-dark-300);
}

.av-bal-card__detail-icon--primary {
  color: var(--color-info-darker);
}

html.dark .av-bal-card__detail-icon--primary {
  color: var(--color-info-lighter);
}

.av-bal-card__detail-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.av-bal-card__detail-label {
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  line-height: 1.3;
}

html.dark .av-bal-card__detail-label {
  color: var(--color-dark-300);
}

.av-bal-card__detail-value {
  color: var(--color-gray-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.4;
}

html.dark .av-bal-card__detail-value {
  color: var(--color-dark-50);
}

.av-bal-card__detail-value--multiline {
  white-space: normal;
  word-break: break-word;
}

/* Expiration */
.av-bal-card__expiration {
  margin: 12px 18px 0 18px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: rgb(from var(--color-warning) r g b / 0.06);
  color: var(--color-warning-darker);
  display: flex;
  align-items: center;
  gap: 8px;
}

html.dark .av-bal-card__expiration {
  background: rgb(from var(--color-warning-lighter) r g b / 0.1);
  color: var(--color-warning-lighter);
}

.av-bal-card__expiration-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Footer CTA */
.av-bal-card__footer {
  margin-top: auto;
  padding: 18px;
}

.av-bal-card__cta.mud-button-root {
  height: 40px;
  border-radius: 9999px !important;
  text-transform: none;
  font-weight: 500;
}

/* ── Add-new placeholder card ───────────────────────────────────── */

.av-bal-add-card {
  height: 100%;
  min-height: 320px;
  border-radius: var(--radius-xl);
  border: 2px dashed var(--color-gray-300);
  background: rgb(from var(--color-primary-500) r g b / 0.02);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 20px;
  text-align: center;
  cursor: pointer;
  transition:
    border-color 220ms ease,
    background-color 220ms ease,
    transform 220ms ease;
}

html.dark .av-bal-add-card {
  border-color: var(--color-dark-400);
  background: rgb(from var(--color-primary-400) r g b / 0.05);
}

.av-bal-add-card:hover {
  border-color: var(--color-primary-500);
  background: rgb(from var(--color-primary-500) r g b / 0.06);
  transform: translateY(-3px);
}

html.dark .av-bal-add-card:hover {
  border-color: var(--color-primary-400);
  background: rgb(from var(--color-primary-400) r g b / 0.1);
}

.av-bal-add-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgb(from var(--color-primary-500) r g b / 0.1);
  color: var(--color-primary-700);
  margin-bottom: 8px;
}

html.dark .av-bal-add-card__icon {
  background: rgb(from var(--color-primary-400) r g b / 0.18);
  color: var(--color-primary-300);
}

.av-bal-add-card__icon .mud-icon-root {
  width: 28px;
  height: 28px;
}

.av-bal-add-card__title {
  margin: 0;
  font-weight: 600;
  color: var(--color-gray-900);
}

html.dark .av-bal-add-card__title {
  color: var(--color-dark-50);
}

.av-bal-add-card__hint {
  margin: 0;
  color: var(--color-gray-500);
}

html.dark .av-bal-add-card__hint {
  color: var(--color-dark-300);
}

/* ── List view ─────────────────────────────────────────────────── */

.av-bal__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.av-bal-row {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px 14px 22px;
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease;
}

html.dark .av-bal-row {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

.av-bal-row:hover {
  border-color: var(--color-gray-300);
  box-shadow: 0 2px 8px rgb(from var(--color-gray-900) r g b / 0.05);
}

html.dark .av-bal-row:hover {
  border-color: var(--color-dark-400);
  box-shadow: 0 2px 8px rgb(from var(--color-black) r g b / 0.2);
}

.av-bal-row__accent {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
}

.av-bal-row--success .av-bal-row__accent {
  background: linear-gradient(
    180deg,
    var(--color-success) 0%,
    var(--color-success-lighter) 100%
  );
}

.av-bal-row--warning .av-bal-row__accent {
  background: linear-gradient(
    180deg,
    var(--color-warning) 0%,
    var(--color-warning-lighter) 100%
  );
}

.av-bal-row__user {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.av-bal-row__user-info {
  flex: 1;
  min-width: 0;
}

.av-bal-row__user-sub {
  color: var(--color-gray-500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
}

html.dark .av-bal-row__user-sub {
  color: var(--color-dark-300);
}

.av-bal-row__details {
  flex-shrink: 0;
  align-items: center;
}

.av-bal-row__detail {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.av-bal-row__amount {
  font-weight: 700;
  color: var(--color-gray-900);
  letter-spacing: -0.01em;
}

html.dark .av-bal-row__amount {
  color: var(--color-dark-50);
}

.av-bal-row__actions {
  flex-shrink: 0;
}

/* ── Summary footer ────────────────────────────────────────────── */

.av-bal__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
}

html.dark .av-bal__summary {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

.av-bal__summary-left {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-gray-800);
}

html.dark .av-bal__summary-left {
  color: var(--color-dark-100);
}

.av-bal__summary-icon {
  width: 18px;
  height: 18px;
  color: var(--color-gray-500);
}

html.dark .av-bal__summary-icon {
  color: var(--color-dark-300);
}

.av-bal__summary-stats {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 18px;
}

.av-bal__summary-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-gray-600);
}

html.dark .av-bal__summary-stat {
  color: var(--color-dark-200);
}

.av-bal__summary-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.av-bal__summary-dot--warning {
  background: var(--color-warning);
}

.av-bal__summary-dot--success {
  background: var(--color-success);
}

html.dark .av-bal__summary-dot--warning {
  background: var(--color-warning-lighter);
}

html.dark .av-bal__summary-dot--success {
  background: var(--color-success-lighter);
}

/* ── Empty / loading ───────────────────────────────────────────── */

.av-bal__empty {
  padding: 16px 0;
}

.av-bal__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 80px 20px;
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
}

html.dark .av-bal__loading {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

.av-bal__loading-text {
  color: var(--color-gray-500);
}

html.dark .av-bal__loading-text {
  color: var(--color-dark-300);
}

/* ── Responsive ────────────────────────────────────────────────── */

@media (max-width: 1199.98px) {
  .av-bal__kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 959.98px) {
  .av-bal__hero {
    padding: 24px 22px;
  }

  .av-bal__hero-content {
    flex-direction: column;
    align-items: flex-start;
  }

  .av-bal__hero-cta {
    width: 100%;
  }

  .av-bal__cta-btn {
    width: 100%;
  }

  .av-bal__toolbar-left,
  .av-bal__toolbar-right {
    width: 100%;
    justify-content: stretch;
  }

  .av-bal__lo-select,
  .av-bal__search {
    flex: 1;
    max-width: none;
  }

  .av-bal__status-tabs {
    flex: 1;
  }

  .av-bal-row {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 599.98px) {
  .av-bal__kpis {
    grid-template-columns: 1fr;
  }

  .av-bal-card__detail-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .av-bal-card,
  .av-bal__kpi,
  .av-bal-add-card {
    transition: none;
  }

  .av-bal-card:hover,
  .av-bal-add-card:hover {
    transform: none;
  }
}

/* ───────────────────────────────────────────────────────────────────
   Review Missing Information modal (ValidationDialog).
   Hereda `.av-form-dialog` (sticky header/body/footer + spacing)
   y le agrega secciones planas con eyebrow + lista de issues.
   Reemplaza el patrón legacy de MudExpansionPanels.
   ─────────────────────────────────────────────────────────────────── */

.av-review-missing__title {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.av-review-missing__title-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgb(from var(--color-warning) r g b / 0.12);
  color: var(--color-warning-darker);
}

html.dark .av-review-missing__title-icon {
  background: rgb(from var(--color-warning-lighter) r g b / 0.18);
  color: var(--color-warning-lighter);
}

.av-review-missing__title-icon .mud-icon-root {
  width: 20px;
  height: 20px;
}

.av-review-missing__title-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.av-review-missing__title-heading {
  margin: 0;
  font-weight: 600;
  color: var(--color-gray-900);
  line-height: 1.25;
}

html.dark .av-review-missing__title-heading {
  color: var(--color-dark-50);
}

.av-review-missing__title-hint {
  color: var(--color-gray-500);
  line-height: 1.4;
}

html.dark .av-review-missing__title-hint {
  color: var(--color-dark-300);
}

.av-review-missing__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Communication routing rows */
.av-comm__route {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-gray-100);
}

html.dark .av-comm__route {
  border-bottom-color: var(--color-dark-600);
}

.av-comm__route:last-child {
  border-bottom: none;
}

.av-comm__route-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-primary-50);
  color: var(--color-primary-600);
}

html.dark .av-comm__route-icon {
  background: rgb(from var(--color-primary-400) r g b / 0.16);
  color: var(--color-primary-300);
}

.av-review-missing__section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: rgb(from var(--color-error) r g b / 0.04);
  border: 1px solid rgb(from var(--color-error) r g b / 0.18);
}

html.dark .av-review-missing__section {
  background: rgb(from var(--color-error-lighter) r g b / 0.08);
  border-color: rgb(from var(--color-error-lighter) r g b / 0.22);
}

.av-review-missing__section-eyebrow {
  display: inline-flex;
  align-self: flex-start;
  width: fit-content;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 8px;
  border-radius: 9999px;
  background: rgb(from var(--color-error) r g b / 0.1);
  line-height: 1;
}

html.dark .av-review-missing__section-eyebrow {
  background: rgb(from var(--color-error-lighter) r g b / 0.16);
}

.av-review-missing__section-eyebrow-icon {
  width: 14px;
  height: 14px;
  color: var(--color-error-darker);
  flex-shrink: 0;
}

html.dark .av-review-missing__section-eyebrow-icon {
  color: var(--color-error-lighter);
}

.av-review-missing__section-eyebrow .av-review-missing__section-eyebrow-text {
  color: var(--color-error-darker);
  letter-spacing: 0.06em;
  font-weight: 600;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

html.dark
  .av-review-missing__section-eyebrow
  .av-review-missing__section-eyebrow-text {
  color: var(--color-error-lighter);
}

.av-review-missing__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.av-review-missing__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-left: 3px solid var(--color-error);
  border-radius: var(--radius-sm);
}

html.dark .av-review-missing__item {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
  border-left-color: var(--color-error-lighter);
}

.av-review-missing__item-icon {
  width: 16px;
  height: 16px;
  color: var(--color-error-darker);
  flex-shrink: 0;
}

html.dark .av-review-missing__item-icon {
  color: var(--color-error-lighter);
}

.av-review-missing__item-text {
  color: var(--color-gray-800);
}

html.dark .av-review-missing__item-text {
  color: var(--color-dark-100);
}

.av-review-missing__alert {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: rgb(from var(--color-warning) r g b / 0.08);
  color: var(--color-gray-800);
}

html.dark .av-review-missing__alert {
  background: rgb(from var(--color-warning-lighter) r g b / 0.12);
  color: var(--color-dark-100);
}

.av-review-missing__alert-icon {
  width: 18px;
  height: 18px;
  color: var(--color-warning-darker);
  flex-shrink: 0;
}

html.dark .av-review-missing__alert-icon {
  color: var(--color-warning-lighter);
}

/* Applicant validation dialog — uses the same skin but the body still
   contains MudExpansionPanels (one per applicant section). Skin the panels
   so they read as flat cards consistent with the rest of the Tailux pattern. */

.av-applicant-validation__panels {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: transparent !important;
}

.av-applicant-validation__panels .mud-expand-panel {
  border-radius: var(--radius-md) !important;
  background: rgb(from var(--color-error) r g b / 0.04) !important;
  border: 1px solid rgb(from var(--color-error) r g b / 0.18) !important;
  box-shadow: none !important;
  margin: 0 !important;
}

html.dark .av-applicant-validation__panels .mud-expand-panel {
  background: rgb(from var(--color-error-lighter) r g b / 0.08) !important;
  border-color: rgb(from var(--color-error-lighter) r g b / 0.22) !important;
}

.av-applicant-validation__panels .mud-expand-panel-header {
  padding: 10px 14px !important;
  border-radius: var(--radius-md) !important;
}

.av-applicant-validation__panels .mud-expand-panel-text {
  padding: 8px 14px 12px 14px !important;
}

/* Panel header inside each NavGroup panel: validation badge (warning circle)
   + section icon (chip primary tinted) + title. Same row, vertical centered. */
.av-applicant-validation__panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.av-applicant-validation__panel-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  background: rgb(from var(--color-error) r g b / 0.12);
  color: var(--color-error);
  flex-shrink: 0;
}

html.dark .av-applicant-validation__panel-badge {
  background: rgb(from var(--color-error-lighter) r g b / 0.18);
  color: var(--color-error-lighter);
}

.av-applicant-validation__panel-badge .mud-icon-root {
  width: 14px;
  height: 14px;
}

.av-applicant-validation__panel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-md);
  background: rgb(from var(--color-primary-600) r g b / 0.1);
  color: var(--color-primary-600);
  flex-shrink: 0;
}

html.dark .av-applicant-validation__panel-icon {
  background: rgb(from var(--color-primary-400) r g b / 0.16);
  color: var(--color-primary-400);
}

.av-applicant-validation__panel-icon .mud-icon-root {
  width: 16px;
  height: 16px;
}

.av-applicant-validation__panel-title.mud-typography {
  font-weight: 600;
  color: var(--color-error-darker);
  flex: 1;
  line-height: 1.3;
}

html.dark .av-applicant-validation__panel-title.mud-typography {
  color: var(--color-error-lighter);
}

/* Body inside the expanded panel: stack of missing items */
.av-applicant-validation__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Sub-eyebrow inside Incomes/Employments panel ("Employments (5)" / "Other incomes (3)") */
.av-applicant-validation__sub-eyebrow.mud-typography {
  display: block;
  color: var(--color-gray-500);
  margin-bottom: 4px;
}

html.dark .av-applicant-validation__sub-eyebrow.mud-typography {
  color: var(--color-dark-300);
}

/* Missing item row: white card with red border-left + icon/index + label */
.av-applicant-validation__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-left: 3px solid var(--color-error);
  border-radius: var(--radius-sm);
}

html.dark .av-applicant-validation__item {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
  border-left-color: var(--color-error-lighter);
}

.av-applicant-validation__item-icon.mud-icon-root {
  width: 16px;
  height: 16px;
  color: var(--color-error);
  flex-shrink: 0;
}

html.dark .av-applicant-validation__item-icon.mud-icon-root {
  color: var(--color-error-lighter);
}

/* Index/prefix chip (e.g. "#1" or "REO #2") for nested list items */
.av-applicant-validation__item-index {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 9999px;
  background: rgb(from var(--color-error) r g b / 0.12);
  color: var(--color-error-darker);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
  flex-shrink: 0;
}

html.dark .av-applicant-validation__item-index {
  background: rgb(from var(--color-error-lighter) r g b / 0.18);
  color: var(--color-error-lighter);
}

.av-applicant-validation__item-label.mud-typography {
  color: var(--color-gray-800);
  flex: 1;
  line-height: 1.4;
}

html.dark .av-applicant-validation__item-label.mud-typography {
  color: var(--color-dark-100);
}

/* Continue-anyway button uses warning tint instead of primary */
.av-review-missing__btn-continue.mud-button-root {
  background: var(--color-warning) !important;
  border-color: var(--color-warning) !important;
  color: var(--color-white) !important;
}

.av-review-missing__btn-continue.mud-button-root:hover {
  background: var(--color-warning-darker) !important;
  border-color: var(--color-warning-darker) !important;
}

html.dark .av-review-missing__btn-continue.mud-button-root {
  background: var(--color-warning-light) !important;
  border-color: var(--color-warning-light) !important;
  color: var(--color-gray-900) !important;
}

html.dark .av-review-missing__btn-continue.mud-button-root:hover {
  background: var(--color-warning-lighter) !important;
  border-color: var(--color-warning-lighter) !important;
}

/* ───────────────────────────────────────────────────────────────────
   AB Borrower List — Additional Borrowers list with co-borrower cards
   Reusa los patrones de av-bal-card pero scoped a av-bi-bl.
   Token-driven, light + dark.
   ─────────────────────────────────────────────────────────────────── */

.av-bi-bl {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.av-bi-bl__header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 4px;
}

.av-bi-bl__title {
  font-weight: 600;
  color: var(--color-gray-900);
  line-height: 1.2;
}

html.dark .av-bi-bl__title {
  color: var(--color-dark-50);
}

.av-bi-bl__subtitle {
  color: var(--color-gray-500);
  line-height: 1.5;
}

html.dark .av-bi-bl__subtitle {
  color: var(--color-dark-300);
}

.av-bi-bl__question {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--radius-lg);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-150);
}

html.dark .av-bi-bl__question {
  background: var(--color-dark-750);
  border-color: var(--color-dark-500);
}

.av-bi-bl__question-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgb(from var(--color-primary-500) r g b / 0.1);
  color: var(--color-primary-700);
}

html.dark .av-bi-bl__question-icon {
  background: rgb(from var(--color-primary-400) r g b / 0.16);
  color: var(--color-primary-300);
}

.av-comm__route-icon .mud-icon-root {
  width: 18px;
  height: 18px;
}

.av-comm__route-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.av-comm__route-title {
  color: var(--color-gray-800);
}

html.dark .av-comm__route-title {
  color: var(--color-dark-100);
}

.av-comm__route-sub {
  color: var(--color-gray-500);
}

html.dark .av-comm__route-sub {
  color: var(--color-dark-300);
}

/* Internal notes */
.av-comm__notes {
  padding: 12px 14px 14px;
  border-radius: var(--radius-lg);
  background: rgb(from var(--color-warning-500) r g b / 0.07);
  border: 1px solid rgb(from var(--color-warning-500) r g b / 0.28);
}

html.dark .av-comm__notes {
  background: rgb(from var(--color-warning-400) r g b / 0.08);
  border-color: rgb(from var(--color-warning-400) r g b / 0.25);
}

.av-comm__notes-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}

.av-comm__notes-icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: rgb(from var(--color-warning-500) r g b / 0.16);
  color: var(--color-warning-700);
}

html.dark .av-comm__notes-icon {
  color: var(--color-warning-200);
}

.av-comm__notes-icon .mud-icon-root {
  width: 15px;
  height: 15px;
}

.av-comm__notes-meta {
  flex: 1 1 auto;
  min-width: 0;
}

.av-comm__notes-label {
  color: var(--color-warning-700);
}

html.dark .av-comm__notes-label {
  color: var(--color-warning-200);
}

.av-comm__notes-caption {
  color: var(--color-gray-500);
}

html.dark .av-comm__notes-caption {
  color: var(--color-dark-300);
}

.av-comm__notes-body {
  padding-left: 38px;
  color: var(--color-gray-700);
}

html.dark .av-comm__notes-body {
  color: var(--color-dark-100);
}

/* Info fields (Language card) */
.av-comm__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.av-bi-bl__question-icon .mud-icon-root {
  width: 18px;
  height: 18px;
}

.av-bi-bl__question-label {
  flex: 1;
  min-width: 0;
  font-weight: 500;
  color: var(--color-gray-900);
}

html.dark .av-bi-bl__question-label {
  color: var(--color-dark-50);
}

.av-bi-bl__chips {
  flex-shrink: 0;
}

.av-bi-bl__chips .mud-chip {
  min-width: 52px;
  justify-content: center;
  font-weight: 500;
}

.av-bi-bl__card {
  position: relative;
  overflow: hidden;
  padding: 0;
  border-radius: var(--radius-xl);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease;
}

html.dark .av-bi-bl__card {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

.av-bi-bl__card:hover {
  transform: translateY(-3px);
  border-color: var(--color-gray-300);
  box-shadow: 0 12px 28px rgb(from var(--color-gray-900) r g b / 0.08);
}

html.dark .av-bi-bl__card:hover {
  border-color: var(--color-dark-400);
  box-shadow: 0 12px 28px rgb(from var(--color-black) r g b / 0.4);
}

.av-bi-bl__card-accent {
  height: 4px;
  flex-shrink: 0;
}

.av-bi-bl__card--success .av-bi-bl__card-accent {
  background: linear-gradient(
    90deg,
    var(--color-success) 0%,
    var(--color-success-lighter) 100%
  );
}

.av-bi-bl__card--warning .av-bi-bl__card-accent {
  background: linear-gradient(
    90deg,
    var(--color-warning) 0%,
    var(--color-warning-lighter) 100%
  );
}

.av-bi-bl__card--error .av-bi-bl__card-accent {
  background: linear-gradient(
    90deg,
    var(--color-error) 0%,
    var(--color-error-lighter) 100%
  );
}

.av-bi-bl__card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 18px 18px 0 18px;
}

.av-bi-bl__card-user {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.av-bi-bl__avatar {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
}

.av-bi-bl__avatar--success {
  background: linear-gradient(
    135deg,
    var(--color-success) 0%,
    var(--color-success-light) 100%
  );
}

.av-bi-bl__avatar--warning {
  background: linear-gradient(
    135deg,
    var(--color-warning) 0%,
    var(--color-warning-light) 100%
  );
}

.av-bi-bl__avatar--error {
  background: linear-gradient(
    135deg,
    var(--color-error) 0%,
    var(--color-error-light) 100%
  );
}

.av-bi-bl__card-user-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.av-bi-bl__card-user-name {
  color: var(--color-gray-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  line-height: 1.3;
}

html.dark .av-bi-bl__card-user-name {
  color: var(--color-dark-50);
}

.av-bi-bl__card-user-email {
  color: var(--color-gray-500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.dark .av-bi-bl__card-user-email {
  color: var(--color-dark-300);
}

.av-bi-bl__card-menu {
  opacity: 0.6;
  transition: opacity 150ms ease;
  flex-shrink: 0;
}

.av-bi-bl__card:hover .av-bi-bl__card-menu {
  opacity: 1;
}

.av-bi-bl__card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 18px 0 18px;
}

.av-bi-bl__card-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 18px 0 18px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: var(--color-gray-50);
  color: var(--color-gray-700);
}

html.dark .av-bi-bl__card-info {
  background: var(--color-dark-750);
  color: var(--color-dark-200);
}

.av-bi-bl__card-info--success {
  background: rgb(from var(--color-success) r g b / 0.06);
  color: var(--color-success-darker);
}

html.dark .av-bi-bl__card-info--success {
  background: rgb(from var(--color-success-lighter) r g b / 0.1);
  color: var(--color-success-lighter);
}

.av-bi-bl__card-info--warning {
  background: rgb(from var(--color-warning) r g b / 0.06);
  color: var(--color-warning-darker);
}

html.dark .av-bi-bl__card-info--warning {
  background: rgb(from var(--color-warning-lighter) r g b / 0.1);
  color: var(--color-warning-lighter);
}

.av-bi-bl__card-info-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.av-bi-bl__card-footer {
  margin-top: auto;
  padding: 18px;
}

.av-bi-bl__card-cta.mud-button-root {
  height: 40px;
  border-radius: 9999px !important;
  text-transform: none;
  font-weight: 500;
}

.av-bi-bl__add-card {
  height: 100%;
  min-height: 280px;
  border-radius: var(--radius-xl);
  border: 2px dashed var(--color-gray-300);
  background: rgb(from var(--color-primary-500) r g b / 0.02);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 20px;
  text-align: center;
  cursor: pointer;
  transition:
    border-color 220ms ease,
    background-color 220ms ease,
    transform 220ms ease;
}

html.dark .av-bi-bl__add-card {
  border-color: var(--color-dark-400);
  background: rgb(from var(--color-primary-400) r g b / 0.05);
}

.av-bi-bl__add-card:hover {
  border-color: var(--color-primary-500);
  background: rgb(from var(--color-primary-500) r g b / 0.06);
  transform: translateY(-3px);
}

html.dark .av-bi-bl__add-card:hover {
  border-color: var(--color-primary-400);
  background: rgb(from var(--color-primary-400) r g b / 0.1);
}

.av-bi-bl__add-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgb(from var(--color-primary-500) r g b / 0.1);
  color: var(--color-primary-700);
  margin-bottom: 8px;
}

html.dark .av-bi-bl__add-card-icon {
  background: rgb(from var(--color-primary-400) r g b / 0.18);
  color: var(--color-primary-300);
}

.av-bi-bl__add-card-icon .mud-icon-root {
  width: 28px;
  height: 28px;
}

.av-bi-bl__add-card-title {
  margin: 0;
  font-weight: 600;
  color: var(--color-gray-900);
}

html.dark .av-bi-bl__add-card-title {
  color: var(--color-dark-50);
}

.av-bi-bl__add-card-hint {
  margin: 0;
  color: var(--color-gray-500);
}

html.dark .av-bi-bl__add-card-hint {
  color: var(--color-dark-300);
}

.av-bi-bl__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
}

html.dark .av-bi-bl__summary {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

.av-bi-bl__summary-left {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-gray-800);
}

html.dark .av-bi-bl__summary-left {
  color: var(--color-dark-100);
}

.av-bi-bl__summary-icon {
  width: 18px;
  height: 18px;
  color: var(--color-gray-500);
}

html.dark .av-bi-bl__summary-icon {
  color: var(--color-dark-300);
}

.av-bi-bl__summary-stats {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 18px;
}

.av-bi-bl__summary-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-gray-600);
}

html.dark .av-bi-bl__summary-stat {
  color: var(--color-dark-200);
}

.av-bi-bl__summary-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.av-bi-bl__summary-dot--success {
  background: var(--color-success);
}

html.dark .av-bi-bl__summary-dot--success {
  background: var(--color-success-lighter);
}

@media (max-width: 599.98px) {
  .av-bi-bl__question {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .av-bi-bl__chips {
    align-self: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .av-bi-bl__card,
  .av-bi-bl__add-card {
    transition: none;
  }

  .av-bi-bl__card:hover,
  .av-bi-bl__add-card:hover {
    transform: none;
  }
}

/* ───────────────────────────────────────────────────────────────────
   Co-Borrower Basic Info Dialog (add / edit co-borrower)
   Hereda `.av-form-dialog` (sticky header/body/footer + spacing) y
   le agrega title icon + section cards con eyebrow pill + info alert.
   ─────────────────────────────────────────────────────────────────── */

.av-cb-dialog__title {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.av-cb-dialog__title-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgb(from var(--color-primary-500) r g b / 0.12);
  color: var(--color-primary-700);
}

html.dark .av-cb-dialog__title-icon {
  background: rgb(from var(--color-primary-400) r g b / 0.18);
  color: var(--color-primary-300);
}

.av-cb-dialog__title-icon .mud-icon-root {
  width: 20px;
  height: 20px;
}

.av-cb-dialog__title-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.av-cb-dialog__title-heading {
  margin: 0;
  font-weight: 600;
  color: var(--color-gray-900);
  line-height: 1.25;
}

html.dark .av-cb-dialog__title-heading {
  color: var(--color-dark-50);
}

.av-cb-dialog__title-hint {
  color: var(--color-gray-500);
  line-height: 1.4;
}

html.dark .av-cb-dialog__title-hint {
  color: var(--color-dark-300);
}

.av-cb-dialog__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.av-cb-dialog__section {
  display: flex;
  flex-direction: column;
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
}

html.dark .av-cb-dialog__section {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

.av-cb-dialog__section-eyebrow {
  display: inline-flex;
  align-self: flex-start;
  width: fit-content;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 4px 12px 4px 8px;
  border-radius: 9999px;
  background: rgb(from var(--color-primary-500) r g b / 0.08);
  line-height: 1;
}

html.dark .av-cb-dialog__section-eyebrow {
  background: rgb(from var(--color-primary-400) r g b / 0.14);
}

.av-cb-dialog__section-eyebrow-icon {
  width: 14px;
  height: 14px;
  color: var(--color-primary-600);
  flex-shrink: 0;
}

html.dark .av-cb-dialog__section-eyebrow-icon {
  color: var(--color-primary-300);
}

.av-cb-dialog__section-eyebrow .av-cb-dialog__section-eyebrow-text {
  color: var(--color-primary-700);
  letter-spacing: 0.06em;
  font-weight: 600;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

html.dark .av-cb-dialog__section-eyebrow .av-cb-dialog__section-eyebrow-text {
  color: var(--color-primary-300);
}

.av-cb-dialog__section-hint {
  color: var(--color-gray-500);
  margin-bottom: 12px;
  line-height: 1.4;
}

html.dark .av-cb-dialog__section-hint {
  color: var(--color-dark-300);
}

.av-cb-dialog__info {
  margin: 0;
}

/* ─────────────────────────────────────────────────────────────
   av-ld-summary — Loan Details · Loan Summary (Tailux skin)
   Mirror del patrón av-bi-additional (header / section / eyebrow
   pill / question card / nested / empty state).
   ───────────────────────────────────────────────────────────── */

.av-ld-summary {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.av-ld-summary__header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 4px;
}

.av-ld-summary__title {
  font-weight: 600;
  color: var(--color-gray-900);
  line-height: 1.2;
}

html.dark .av-ld-summary__title {
  color: var(--color-dark-50);
}

.av-ld-summary__subtitle {
  color: var(--color-gray-500);
  line-height: 1.5;
}

html.dark .av-ld-summary__subtitle {
  color: var(--color-dark-300);
}

/* ── Section card ──────────────────────────────────────────────── */

.av-ld-summary__section {
  display: flex;
  flex-direction: column;
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
}

html.dark .av-ld-summary__section {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

/* ── Eyebrow pill ──────────────────────────────────────────────── */

.av-ld-summary__section-eyebrow {
  display: inline-flex;
  align-self: flex-start;
  width: fit-content;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 4px 12px 4px 8px;
  border-radius: 9999px;
  background: rgb(from var(--color-primary-500) r g b / 0.08);
  line-height: 1;
}

html.dark .av-ld-summary__section-eyebrow {
  background: rgb(from var(--color-primary-400) r g b / 0.14);
}

.av-ld-summary__section-eyebrow-icon {
  width: 14px;
  height: 14px;
  color: var(--color-primary-600);
  flex-shrink: 0;
}

html.dark .av-ld-summary__section-eyebrow-icon {
  color: var(--color-primary-300);
}

.av-ld-summary__section-eyebrow .av-ld-summary__section-eyebrow-text {
  color: var(--color-primary-700);
  letter-spacing: 0.06em;
  font-weight: 600;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

html.dark .av-ld-summary__section-eyebrow .av-ld-summary__section-eyebrow-text {
  color: var(--color-primary-300);
}

/* ── Question card (Yes/No pattern) ────────────────────────────── */

.av-ld-summary__question {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--radius-lg);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-150);
}

html.dark .av-ld-summary__question {
  background: var(--color-dark-750);
  border-color: var(--color-dark-500);
}

.av-ld-summary__question-label {
  flex: 1;
  min-width: 0;
  font-weight: 500;
  color: var(--color-gray-900);
}

html.dark .av-ld-summary__question-label {
  color: var(--color-dark-50);
}

.av-ld-summary__chips {
  flex-shrink: 0;
}

.av-ld-summary__chips .mud-chip {
  min-width: 52px;
  justify-content: center;
  font-weight: 500;
}

/* ── Nested block (conditional reveal inside a section) ────────── */

.av-ld-summary__nested {
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  background: rgb(from var(--color-primary-500) r g b / 0.04);
  border: 1px solid rgb(from var(--color-primary-500) r g b / 0.16);
}

html.dark .av-ld-summary__nested {
  background: rgb(from var(--color-primary-400) r g b / 0.08);
  border-color: rgb(from var(--color-primary-400) r g b / 0.22);
}

.av-ld-summary__nested-label {
  color: var(--color-primary-700);
  letter-spacing: 0.06em;
  font-weight: 600;
  line-height: 1 !important;
  margin: 0 !important;
}

html.dark .av-ld-summary__nested-label {
  color: var(--color-primary-300);
}

/* ── Empty state (no loan purpose selected) ────────────────────── */

.av-ld-summary__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 24px;
  border-radius: var(--radius-lg);
  background: var(--color-gray-50);
  border: 1px dashed var(--color-gray-300);
  text-align: center;
}

html.dark .av-ld-summary__empty {
  background: var(--color-dark-750);
  border-color: var(--color-dark-400);
}

.av-ld-summary__empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgb(from var(--color-primary-500) r g b / 0.08);
  color: var(--color-primary-600);
}

html.dark .av-ld-summary__empty-icon {
  background: rgb(from var(--color-primary-400) r g b / 0.14);
  color: var(--color-primary-300);
}

.av-ld-summary__empty-icon .mud-icon-root {
  width: 32px;
  height: 32px;
}

.av-ld-summary__empty-title.mud-typography {
  font-weight: 600;
  color: var(--color-gray-900);
}

html.dark .av-ld-summary__empty-title.mud-typography {
  color: var(--color-dark-50);
}

.av-ld-summary__empty-hint.mud-typography {
  color: var(--color-gray-500);
  line-height: 1.5;
  max-width: 38rem;
}

html.dark .av-ld-summary__empty-hint.mud-typography {
  color: var(--color-dark-300);
}

/* ── Responsive ────────────────────────────────────────────────── */

@media (max-width: 599.98px) {
  .av-ld-summary__section {
    padding: 14px 16px;
  }

  .av-ld-summary__question {
    padding: 12px 14px;
  }

  .av-ld-summary__chips {
    width: 100%;
  }

  .av-ld-summary__empty {
    padding: 32px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .av-ld-summary__section,
  .av-ld-summary__question,
  .av-ld-summary__nested,
  .av-ld-summary__empty {
    transition: none;
  }
}

/* ─────────────────────────────────────────────────────────────
   av-rs — Review & Submit (Tailux skin)
   Header colorido + 3 secciones (Borrower / Additional / Loan)
   con eyebrow pills, data grid de campos y co-borrower cards.
   ───────────────────────────────────────────────────────────── */

.av-rs {
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: avRsFadeIn 250ms ease-out;
}

@keyframes avRsFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Header ────────────────────────────────────────────────────── */

.av-rs__header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border-radius: var(--radius-xl);
  background: linear-gradient(
    135deg,
    rgb(from var(--color-primary-500) r g b / 0.08) 0%,
    rgb(from var(--color-primary-600) r g b / 0.04) 60%,
    transparent 100%
  );
  border: 1px solid var(--color-gray-200);
}

html.dark .av-rs__header {
  background: linear-gradient(
    135deg,
    rgb(from var(--color-primary-400) r g b / 0.18) 0%,
    rgb(from var(--color-primary-500) r g b / 0.1) 60%,
    transparent 100%
  );
  border-color: var(--color-dark-500);
}

.av-rs__header-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgb(from var(--color-primary-500) r g b / 0.14);
  color: var(--color-primary-700);
}

html.dark .av-rs__header-icon {
  background: rgb(from var(--color-primary-400) r g b / 0.22);
  color: var(--color-primary-200);
}

.av-rs__header-icon .mud-icon-root {
  width: 26px;
  height: 26px;
}

.av-rs__header-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.av-rs__title.mud-typography {
  font-weight: 600;
  color: var(--color-gray-900);
  line-height: 1.2;
}

html.dark .av-rs__title.mud-typography {
  color: var(--color-dark-50);
}

.av-rs__subtitle.mud-typography {
  color: var(--color-gray-500);
  line-height: 1.5;
}

html.dark .av-rs__subtitle.mud-typography {
  color: var(--color-dark-300);
}

/* ── Section card ──────────────────────────────────────────────── */

.av-rs__section {
  display: flex;
  flex-direction: column;
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
}

html.dark .av-rs__section {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

.av-rs__section-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-gray-100);
}

html.dark .av-rs__section-head {
  border-bottom-color: var(--color-dark-500);
}

.av-rs__section-eyebrow {
  display: inline-flex;
  align-self: flex-start;
  width: fit-content;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 8px;
  border-radius: 9999px;
  background: rgb(from var(--color-primary-500) r g b / 0.08);
  line-height: 1;
}

html.dark .av-rs__section-eyebrow {
  background: rgb(from var(--color-primary-400) r g b / 0.14);
}

.av-rs__section-eyebrow-icon {
  width: 14px;
  height: 14px;
  color: var(--color-primary-600);
  flex-shrink: 0;
}

html.dark .av-rs__section-eyebrow-icon {
  color: var(--color-primary-300);
}

.av-rs__section-eyebrow .av-rs__section-eyebrow-text {
  color: var(--color-primary-700);
  letter-spacing: 0.06em;
  font-weight: 600;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

html.dark .av-rs__section-eyebrow .av-rs__section-eyebrow-text {
  color: var(--color-primary-300);
}

.av-rs__section-hint.mud-typography {
  color: var(--color-gray-500);
  line-height: 1.4;
}

html.dark .av-rs__section-hint.mud-typography {
  color: var(--color-dark-300);
}

/* ── Co-borrower card ──────────────────────────────────────────── */

.av-rs__coborrower-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-150);
  flex-wrap: wrap;
}

html.dark .av-rs__coborrower-card {
  background: var(--color-dark-750);
  border-color: var(--color-dark-500);
}

.av-rs__coborrower-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 200px;
}

.av-rs__coborrower-avatar.mud-avatar {
  width: 40px;
  height: 40px;
  font-weight: 600;
}

.av-rs__coborrower-details {
  flex: 1;
  min-width: 0;
}

.av-rs__coborrower-name.mud-typography {
  font-weight: 600;
  color: var(--color-gray-900);
}

html.dark .av-rs__coborrower-name.mud-typography {
  color: var(--color-dark-50);
}

.av-rs__coborrower-email.mud-typography {
  line-height: 1.4;
}

.av-rs__coborrower-status {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* ── Data grid ─────────────────────────────────────────────────── */

.av-rs__data-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.av-rs__data-item {
  padding: 10px 14px;
  border-radius: var(--radius-lg);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-150);
  border-left: 3px solid var(--color-primary-500);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.av-comm__label {
  color: var(--color-gray-500);
}

html.dark .av-comm__label {
  color: var(--color-dark-300);
}

.av-comm__value {
  color: var(--color-gray-800);
}

html.dark .av-comm__value {
  color: var(--color-dark-100);
}

/* Language card rows */
.av-comm__lang-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--color-gray-100);
}

html.dark .av-comm__lang-row {
  border-bottom-color: var(--color-dark-600);
}

.av-comm__lang-row:last-child {
  border-bottom: none;
}

.av-comm__lang-ico {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-primary-50);
  color: var(--color-primary-600);
}

html.dark .av-comm__lang-ico {
  background: rgb(from var(--color-primary-400) r g b / 0.16);
  color: var(--color-primary-300);
}

.av-comm__lang-ico .mud-icon-root {
  width: 17px;
  height: 17px;
}

.av-comm__lang-label {
  color: var(--color-gray-500);
}

html.dark .av-comm__lang-label {
  color: var(--color-dark-300);
}

.av-comm__lang-value {
  text-align: right;
  color: var(--color-gray-800);
}

html.dark .av-comm__lang-value {
  color: var(--color-dark-100);
}

/* Availability table */
.av-comm__avail-wrap {
  overflow-x: auto;
  margin: 0 -4px;
}

.av-comm__avail {
  border-collapse: separate;
  border-spacing: 4px;
  margin: 0 auto;
}

.av-comm__avail-day {
  color: var(--color-gray-500);
  text-align: center;
  padding: 0 0 8px;
  min-width: 36px;
}

html.dark .av-comm__avail-day {
  color: var(--color-dark-300);
}

.av-comm__avail-bucket {
  text-align: left;
  padding-right: 12px;
  white-space: nowrap;
  vertical-align: middle;
}

.av-comm__avail-bucket-name {
  color: var(--color-gray-800);
}

html.dark .av-comm__avail-bucket-name {
  color: var(--color-dark-100);
}

.av-comm__avail-bucket-hours {
  color: var(--color-gray-500);
}

html.dark .av-comm__avail-bucket-hours {
  color: var(--color-dark-300);
}

.av-comm__avail-cell {
  width: 38px;
  height: 30px;
  border-radius: var(--radius-md);
  background: var(--color-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
}

html.dark .av-comm__avail-cell {
  background: var(--color-dark-600);
}

.av-comm__avail-cell--on {
  background: var(--color-primary-500);
}

/* Inactive slot row (edit dialog) — the row that is not the selected best time.
   Cells are shown faded and non-interactive so only the active row is editable. */
.av-comm__avail-cell--muted {
  opacity: 0.35;
  pointer-events: none;
}

.av-comm__avail-cell .mud-icon-root {
  width: 14px;
  height: 14px;
}

/* "Now" status bar */
.av-comm__now {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px -20px -16px;
  padding: 12px 20px;
  border-top: 1px solid var(--color-gray-100);
  background: var(--color-gray-50);
  flex-wrap: wrap;
}

html.dark .av-comm__now {
  border-top-color: var(--color-dark-600);
  background: var(--color-dark-750);
}

.av-comm__now-icon {
  width: 16px;
  height: 16px;
  color: var(--color-gray-500);
}

.av-comm__now-text {
  color: var(--color-gray-700);
}

html.dark .av-comm__now-text {
  color: var(--color-dark-100);
}

.av-comm__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 9999px;
  background: rgb(from var(--color-success-500) r g b / 0.12);
  color: var(--color-success-600);
}

html.dark .av-comm__live {
  background: rgb(from var(--color-success-500) r g b / 0.18);
  color: var(--color-success-300);
}

.av-comm__live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.av-comm__live-text {
  color: inherit;
}

/* Consent rows */
.av-comm__consent-row {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-gray-100);
}

html.dark .av-comm__consent-row {
  border-bottom-color: var(--color-dark-600);
}

.av-comm__consent-row:last-child {
  border-bottom: none;
}

.av-comm__consent-ico {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-gray-100);
  color: var(--color-gray-600);
}

html.dark .av-comm__consent-ico {
  background: var(--color-dark-600);
  color: var(--color-dark-200);
}

.av-comm__consent-ico--danger {
  background: rgb(from var(--color-error, #ef4444) r g b / 0.12);
  color: var(--color-error, #dc2626);
}

.av-comm__consent-ico--success {
  background: rgb(from var(--color-success-500) r g b / 0.14);
  color: var(--color-success-600);
}

.av-comm__consent-ico--primary {
  background: var(--color-primary-50);
  color: var(--color-primary-600);
}

html.dark .av-comm__consent-ico--primary {
  background: rgb(from var(--color-primary-400) r g b / 0.16);
  color: var(--color-primary-300);
}

.av-comm__consent-ico .mud-icon-root {
  width: 17px;
  height: 17px;
}

.av-comm__consent-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.av-comm__consent-name {
  color: var(--color-gray-800);
}

html.dark .av-comm__consent-name {
  color: var(--color-dark-100);
}

.av-comm__consent-status {
  color: var(--color-gray-500);
}

html.dark .av-comm__consent-status {
  color: var(--color-dark-300);
}

/* DNC Schedule inline sub-section (indented under the DNC consent-row) */
/* The row's border-bottom is suppressed by CSS :has() when the section follows it;
   the section's own border-bottom acts as the separator before the next row. */
.av-comm__consent-row:has(+ .av-comm__dnc-section) {
  border-bottom: none;
}

.av-comm__dnc-section {
  padding: 6px 0 10px 46px;
  /* 34px icon + 12px grid gap = 46px text-col indent */
  border-bottom: 1px solid var(--color-gray-100);
}

html.dark .av-comm__dnc-section {
  border-bottom-color: var(--color-dark-600);
}

.av-comm__dnc-section-head {
  display: flex;
  align-items: center;
  min-height: 28px;
  margin-bottom: 4px;
}

.av-comm__dnc-section-label {
  color: var(--color-gray-400);
}

html.dark .av-comm__dnc-section-label {
  color: var(--color-dark-400);
}

.av-comm__dnc-rule {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
}

/* Wrapper that stacks description + reason vertically */
.av-comm__dnc-rule-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.av-comm__dnc-rule-desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-gray-500);
}

html.dark .av-comm__dnc-rule-desc {
  color: var(--color-dark-300);
}

/* Marketing topics */
.av-comm__topics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.av-comm__topic {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: 9999px;
  border: 1px solid var(--color-gray-200);
  background: var(--color-gray-50);
  color: var(--color-gray-600);
}

html.dark .av-comm__topic {
  border-color: var(--color-dark-500);
  background: var(--color-dark-750);
  color: var(--color-dark-200);
}

.av-comm__topic-ico {
  width: 15px;
  height: 15px;
  color: var(--color-gray-400);
}

.av-comm__topic--on {
  border-color: var(--color-primary-300);
  background: var(--color-primary-50);
  color: var(--color-primary-700);
}

html.dark .av-comm__topic--on {
  border-color: rgb(from var(--color-primary-400) r g b / 0.4);
  background: rgb(from var(--color-primary-400) r g b / 0.12);
  color: var(--color-primary-200);
}

.av-comm__topic--on .av-comm__topic-ico {
  color: var(--color-primary-500);
}

.av-comm__topic-name {
  color: inherit;
}

/* Days-to-contact block (label + day pills) */
.av-comm__days {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 11px;
}

/* Loading state (centered spinner while the profile loads) */
.av-comm__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
}

/* Contact cadence */
.av-comm__cadence-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.av-comm__cadence-meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.av-comm__cadence-title {
  color: var(--color-gray-800);
}

html.dark .av-comm__cadence-title {
  color: var(--color-dark-100);
}

.av-comm__cadence-used {
  color: var(--color-gray-500);
}

html.dark .av-comm__cadence-used {
  color: var(--color-dark-300);
}

.av-comm__progress {
  height: 8px;
  border-radius: 9999px;
  background: var(--color-gray-200);
  overflow: hidden;
  margin-top: 14px;
}

html.dark .av-comm__progress {
  background: var(--color-dark-600);
}

.av-comm__progress-fill {
  height: 100%;
  border-radius: 9999px;
  background: var(--color-primary-500);
}

.av-comm__progress-fill--w33 {
  width: 33%;
}

.av-comm__progress-fill--w50 {
  width: 50%;
}

.av-comm__progress-fill--w66 {
  width: 66%;
}

.av-comm__progress-fill--w100 {
  width: 100%;
}

/* Stepper */
.av-comm__stepper {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  background: var(--color-white);
}

html.dark .av-comm__stepper {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

html.dark .av-rs__data-item {
  background: var(--color-dark-750);
  border-color: var(--color-dark-500);
  border-left-color: var(--color-primary-400);
}

.av-rs__data-item--error {
  border-left-color: var(--color-error);
  background: rgb(from var(--color-error) r g b / 0.04);
}

html.dark .av-rs__data-item--error {
  border-left-color: var(--color-error-lighter);
  background: rgb(from var(--color-error-lighter) r g b / 0.08);
}

.av-rs__data-item--full {
  grid-column: 1 / -1;
}

.av-rs__data-label.mud-typography {
  color: var(--color-gray-500);
  letter-spacing: 0.06em;
  font-weight: 600;
  line-height: 1.2;
}

html.dark .av-rs__data-label.mud-typography {
  color: var(--color-dark-300);
}

.av-rs__data-value.mud-typography {
  color: var(--color-gray-900);
  font-weight: 500;
}

html.dark .av-rs__data-value.mud-typography {
  color: var(--color-dark-50);
}

.av-rs__data-value--currency.mud-typography {
  color: var(--color-primary-700);
  font-weight: 600;
}

html.dark .av-rs__data-value--currency.mud-typography {
  color: var(--color-primary-300);
}

.av-rs__data-value--success.mud-typography {
  color: var(--color-success);
  font-weight: 600;
}

html.dark .av-rs__data-value--success.mud-typography {
  color: var(--color-success-lighter);
}

.av-rs__data-value--warning.mud-typography {
  color: var(--color-warning);
  font-weight: 600;
}

html.dark .av-rs__data-value--warning.mud-typography {
  color: var(--color-warning-lighter);
}

.av-rs__data-value--error.mud-typography {
  color: var(--color-error);
  font-weight: 600;
}

html.dark .av-rs__data-value--error.mud-typography {
  color: var(--color-error-lighter);
}

/* ── Edit button ───────────────────────────────────────────────── */

.av-rs__edit-btn.mud-button-root {
  align-self: flex-start;
  margin-top: 12px;
  font-weight: 500;
}

/* ── Responsive ────────────────────────────────────────────────── */

@media (max-width: 599.98px) {
  .av-rs__header {
    padding: 16px;
  }

  .av-rs__header-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  .av-rs__section {
    padding: 14px 16px;
  }

  .av-rs__data-grid {
    grid-template-columns: 1fr;
  }

  .av-rs__coborrower-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .av-rs__coborrower-status {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .av-rs {
    animation: none;
  }
}

/* ─────────────────────────────────────────────────────────────
   av-ab-shell — Additional borrower shell (banner + loading)
   ───────────────────────────────────────────────────────────── */

.av-ab-shell__banner.mud-alert {
  margin-bottom: 16px;
}

.av-ab-shell__banner .mud-alert-message {
  width: 100%;
}

.av-ab-shell__return-btn.mud-button-root {
  flex-shrink: 0;
}

.av-ab-shell__loading {
  padding: 64px 24px;
}

.av-ab-shell__loading-spinner {
  width: 80px;
  height: 80px;
  margin-bottom: 8px;
}

@media (max-width: 599.98px) {
  .av-ab-shell__banner .mud-alert-message > .mud-stack {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .av-ab-shell__return-btn.mud-button-root {
    width: 100%;
  }
}

/* ─────────────────────────────────────────────────────────────
   av-cb-submitted — Co-borrower submission complete celebration
   /1003-form/coborrower-submission-complete
   Vista que ve el co-borrower después de enviar su parte del 1003.
   Look: hero card con blobs success-tinted + check-badge icon-pill
   + jerarquía título/subtítulo/body + alert info + CTA "back to list".
   ───────────────────────────────────────────────────────────── */

.av-cb-submitted {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 200px);
  padding: 24px 16px;
}

.av-cb-submitted__card {
  position: relative;
  overflow: hidden;
  max-width: 560px;
  width: 100%;
  padding: 48px 40px;
  border-radius: var(--radius-xl);
  background: linear-gradient(
    135deg,
    rgb(from var(--color-success) r g b / 0.06) 0%,
    rgb(from var(--color-primary-500) r g b / 0.03) 60%,
    var(--color-white) 100%
  );
  border: 1px solid var(--color-gray-200);
  animation: avCbSubmittedFadeIn 350ms ease-out;
}

html.dark .av-cb-submitted__card {
  background: linear-gradient(
    135deg,
    rgb(from var(--color-success-lighter) r g b / 0.1) 0%,
    rgb(from var(--color-primary-400) r g b / 0.06) 60%,
    var(--color-dark-700) 100%
  );
  border-color: var(--color-dark-500);
}

@keyframes avCbSubmittedFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Decorative blobs — radial blur halos en las esquinas, no compiten con el contenido */
.av-cb-submitted__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  opacity: 0.45;
}

.av-cb-submitted__blob--a {
  width: 220px;
  height: 220px;
  right: -80px;
  top: -80px;
  background: radial-gradient(
    circle,
    var(--color-success-lighter) 0%,
    transparent 70%
  );
}

.av-cb-submitted__blob--b {
  width: 180px;
  height: 180px;
  left: -60px;
  bottom: -80px;
  background: radial-gradient(
    circle,
    var(--color-primary-300) 0%,
    transparent 70%
  );
}

html.dark .av-cb-submitted__blob {
  opacity: 0.25;
}

html.dark .av-cb-submitted__blob--a {
  background: radial-gradient(circle, var(--color-success) 0%, transparent 70%);
}

html.dark .av-cb-submitted__blob--b {
  background: radial-gradient(
    circle,
    var(--color-primary-500) 0%,
    transparent 70%
  );
}

/* Content stack — relative para quedar arriba de los blobs */
.av-cb-submitted__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

/* Hero icon con halo pulsante */
.av-cb-submitted__icon-wrapper {
  position: relative;
  width: 88px;
  height: 88px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.av-cb-submitted__icon-halo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgb(from var(--color-success) r g b / 0.12);
  animation: avCbSubmittedHalo 2.4s ease-in-out infinite;
}

html.dark .av-cb-submitted__icon-halo {
  background: rgb(from var(--color-success-lighter) r g b / 0.18);
}

@keyframes avCbSubmittedHalo {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.6;
  }

  50% {
    transform: scale(1.12);
    opacity: 0.3;
  }
}

.av-cb-submitted__icon {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-success);
  color: var(--color-white);
  box-shadow: 0 6px 16px rgb(from var(--color-success) r g b / 0.3);
}

html.dark .av-cb-submitted__icon {
  background: var(--color-success-light);
  box-shadow: 0 6px 16px rgb(from var(--color-success-lighter) r g b / 0.4);
}

.av-cb-submitted__icon .mud-icon-root {
  width: 36px;
  height: 36px;
}

/* Tipografía */
.av-cb-submitted__title.mud-typography {
  font-weight: 700;
  color: var(--color-gray-900);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

html.dark .av-cb-submitted__title.mud-typography {
  color: var(--color-dark-50);
}

.av-cb-submitted__subtitle.mud-typography {
  color: var(--color-gray-700);
  font-weight: 500;
  line-height: 1.4;
  max-width: 420px;
}

html.dark .av-cb-submitted__subtitle.mud-typography {
  color: var(--color-dark-100);
}

.av-cb-submitted__divider.mud-divider {
  width: 56px;
  border-color: var(--color-gray-200);
  margin: 4px 0;
}

html.dark .av-cb-submitted__divider.mud-divider {
  border-color: var(--color-dark-500);
}

.av-cb-submitted__body.mud-typography {
  color: var(--color-gray-600);
  line-height: 1.6;
  max-width: 420px;
}

html.dark .av-cb-submitted__body.mud-typography {
  color: var(--color-dark-200);
}

.av-cb-submitted__alert.mud-alert {
  margin-top: 4px;
  width: 100%;
}

.av-cb-submitted__cta.mud-button-root {
  margin-top: 8px;
  min-width: 220px;
}

/* Responsive */
@media (max-width: 599.98px) {
  .av-cb-submitted {
    padding: 16px;
    min-height: calc(100vh - 160px);
  }

  .av-cb-submitted__card {
    padding: 32px 20px;
  }

  .av-cb-submitted__icon-wrapper {
    width: 80px;
    height: 80px;
  }

  .av-cb-submitted__icon {
    width: 64px;
    height: 64px;
  }

  .av-cb-submitted__icon .mud-icon-root {
    width: 32px;
    height: 32px;
  }

  .av-cb-submitted__cta.mud-button-root {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .av-cb-submitted__card {
    animation: none;
  }

  .av-cb-submitted__icon-halo {
    animation: none;
  }
}

/* ─────────────────────────────────────────────────────────────
   av-notify-status — Notification preference status page
   /1003-form/notify-on-off/{FormId}/{Unsubscribe}
   Página standalone (sin Authorize) accedida desde links de email.
   4 estados: loading (updating, spinner only) · on (celebratory,
   bell con halo pulsante + gradient success) · off (zen, BellSlash
   + gradient neutral) · error (gradient error + alert vibe).
   ───────────────────────────────────────────────────────────── */

.av-notify-status {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.av-notify-status__card {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 24px 8px;
  border-radius: var(--radius-xl);
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  animation: avNotifyStatusFadeIn 350ms ease-out;
}

@keyframes avNotifyStatusFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Card backgrounds por estado — sin white anchor; el bg es transparente y
   las blobs proveen el color. Solo el error refuerza el border + tinted
   subtle bg para reforzar la severidad. */
.av-notify-status__card--error {
  border-color: rgb(from var(--color-error) r g b / 0.25) !important;
  background: rgb(from var(--color-error) r g b / 0.02) !important;
}

html.dark .av-notify-status__card--error {
  border-color: rgb(from var(--color-error-lighter) r g b / 0.35) !important;
  background: rgb(from var(--color-error-lighter) r g b / 0.06) !important;
}

/* Decorative blobs — radial blur halos en esquinas */
.av-notify-status__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  opacity: 0.45;
}

html.dark .av-notify-status__blob {
  opacity: 0.25;
}

/* Blobs ON state */
.av-notify-status__blob--on-a {
  width: 220px;
  height: 220px;
  right: -80px;
  top: -80px;
  background: radial-gradient(
    circle,
    var(--color-success-lighter) 0%,
    transparent 70%
  );
}

.av-notify-status__blob--on-b {
  width: 180px;
  height: 180px;
  left: -60px;
  bottom: -80px;
  background: radial-gradient(
    circle,
    var(--color-primary-300) 0%,
    transparent 70%
  );
}

html.dark .av-notify-status__blob--on-a {
  background: radial-gradient(circle, var(--color-success) 0%, transparent 70%);
}

html.dark .av-notify-status__blob--on-b {
  background: radial-gradient(
    circle,
    var(--color-primary-500) 0%,
    transparent 70%
  );
}

/* Blobs OFF state (más sutiles, gray-toned) */
.av-notify-status__blob--off-a {
  width: 200px;
  height: 200px;
  right: -70px;
  top: -70px;
  background: radial-gradient(
    circle,
    var(--color-gray-300) 0%,
    transparent 70%
  );
  opacity: 0.3;
}

.av-notify-status__blob--off-b {
  width: 160px;
  height: 160px;
  left: -50px;
  bottom: -60px;
  background: radial-gradient(
    circle,
    var(--color-gray-400) 0%,
    transparent 70%
  );
  opacity: 0.25;
}

html.dark .av-notify-status__blob--off-a,
html.dark .av-notify-status__blob--off-b {
  background: radial-gradient(
    circle,
    var(--color-dark-300) 0%,
    transparent 70%
  );
  opacity: 0.2;
}

/* Blob ERROR state */
.av-notify-status__blob--error-a {
  width: 220px;
  height: 220px;
  right: -80px;
  top: -80px;
  background: radial-gradient(
    circle,
    var(--color-error-lighter) 0%,
    transparent 70%
  );
  opacity: 0.35;
}

html.dark .av-notify-status__blob--error-a {
  background: radial-gradient(circle, var(--color-error) 0%, transparent 70%);
  opacity: 0.22;
}

/* Content stack — relative para quedar arriba de los blobs */
.av-notify-status__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

/* Icon wrapper para soportar halo + icon-pill */
.av-notify-status__icon-wrapper {
  position: relative;
  width: 88px;
  height: 88px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

/* Halo pulsante para el ON state — refuerza la sensación "active/listening" */
.av-notify-status__icon-halo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgb(from var(--color-success) r g b / 0.12);
  animation: avNotifyStatusHalo 2.4s ease-in-out infinite;
}

html.dark .av-notify-status__icon-halo {
  background: rgb(from var(--color-success-lighter) r g b / 0.18);
}

@keyframes avNotifyStatusHalo {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.6;
  }

  50% {
    transform: scale(1.12);
    opacity: 0.3;
  }
}

/* Icon-pill */
.av-notify-status__icon {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.av-notify-status__icon .mud-icon-root {
  width: 36px;
  height: 36px;
}

.av-notify-status__icon--neutral {
  background: rgb(from var(--color-primary-500) r g b / 0.1);
  color: var(--color-primary-600);
}

html.dark .av-notify-status__icon--neutral {
  background: rgb(from var(--color-primary-400) r g b / 0.18);
  color: var(--color-primary-300);
}

.av-notify-status__icon--on {
  background: var(--color-success);
  color: var(--color-white);
  box-shadow: 0 6px 16px rgb(from var(--color-success) r g b / 0.3);
}

html.dark .av-notify-status__icon--on {
  background: var(--color-success-light);
  box-shadow: 0 6px 16px rgb(from var(--color-success-lighter) r g b / 0.4);
}

.av-notify-status__icon--off {
  background: var(--color-gray-200);
  color: var(--color-gray-600);
  box-shadow: 0 4px 10px rgb(from var(--color-gray-500) r g b / 0.15);
}

html.dark .av-notify-status__icon--off {
  background: var(--color-dark-500);
  color: var(--color-dark-100);
  box-shadow: 0 4px 10px rgb(from var(--color-black) r g b / 0.3);
}

.av-notify-status__icon--error {
  background: var(--color-error);
  color: var(--color-white);
  box-shadow: 0 6px 16px rgb(from var(--color-error) r g b / 0.3);
}

html.dark .av-notify-status__icon--error {
  background: var(--color-error-lighter);
  color: var(--color-white);
  box-shadow: 0 6px 16px rgb(from var(--color-error-lighter) r g b / 0.4);
}

/* Loading spinner inside the neutral icon-pill */
.av-notify-status__card--loading
  .av-notify-status__icon
  .mud-progress-circular {
  width: 44px;
  height: 44px;
}

/* Tipografía */
.av-notify-status__title.mud-typography {
  font-weight: 700;
  color: var(--color-gray-900);
  line-height: 1.2;
  letter-spacing: -0.01em;
  max-width: 420px;
}

html.dark .av-notify-status__title.mud-typography {
  color: var(--color-dark-50);
}

.av-notify-status__description.mud-typography {
  color: var(--color-gray-600);
  line-height: 1.5;
  max-width: 420px;
}

html.dark .av-notify-status__description.mud-typography {
  color: var(--color-dark-200);
}

.av-notify-status__divider.mud-divider {
  width: 56px;
  border-color: var(--color-gray-200);
  margin: 4px 0;
}

html.dark .av-notify-status__divider.mud-divider {
  border-color: var(--color-dark-500);
}

/* CTA button */
.av-notify-status__cta.mud-button-root {
  margin-top: 4px;
  min-width: 220px;
}

/* Responsive */
@media (max-width: 599.98px) {
  .av-notify-status {
    padding: 16px;
    min-height: calc(100vh - 160px);
  }

  .av-notify-status__card {
    padding: 32px 20px;
  }

  .av-notify-status__icon-wrapper {
    width: 80px;
    height: 80px;
  }

  .av-notify-status__icon {
    width: 64px;
    height: 64px;
  }

  .av-notify-status__icon .mud-icon-root {
    width: 32px;
    height: 32px;
  }

  .av-notify-status__cta.mud-button-root {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .av-notify-status__card {
    animation: none;
  }

  .av-notify-status__icon-halo {
    animation: none;
  }
}

/* ─────────────────────────────────────────────────────────────
   av-bad — Borrower Application Detail (post-submission view)
   /1003-form/new-borrower-application-1003-detail/{Form1003Id}
   Vista que ve el borrower después que su aplicación pasó a fase 2+.
   Layout: top nav + hero header (gradient + blobs + phase stepper +
   LO contact) + participation banner + main grid 8/4 (left: tasks +
   documents · right: progress + status + contact + people).
   ───────────────────────────────────────────────────────────── */

.av-bad {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 24px;
}

@media (max-width: 599.98px) {
  .av-bad {
    padding: 16px;
  }
}

/* ── Top nav ───────────────────────────────────────────────────── */

.av-bad__topnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.av-bad__back-btn.mud-button-root {
  color: var(--color-gray-700);
  font-weight: 500;
  text-transform: none;
}

html.dark .av-bad__back-btn.mud-button-root {
  color: var(--color-dark-100);
}

.av-bad__case-number.mud-typography {
  color: var(--color-gray-500);
  font-weight: 500;
}

html.dark .av-bad__case-number.mud-typography {
  color: var(--color-dark-300);
}

/* ── Hero header ──────────────────────────────────────────────── */

.av-bad__header {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: linear-gradient(
    135deg,
    var(--color-primary-700) 0%,
    var(--color-primary-600) 40%,
    var(--color-primary-500) 100%
  );
  box-shadow: 0 4px 20px rgb(from var(--color-primary-500) r g b / 0.2);
}

html.dark .av-bad__header {
  background: linear-gradient(
    135deg,
    var(--color-primary-800) 0%,
    var(--color-primary-700) 40%,
    var(--color-primary-600) 100%
  );
  box-shadow: 0 4px 20px rgb(from var(--color-primary-400) r g b / 0.25);
}

.av-bad__header-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  opacity: 0.3;
}

.av-bad__header-blob--a {
  width: 280px;
  height: 280px;
  right: -100px;
  top: -100px;
  background: radial-gradient(circle, var(--color-white) 0%, transparent 70%);
}

.av-bad__header-blob--b {
  width: 200px;
  height: 200px;
  left: 25%;
  bottom: -120px;
  background: radial-gradient(circle, var(--color-white) 0%, transparent 70%);
  opacity: 0.18;
}

.av-bad__header-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(
    rgb(from var(--color-white) r g b / 0.08) 1px,
    transparent 1px
  );
  background-size: 20px 20px;
  mask-image: linear-gradient(135deg, transparent 0%, rgb(0 0 0 / 0.5) 100%);
  -webkit-mask-image: linear-gradient(
    135deg,
    transparent 0%,
    rgb(0 0 0 / 0.5) 100%
  );
}

.av-bad__header-main {
  position: relative;
  z-index: 1;
  padding: 24px 28px;
}

.av-bad__header-title.mud-typography {
  font-weight: 600;
  color: var(--color-white);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.av-bad__header-meta {
  color: rgb(from var(--color-white) r g b / 0.85);
  flex-wrap: wrap;
}

.av-bad__header-meta .mud-typography {
  color: rgb(from var(--color-white) r g b / 0.85);
}

.av-bad__header-dot {
  opacity: 0.6;
}

.av-bad__header-lo {
  position: relative;
  z-index: 1;
  padding: 24px 28px;
  background: rgb(from var(--color-white) r g b / 0.06);
  border-left: 1px solid rgb(from var(--color-white) r g b / 0.15);
}

@media (max-width: 959.98px) {
  .av-bad__header-lo {
    border-left: none;
    border-top: 1px solid rgb(from var(--color-white) r g b / 0.15);
  }
}

.av-bad__lo-avatar.mud-avatar {
  background: rgb(from var(--color-white) r g b / 0.2) !important;
  color: var(--color-white) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  border: 1px solid rgb(from var(--color-white) r g b / 0.25);
}

.av-bad__lo-info {
  flex: 1;
  min-width: 0;
}

.av-bad__lo-label.mud-typography {
  color: rgb(from var(--color-white) r g b / 0.75);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.2;
}

.av-bad__lo-name.mud-typography {
  color: var(--color-white);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.av-bad__lo-tenant.mud-typography {
  color: rgb(from var(--color-white) r g b / 0.7);
  line-height: 1.3;
}

.av-bad__lo-action-btn.mud-button-root {
  color: var(--color-white);
  background: rgb(from var(--color-white) r g b / 0.1);
  border: 1px solid rgb(from var(--color-white) r g b / 0.2);
}

.av-bad__lo-action-btn.mud-button-root:hover {
  background: rgb(from var(--color-white) r g b / 0.2);
}

/* ── Phase stepper ────────────────────────────────────────────── */

.av-bad__phase-stepper {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-top: 8px;
  overflow-x: auto;
  padding: 6px 6px 4px;
  /* top 6px deja espacio para el box-shadow ring 4px del indicador activo (overflow-x: auto fuerza overflow-y: auto que clipea sin padding) */
  position: relative;
}

.av-bad__phase-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 72px;
  position: relative;
}

.av-bad__phase-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 13px;
  left: calc(50% + 20px);
  width: calc(100% - 40px);
  height: 2px;
  background: rgb(from var(--color-white) r g b / 0.3);
}

.av-bad__phase-step--completed:not(:last-child)::after {
  background: rgb(from var(--color-success-lighter) r g b / 0.8);
}

.av-bad__phase-indicator {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(from var(--color-white) r g b / 0.2);
  border: 2px solid rgb(from var(--color-white) r g b / 0.45);
  position: relative;
  z-index: 1;
  transition: all 200ms ease;
}

.av-bad__phase-step--completed .av-bad__phase-indicator {
  background: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-white);
}

.av-bad__phase-step--completed .av-bad__phase-indicator .mud-icon-root {
  width: 14px;
  height: 14px;
}

.av-bad__phase-step--current .av-bad__phase-indicator {
  background: var(--color-white);
  border-color: var(--color-white);
  box-shadow: 0 0 0 4px rgb(from var(--color-white) r g b / 0.25);
}

.av-bad__phase-pulse {
  width: 8px;
  height: 8px;
  background: var(--color-primary-600);
  border-radius: 50%;
  animation: avBadPhasePulse 1.5s ease-in-out infinite;
}

@keyframes avBadPhasePulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.4);
    opacity: 0.6;
  }
}

.av-bad__phase-number.mud-typography {
  font-size: 11px;
  font-weight: 600;
  color: rgb(from var(--color-white) r g b / 0.75);
  line-height: 1;
}

.av-bad__phase-label.mud-typography {
  margin-top: 8px;
  text-align: center;
  color: rgb(from var(--color-white) r g b / 0.85);
  font-size: 11px;
  line-height: 1.2;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.1);
}

.av-bad__phase-step--current .av-bad__phase-label.mud-typography {
  color: var(--color-white);
  font-weight: 600;
}

.av-bad__phase-step--completed .av-bad__phase-label.mud-typography {
  color: rgb(from var(--color-success-lighter) r g b / 0.95);
  font-weight: 500;
}

/* ── Participation banner ─────────────────────────────────────── */

.av-bad__participation-banner.mud-alert {
  margin: 0;
}

.av-bad__participation-content {
  flex-wrap: wrap;
  width: 100%;
}

.av-bad__participation-chip.mud-chip {
  height: 24px;
  font-size: 0.75rem;
}

/* ── Section cards (shared between left and side columns) ────── */

.av-bad__section {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

html.dark .av-bad__section {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

.av-bad__section--pending {
  border-color: rgb(from var(--color-primary-500) r g b / 0.4);
  box-shadow: 0 2px 8px rgb(from var(--color-primary-500) r g b / 0.08);
}

html.dark .av-bad__section--pending {
  border-color: rgb(from var(--color-primary-400) r g b / 0.5);
}

.av-bad__section--highlight {
  background: linear-gradient(
    135deg,
    rgb(from var(--color-primary-500) r g b / 0.04) 0%,
    rgb(from var(--color-primary-600) r g b / 0.02) 100%
  );
  border-color: rgb(from var(--color-primary-500) r g b / 0.18);
}

html.dark .av-bad__section--highlight {
  background: linear-gradient(
    135deg,
    rgb(from var(--color-primary-400) r g b / 0.08) 0%,
    rgb(from var(--color-primary-500) r g b / 0.04) 100%
  );
  border-color: rgb(from var(--color-primary-400) r g b / 0.25);
}

.av-bad__section-head {
  padding: 14px 20px;
  border-bottom: 1px solid var(--color-gray-100);
  background: var(--color-gray-50);
}

html.dark .av-bad__section-head {
  border-bottom-color: var(--color-dark-500);
  background: var(--color-dark-750);
}

.av-bad__section--side .av-bad__section-head {
  display: none;
}

.av-bad__section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 8px;
  border-radius: 9999px;
  background: rgb(from var(--color-primary-500) r g b / 0.08);
  line-height: 1;
}

.av-bad__section-eyebrow--secondary {
  background: rgb(from var(--color-secondary) r g b / 0.08);
}

html.dark .av-bad__section-eyebrow {
  background: rgb(from var(--color-primary-400) r g b / 0.14);
}

html.dark .av-bad__section-eyebrow--secondary {
  background: rgb(from var(--color-secondary) r g b / 0.18);
}

.av-bad__section-eyebrow-icon {
  width: 14px;
  height: 14px;
  color: var(--color-primary-600);
  flex-shrink: 0;
}

.av-bad__section-eyebrow--secondary .av-bad__section-eyebrow-icon {
  color: var(--color-secondary);
}

html.dark .av-bad__section-eyebrow-icon {
  color: var(--color-primary-300);
}

html.dark .av-bad__section-eyebrow--secondary .av-bad__section-eyebrow-icon {
  color: var(--color-secondary);
}

.av-bad__section-eyebrow .av-bad__section-eyebrow-text {
  color: var(--color-primary-700);
  letter-spacing: 0.06em;
  font-weight: 600;
  line-height: 1 !important;
  margin: 0 !important;
}

.av-bad__section-eyebrow--secondary .av-bad__section-eyebrow-text {
  color: var(--color-secondary);
}

html.dark .av-bad__section-eyebrow .av-bad__section-eyebrow-text {
  color: var(--color-primary-200);
}

.av-bad__section-eyebrow-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 9999px;
  background: var(--color-primary-600);
  color: var(--color-white);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

html.dark .av-bad__section-eyebrow-count {
  background: var(--color-primary-500);
}

.av-bad__section-body {
  padding: 20px;
}

/* ── Task cards (left column) ─────────────────────────────────── */

.av-bad__task {
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-150);
  border-left: 3px solid var(--color-primary-500);
  background: var(--color-white);
  cursor: pointer;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease,
    background 150ms ease;
}

html.dark .av-bad__task {
  background: var(--color-dark-750);
  border-color: var(--color-dark-500);
  border-left-color: var(--color-primary-400);
}

.av-bad__task:hover {
  border-color: var(--color-primary-600);
  box-shadow: 0 2px 8px rgb(from var(--color-primary-500) r g b / 0.1);
  transform: translateY(-1px);
}

.av-bad__task--mine {
  background: linear-gradient(
    135deg,
    rgb(from var(--color-primary-500) r g b / 0.04),
    rgb(from var(--color-primary-500) r g b / 0.01)
  );
  border-left-color: var(--color-primary-600);
}

html.dark .av-bad__task--mine {
  background: linear-gradient(
    135deg,
    rgb(from var(--color-primary-400) r g b / 0.1),
    rgb(from var(--color-primary-400) r g b / 0.04)
  );
  border-left-color: var(--color-primary-400);
}

.av-bad__task--overdue {
  border-left-color: var(--color-error) !important;
  background: linear-gradient(
    135deg,
    rgb(from var(--color-error) r g b / 0.05),
    rgb(from var(--color-error) r g b / 0.01)
  );
}

.av-bad__task--due-soon {
  border-left-color: var(--color-warning) !important;
  background: linear-gradient(
    135deg,
    rgb(from var(--color-warning) r g b / 0.05),
    rgb(from var(--color-warning) r g b / 0.01)
  );
}

.av-bad__task--returned {
  border-left-color: var(--color-error) !important;
}

.av-bad__task-rejection.mud-alert {
  margin-bottom: 10px;
}

.av-bad__task-rejection-title.mud-typography {
  font-weight: 600;
  color: var(--color-error);
}

html.dark .av-bad__task-rejection-title.mud-typography {
  color: var(--color-error-lighter);
}

.av-bad__task-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.av-bad__task-title-row {
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}

.av-bad__task-title.mud-typography {
  font-weight: 600;
  color: var(--color-gray-900);
}

html.dark .av-bad__task-title.mud-typography {
  color: var(--color-dark-50);
}

.av-bad__task-chevron {
  width: 18px;
  height: 18px;
  color: var(--color-gray-400);
  flex-shrink: 0;
}

html.dark .av-bad__task-chevron {
  color: var(--color-dark-300);
}

.av-bad__task-description.mud-typography {
  color: var(--color-gray-600);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

html.dark .av-bad__task-description.mud-typography {
  color: var(--color-dark-200);
}

.av-bad__task-meta {
  margin-top: 8px;
  flex-wrap: wrap;
  color: var(--color-gray-500);
}

html.dark .av-bad__task-meta {
  color: var(--color-dark-300);
}

.av-bad__task-meta-item {
  color: var(--color-gray-500);
}

html.dark .av-bad__task-meta-item {
  color: var(--color-dark-300);
}

.av-bad__task-meta-icon {
  width: 14px;
  height: 14px;
  color: inherit;
}

/* ── History panel ────────────────────────────────────────────── */

.av-bad__history {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-white);
}

html.dark .av-bad__history {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

.av-bad__history .mud-expand-panel {
  margin: 0 !important;
  box-shadow: none !important;
}

.av-bad__history .mud-expand-panel::before {
  display: none !important;
}

.av-bad__history .mud-expand-panel-header {
  padding: 12px 20px !important;
  min-height: auto !important;
}

.av-bad__history .mud-expand-panel-content {
  padding: 0 !important;
}

.av-bad__history-icon {
  width: 16px;
  height: 16px;
  color: var(--color-gray-500);
}

html.dark .av-bad__history-icon {
  color: var(--color-dark-300);
}

.av-bad__history-title.mud-typography {
  color: var(--color-gray-700);
  font-weight: 500;
}

html.dark .av-bad__history-title.mud-typography {
  color: var(--color-dark-100);
}

.av-bad__history-list {
  padding: 12px;
}

.av-bad__history-item {
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: transparent;
  cursor: pointer;
  transition: background-color 150ms ease;
}

.av-bad__history-item:hover {
  background: var(--color-gray-50);
}

html.dark .av-bad__history-item:hover {
  background: var(--color-dark-600);
}

.av-bad__history-item--mine {
  background: rgb(from var(--color-primary-500) r g b / 0.04);
}

.av-bad__history-item-row {
  flex-wrap: wrap;
}

.av-bad__history-status-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.av-bad__history-status-icon .mud-icon-root {
  width: 18px;
  height: 18px;
}

.av-bad__history-status-icon--review {
  background: rgb(from var(--color-info) r g b / 0.1);
  color: var(--color-info);
}

.av-bad__history-status-icon--success {
  background: rgb(from var(--color-success) r g b / 0.1);
  color: var(--color-success);
}

.av-bad__history-status-icon--warning {
  background: rgb(from var(--color-warning) r g b / 0.1);
  color: var(--color-warning);
}

.av-bad__history-item-info {
  flex: 1;
  min-width: 0;
}

.av-bad__history-item-title.mud-typography {
  color: var(--color-gray-900);
  font-weight: 500;
}

html.dark .av-bad__history-item-title.mud-typography {
  color: var(--color-dark-50);
}

.av-bad__history-item-mine {
  width: 14px;
  height: 14px;
  color: var(--color-primary-600);
}

.av-bad__history-item-meta.mud-typography {
  color: var(--color-gray-500);
  font-size: 11px;
  line-height: 1.3;
}

html.dark .av-bad__history-item-meta.mud-typography {
  color: var(--color-dark-300);
}

.av-bad__history-status-badge {
  flex-shrink: 0;
}

/* ── Documents ────────────────────────────────────────────────── */

.av-bad__document {
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-gray-150);
  background: var(--color-white);
  cursor: pointer;
  transition:
    border-color 150ms ease,
    background 150ms ease;
}

html.dark .av-bad__document {
  background: var(--color-dark-750);
  border-color: var(--color-dark-500);
}

.av-bad__document:hover {
  border-color: var(--color-primary-500);
  background: rgb(from var(--color-primary-500) r g b / 0.02);
}

html.dark .av-bad__document:hover {
  background: rgb(from var(--color-primary-400) r g b / 0.06);
}

.av-bad__document-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-100);
  color: var(--color-gray-600);
  flex-shrink: 0;
}

html.dark .av-bad__document-icon {
  background: var(--color-dark-600);
  color: var(--color-dark-200);
}

.av-bad__document-icon .mud-icon-root {
  width: 18px;
  height: 18px;
}

.av-bad__document-info {
  flex: 1;
  min-width: 0;
}

.av-bad__document-name.mud-typography {
  color: var(--color-gray-900);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html.dark .av-bad__document-name.mud-typography {
  color: var(--color-dark-50);
}

.av-bad__document-meta {
  flex-wrap: wrap;
}

.av-bad__document-meta-text.mud-typography {
  color: var(--color-gray-500);
}

html.dark .av-bad__document-meta-text.mud-typography {
  color: var(--color-dark-300);
}

.av-bad__document-meta-dot.mud-typography {
  color: var(--color-gray-300);
}

.av-bad__document-meta-by.mud-typography {
  color: var(--color-primary-600);
  font-weight: 500;
}

html.dark .av-bad__document-meta-by.mud-typography {
  color: var(--color-primary-300);
}

.av-bad__document-action {
  width: 16px;
  height: 16px;
  color: var(--color-gray-400);
  flex-shrink: 0;
}

.av-bad__document-more.mud-button-root {
  margin-top: 8px;
  text-transform: none;
}

/* ── Empty inline state (Pending tasks / Case Documents empty) ── */

.av-bad__empty-inline {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius-lg);
  background: var(--color-gray-50);
  border: 1px dashed var(--color-gray-200);
}

html.dark .av-bad__empty-inline {
  background: var(--color-dark-750);
  border-color: var(--color-dark-500);
}

.av-bad__empty-inline-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.av-bad__empty-inline-icon .mud-icon-root {
  width: 22px;
  height: 22px;
}

.av-bad__empty-inline-icon--success {
  background: rgb(from var(--color-success) r g b / 0.12);
  color: var(--color-success);
}

.av-bad__empty-inline-icon--neutral {
  background: var(--color-gray-100);
  color: var(--color-gray-500);
}

html.dark .av-bad__empty-inline-icon--neutral {
  background: var(--color-dark-600);
  color: var(--color-dark-200);
}

.av-bad__empty-inline-title.mud-typography {
  color: var(--color-gray-900);
  font-weight: 500;
}

html.dark .av-bad__empty-inline-title.mud-typography {
  color: var(--color-dark-50);
}

.av-bad__empty-inline-hint.mud-typography {
  color: var(--color-gray-500);
}

html.dark .av-bad__empty-inline-hint.mud-typography {
  color: var(--color-dark-300);
}

/* ── Side column shared (progress + status + contact + people) ─ */

.av-bad__side-label.mud-typography {
  color: var(--color-gray-500);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
}

html.dark .av-bad__side-label.mud-typography {
  color: var(--color-dark-300);
}

.av-bad__side-count {
  flex-shrink: 0;
}

/* ── Progress ring ────────────────────────────────────────────── */

.av-bad__progress-ring {
  display: flex;
  justify-content: center;
  padding: 8px 0;
}

.av-bad__progress-ring .mud-progress-circular {
  width: 96px;
  height: 96px;
}

.av-bad__progress-value.mud-typography {
  font-weight: 700;
  color: var(--color-primary-700);
}

html.dark .av-bad__progress-value.mud-typography {
  color: var(--color-primary-300);
}

.av-bad__progress-stats {
  padding-top: 4px;
}

.av-bad__progress-stat-value.mud-typography {
  font-weight: 700;
  color: var(--color-gray-900);
}

html.dark .av-bad__progress-stat-value.mud-typography {
  color: var(--color-dark-50);
}

.av-bad__progress-stat-label.mud-typography {
  color: var(--color-gray-500);
  font-size: 11px;
  line-height: 1.2;
}

html.dark .av-bad__progress-stat-label.mud-typography {
  color: var(--color-dark-300);
}

/* ── Current status (highlight card) ──────────────────────────── */

.av-bad__status-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.av-bad__status-icon .mud-icon-root {
  width: 18px;
  height: 18px;
}

.av-bad__status-icon--primary {
  background: rgb(from var(--color-primary-500) r g b / 0.12);
  color: var(--color-primary-600);
}

.av-bad__status-icon--info {
  background: rgb(from var(--color-info) r g b / 0.12);
  color: var(--color-info);
}

.av-bad__status-icon--success {
  background: rgb(from var(--color-success) r g b / 0.12);
  color: var(--color-success);
}

.av-bad__status-title.mud-typography {
  color: var(--color-gray-900);
  font-weight: 600;
}

html.dark .av-bad__status-title.mud-typography {
  color: var(--color-dark-50);
}

.av-bad__status-description.mud-typography {
  color: var(--color-gray-600);
  line-height: 1.4;
}

html.dark .av-bad__status-description.mud-typography {
  color: var(--color-dark-200);
}

/* ── Contact buttons ──────────────────────────────────────────── */

.av-bad__contact-btn.mud-button-root {
  justify-content: flex-start;
  text-transform: none;
  font-weight: 500;
}

/* ── Person items (participants/realtors/authorized users) ───── */

.av-bad__person {
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-gray-150);
  background: transparent;
  transition:
    background-color 150ms ease,
    border-color 150ms ease;
}

html.dark .av-bad__person {
  border-color: var(--color-dark-500);
}

.av-bad__person:hover {
  background: var(--color-gray-50);
}

html.dark .av-bad__person:hover {
  background: var(--color-dark-600);
}

.av-bad__person--current {
  background: rgb(from var(--color-primary-500) r g b / 0.04);
  border-color: rgb(from var(--color-primary-500) r g b / 0.22);
}

html.dark .av-bad__person--current {
  background: rgb(from var(--color-primary-400) r g b / 0.08);
  border-color: rgb(from var(--color-primary-400) r g b / 0.3);
}

.av-bad__person-avatar.mud-avatar {
  color: var(--color-white) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

.av-bad__person-avatar--primary.mud-avatar {
  background: var(--color-primary-600) !important;
}

.av-bad__person-avatar--secondary.mud-avatar {
  background: var(--color-secondary) !important;
}

.av-bad__person-avatar--tertiary.mud-avatar {
  background: var(--color-info) !important;
}

.av-bad__person-info {
  flex: 1;
  min-width: 0;
}

.av-bad__person-name.mud-typography {
  color: var(--color-gray-900);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html.dark .av-bad__person-name.mud-typography {
  color: var(--color-dark-50);
}

.av-bad__person-you-tag {
  font-size: 10px !important;
}

.av-bad__person-role.mud-typography {
  color: var(--color-gray-500);
  font-size: 11px;
}

html.dark .av-bad__person-role.mud-typography {
  color: var(--color-dark-300);
}

.av-bad__person-meta {
  flex-wrap: wrap;
}

.av-bad__person-meta-text.mud-typography {
  color: var(--color-gray-500);
  font-size: 11px;
}

html.dark .av-bad__person-meta-text.mud-typography {
  color: var(--color-dark-300);
}

.av-bad__person-meta-dot.mud-typography {
  color: var(--color-gray-300);
}

.av-bad__person-status-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.av-bad__person-status-icon--success {
  color: var(--color-success);
}

.av-bad__person-status-icon--warning {
  color: var(--color-warning);
}

/* ── Empty side (no realtors / no authorized users) ───────────── */

.av-bad__empty-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 12px;
  border-radius: var(--radius-md);
  background: var(--color-gray-50);
  border: 1px dashed var(--color-gray-200);
  text-align: center;
}

html.dark .av-bad__empty-side {
  background: var(--color-dark-750);
  border-color: var(--color-dark-500);
}

.av-bad__empty-side-icon {
  width: 28px;
  height: 28px;
  color: var(--color-gray-400);
}

html.dark .av-bad__empty-side-icon {
  color: var(--color-dark-300);
}

.av-bad__empty-side-text.mud-typography {
  color: var(--color-gray-500);
  line-height: 1.4;
}

html.dark .av-bad__empty-side-text.mud-typography {
  color: var(--color-dark-300);
}

/* ── Loading state ────────────────────────────────────────────── */

.av-bad--loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
}

.av-bad__loading {
  padding: 40px;
}

.av-bad__loading-text.mud-typography {
  color: var(--color-gray-500);
}

html.dark .av-bad__loading-text.mud-typography {
  color: var(--color-dark-300);
}

/* ── Responsive ───────────────────────────────────────────────── */

@media (max-width: 599.98px) {
  .av-bad__header-main,
  .av-bad__header-lo {
    padding: 18px 20px;
  }

  .av-bad__phase-stepper {
    gap: 4px;
  }

  .av-bad__phase-step {
    min-width: 58px;
  }

  .av-bad__section-head {
    padding: 12px 16px;
  }

  .av-bad__section-body {
    padding: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .av-bad__phase-pulse {
    animation: none;
  }

  .av-bad__task {
    transition: none;
  }
}

/* ─────────────────────────────────────────────────────────────
   av-bad — REORGANIZATION add-ons
   Phase timeline como banda separada + Status Hero (fusiona
   Progress + Current Status) + People card consolidado.
   ───────────────────────────────────────────────────────────── */

/* Phase band — banda neutral debajo del header */
.av-bad__phase-band.mud-paper {
  padding: 18px 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-200);
  background: var(--color-white);
}

html.dark .av-bad__phase-band.mud-paper {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

/* Override del stepper para tema claro en la banda (los colores del
   stepper en el header gradient son white-based; aquí van semantic-aware). */
.av-bad__phase-band .av-bad__phase-step:not(:last-child)::after {
  background: var(--color-gray-200);
}

html.dark .av-bad__phase-band .av-bad__phase-step:not(:last-child)::after {
  background: var(--color-dark-500);
}

.av-bad__phase-band .av-bad__phase-step--completed:not(:last-child)::after {
  background: rgb(from var(--color-success) r g b / 0.5);
}

.av-bad__phase-band .av-bad__phase-indicator {
  background: var(--color-gray-100);
  border-color: var(--color-gray-300);
}

html.dark .av-bad__phase-band .av-bad__phase-indicator {
  background: var(--color-dark-600);
  border-color: var(--color-dark-450);
}

.av-bad__phase-band .av-bad__phase-step--current .av-bad__phase-indicator {
  background: var(--color-primary-600);
  border-color: var(--color-primary-700);
  box-shadow: 0 0 0 4px rgb(from var(--color-primary-500) r g b / 0.2);
}

html.dark
  .av-bad__phase-band
  .av-bad__phase-step--current
  .av-bad__phase-indicator {
  background: var(--color-primary-500);
  border-color: var(--color-primary-400);
  box-shadow: 0 0 0 4px rgb(from var(--color-primary-400) r g b / 0.25);
}

.av-bad__phase-band .av-bad__phase-step--current .av-bad__phase-pulse {
  background: var(--color-white);
}

.av-bad__phase-band .av-bad__phase-number.mud-typography {
  color: var(--color-gray-500);
}

html.dark .av-bad__phase-band .av-bad__phase-number.mud-typography {
  color: var(--color-dark-300);
}

.av-bad__phase-band .av-bad__phase-label.mud-typography {
  color: var(--color-gray-600);
  text-shadow: none;
}

html.dark .av-bad__phase-band .av-bad__phase-label.mud-typography {
  color: var(--color-dark-200);
}

.av-bad__phase-band
  .av-bad__phase-step--current
  .av-bad__phase-label.mud-typography {
  color: var(--color-primary-700);
  font-weight: 600;
}

html.dark
  .av-bad__phase-band
  .av-bad__phase-step--current
  .av-bad__phase-label.mud-typography {
  color: var(--color-primary-300);
}

.av-bad__phase-band
  .av-bad__phase-step--completed
  .av-bad__phase-label.mud-typography {
  color: var(--color-success);
  font-weight: 500;
}

html.dark
  .av-bad__phase-band
  .av-bad__phase-step--completed
  .av-bad__phase-label.mud-typography {
  color: var(--color-success-lighter);
}

/* Status hero — fusiona Progress + Current Status en una sola card */
.av-bad__status-hero.mud-paper {
  padding: 24px;
  border-radius: var(--radius-xl);
  border: 1px solid rgb(from var(--color-primary-500) r g b / 0.18);
  background: linear-gradient(
    135deg,
    rgb(from var(--color-primary-500) r g b / 0.06) 0%,
    rgb(from var(--color-primary-600) r g b / 0.03) 60%,
    var(--color-white) 100%
  );
}

html.dark .av-bad__status-hero.mud-paper {
  background: linear-gradient(
    135deg,
    rgb(from var(--color-primary-400) r g b / 0.1) 0%,
    rgb(from var(--color-primary-500) r g b / 0.05) 60%,
    var(--color-dark-700) 100%
  );
  border-color: rgb(from var(--color-primary-400) r g b / 0.25);
}

.av-bad__status-hero-content {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

.av-bad__status-hero-message {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 280px;
}

.av-bad__status-hero-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 220px;
  flex: 0 0 auto;
}

/* Status icon-pill grande variant para el hero */
.av-bad__status-icon--lg {
  width: 56px !important;
  height: 56px !important;
}

.av-bad__status-icon--lg .mud-icon-root {
  width: 28px !important;
  height: 28px !important;
}

@media (max-width: 959.98px) {
  .av-bad__status-hero-content {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  .av-bad__status-hero-progress {
    width: 100%;
    min-width: 0;
  }
}

/* People card — consolidado con secciones internas */
.av-bad__people .av-bad__section-body {
  padding: 18px 20px 20px;
}

.av-bad__people-sub-head {
  width: 100%;
}

.av-bad__people-sub-label.mud-typography {
  color: var(--color-gray-500);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  font-size: 11px;
}

html.dark .av-bad__people-sub-label.mud-typography {
  color: var(--color-dark-300);
}

/* §TASK-DIALOG ─── TaskViewDialog skin (Tailux) ───────────────────────────
   Aplica sobre MudDialog que ya lleva .av-form-dialog + .av-form-dialog--size-large.
   Cubre: header con eyebrow status + título + details, alerts dentro del body,
   tabs (underline para pending, boxed para read-only), upload zone full-area
   clickable (MudFileUpload + CustomContent), files list con status border,
   empty state y actions con grupo derecho (N/A + Submit). Cero inline styles
   en el razor — toda la tipografía y color via tokens. */

.av-task-dialog .av-task-dialog__title-stack {
  flex: 1;
  min-width: 0;
}

.av-task-dialog__title-status.mud-typography {
  color: var(--color-gray-500);
  font-weight: 600;
  letter-spacing: 0.06em;
}

html.dark .av-task-dialog__title-status.mud-typography {
  color: var(--color-dark-300);
}

.av-task-dialog__title-details.mud-typography {
  color: var(--color-gray-600);
}

html.dark .av-task-dialog__title-details.mud-typography {
  color: var(--color-dark-200);
}

/* ── Alerts dentro del body (rejection / not applicable) ─────────────── */
.av-task-dialog__alert {
  margin-bottom: 1rem;
}

.av-task-dialog__alert-meta.mud-typography {
  color: var(--color-gray-500);
}

html.dark .av-task-dialog__alert-meta.mud-typography {
  color: var(--color-dark-300);
}

/* ── Tabs wrappers ────────────────────────────────────────────────────── */
.av-task-dialog__tabs {
  margin-top: 0.5rem;
}

.av-task-dialog__tabs-boxed {
  margin-top: 0.5rem;
}

.av-task-dialog__panel {
  margin-top: 1rem;
}

/* ── Upload zone full-area clickable ──────────────────────────────────── */
.av-task-dialog__upload-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
  margin-bottom: 0.75rem;
}

.av-task-dialog__upload-wrapper .mud-file-upload {
  width: 100%;
  max-width: 420px;
}

.av-task-dialog__upload-wrapper label {
  display: block;
  width: 100%;
  cursor: pointer;
}

.av-task-dialog__upload-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.5rem 1rem;
  border: 2px dashed var(--color-gray-300);
  border-radius: var(--radius-xl);
  background-color: var(--color-gray-50);
  transition:
    border-color 150ms ease,
    background-color 150ms ease;
  text-align: center;
}

.av-task-dialog__upload-wrapper:hover .av-task-dialog__upload-zone,
.av-task-dialog__upload-wrapper label:hover .av-task-dialog__upload-zone {
  border-color: var(--color-primary-500);
  background-color: rgb(from var(--color-primary-500) r g b / 0.04);
}

html.dark .av-task-dialog__upload-zone {
  border-color: var(--color-dark-450);
  background-color: var(--color-dark-700);
}

html.dark .av-task-dialog__upload-wrapper:hover .av-task-dialog__upload-zone,
html.dark
  .av-task-dialog__upload-wrapper
  label:hover
  .av-task-dialog__upload-zone {
  border-color: var(--color-primary-400);
  background-color: rgb(from var(--color-primary-400) r g b / 0.08);
}

.av-task-dialog__upload-icon.mud-icon-root {
  width: 32px;
  height: 32px;
  color: var(--color-primary-600);
}

html.dark .av-task-dialog__upload-icon.mud-icon-root {
  color: var(--color-primary-400);
}

.av-task-dialog__upload-title.mud-typography {
  font-weight: 500;
  color: var(--color-gray-800);
}

html.dark .av-task-dialog__upload-title.mud-typography {
  color: var(--color-dark-100);
}

.av-task-dialog__upload-hint.mud-typography {
  color: var(--color-gray-500);
}

html.dark .av-task-dialog__upload-hint.mud-typography {
  color: var(--color-dark-300);
}

/* ── Files list header ───────────────────────────────────────────────── */
.av-task-dialog__files-header.mud-typography {
  color: var(--color-gray-500);
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

html.dark .av-task-dialog__files-header.mud-typography {
  color: var(--color-dark-300);
}

.av-task-dialog__files-list {
  margin-bottom: 0.25rem;
}

/* ── File row ─────────────────────────────────────────────────────────── */
.av-task-dialog__file-row.mud-paper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
}

html.dark .av-task-dialog__file-row.mud-paper {
  border-color: var(--color-dark-500);
  background-color: var(--color-dark-700);
}

.av-task-dialog__file-row--accepted {
  border-left: 3px solid var(--color-success) !important;
}

.av-task-dialog__file-row--rejected {
  border-left: 3px solid var(--color-error) !important;
}

.av-task-dialog__file-row--pending {
  border-left: 3px solid var(--color-warning) !important;
}

.av-task-dialog__file-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background-color: var(--color-gray-150);
  color: var(--color-gray-700);
  flex-shrink: 0;
}

html.dark .av-task-dialog__file-icon {
  background-color: var(--color-dark-600);
  color: var(--color-dark-100);
}

.av-task-dialog__file-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.av-task-dialog__file-name.mud-typography {
  font-weight: 500;
  color: var(--color-gray-800);
  cursor: pointer;
}

html.dark .av-task-dialog__file-name.mud-typography {
  color: var(--color-dark-100);
}

.av-task-dialog__file-uploader.mud-typography {
  color: var(--color-primary-600);
}

html.dark .av-task-dialog__file-uploader.mud-typography {
  color: var(--color-primary-400);
}

.av-task-dialog__file-comments.mud-typography {
  color: var(--color-gray-500);
}

html.dark .av-task-dialog__file-comments.mud-typography {
  color: var(--color-dark-300);
}

.av-task-dialog__file-status {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 9999px;
  flex-shrink: 0;
}

.av-task-dialog__file-status--accepted {
  color: var(--color-success-darker);
  background-color: rgb(from var(--color-success) r g b / 0.1);
}

html.dark .av-task-dialog__file-status--accepted {
  color: var(--color-success-lighter);
  background-color: rgb(from var(--color-success) r g b / 0.18);
}

.av-task-dialog__file-status--rejected {
  color: var(--color-error-darker);
  background-color: rgb(from var(--color-error) r g b / 0.1);
}

html.dark .av-task-dialog__file-status--rejected {
  color: var(--color-error-lighter);
  background-color: rgb(from var(--color-error) r g b / 0.18);
}

.av-task-dialog__file-status--pending {
  color: var(--color-warning-darker);
  background-color: rgb(from var(--color-warning) r g b / 0.1);
}

html.dark .av-task-dialog__file-status--pending {
  color: var(--color-warning-lighter);
  background-color: rgb(from var(--color-warning) r g b / 0.18);
}

.av-task-dialog__file-delete.mud-icon-button {
  color: var(--color-error);
  flex-shrink: 0;
}

/* ── Empty state ──────────────────────────────────────────────────────── */
.av-task-dialog__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 2rem 1rem;
}

.av-task-dialog__empty-icon.mud-icon-root {
  width: 40px;
  height: 40px;
  color: var(--color-gray-400);
}

html.dark .av-task-dialog__empty-icon.mud-icon-root {
  color: var(--color-dark-400);
}

.av-task-dialog__empty-text.mud-typography {
  color: var(--color-gray-500);
}

html.dark .av-task-dialog__empty-text.mud-typography {
  color: var(--color-dark-300);
}

/* ── Actions: Cancel left, group N/A + Submit right ─────────────────── */
.av-task-dialog__actions {
  justify-content: space-between !important;
  width: 100%;
}

.av-task-dialog__actions-right {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

/* §DELETE-DIALOG ─── DeleteConfirmationDialog skin (Tailux) ────────────────
   Aplica sobre MudDialog con .av-form-dialog + .av-form-dialog--size-small.
   Cubre: header con icono trash en chip rojo soft + título, body con
   descripción, footer con hint + actions (Cancel + Delete rojo).
   Hereda del .av-form-dialog la geometría base; solo aporta los colores
   destructivos y el chip del icono. Global — aplica a TODOS los call sites
   (66) sin cambio de API. */

.av-delete-dialog .av-delete-dialog__title-stack {
  flex: 1;
  min-width: 0;
}

.av-delete-dialog__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-lg);
  background-color: rgb(from var(--color-error) r g b / 0.12);
  color: var(--color-error);
  flex-shrink: 0;
}

html.dark .av-delete-dialog__icon {
  background-color: rgb(from var(--color-error) r g b / 0.18);
  color: var(--color-error-lighter);
}

.av-delete-dialog__icon .mud-icon-root {
  width: 20px;
  height: 20px;
}

/* Override del primary action button — el delete debe ser rojo, no primario */
.av-delete-dialog__btn-delete.mud-button-root {
  background-color: var(--color-error) !important;
  color: var(--color-white) !important;
}

.av-delete-dialog__btn-delete.mud-button-root:hover {
  background-color: var(--color-error-darker) !important;
}

html.dark .av-delete-dialog__btn-delete.mud-button-root {
  background-color: var(--color-error) !important;
  color: var(--color-white) !important;
}

html.dark .av-delete-dialog__btn-delete.mud-button-root:hover {
  background-color: var(--color-error-lighter) !important;
  color: var(--color-dark-900) !important;
}

/* §SUBMIT-DIALOG ─── SubmitConfirmationDialog skin (Tailux) ────────────────
   Aplica sobre MudDialog con .av-form-dialog + .av-form-dialog--size-small.
   Paralelo a av-delete-dialog pero con color primary/info (no destructive).
   Cubre: header con icono PaperAirplane en chip primary soft + título,
   body con descripción, footer con Cancel + Send/Submit en primary.
   Hereda del .av-form-dialog la geometría base; solo aporta el chip del
   icono. Reusable para cualquier confirmación positiva (submit / send /
   approve / schedule). */

.av-submit-dialog .av-submit-dialog__title-stack {
  flex: 1;
  min-width: 0;
}

.av-submit-dialog__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-lg);
  background-color: rgb(from var(--color-primary-600) r g b / 0.12);
  color: var(--color-primary-600);
  flex-shrink: 0;
}

html.dark .av-submit-dialog__icon {
  background-color: rgb(from var(--color-primary-400) r g b / 0.18);
  color: var(--color-primary-400);
}

.av-submit-dialog__icon .mud-icon-root {
  width: 20px;
  height: 20px;
}

/* §RS-APPLICANT ─── ReviewApplicantInfo skin (Tailux) ──────────────────────
   Componente compartido que renderiza los 11 acordeones del Review & Submit
   (Personal / Contact / Address / Incomes / Assets / Liabilities /
   Owned Properties / Military Service / Declarations / Demographics /
   Additional Questions). Lo consumen los 3 wrappers ya migrados:
   ReviewAndSubmit (primary), AB_ReviewAndSubmit (in-app), AB_ReviewAndSubmit_Remote.
   Cubre: panel header con icono + título + badge validation, body con info-grid
   (field/required modifier), mini-cards para listas (employments, incomes,
   assets, liabilities, owned properties), address card con tag "Current",
   alerts inline para estados vacíos, edit button con av-btn outlined. */

.av-rs-applicant.mud-expand-panels {
  background: transparent !important;
}

.av-rs-applicant__panel.mud-expand-panel {
  background-color: rgb(from var(--color-primary-500) r g b / 0.02) !important;
  border: 1px solid var(--color-gray-200) !important;
  border-radius: var(--radius-lg) !important;
  margin-bottom: 8px !important;
  box-shadow: none !important;
}

html.dark .av-rs-applicant__panel.mud-expand-panel {
  background-color: rgb(from var(--color-primary-400) r g b / 0.04) !important;
  border-color: var(--color-dark-500) !important;
}

.av-rs-applicant__panel.mud-expand-panel .mud-expand-panel-header {
  padding: 10px 14px !important;
}

/* ── Panel title (icon + title + validation badge) ───────────────────── */
.av-rs-applicant__title {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.av-rs-applicant__title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-md);
  background-color: rgb(from var(--color-primary-600) r g b / 0.1);
  color: var(--color-primary-600);
  flex-shrink: 0;
}

html.dark .av-rs-applicant__title-icon {
  background-color: rgb(from var(--color-primary-400) r g b / 0.16);
  color: var(--color-primary-400);
}

.av-rs-applicant__title-icon .mud-icon-root {
  width: 16px;
  height: 16px;
}

.av-rs-applicant__title-text.mud-typography {
  font-weight: 500;
  flex: 1;
  color: var(--color-gray-800);
}

html.dark .av-rs-applicant__title-text.mud-typography {
  color: var(--color-dark-100);
}

.av-rs-applicant__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  flex-shrink: 0;
}

.av-rs-applicant__badge--success {
  color: var(--color-success);
  background-color: rgb(from var(--color-success) r g b / 0.12);
}

.av-rs-applicant__badge--error {
  color: var(--color-error);
  background-color: rgb(from var(--color-error) r g b / 0.12);
}

.av-rs-applicant__badge .mud-icon-root {
  width: 14px;
  height: 14px;
}

/* ── Panel body ──────────────────────────────────────────────────────── */
.av-rs-applicant__body {
  padding: 4px 0;
}

.av-rs-applicant__sub-eyebrow.mud-typography {
  display: block;
  color: var(--color-gray-500);
  margin-bottom: 8px;
}

html.dark .av-rs-applicant__sub-eyebrow.mud-typography {
  color: var(--color-dark-300);
}

/* ── Info grid (field label + value) ─────────────────────────────────── */
.av-rs-applicant__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

.av-rs-applicant__field {
  padding: 8px 12px;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-left: 3px solid var(--color-primary-500);
  border-radius: var(--radius-md);
}

html.dark .av-rs-applicant__field {
  background-color: var(--color-dark-700);
  border-color: var(--color-dark-500);
  border-left-color: var(--color-primary-400);
}

.av-rs-applicant__field--required {
  border-left-color: var(--color-error) !important;
  background-color: rgb(from var(--color-error) r g b / 0.04) !important;
}

html.dark .av-rs-applicant__field--required {
  border-left-color: var(--color-error) !important;
  background-color: rgb(from var(--color-error) r g b / 0.1) !important;
}

.av-rs-applicant__field--wide {
  grid-column: span 2;
}

.av-rs-applicant__label.mud-typography {
  display: block;
  color: var(--color-gray-500);
  margin-bottom: 2px;
}

html.dark .av-rs-applicant__label.mud-typography {
  color: var(--color-dark-300);
}

.av-rs-applicant__value.mud-typography {
  color: var(--color-gray-800);
  font-weight: 500;
}

html.dark .av-rs-applicant__value.mud-typography {
  color: var(--color-dark-100);
}

.av-rs-applicant__value--error.mud-typography {
  color: var(--color-error) !important;
}

.av-rs-applicant__value--warning.mud-typography {
  color: var(--color-warning-darker);
}

html.dark .av-rs-applicant__value--warning.mud-typography {
  color: var(--color-warning-lighter);
}

.av-rs-applicant__value--success.mud-typography {
  color: var(--color-success-darker);
}

html.dark .av-rs-applicant__value--success.mud-typography {
  color: var(--color-success-lighter);
}

/* ── Mini cards (employments, incomes, assets, liabilities, properties) ── */
.av-rs-applicant__list {
  margin-bottom: 8px;
}

.av-rs-applicant__mini-card.mud-paper {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
}

html.dark .av-rs-applicant__mini-card.mud-paper {
  background-color: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

.av-rs-applicant__mini-icon.mud-icon-root {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.av-rs-applicant__mini-icon--primary {
  color: var(--color-primary-600);
}

html.dark .av-rs-applicant__mini-icon--primary {
  color: var(--color-primary-400);
}

.av-rs-applicant__mini-icon--success {
  color: var(--color-success);
}

.av-rs-applicant__mini-icon--warning {
  color: var(--color-warning);
}

.av-rs-applicant__mini-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.av-rs-applicant__currency.mud-typography {
  font-weight: 600;
  color: var(--color-success-darker);
  flex-shrink: 0;
}

html.dark .av-rs-applicant__currency.mud-typography {
  color: var(--color-success-lighter);
}

.av-rs-applicant__currency--warning.mud-typography {
  color: var(--color-warning-darker);
}

html.dark .av-rs-applicant__currency--warning.mud-typography {
  color: var(--color-warning-lighter);
}

/* ── Address card (current address with tag + since date) ────────────── */
.av-rs-applicant__address-card.mud-paper {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-left: 3px solid var(--color-primary-500);
  border-radius: var(--radius-lg);
}

html.dark .av-rs-applicant__address-card.mud-paper {
  background-color: var(--color-dark-700);
  border-color: var(--color-dark-500);
  border-left-color: var(--color-primary-400);
}

.av-rs-applicant__address-tag.mud-typography {
  display: inline-block;
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: 9999px;
  background-color: rgb(from var(--color-primary-600) r g b / 0.12);
  color: var(--color-primary-600);
  font-weight: 600;
  letter-spacing: 0.04em;
}

html.dark .av-rs-applicant__address-tag.mud-typography {
  background-color: rgb(from var(--color-primary-400) r g b / 0.18);
  color: var(--color-primary-400);
}

.av-rs-applicant__address-since.mud-typography {
  color: var(--color-gray-500);
}

html.dark .av-rs-applicant__address-since.mud-typography {
  color: var(--color-dark-300);
}

/* ── Inline chip (employment "Current" marker) ────────────────────────── */
.av-rs-applicant__chip.mud-typography {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 9999px;
  font-weight: 600;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.av-rs-applicant__chip--success.mud-typography {
  background-color: rgb(from var(--color-success) r g b / 0.12);
  color: var(--color-success-darker);
}

html.dark .av-rs-applicant__chip--success.mud-typography {
  background-color: rgb(from var(--color-success) r g b / 0.18);
  color: var(--color-success-lighter);
}

/* ── "More N items" indicator ─────────────────────────────────────────── */
.av-rs-applicant__more.mud-typography {
  display: block;
  color: var(--color-gray-500);
  font-style: italic;
}

html.dark .av-rs-applicant__more.mud-typography {
  color: var(--color-dark-300);
}

/* ── Edit button ──────────────────────────────────────────────────────── */
.av-rs-applicant__edit-btn.mud-button-root {
  margin-top: 12px;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media screen and (max-width: 600px) {
  .av-rs-applicant__grid {
    grid-template-columns: 1fr;
  }

  .av-rs-applicant__field--wide {
    grid-column: span 1;
  }

  .av-rs-applicant__panel.mud-expand-panel .mud-expand-panel-header {
    padding: 8px 10px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   av-activation — Applicant activation transition page
   /applicant-activation/{ApplicantId}?stamp=...
   Página efímera que activa la cuenta del applicant, hace login
   y redirige. 3 estados: loading (primary spinner), success
   (check-badge verde + progress lineal), error (exclamation
   circle rojo + CTA "Go To Login"). Hereda del patrón visual de
   av-cb-submitted pero el icon-pill y el halo tintan según el
   modifier --loading / --success / --error.
   ───────────────────────────────────────────────────────────── */

.av-activation {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 200px);
  padding: 24px 16px;
}

.av-activation__card {
  position: relative;
  overflow: hidden;
  max-width: 560px;
  width: 100%;
  padding: 48px 40px;
  border-radius: var(--radius-xl);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  animation: avActivationFadeIn 350ms ease-out;
}

html.dark .av-activation__card {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

.av-activation__card--loading {
  background: linear-gradient(
    135deg,
    rgb(from var(--color-primary-500) r g b / 0.05) 0%,
    var(--color-white) 60%,
    var(--color-white) 100%
  );
}

html.dark .av-activation__card--loading {
  background: linear-gradient(
    135deg,
    rgb(from var(--color-primary-400) r g b / 0.1) 0%,
    var(--color-dark-700) 60%,
    var(--color-dark-700) 100%
  );
}

.av-activation__card--success {
  background: linear-gradient(
    135deg,
    rgb(from var(--color-success) r g b / 0.06) 0%,
    rgb(from var(--color-primary-500) r g b / 0.03) 60%,
    var(--color-white) 100%
  );
}

html.dark .av-activation__card--success {
  background: linear-gradient(
    135deg,
    rgb(from var(--color-success-lighter) r g b / 0.1) 0%,
    rgb(from var(--color-primary-400) r g b / 0.06) 60%,
    var(--color-dark-700) 100%
  );
}

.av-activation__card--error {
  background: linear-gradient(
    135deg,
    rgb(from var(--color-error) r g b / 0.06) 0%,
    var(--color-white) 60%,
    var(--color-white) 100%
  );
}

html.dark .av-activation__card--error {
  background: linear-gradient(
    135deg,
    rgb(from var(--color-error) r g b / 0.1) 0%,
    var(--color-dark-700) 60%,
    var(--color-dark-700) 100%
  );
}

@keyframes avActivationFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Decorative blobs — tinten según el estado activo via card modifier */
.av-activation__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  opacity: 0.45;
}

.av-activation__blob--a {
  width: 220px;
  height: 220px;
  right: -80px;
  top: -80px;
  background: radial-gradient(
    circle,
    var(--color-primary-300) 0%,
    transparent 70%
  );
}

.av-activation__blob--b {
  width: 180px;
  height: 180px;
  left: -60px;
  bottom: -80px;
  background: radial-gradient(
    circle,
    var(--color-primary-300) 0%,
    transparent 70%
  );
}

.av-activation__card--success .av-activation__blob--a {
  background: radial-gradient(
    circle,
    var(--color-success-lighter) 0%,
    transparent 70%
  );
}

.av-activation__card--success .av-activation__blob--b {
  background: radial-gradient(
    circle,
    var(--color-primary-300) 0%,
    transparent 70%
  );
}

.av-activation__card--error .av-activation__blob--a {
  background: radial-gradient(circle, var(--color-error) 0%, transparent 70%);
}

.av-activation__card--error .av-activation__blob--b {
  background: radial-gradient(circle, var(--color-error) 0%, transparent 70%);
}

html.dark .av-activation__blob {
  opacity: 0.25;
}

/* Content stack */
.av-activation__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

/* Hero icon con halo pulsante */
.av-activation__icon-wrapper {
  position: relative;
  width: 88px;
  height: 88px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.av-activation__icon-halo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: avActivationHalo 2.4s ease-in-out infinite;
}

.av-activation__card--loading .av-activation__icon-halo {
  background: rgb(from var(--color-primary-500) r g b / 0.14);
}

.av-activation__card--success .av-activation__icon-halo {
  background: rgb(from var(--color-success) r g b / 0.12);
}

.av-activation__card--error .av-activation__icon-halo {
  background: rgb(from var(--color-error) r g b / 0.12);
}

html.dark .av-activation__card--loading .av-activation__icon-halo {
  background: rgb(from var(--color-primary-400) r g b / 0.2);
}

html.dark .av-activation__card--success .av-activation__icon-halo {
  background: rgb(from var(--color-success-lighter) r g b / 0.18);
}

html.dark .av-activation__card--error .av-activation__icon-halo {
  background: rgb(from var(--color-error) r g b / 0.18);
}

@keyframes avActivationHalo {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.6;
  }

  50% {
    transform: scale(1.12);
    opacity: 0.3;
  }
}

.av-activation__icon {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
}

.av-activation__card--loading .av-activation__icon {
  background: var(--color-primary-600);
  box-shadow: 0 6px 16px rgb(from var(--color-primary-500) r g b / 0.3);
}

.av-activation__card--success .av-activation__icon {
  background: var(--color-success);
  box-shadow: 0 6px 16px rgb(from var(--color-success) r g b / 0.3);
}

.av-activation__card--error .av-activation__icon {
  background: var(--color-error);
  box-shadow: 0 6px 16px rgb(from var(--color-error) r g b / 0.3);
}

html.dark .av-activation__card--loading .av-activation__icon {
  background: var(--color-primary-500);
  box-shadow: 0 6px 16px rgb(from var(--color-primary-400) r g b / 0.4);
}

html.dark .av-activation__card--success .av-activation__icon {
  background: var(--color-success-light);
  box-shadow: 0 6px 16px rgb(from var(--color-success-lighter) r g b / 0.4);
}

html.dark .av-activation__card--error .av-activation__icon {
  background: var(--color-error);
  box-shadow: 0 6px 16px rgb(from var(--color-error) r g b / 0.4);
}

.av-activation__icon .mud-icon-root {
  width: 36px;
  height: 36px;
}

.av-activation__spinner.mud-progress-circular {
  width: 40px !important;
  height: 40px !important;
  color: var(--color-white);
}

.av-activation__spinner.mud-progress-circular .mud-progress-circular-circle {
  stroke: var(--color-white);
}

/* Tipografía */
.av-activation__title.mud-typography {
  font-weight: 700;
  color: var(--color-gray-900);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

html.dark .av-activation__title.mud-typography {
  color: var(--color-dark-50);
}

.av-activation__card--error .av-activation__title.mud-typography {
  color: var(--color-error-darker);
}

html.dark .av-activation__card--error .av-activation__title.mud-typography {
  color: var(--color-error-lighter);
}

.av-activation__subtitle.mud-typography {
  color: var(--color-gray-700);
  font-weight: 500;
  line-height: 1.4;
  max-width: 420px;
}

html.dark .av-activation__subtitle.mud-typography {
  color: var(--color-dark-100);
}

.av-activation__body.mud-typography {
  color: var(--color-gray-600);
  line-height: 1.6;
  max-width: 420px;
}

html.dark .av-activation__body.mud-typography {
  color: var(--color-dark-200);
}

.av-activation__progress.mud-progress-linear {
  margin-top: 12px;
  width: 100%;
  max-width: 320px;
}

.av-activation__cta.mud-button-root {
  margin-top: 8px;
  min-width: 220px;
}

/* Responsive */
@media (max-width: 599.98px) {
  .av-activation {
    padding: 16px;
  }

  .av-activation__card {
    padding: 32px 24px;
  }
}

/* === Mud disabled / readonly inputs — legibilidad GLOBAL ===

   Aplica a TODO el app (no scope `.av-account-form`). Tres escenarios que
   MudBlazor 9 atenúa por default y que en cualquier surface dejan el value
   ilegible:

   1. `Disabled="true"` — el wrapper recibe `.mud-disabled` y
      `mud-bridge.css §2162` aplica `opacity: 0.75` atenuando todo el subtree.
   2. `ReadOnly="true"` — el wrapper recibe `.mud-readonly`; el browser default
      pinta el `<input>` con color gris débil.
   3. **MudSelect / MudDatePicker / MudTimePicker** — sus displays son inputs
      nativos con atributo `readonly` interno (sin clase Mud wrapper). El
      browser default los atenúa aunque el wrapper Mud no lo marque.

   Estrategia: apuntar al elemento nativo `<input>` / `<textarea>` vía
   `:disabled` / `[readonly]` — es el selector más confiable porque es
   independiente de las clases que MudBlazor cambia entre versiones (`.mud-input-input`
   en Mud 8 vs `.mud-input-root.mud-input-slot` en Mud 9). Forzamos color +
   `-webkit-text-fill-color` (Chrome / Safari pintan inputs disabled con esta
   propiedad y le ganan a `color`) + `opacity: 1` para anular cualquier padre.

   Decisión de diseño: los `Disabled` reciben `bg gray-150` adicional como pista
   visual de "no editable", los `ReadOnly` mantienen bg paper limpio (porque
   suelen ser displays informativos, no inputs bloqueados — Account ID, Email
   actual, displays de Select/DatePicker). */

/* 1. Sin atenuación al wrapper de inputs marcados disabled / readonly. */
.mud-input.mud-disabled,
.mud-input.mud-input-disabled,
.mud-input.mud-readonly,
.mud-input.mud-input-readonly,
.mud-input-control.mud-disabled,
.mud-input-control.mud-readonly {
  opacity: 1 !important;
}

/* 2. Color del value en TODO input/textarea disabled o readonly. Cubre
      MudTextField + displays internos de Select/DatePicker/TimePicker/Autocomplete. */
input:disabled,
input[readonly],
textarea:disabled,
textarea[readonly] {
  color: var(--color-gray-800) !important;
  -webkit-text-fill-color: var(--color-gray-800) !important;
  opacity: 1 !important;
}

html.dark input:disabled,
html.dark input[readonly],
html.dark textarea:disabled,
html.dark textarea[readonly] {
  color: var(--color-dark-50) !important;
  -webkit-text-fill-color: var(--color-dark-50) !important;
}

/* 3. Labels disabled / readonly visibles. */
.mud-input-label.mud-disabled,
.mud-input-label.mud-readonly {
  color: var(--color-gray-700) !important;
  opacity: 1 !important;
}

html.dark .mud-input-label.mud-disabled,
html.dark .mud-input-label.mud-readonly {
  color: var(--color-dark-200) !important;
}

/* 4. SOLO los campos marcados explicitamente `Disabled="true"` reciben el
      bg gris claro como pista visual de "no editable". Los ReadOnly mantienen
      bg paper limpio (Account ID, Email actual, displays de Select/Picker —
      conceptualmente son displays informativos, no inputs bloqueados). */
.mud-input.mud-input-outlined.mud-disabled .mud-input-outlined-border,
.mud-input.mud-input-outlined.mud-input-disabled .mud-input-outlined-border {
  background-color: var(--color-gray-150) !important;
  border-color: var(--color-gray-300) !important;
  opacity: 1 !important;
}

html.dark .mud-input.mud-input-outlined.mud-disabled .mud-input-outlined-border,
html.dark
  .mud-input.mud-input-outlined.mud-input-disabled
  .mud-input-outlined-border {
  background-color: var(--color-dark-700) !important;
  border-color: var(--color-dark-500) !important;
}

/* 5. Legend del fieldset (label flotante dentro del border outlined) cuando disabled. */
.mud-input.mud-disabled .mud-input-outlined-border legend,
.mud-input.mud-input-disabled .mud-input-outlined-border legend {
  color: var(--color-gray-700) !important;
  opacity: 1 !important;
}

/* §ACCOUNT-FORM ─── /account/manage/* tabs skin (shared) ────────────────
   Skin común para los tabs de Profile/ChangeEmail/ChangePassword/Privacy/
   Social/LandingPageSettings. Layout single-column centered, max-width
   560px, fields stacked con gap 20px, actions footer con border-top. */

.av-account-form {
  padding: 12px 16px;
  max-width: 560px;
  /* Alineado a la izquierda — el container del tab ya ocupa el ancho del
       área principal de la app, centrar el form lo deja como una "isla". */
  margin: 0;
}

/* Medium variant — para Profile y Privacy (inputs un poco más anchos que default) */
.av-account-form--medium {
  max-width: 720px;
}

/* Wider variant — para tabs con muchos campos en 2 columnas (Card, ManageBooking) */
.av-account-form--wide {
  max-width: 960px;
}

/* Tab purpose hint — descripción del propósito del tab, justo debajo del título
   de la tab y arriba del contenido. Bloque pequeño + ícono primary + descripción */
.av-account-form__purpose {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 16px;
  background: rgb(from var(--color-primary-500) r g b / 0.04);
  border: 1px solid rgb(from var(--color-primary-500) r g b / 0.14);
  border-left: 3px solid var(--color-primary-600);
  border-radius: var(--radius-md);
}

html.dark .av-account-form__purpose {
  background: rgb(from var(--color-primary-400) r g b / 0.08);
  border-color: rgb(from var(--color-primary-400) r g b / 0.22);
  border-left-color: var(--color-primary-400);
}

.av-account-form__purpose-icon.mud-icon-root {
  width: 16px;
  height: 16px;
  color: var(--color-primary-600);
  margin-top: 2px;
  flex-shrink: 0;
}

html.dark .av-account-form__purpose-icon.mud-icon-root {
  color: var(--color-primary-400);
}

.av-account-form__purpose-text.mud-typography {
  color: var(--color-gray-700);
  line-height: 1.5;
}

html.dark .av-account-form__purpose-text.mud-typography {
  color: var(--color-dark-200);
}

/* Section flat — sustituye el `av-account-section` (que era MudPaper card)
   por un patrón sin contenedor visible: solo eyebrow Tailux + content stack.
   Mucho más limpio para forms largos con varias secciones. */
.av-account-form__section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.av-account-form__section:last-child {
  margin-bottom: 0;
}

.av-account-form__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 8px;
  border-radius: 9999px;
  background: rgb(from var(--color-primary-600) r g b / 0.1);
  align-self: flex-start;
  line-height: 1;
}

html.dark .av-account-form__eyebrow {
  background: rgb(from var(--color-primary-400) r g b / 0.18);
}

.av-account-form__eyebrow-icon.mud-icon-root {
  width: 14px;
  height: 14px;
  color: var(--color-primary-600);
  flex-shrink: 0;
}

html.dark .av-account-form__eyebrow-icon.mud-icon-root {
  color: var(--color-primary-400);
}

.av-account-form__eyebrow-text.mud-typography {
  color: var(--color-primary-700);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

html.dark .av-account-form__eyebrow-text.mud-typography {
  color: var(--color-primary-300);
}

.av-account-form__section-hint.mud-typography {
  color: var(--color-gray-600);
  line-height: 1.5;
  margin-bottom: 4px;
}

html.dark .av-account-form__section-hint.mud-typography {
  color: var(--color-dark-200);
}

.av-account-form__fields {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Footer de acciones — compacto y pegado al contenido. NO ocupa todo el
   ancho del container; toma solo el max-width del form (igual que los
   inputs) con padding superior sutil y sin border-top largo para que no
   se vea como una franja separada. */
.av-account-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--color-gray-150);
  max-width: 560px;
}

html.dark .av-account-form__actions {
  border-top-color: var(--color-dark-600);
}

.av-account-form__actions--medium {
  max-width: 720px;
}

.av-account-form__actions--wide {
  max-width: 960px;
}

html.dark .av-account-form__actions {
  border-top-color: var(--color-dark-500);
}

/* Section card — used inside av-account-form for grouped settings panels
   (e.g. NotificationSettings + Legal Information en Privacy tab). */
.av-account-section.mud-paper {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  margin-bottom: 16px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

html.dark .av-account-section.mud-paper {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

.av-comm__stepper-btn.mud-icon-button-root {
  width: 28px;
  height: 28px;
  color: var(--color-gray-600);
}

html.dark .av-comm__stepper-btn.mud-icon-button-root {
  color: var(--color-dark-200);
}

.av-comm__stepper-btn .mud-icon-root {
  width: 16px;
  height: 16px;
}

.av-comm__stepper-value {
  min-width: 22px;
  text-align: center;
  color: var(--color-gray-900);
}

html.dark .av-comm__stepper-value {
  color: var(--color-dark-50);
}

/* Cadence — last contacted / suppress */
.av-comm__card-divider {
  margin: 16px 0;
  border-color: var(--color-gray-100);
}

html.dark .av-comm__card-divider {
  border-color: var(--color-dark-600);
}

.av-comm__last {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.av-comm__last-when {
  color: var(--color-gray-800);
}

html.dark .av-comm__last-when {
  color: var(--color-dark-100);
}

.av-comm__last-detail {
  color: var(--color-gray-500);
}

html.dark .av-comm__last-detail {
  color: var(--color-dark-300);
}

.av-comm__link {
  color: var(--color-primary-600);
}

html.dark .av-comm__link {
  color: var(--color-primary-400);
}

.av-comm__suppress {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 12px;
  align-items: center;
}

.av-comm__row-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-gray-100);
  color: var(--color-gray-600);
}

html.dark .av-comm__row-icon {
  background: var(--color-dark-600);
  color: var(--color-dark-200);
}

.av-comm__row-icon .mud-icon-root {
  width: 16px;
  height: 16px;
}

.av-comm__row-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.av-comm__row-title {
  color: var(--color-gray-800);
}

html.dark .av-comm__row-title {
  color: var(--color-dark-100);
}

.av-comm__row-meta {
  color: var(--color-gray-500);
}

html.dark .av-comm__row-meta {
  color: var(--color-dark-300);
}

/* ── Edit dialog (Communication Preferences) ─────────────────────────────── */
.av-comm-edit__section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--color-gray-100);
}

html.dark .av-comm-edit__section {
  border-top-color: var(--color-dark-600);
}

.av-comm-edit__section-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.av-comm-edit__section-title {
  color: var(--color-gray-500);
}

html.dark .av-comm-edit__section-title {
  color: var(--color-dark-300);
}

.av-comm-edit__label {
  display: block;
  margin-bottom: 6px;
  color: var(--color-gray-500);
}

html.dark .av-comm-edit__label {
  color: var(--color-dark-300);
}

/* Toggle rows */
.av-comm-edit__toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
}

html.dark .av-comm-edit__toggle {
  border-color: var(--color-dark-500);
}

.av-comm-edit__toggle-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.av-comm-edit__toggle-title {
  color: var(--color-gray-800);
}

html.dark .av-comm-edit__toggle-title {
  color: var(--color-dark-100);
}

.av-comm-edit__toggle-desc {
  color: var(--color-gray-500);
}

html.dark .av-comm-edit__toggle-desc {
  color: var(--color-dark-300);
}

/* Locked (DNC) hint */
.av-comm-edit__locked-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: rgb(from var(--color-warning-500) r g b / 0.08);
  border: 1px solid rgb(from var(--color-warning-500) r g b / 0.25);
  color: var(--color-warning-700);
}

html.dark .av-comm-edit__locked-hint {
  background: rgb(from var(--color-warning-400) r g b / 0.1);
  border-color: rgb(from var(--color-warning-400) r g b / 0.25);
  color: var(--color-warning-200);
}

.av-comm-edit__locked-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  margin-top: 1px;
  color: inherit;
}

/* Channel rows */
.av-comm-edit__channel {
  display: grid;
  grid-template-columns: 1fr 160px;
  gap: 12px;
  align-items: center;
}

.av-comm-edit__channel-label {
  color: var(--color-gray-700);
}

html.dark .av-comm-edit__channel-label {
  color: var(--color-dark-200);
}

@media (max-width: 480px) {
  .av-comm-edit__channel {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* Read-only info box */
.av-comm-edit__readonly {
  padding: 10px 12px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  background: var(--color-gray-50);
}

html.dark .av-comm-edit__readonly {
  border-color: var(--color-dark-500);
  background: var(--color-dark-750);
}

.av-comm-edit__readonly-text {
  color: var(--color-gray-600);
}

html.dark .av-comm-edit__readonly-text {
  color: var(--color-dark-200);
}

.av-comm-edit__topics {
  margin-top: 4px;
}

.av-comm-edit__field {
  display: flex;
  flex-direction: column;
}

/* Stepper inside the edit dialog — match the dense outlined input height so it
   aligns with the sibling date field in the same row. */
.av-comm-edit__stepper {
  height: 40px;
  align-self: flex-start;
}

/* Clickable availability cells (edit dialog) */
.av-comm-edit__cell {
  cursor: pointer;
  transition:
    transform 0.1s ease,
    background-color 0.12s ease;
}

.av-comm-edit__cell:hover {
  transform: scale(1.08);
}

.av-comm-edit__cell:not(.av-comm__avail-cell--on):hover {
  background: var(--color-primary-100);
}

/* Channel matrix rows (manage-channels dialog) — grid keeps icon / content / consent / delete
   aligned across base and messaging rows. */
.av-comm-edit__ch-row {
  display: grid;
  grid-template-columns: 20px 1fr 170px 36px;
  gap: 12px;
  align-items: center;
}

.av-comm-edit__ch-icon {
  width: 20px;
  height: 20px;
  color: var(--color-gray-500);
}

.av-comm-edit__channel-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.av-comm-edit__consent {
  width: 100%;
}

/* "Other" channel — stacked name + address fields inside the content column */
.av-comm-edit__other {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.av-comm-edit__grow {
  flex: 1 1 auto;
  min-width: 0;
}

html.dark .av-comm-edit__cell:not(.av-comm__avail-cell--on):hover {
  background: rgb(from var(--color-primary-400) r g b / 0.25);
}

.av-account-section__header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.av-account-section__icon.mud-icon-root {
  width: 20px;
  height: 20px;
  color: var(--color-primary-600);
  flex-shrink: 0;
}

html.dark .av-account-section__icon.mud-icon-root {
  color: var(--color-primary-400);
}

.av-account-section__title.mud-typography {
  font-weight: 600;
  color: var(--color-gray-900);
}

html.dark .av-account-section__title.mud-typography {
  color: var(--color-dark-50);
}

.av-account-section__hint.mud-typography {
  line-height: 1.5;
}

.av-account-section__divider.mud-divider {
  margin: 4px 0;
}

.av-account-section__row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.av-account-section__row-hint.mud-typography {
  margin-left: 48px;
  line-height: 1.4;
}

.av-account-section__links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.av-account-section__link.mud-typography {
  display: inline-flex;
  align-items: center;
}

/* §ACCOUNT-AVATAR ─── /account/manage/index → Avatar tab skin ───────────
   Form simple para subir/cambiar/remover foto de perfil. Layout centered con
   preview circular (200×200), botones Upload/Remove debajo, y footer con
   Cancel/Confirm. ValidationSummary eliminado por regla del proyecto. */

.av-account-avatar {
  display: flex;
  justify-content: flex-start;
  padding: 12px 16px;
}

.av-account-avatar__preview-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 360px;
  width: 100%;
}

.av-account-avatar__preview-wrapper {
  position: relative;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--color-gray-100);
  border: 1px solid var(--color-gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

html.dark .av-account-avatar__preview-wrapper {
  background-color: var(--color-dark-600);
  border-color: var(--color-dark-500);
}

.av-account-avatar__image.mud-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

/* Saved photo rendered as a native <img> (so onerror can fall back to the
   placeholder icon). Same fill/clip as the MudImage variant above. */
img.av-account-avatar__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Preview badge — overlaid on the bottom of the circular preview while a
   freshly-picked image is staged but not yet confirmed. Signals the change is
   not applied to the profile / nav until Confirm. Dark translucent band reads
   over any image in both light and dark mode. */
.av-account-avatar__preview-badge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 8px;
  background-color: rgb(from var(--color-gray-900) r g b / 0.72);
  color: var(--color-white);
}

.av-account-avatar__preview-badge .mud-icon-root {
  width: 14px;
  height: 14px;
  color: var(--color-white);
}

.av-account-avatar__preview-badge .mud-typography {
  color: var(--color-white);
}

.av-account-avatar__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--color-gray-400);
}

html.dark .av-account-avatar__placeholder {
  color: var(--color-dark-400);
}

.av-account-avatar__placeholder .mud-icon-root {
  width: 80px;
  height: 80px;
}

/* El centrado del botón ahora viene de la utility `text-center` aplicada
   directamente en el Class= del MudFileUpload (Mud aplica text-align al
   `.mud-input-control-input-container` y el botón inline-block se centra
   automáticamente). Aquí solo: tamaño mínimo del botón + ocultar el pill
   default del filename (el info card propio reemplaza esa info). */

.av-account-avatar__upload .mud-button-root {
  min-width: 200px;
}

.av-account-avatar__upload .mud-input-control-helper-container,
.av-account-avatar__upload .mud-input-helper-text,
.av-account-avatar__upload .mud-chip {
  display: none !important;
}

.av-account-avatar__remove-btn.mud-button-root {
  min-width: 200px;
}

.av-account-avatar__hint.mud-typography {
  text-align: center;
  color: var(--color-gray-500);
  font-style: italic;
  line-height: 1.4;
  max-width: 280px;
}

html.dark .av-account-avatar__hint.mud-typography {
  color: var(--color-dark-300);
}

/* Info card del archivo seleccionado — listado vertical compacto con icono +
   label + value. Se muestra debajo del preview/upload cuando hay archivo. */
.av-account-avatar__info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  margin-top: 4px;
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
}

html.dark .av-account-avatar__info {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

.av-account-avatar__info-row {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: 10px;
}

.av-account-avatar__info-icon.mud-icon-root {
  width: 16px;
  height: 16px;
  color: var(--color-gray-500);
}

html.dark .av-account-avatar__info-icon.mud-icon-root {
  color: var(--color-dark-300);
}

.av-account-avatar__info-label.mud-typography {
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
}

html.dark .av-account-avatar__info-label.mud-typography {
  color: var(--color-dark-300);
}

.av-account-avatar__info-value.mud-typography {
  color: var(--color-gray-800);
  font-weight: 500;
  text-align: right;
  word-break: break-word;
}

html.dark .av-account-avatar__info-value.mud-typography {
  color: var(--color-dark-100);
}

.av-account-avatar__actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--color-gray-150);
  max-width: 360px;
}

html.dark .av-account-avatar__actions {
  border-top-color: var(--color-dark-600);
}

@media (max-width: 599.98px) {
  .av-account-avatar__actions {
    flex-direction: column-reverse;
    max-width: 100%;
  }

  .av-account-avatar__actions .av-btn {
    width: 100%;
  }
}

/* Chart container dentro de Account Form — ApexChart usa container width como base.
   Limitar el max-width contiene el donut a un tamaño razonable; auto-centrado. */
.av-account-form__chart {
  max-width: 360px;
  margin: 8px auto 0 auto;
}

/* === Booking Settings Panel ===
   Day pills (week chips), parameter grid (3 columnas), item cards (servicios /
   holidays). Estilo Tailux: flat sin MudPaper anidado, scope-restringido a la
   clase prefix av-booking. */

.av-booking__day-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.av-booking__params-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 599.98px) {
  .av-booking__params-grid {
    grid-template-columns: 1fr;
  }
}

.av-booking__item-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: var(--surface-1);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
}

html.dark .av-booking__item-card {
  background: var(--surface-2);
  border-color: var(--color-dark-500);
}

.av-booking__item-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px dashed var(--color-gray-200);
}

html.dark .av-booking__item-actions {
  border-top-color: var(--color-dark-500);
}

.av-booking__holiday-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1.2fr) auto;
  gap: 12px;
  align-items: start;
}

@media (max-width: 768px) {
  .av-booking__holiday-grid {
    grid-template-columns: 1fr;
  }
}

.av-booking__holiday-delete {
  align-self: center;
}

.av-booking__add-btn {
  align-self: flex-start;
}

@media (max-width: 599.98px) {
  .av-account-form__actions {
    flex-direction: column-reverse;
  }

  .av-account-form__actions .av-btn {
    width: 100%;
  }
}

/* §RECOVERY-CODES ─── 2FA recovery codes dialog ──────────────────────
   Hereda av-form-dialog. Header con icono lock + grid 2-col de codes con
   icono y monospace text. */

.av-recovery-codes__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-lg);
  background-color: rgb(from var(--color-info) r g b / 0.12);
  color: var(--color-info);
  flex-shrink: 0;
}

html.dark .av-recovery-codes__icon {
  background-color: rgb(from var(--color-info) r g b / 0.18);
  color: var(--color-info-lighter);
}

.av-recovery-codes__icon .mud-icon-root {
  width: 20px;
  height: 20px;
}

.av-recovery-codes__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  margin: 4px 0;
}

.av-recovery-codes__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
}

html.dark .av-recovery-codes__item {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

.av-recovery-codes__item-icon.mud-icon-root {
  width: 14px;
  height: 14px;
  color: var(--color-gray-500);
  flex-shrink: 0;
}

html.dark .av-recovery-codes__item-icon.mud-icon-root {
  color: var(--color-dark-300);
}

.av-recovery-codes__item-code.mud-typography {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--color-gray-900);
}

html.dark .av-recovery-codes__item-code.mud-typography {
  color: var(--color-dark-50);
}

/* §ENABLE-AUTHENTICATOR ─── 2FA enable wizard dialog ─────────────────
   Hereda av-form-dialog--size-large. Header con icono shield-check + lista
   ordenada de 3 pasos (download app, scan QR, enter code). */

.av-enable-authenticator__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-lg);
  background-color: rgb(from var(--color-primary-600) r g b / 0.12);
  color: var(--color-primary-600);
  flex-shrink: 0;
}

html.dark .av-enable-authenticator__icon {
  background-color: rgb(from var(--color-primary-400) r g b / 0.18);
  color: var(--color-primary-400);
}

.av-enable-authenticator__icon .mud-icon-root {
  width: 20px;
  height: 20px;
}

.av-enable-authenticator__steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
  margin: 8px 0 0 0;
  list-style: none;
  counter-reset: av-step;
}

.av-enable-authenticator__step {
  counter-increment: av-step;
  position: relative;
  padding: 12px 16px 12px 48px;
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
}

html.dark .av-enable-authenticator__step {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

.av-enable-authenticator__step::before {
  content: counter(av-step);
  position: absolute;
  left: 12px;
  top: 12px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-primary-600);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
}

html.dark .av-enable-authenticator__step::before {
  background: var(--color-primary-500);
}

.av-enable-authenticator__shared-key {
  display: inline-block;
  padding: 2px 8px;
  background: var(--color-gray-150);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--color-gray-900);
}

html.dark .av-enable-authenticator__shared-key {
  background: var(--color-dark-600);
  color: var(--color-dark-50);
}

.av-enable-authenticator__qr {
  margin-top: 12px;
  display: flex;
  justify-content: center;
}

/* §VIEWER-DIALOG ─── ImageViewerDialog skin (dark theme) ──────────────────
   Viewer modal para ver imágenes / PDFs / archivos descargables inline.
   Usa dark theme custom (no Tailux light) — el fondo oscuro maximiza el
   contraste del contenido (foto, scan, pdf). Disparo: TaskViewDialog click
   sobre un archivo de la lista UPLOADED FILES (extension imagen/pdf).
   Reemplaza el \3c style> embedded del razor + Material Icons + inline Style=. */

.av-viewer-dialog.mud-dialog {
  background: var(--color-dark-900) !important;
  border-radius: var(--radius-xl) !important;
  overflow: hidden;
  color: var(--color-white);
}

.av-viewer-dialog .mud-dialog-title {
  background: var(--color-dark-900) !important;
  padding: 10px 16px !important;
  min-height: auto !important;
  border-bottom: 1px solid var(--color-dark-600);
}

.av-viewer-dialog .mud-dialog-content {
  background: var(--color-dark-800) !important;
  padding: 16px !important;
}

/* Title bar — filename a la izquierda, toolbar de iconos a la derecha */
.av-viewer-dialog__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

.av-viewer-dialog__filename.mud-typography {
  color: var(--color-white);
  font-weight: 500;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}

.av-viewer-dialog__toolbar {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.av-viewer-dialog__btn.mud-icon-button {
  color: var(--color-white);
}

.av-viewer-dialog__btn.mud-icon-button:hover {
  background-color: rgb(from var(--color-white) r g b / 0.1);
}

.av-viewer-dialog__btn.mud-icon-button.mud-disabled {
  opacity: 0.4;
}

.av-viewer-dialog__zoom-pct.mud-typography {
  color: var(--color-white);
  min-width: 45px;
  text-align: center;
  font-weight: 500;
}

.av-viewer-dialog__divider.mud-divider {
  border-color: rgb(from var(--color-white) r g b / 0.2);
  height: 20px;
  margin: 0 4px;
}

/* Content area — fondo más oscuro, viewport 75vw / 70vh */
.av-viewer-dialog__content {
  width: 75vw;
  height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-dark-750);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Image viewer — scroll container + centered + zoom/rotate transform */
.av-viewer-dialog__image-scroll {
  width: 100%;
  height: 100%;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.av-viewer-dialog__image-center {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  min-width: 100%;
  min-height: 100%;
}

.av-viewer-dialog__image {
  max-width: calc(75vw - 40px);
  max-height: calc(70vh - 40px);
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 200ms ease;
  box-shadow: 0 8px 32px rgb(0 0 0 / 0.4);
  border-radius: var(--radius-sm);
}

/* PDF viewer — full-width embed */
.av-viewer-dialog__pdf {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.av-viewer-dialog__pdf-embed {
  width: 100%;
  height: 100%;
  border: none;
}

/* Fallback "Preview not available" — para archivos no renderizables inline */
.av-viewer-dialog__no-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 100%;
  padding: 24px;
  text-align: center;
}

.av-viewer-dialog__no-preview-icon.mud-icon-root {
  width: 100px;
  height: 100px;
  color: rgb(from var(--color-white) r g b / 0.5);
}

.av-viewer-dialog__no-preview-title.mud-typography {
  color: var(--color-white);
  font-weight: 600;
}

.av-viewer-dialog__no-preview-hint.mud-typography {
  color: rgb(from var(--color-white) r g b / 0.7);
}

.av-viewer-dialog__no-preview-cta.mud-button-root {
  margin-top: 8px;
  min-width: 160px;
}

/* Responsive — en pantallas pequeñas, el viewer toma casi toda la pantalla */
@media (max-width: 599.98px) {
  .av-viewer-dialog__content {
    width: calc(100vw - 32px);
    height: calc(100vh - 120px);
  }

  .av-viewer-dialog__filename.mud-typography {
    max-width: 140px;
  }

  .av-viewer-dialog__image {
    max-width: calc(100vw - 72px);
    max-height: calc(100vh - 160px);
  }
}

/* §SMS-TERMS ─── SMS terms & conditions dialog ───────────────────────
   Hereda av-form-dialog--size-large. Header con chat icon + título; body
   contiene la página SmsTerms (legal text). Acciones: Decline + Accept. */

.av-sms-terms__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-lg);
  background-color: rgb(from var(--color-info) r g b / 0.12);
  color: var(--color-info);
  flex-shrink: 0;
}

html.dark .av-sms-terms__icon {
  background-color: rgb(from var(--color-info) r g b / 0.18);
  color: var(--color-info-lighter);
}

.av-sms-terms__icon .mud-icon-root {
  width: 20px;
  height: 20px;
}

.av-sms-terms__content {
  max-height: 65vh;
  overflow-y: auto;
  padding: 8px 12px 12px 12px;
}

/* === SMS Terms — variante embedded (dialog) ===
   Restyle Tailux: eyebrow numerado (chip primary tinted + número monospace + título),
   párrafos con line-height generosa, intro alert soft, footer flat sin MudPaper.
   Reemplaza el look "FontAwesome + h5 raw" del legacy. */

.av-sms-terms-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
}

/* Intro alert dentro del dialog embedded — espaciado top/bottom. */
.av-sms-terms__intro {
  margin-bottom: 20px;
}

.av-sms-terms__sections {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.av-sms-terms__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px 16px 16px;
  background: var(--surface-1);
  border: 1px solid var(--color-gray-150);
  border-left: 3px solid var(--color-primary-500);
  border-radius: var(--radius-md);
  transition:
    border-color 150ms ease,
    background 150ms ease;
}

html.dark .av-sms-terms__section {
  background: rgb(from var(--color-dark-700) r g b / 0.5);
  border-color: var(--color-dark-500);
  border-left-color: var(--color-primary-400);
}

.av-sms-terms__section:hover {
  border-left-color: var(--color-primary-600);
  background: var(--surface-2);
}

html.dark .av-sms-terms__section:hover {
  background: var(--color-dark-700);
  border-left-color: var(--color-primary-300);
}

.av-sms-terms__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  padding: 4px 12px 4px 8px;
  border-radius: 9999px;
  background: rgb(from var(--color-primary-600) r g b / 0.1);
  color: var(--color-primary-700);
}

html.dark .av-sms-terms__eyebrow {
  background: rgb(from var(--color-primary-400) r g b / 0.18);
  color: var(--color-primary-200);
}

.av-sms-terms__eyebrow-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 1px 6px;
  background: var(--color-primary-600);
  color: var(--color-white);
  border-radius: 4px;
  line-height: 1.4;
}

html.dark .av-sms-terms__eyebrow-num {
  background: var(--color-primary-400);
  color: var(--color-dark-900);
}

.av-sms-terms__eyebrow-text {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.av-sms-terms__paragraph {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-gray-700);
}

html.dark .av-sms-terms__paragraph {
  color: var(--color-dark-200);
}

/* Footer "Questions about these terms?" embedded — flex con icon + texto,
   sin MudPaper (caja dentro de caja). Tinte primary muy sutil. */
.av-sms-terms__footer {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  margin-top: 20px;
  background: rgb(from var(--color-primary-500) r g b / 0.04);
  border: 1px solid rgb(from var(--color-primary-500) r g b / 0.12);
  border-left: 3px solid var(--color-primary-600);
  border-radius: var(--radius-md);
}

html.dark .av-sms-terms__footer {
  background: rgb(from var(--color-primary-400) r g b / 0.08);
  border-color: rgb(from var(--color-primary-400) r g b / 0.2);
  border-left-color: var(--color-primary-400);
}

.av-sms-terms__footer-icon {
  width: 20px;
  height: 20px;
  color: var(--color-primary-600);
  flex-shrink: 0;
  margin-top: 2px;
}

html.dark .av-sms-terms__footer-icon {
  color: var(--color-primary-400);
}

.av-sms-terms__footer-title {
  font-weight: 600;
  color: var(--color-gray-800);
  margin-bottom: 2px;
}

html.dark .av-sms-terms__footer-title {
  color: var(--color-dark-100);
}

.av-sms-terms__footer-text {
  color: var(--color-gray-600);
}

html.dark .av-sms-terms__footer-text {
  color: var(--color-dark-300);
}

/* =============================================================================
   File Contacts wizard — step indicator (.fc-stepper)

   GLOBAL on purpose (not in the dialog's scoped .razor.css): the Add File Contact
   Participant dialog is portaled into MudDialogProvider and built entirely from
   Mud components, so the scoped-CSS scope attribute never reaches the stepper's
   <div>s and ::deep rules don't apply. The markup is driven by _currentStep
   (done / current / pending) — see AddFileContactParticipantDialog.razor.

   Colors are primary-based + opacity (not gray) so the indicator reads on the
   dialog header in BOTH light and dark mode; the number/label TYPOGRAPHY comes
   from MudText (Typo.caption / Typo.body2) — this block sets color/layout only.
   align-items:center keeps every connector centered on the node circles, which
   is what the old MudStepper got wrong.
   ============================================================================= */

.fc-stepper {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 4px 0 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgb(from var(--color-primary-500) r g b / 0.12);
}

.fc-stepper__item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.fc-stepper__node {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 2px solid rgb(from var(--color-primary-500) r g b / 0.4);
  background: transparent;
  color: var(--color-primary-500);
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    color 150ms ease;
}

.fc-stepper__node .mud-icon-root {
  color: var(--color-white);
}

.fc-stepper__label {
  white-space: nowrap;
  opacity: 0.6;
  transition:
    opacity 150ms ease,
    color 150ms ease;
}

/* Connector — grows to fill the gap, centered on the circles by the row's align-items. */
.fc-stepper__connector {
  flex: 1 1 auto;
  min-width: 16px;
  height: 2px;
  margin: 0 8px;
  border-radius: 9999px;
  background: rgb(from var(--color-primary-500) r g b / 0.3);
  transition: background-color 150ms ease;
}

.fc-stepper__connector--done {
  background: var(--color-primary-500);
}

/* Current + completed steps share the filled primary circle. */
.fc-stepper__item--current .fc-stepper__node,
.fc-stepper__item--done .fc-stepper__node {
  border-color: var(--color-primary-600);
  background: var(--color-primary-600);
  color: var(--color-white);
}

.fc-stepper__item--current .fc-stepper__label {
  opacity: 1;
  color: var(--color-primary-500);
}

.fc-stepper__item--done .fc-stepper__label {
  opacity: 1;
}

/* =============================================================================
   File Contacts wizard — Step 1 role picker (group tray + role cards)

   GLOBAL for the same reason as .fc-stepper above: the dialog is portaled into
   MudDialogProvider and built from Mud components, so the scoped .razor.css
   attribute never reaches this DOM and ::deep rules do not apply. Color/layout
   only — typography comes from Typo.*; every color is a token (no hex).
   ============================================================================= */

/* Body eyebrow + heading. */
.fc-wizard-eyebrow {
  color: var(--color-primary-600);
  display: block;
}
html.dark .fc-wizard-eyebrow {
  color: var(--color-primary-400);
}

.fc-wizard-heading {
  margin-top: 2px;
}

/* Column eyebrows (GROUP / ROLE). */
.fc-wizard-col-eyebrow {
  color: var(--color-gray-500);
  padding-left: 4px;
}
html.dark .fc-wizard-col-eyebrow {
  color: var(--color-dark-300);
}

/* ----- Group column: sunken tray -----
   In MudBlazor 9 the Class passed to MudListItem/MudChip does NOT land on
   .mud-list-item / .mud-chip, so every rule is anchored on the CONTAINER class
   (which lands on MudPaper/MudList) + Mud's own structural classes, and uses
   !important where it must beat Mud's own !important (e.g. .mud-primary-text). */
.fc-wizard-group-tray.mud-paper {
  background: var(--surface-2);
  border: 1px solid var(--color-gray-150);
  border-radius: 14px;
  padding: 8px;
  max-height: 420px;
  overflow-y: auto;
}
html.dark .fc-wizard-group-tray.mud-paper {
  background: var(--color-dark-800);
  border-color: var(--color-dark-600);
}

.fc-wizard-group-tray .mud-list {
  padding: 0;
}

/* Each row transparent; hover/selected lift to a surface card. */
.fc-wizard-group-tray .mud-list-item {
  border: 1px solid transparent;
  border-radius: 10px;
  margin-bottom: 4px;
  min-height: 46px;
  padding: 8px 12px;
  background-color: transparent;
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.fc-wizard-group-tray .mud-list-item:last-child {
  margin-bottom: 0;
}
.fc-wizard-group-tray .mud-list-item:hover {
  background-color: var(--surface-1);
  border-color: var(--color-gray-150);
}
html.dark .fc-wizard-group-tray .mud-list-item:hover {
  background-color: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

/* Selected row = lifted white card (Mud marks it .mud-selected-item). */
.fc-wizard-group-tray .mud-selected-item,
.fc-wizard-group-tray .mud-selected-item:hover {
  background-color: var(--surface-1) !important;
  border-color: var(--color-gray-200);
  box-shadow: var(--shadow-sm);
}
html.dark .fc-wizard-group-tray .mud-selected-item,
html.dark .fc-wizard-group-tray .mud-selected-item:hover {
  background-color: var(--color-dark-700) !important;
  border-color: var(--color-dark-500);
}

/* Label — our ink; selected stays dark (beats .mud-primary-text !important).
   Anchored on .mud-list-item (not .mud-list-item-text) so it holds whether or
   not ChildContent is wrapped in the text slot. */
.fc-wizard-group-tray .mud-list-item .mud-typography {
  color: var(--color-gray-700);
}
.fc-wizard-group-tray .mud-selected-item .mud-typography {
  color: var(--color-gray-900) !important;
}
html.dark .fc-wizard-group-tray .mud-list-item .mud-typography {
  color: var(--color-dark-200);
}
html.dark .fc-wizard-group-tray .mud-selected-item .mud-typography {
  color: var(--color-dark-50) !important;
}

/* Group icon — muted, our primary when selected, 18px glyph. */
.fc-wizard-group-tray .mud-list-item-icon {
  color: var(--color-gray-500);
  min-width: 0;
  margin-right: 12px;
}
html.dark .fc-wizard-group-tray .mud-list-item-icon {
  color: var(--color-dark-300);
}
.fc-wizard-group-tray .mud-selected-item .mud-list-item-icon {
  color: var(--color-primary-600) !important;
}
html.dark .fc-wizard-group-tray .mud-selected-item .mud-list-item-icon {
  color: var(--color-primary-400) !important;
}
.fc-wizard-group-tray .mud-list-item-icon .mud-icon-root {
  width: 18px;
  height: 18px;
}

/* Group count pill — circular 22px badge. */
.fc-wizard-group-tray .mud-chip {
  background-color: var(--color-gray-100) !important;
  color: var(--color-gray-600) !important;
  border-radius: var(--radius-full) !important;
  width: 22px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  margin: 0;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}
html.dark .fc-wizard-group-tray .mud-chip {
  background-color: var(--color-dark-600) !important;
  color: var(--color-dark-200) !important;
}
.fc-wizard-group-tray .mud-selected-item .mud-chip {
  background-color: rgb(from var(--color-primary-500) r g b / 0.14) !important;
  color: var(--color-primary-700) !important;
}
html.dark .fc-wizard-group-tray .mud-selected-item .mud-chip {
  color: var(--color-primary-300) !important;
}

/* ----- Role column: free-standing cards (container + structural anchors) ----- */
.fc-wizard-role-list.mud-paper {
  background: transparent;
  box-shadow: none;
  padding: 0;
  max-height: 420px;
  overflow-y: auto;
}
.fc-wizard-role-list .mud-list {
  padding: 0;
}

.fc-wizard-role-list .mud-list-item {
  border: 1px solid var(--color-gray-200);
  border-radius: 12px;
  background-color: var(--surface-1);
  margin-bottom: 10px;
  padding: 12px;
  transition: background-color .12s ease, border-color .12s ease;
}
.fc-wizard-role-list .mud-list-item:last-child {
  margin-bottom: 0;
}
html.dark .fc-wizard-role-list .mud-list-item {
  border-color: var(--color-dark-500);
  background-color: var(--color-dark-700);
}
.fc-wizard-role-list .mud-list-item:hover {
  border-color: var(--color-primary-300);
  background-color: rgb(from var(--color-primary-500) r g b / 0.04);
}
.fc-wizard-role-list .mud-selected-item,
.fc-wizard-role-list .mud-selected-item:hover {
  border-color: var(--color-primary-500) !important;
  background-color: rgb(from var(--color-primary-500) r g b / 0.08) !important;
}

/* Role label — our ink. */
.fc-wizard-role-list .mud-list-item .mud-typography {
  color: var(--color-gray-800);
}
.fc-wizard-role-list .mud-selected-item .mud-typography {
  color: var(--color-gray-900) !important;
}
html.dark .fc-wizard-role-list .mud-list-item .mud-typography {
  color: var(--color-dark-100);
}

/* Role icon rendered as a circular badge, 18px glyph. */
.fc-wizard-role-list .mud-list-item-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 999px;
  border: 1px solid var(--color-gray-200);
  background-color: var(--surface-1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-500);
  margin-right: 12px;
}
html.dark .fc-wizard-role-list .mud-list-item-icon {
  border-color: var(--color-dark-500);
  background-color: var(--color-dark-600);
  color: var(--color-dark-200);
}
.fc-wizard-role-list .mud-selected-item .mud-list-item-icon {
  border-color: var(--color-primary-300);
  color: var(--color-primary-600) !important;
}
html.dark .fc-wizard-role-list .mud-selected-item .mud-list-item-icon {
  color: var(--color-primary-300) !important;
}
.fc-wizard-role-list .mud-list-item-icon .mud-icon-root {
  width: 18px;
  height: 18px;
}

/* Role chips — pill; colors keyed on Mud's structural color classes. */
.fc-wizard-role-list .mud-chip {
  border-radius: var(--radius-full) !important;
  height: 22px;
  padding: 0 8px;
  margin: 0;
  background-color: var(--color-gray-100) !important;
  color: var(--color-gray-600) !important;
  font-variant-numeric: tabular-nums;
}
html.dark .fc-wizard-role-list .mud-chip {
  background-color: var(--color-dark-600) !important;
  color: var(--color-dark-200) !important;
}
/* Manual-entry source → soft amber. */
.fc-wizard-role-list .mud-chip-color-warning {
  background-color: rgb(from var(--color-warning) r g b / 0.16) !important;
  color: var(--color-warning-darker) !important;
}
html.dark .fc-wizard-role-list .mud-chip-color-warning {
  color: var(--color-warning-lighter) !important;
}
/* Participant count → soft primary. */
.fc-wizard-role-list .mud-chip-color-primary {
  background-color: rgb(from var(--color-primary-500) r g b / 0.14) !important;
  color: var(--color-primary-700) !important;
}
html.dark .fc-wizard-role-list .mud-chip-color-primary {
  color: var(--color-primary-300) !important;
}

/* ----- Shell: header mark, subtitle, body, and later steps -----
   Migrated here from the dialog's scoped .razor.css: those ::deep rules never
   matched (the portaled dialog emits no element carrying the scope attribute),
   so the header mark rendered as the default outlined-primary blue circle. */

/* Header mark — soft tinted rounded square, not an outlined blue circle. */
.fc-wizard-header-icon.mud-avatar {
  background: rgb(from var(--color-primary-500) r g b / 0.10);
  color: var(--color-primary-600);
  border: none;
  border-radius: 12px;
}
html.dark .fc-wizard-header-icon.mud-avatar {
  background: rgb(from var(--color-primary-400) r g b / 0.16);
  color: var(--color-primary-300);
}
.fc-wizard-header-subtitle {
  color: var(--color-gray-500);
}
html.dark .fc-wizard-header-subtitle {
  color: var(--color-dark-300);
}

/* Body sizes to its content — no reserved min-height (it showed as an empty gap
   between the search field and the selected-user card on short steps). */
.fc-wizard-dialog .mud-dialog-content {
  overflow-x: hidden;
}

/* Step 2 (Find / Create). */
.fc-wizard-source-block {
  margin-top: 12px;
}
.fc-wizard-source-roles {
  color: var(--color-primary-600);
}
.fc-wizard-applicant-list {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
  background: var(--surface-1);
  padding: 4px;
}
html.dark .fc-wizard-applicant-list {
  border-color: var(--color-dark-500);
}

/* Step 3 (Fields) section header. */
.fc-wizard-field-section {
  color: var(--color-gray-500);
  margin-top: 8px;
  margin-bottom: 4px;
}

/* Step 4 (Permissions & Review). */
.fc-wizard-review-eyebrow {
  color: var(--color-gray-500);
  display: block;
}

/* Step 2 (AvalmeUser) — "N MATCH" header + selected user card (mockup). */
.fc-wizard-match-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 12px;
}
.fc-wizard-match-eyebrow {
  color: var(--color-gray-500);
  flex-shrink: 0;
}
html.dark .fc-wizard-match-eyebrow {
  color: var(--color-dark-300);
}
.fc-wizard-match-rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--color-gray-200);
}
html.dark .fc-wizard-match-rule {
  background: var(--color-dark-500);
}

.fc-wizard-user {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 16px;
  background: var(--surface-1);
  border: 1px solid var(--color-gray-200);
  border-radius: 12px;
}
html.dark .fc-wizard-user {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}
.fc-wizard-user--selected {
  border-color: var(--color-primary-600);
  background: rgb(from var(--color-primary-500) r g b / 0.04);
}
html.dark .fc-wizard-user--selected {
  border-color: var(--color-primary-400);
  background: rgb(from var(--color-primary-400) r g b / 0.10);
}
.fc-wizard-user__id {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}
.fc-wizard-user__id .mud-typography {
  margin: 0;
}
.fc-wizard-user__name {
  color: var(--color-gray-900);
}
html.dark .fc-wizard-user__name {
  color: var(--color-dark-50);
}
.fc-wizard-user__email {
  color: var(--color-gray-500);
}
html.dark .fc-wizard-user__email {
  color: var(--color-dark-300);
}
.fc-wizard-user__role {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 3px 12px;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-full);
}
.fc-wizard-user__role .mud-typography {
  margin: 0;
  color: var(--color-gray-700);
  white-space: nowrap;
}
html.dark .fc-wizard-user__role {
  border-color: var(--color-dark-500);
}
html.dark .fc-wizard-user__role .mud-typography {
  color: var(--color-dark-100);
}
.fc-wizard-user__selected {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  background: rgb(from var(--color-success) r g b / 0.12);
  border: 1px solid rgb(from var(--color-success) r g b / 0.28);
  color: var(--color-success-darker);
}
html.dark .fc-wizard-user__selected {
  color: var(--color-success-lighter);
  border-color: rgb(from var(--color-success) r g b / 0.40);
}
.fc-wizard-user__selected .mud-typography {
  margin: 0;
  color: inherit;
}
.fc-wizard-user__selected .mud-icon-root {
  width: 16px;
  height: 16px;
}

/* Info banner (soft info box) — mirrors the tab's fc-grp-banner--info for the wizard. */
.fc-wizard-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  margin-top: 12px;
  border-radius: 12px;
  background: rgb(from var(--color-info) r g b / 0.10);
  border: 1px solid rgb(from var(--color-info) r g b / 0.22);
  color: var(--color-info-darker);
}
html.dark .fc-wizard-info {
  color: var(--color-info-lighter);
}
.fc-wizard-info .mud-typography {
  margin: 0;
  color: inherit;
}
.fc-wizard-info .mud-icon-root {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: inherit;
}

/* Step 2 role note — "This contact will take the role [chip] on the file." */
.fc-wizard-role-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: var(--color-gray-500);
}
html.dark .fc-wizard-role-note {
  color: var(--color-dark-300);
}
.fc-wizard-role-note .mud-typography {
  margin: 0;
  color: inherit;
}
.fc-wizard-role-note__chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-full);
}
html.dark .fc-wizard-role-note__chip {
  border-color: var(--color-dark-500);
}
.fc-wizard-role-note__chip .mud-typography {
  color: var(--color-gray-700);
}
html.dark .fc-wizard-role-note__chip .mud-typography {
  color: var(--color-dark-100);
}

/* File Contacts row-action menu — 18px item icons (menu popover is portaled → global). */
.fc-menu-list .mud-menu-item-icon.mud-icon-root {
  width: 18px !important;
  height: 18px !important;
}

/* Selection picker dialog (Loan Officer Assistants, and similar directory pickers). */
.av-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 360px;
}
.av-picker__subtitle {
  color: var(--color-gray-500);
}
html.dark .av-picker__subtitle {
  color: var(--color-dark-300);
}
.av-picker__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--color-gray-150);
  color: var(--color-gray-600);
  flex-shrink: 0;
}
html.dark .av-picker__mark {
  background: var(--color-dark-600);
  color: var(--color-dark-200);
}
.av-picker__label {
  color: var(--color-gray-700);
  margin-bottom: 2px;
}
html.dark .av-picker__label {
  color: var(--color-dark-100);
}
.av-picker__search .mud-input-root,
.av-picker__search .mud-input-outlined-border {
  border-radius: var(--radius-lg);
}
.av-picker__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}
.av-picker__eyebrow {
  color: var(--color-gray-500);
  flex-shrink: 0;
}
html.dark .av-picker__eyebrow {
  color: var(--color-dark-300);
}
.av-picker__rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--color-gray-200);
}
html.dark .av-picker__rule {
  background: var(--color-dark-500);
}
.av-picker__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
  margin-top: 8px;
}
.av-picker__row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  text-align: left;
  cursor: pointer;
  background: var(--surface-1);
  border: 1px solid var(--color-gray-200);
  border-radius: 12px;
  transition: border-color .15s ease, background .15s ease;
}
.av-picker__row:hover {
  border-color: var(--color-gray-300);
  background: rgb(from var(--color-gray-500) r g b / 0.04);
}
.av-picker__row--selected {
  border-color: var(--color-primary-600);
  background: rgb(from var(--color-primary-500) r g b / 0.06);
}
html.dark .av-picker__row {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}
html.dark .av-picker__row--selected {
  border-color: var(--color-primary-400);
  background: rgb(from var(--color-primary-400) r g b / 0.12);
}
.av-picker__radio {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-gray-300);
  flex-shrink: 0;
  position: relative;
}
.av-picker__radio--on {
  border-color: var(--color-primary-600);
}
.av-picker__radio--on::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: var(--radius-full);
  background: var(--color-primary-600);
}
html.dark .av-picker__radio {
  border-color: var(--color-dark-400);
}
html.dark .av-picker__radio--on {
  border-color: var(--color-primary-400);
}
html.dark .av-picker__radio--on::after {
  background: var(--color-primary-400);
}
.av-picker__row-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}
.av-picker__row-text .mud-typography {
  margin: 0;
}
.av-picker__row-name {
  color: var(--color-gray-900);
}
html.dark .av-picker__row-name {
  color: var(--color-dark-50);
}
.av-picker__row-email {
  color: var(--color-gray-500);
}
html.dark .av-picker__row-email {
  color: var(--color-dark-300);
}
.av-picker__row--dashed {
  border-style: dashed;
}
.av-picker__nmls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  text-align: right;
}
.av-picker__nmls .mud-typography {
  margin: 0;
}
.av-picker__nmls-label {
  color: var(--color-gray-400);
}
html.dark .av-picker__nmls-label {
  color: var(--color-dark-300);
}
.av-picker__nmls-value {
  color: var(--color-gray-700);
}
html.dark .av-picker__nmls-value {
  color: var(--color-dark-100);
}
.av-picker__assigning {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: auto;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-gray-200);
  background: var(--surface-1);
}
html.dark .av-picker__assigning {
  border-color: var(--color-dark-500);
  background: var(--color-dark-700);
}
.av-picker__assigning .mud-typography {
  margin: 0;
}
.av-picker__assigning-label {
  color: var(--color-gray-500);
}
html.dark .av-picker__assigning-label {
  color: var(--color-dark-300);
}
.av-picker__assigning-name {
  color: var(--color-gray-900);
}
html.dark .av-picker__assigning-name {
  color: var(--color-dark-50);
}

/* Step 4 (Permissions & Review) — identity card, 2-col grid, key/value rows, consent box. */
.fc-wizard-identity {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  margin: 16px 0;
  background: var(--surface-1);
  border: 1px solid var(--color-gray-200);
  border-radius: 12px;
}
html.dark .fc-wizard-identity {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}
.fc-wizard-identity__avatar {
  flex-shrink: 0;
}
.fc-wizard-identity__avatar--empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  border: 1px dashed var(--color-gray-300);
  color: var(--color-gray-400);
}
html.dark .fc-wizard-identity__avatar--empty {
  border-color: var(--color-dark-400);
  color: var(--color-dark-300);
}
.fc-wizard-identity__avatar--empty .mud-icon-root {
  width: 20px;
  height: 20px;
}
.fc-wizard-identity__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}
.fc-wizard-identity__text .mud-typography {
  margin: 0;
}
.fc-wizard-identity__name {
  color: var(--color-gray-900);
}
html.dark .fc-wizard-identity__name {
  color: var(--color-dark-50);
}
.fc-wizard-identity__contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 2px;
}
.fc-wizard-identity__contact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-gray-500);
}
html.dark .fc-wizard-identity__contact {
  color: var(--color-dark-300);
}
.fc-wizard-identity__contact .mud-typography {
  color: inherit;
}
.fc-wizard-identity__contact .mud-icon-root {
  width: 16px;
  height: 16px;
}
.fc-wizard-identity__status {
  flex-shrink: 0;
}
.fc-wizard-identity__resolved {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  background: rgb(from var(--color-success) r g b / 0.12);
  border: 1px solid rgb(from var(--color-success) r g b / 0.28);
  color: var(--color-success-darker);
}
html.dark .fc-wizard-identity__resolved {
  color: var(--color-success-lighter);
  border-color: rgb(from var(--color-success) r g b / 0.40);
}
.fc-wizard-identity__resolved .mud-typography {
  margin: 0;
  color: inherit;
}
.fc-wizard-identity__resolved .mud-icon-root {
  width: 16px;
  height: 16px;
}

.fc-wizard-review-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 640px) {
  .fc-wizard-review-grid {
    grid-template-columns: 1fr;
  }
}
.fc-wizard-review-grid .fc-wizard-review-block {
  margin-top: 0;
}
.fc-wizard-review-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fc-wizard-kv-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 12px;
}
.fc-wizard-kv {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.fc-wizard-kv > .mud-icon-root {
  width: 18px;
  height: 18px;
  color: var(--color-gray-400);
  flex-shrink: 0;
  margin-top: 1px;
}
html.dark .fc-wizard-kv > .mud-icon-root {
  color: var(--color-dark-300);
}
.fc-wizard-kv__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.fc-wizard-kv__text .mud-typography {
  margin: 0;
}
.fc-wizard-kv__label {
  color: var(--color-gray-500);
}
html.dark .fc-wizard-kv__label {
  color: var(--color-dark-300);
}
.fc-wizard-kv__value {
  color: var(--color-gray-900);
}
html.dark .fc-wizard-kv__value {
  color: var(--color-dark-50);
}

.fc-wizard-consent {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgb(from var(--color-warning) r g b / 0.12);
  border: 1px solid rgb(from var(--color-warning) r g b / 0.28);
  color: var(--color-warning-darker);
}
html.dark .fc-wizard-consent {
  color: var(--color-warning-lighter);
}
.fc-wizard-consent .mud-typography {
  margin: 0;
  color: inherit;
}
.fc-wizard-consent .mud-icon-root {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * §69 ─── Credit-pull report — score gauge + score block + metric tiles (WI #503)
 *
 * These live GLOBAL (not in a *.razor.css) on purpose: the markup wraps its
 * structural divs in <MudElement> (a child component), and Blazor's scoped-CSS
 * attribute is NOT applied to child-component output — so a scoped rule never
 * matches the rendered <div>. Same reason av-badge / av-box / av-circlebar are
 * global. Color / layout / stroke only — no font-* (those come from Typo.*); zero
 * hardcoded hex (every color is a design token).
 * ───────────────────────────────────────────────────────────────────────────── */

/* ── Score gauge (CreditScoreGauge.razor) ─────────────────────────────────────── */
.cp-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.cp-gauge--hero {
  max-width: 300px;
}

.cp-gauge--mini {
  max-width: 168px;
}

.cp-gauge__chart {
  position: relative;
  width: 100%;
  padding-bottom: 8px;
  /* breathing room between the arc base and the 300/850 endpoint labels */
}

.cp-gauge__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  /* let the marker halo spill past the arc */
}

.cp-gauge__track {
  fill: none;
  stroke-width: 13;
  stroke-linecap: butt;
  stroke-opacity: 0.25;
  /* the full FICO ramp sits faded behind the bright progress */
}

.cp-gauge__progress {
  fill: none;
  stroke-width: 13;
  stroke-linecap: round;
}

/* Band ramp — semantic FICO constants (not theme-driven): red → orange → amber → green → emerald. */
.cp-gauge__track--poor,
.cp-gauge__progress--poor,
.cp-gauge__marker--poor {
  stroke: var(--color-red-500);
}

.cp-gauge__track--fair,
.cp-gauge__progress--fair,
.cp-gauge__marker--fair {
  stroke: var(--color-orange-500);
}

.cp-gauge__track--good,
.cp-gauge__progress--good,
.cp-gauge__marker--good {
  stroke: var(--color-amber-400);
}

.cp-gauge__track--verygood,
.cp-gauge__progress--verygood,
.cp-gauge__marker--verygood {
  stroke: var(--color-green-500);
}

.cp-gauge__track--excellent,
.cp-gauge__progress--excellent,
.cp-gauge__marker--excellent {
  stroke: var(--color-emerald-600);
}

.cp-gauge__track--none {
  stroke: var(--color-gray-300);
  stroke-opacity: 1;
}

.cp-gauge__marker {
  stroke: none;
}

.cp-gauge__marker--poor {
  fill: var(--color-red-500);
}

.cp-gauge__marker--fair {
  fill: var(--color-orange-500);
}

.cp-gauge__marker--good {
  fill: var(--color-amber-400);
}

.cp-gauge__marker--verygood {
  fill: var(--color-green-500);
}

.cp-gauge__marker--excellent {
  fill: var(--color-emerald-600);
}

.cp-gauge__marker-halo {
  fill: var(--surface-1);
  stroke: none;
}

/* Center readout — number + band chip overlay (the value color is inherited from
   MudText's Typo.h3/h5, which is already theme-aware). */
.cp-gauge__readout {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12%;
  /* sits just above the pivot baseline so the readout rests inside the bowl */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  pointer-events: none;
}

.cp-gauge__band {
  margin-top: 2px;
}

/* Range endpoints. */
.cp-gauge__endpoint {
  position: absolute;
  bottom: 0;
}

.cp-gauge__endpoint--min {
  left: 3%;
}

.cp-gauge__endpoint--max {
  right: 3%;
}

/* ── Score block — hero (representative/median bureau) + mini gauges row ───────── */
.cp-score-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cp-score-hero {
  padding: 16px 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cp-score-hero__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.cp-score-minis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.cp-score-mini {
  padding: 12px 12px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.cp-score-mini__label {
  align-self: center;
}

.cp-score-bureau {
  display: flex;
  justify-content: center;
  padding: 8px 0;
}

/* Reported identity line under the bureau gauge. */
.cp-identity {
  text-align: center;
}

/* Secondary score-model pills (multi-model feeds: fico_8 / vantage_4 next to the primary). */
.cp-score-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.cp-score-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border: 1px solid var(--color-gray-200);
  border-radius: 9999px;
}

html.dark .cp-score-pill {
  border-color: var(--color-dark-500);
}

/* Score factors (reason codes) card. */
.cp-factors {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cp-factors__model {
  margin-top: 4px;
}

/* Per-bureau provider links row (web report + PDFs). */
.cp-bureau-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

/* ── Key-metric tiles ─────────────────────────────────────────────────────────── */
.cp-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.cp-tile {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.cp-tile__icon {
  color: var(--color-gray-500);
  flex: 0 0 auto;
}

.cp-tile__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Account meta — tidy label/value grid inside each trade-line card. */
.cp-account-meta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 2px 16px;
}

/* ── Trade-line account card ──────────────────────────────────────────────────── */
.cp-account__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.cp-account__chips {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.cp-account__rating {
  margin-bottom: 8px;
}

.cp-account__ph {
  margin-top: 10px;
}

.cp-account__ph-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

/* Credit-utilization meter (revolving accounts only). */
.cp-util {
  margin-bottom: 8px;
}

.cp-util__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.cp-util__bar {
  border-radius: 999px;
}

/* ── Payment-history grid (PaymentHistoryGrid.razor) ──────────────────────────── */
.ph-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ph-grid__cells {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.ph-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  color: var(--color-white);
  background-color: var(--color-gray-300);
}

.ph-cell__code {
  color: inherit;
  opacity: 0.95;
}

/* Severity palette (tokens — no hardcoded hex). */
.ph-cell--ok {
  background-color: var(--color-success);
}

.ph-cell--30 {
  background-color: var(--color-warning);
}

.ph-cell--60 {
  background-color: var(--color-orange-500);
}

/* distinct from amber 30 */
.ph-cell--90 {
  background-color: var(--color-error);
}

.ph-cell--derog {
  background-color: var(--color-error-darker);
}

.ph-cell--nodata {
  background-color: var(--color-gray-300);
  color: var(--color-gray-600);
}

html.dark .ph-cell--nodata {
  background-color: var(--color-gray-700);
  color: var(--color-gray-300);
}

.ph-grid__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.ph-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* ============================================================================
   §WI441 — Credit-pull authorization wizard (borrower task) + payment history
   Layout/spacing only — typography comes from the canonical scale (Typo.*),
   colors from design tokens. Scoped to .av-cpa-* so it never touches other Mud
   consumers (scoped .razor.css does not reach Mud internals — gotcha documented).
   ============================================================================ */

/* Stepper */
.av-cpa-stepper {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.av-cpa-stepper__step {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 0;
  min-width: 0;
}

.av-cpa-stepper__marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 9999px;
  flex-shrink: 0;
  background: var(--color-gray-200);
  color: var(--color-gray-600);
  transition:
    background-color 150ms ease,
    color 150ms ease;
}

.av-cpa-stepper__label {
  color: var(--color-gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.av-cpa-stepper__step--current .av-cpa-stepper__marker {
  background: var(--color-primary-600);
  color: var(--color-white);
}

.av-cpa-stepper__step--current .av-cpa-stepper__label {
  color: var(--color-primary-600);
}

.av-cpa-stepper__step--done .av-cpa-stepper__marker {
  background: var(--color-success);
  color: var(--color-white);
}

html.dark .av-cpa-stepper__marker {
  background: var(--color-dark-500);
  color: var(--color-dark-200);
}

html.dark .av-cpa-stepper__step--current .av-cpa-stepper__marker {
  background: var(--color-primary-400);
}

.av-cpa-banner {
  margin-bottom: 16px;
}

/* Step 1 — confirm-data read-only fields */
.av-cpa-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.av-cpa-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.av-cpa-field__label {
  color: var(--color-gray-500);
}

.av-cpa-field__value {
  color: var(--color-gray-800);
  word-break: break-word;
}

html.dark .av-cpa-field__value {
  color: var(--color-dark-100);
}

.av-cpa-report {
  margin-top: 8px;
}

/* Action rows */
.av-cpa-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}

/* Step 2 — consent */
.av-cpa-consent {
  padding: 16px;
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  border: 1px solid var(--color-gray-200);
  margin-bottom: 12px;
}

html.dark .av-cpa-consent {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

.av-cpa-consent__check {
  margin-bottom: 4px;
}

/* Step 3 — fee */
.av-cpa-fee {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 12px;
}

.av-cpa-fee__label {
  color: var(--color-gray-500);
}

.av-cpa-fee__amount {
  color: var(--color-gray-900);
}

html.dark .av-cpa-fee__amount {
  color: var(--color-dark-50);
}

/* Payment history table */
.av-cpa-history__table th {
  text-align: left;
  color: var(--color-gray-500);
}

/* ============================================================================
   §WI441-W5 — Credit section (loan / Credit Operator)
   Layout/spacing only — typography from the canonical scale, colors from tokens.
   Scoped to .av-cpl-* so it never reaches other Mud consumers.
   ============================================================================ */

.av-cpl {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 16px;
}

.av-cpl-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.av-cpl-section__title {
  color: var(--color-gray-800);
}

html.dark .av-cpl-section__title {
  color: var(--color-dark-100);
}

/* List/table of authorizations and payments */
.av-cpl-table {
  width: 100%;
  border-collapse: collapse;
}

.av-cpl-table th {
  text-align: left;
  padding: 8px 12px;
  color: var(--color-gray-500);
  border-bottom: 1px solid var(--color-gray-200);
  white-space: nowrap;
}

.av-cpl-table td {
  padding: 10px 12px;
  color: var(--color-gray-800);
  border-bottom: 1px solid var(--color-gray-100);
  vertical-align: middle;
}

html.dark .av-cpl-table th {
  color: var(--color-dark-300);
  border-bottom-color: var(--color-dark-500);
}

html.dark .av-cpl-table td {
  color: var(--color-dark-100);
  border-bottom-color: var(--color-dark-600);
}

.av-cpl-table__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* Empty + disabled-config states */
.av-cpl-empty {
  padding: 24px;
  text-align: center;
  color: var(--color-gray-500);
}

.av-cpl-config-hint {
  margin-bottom: 16px;
}

/* ============================================================================
   §WI441-W6 — Credit-pull fee config (Tenant Manager settings page)
   Layout/spacing only — typography from the canonical scale, colors from tokens.
   Scoped to .av-cpf-* so it never reaches other Mud consumers.
   ============================================================================ */

.av-cpf {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}

.av-cpf__header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.av-cpf-card {
  max-width: 560px;
  padding: 24px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
}

html.dark .av-cpf-card {
  border-color: var(--color-dark-600);
}

.av-cpf-default,
.av-cpf-effective {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 12px;
}

.av-cpf-default__label {
  color: var(--color-gray-500);
}

html.dark .av-cpf-default__label {
  color: var(--color-dark-300);
}

.av-cpf-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
}

/* ============================================================================
 * RESTAURADO — reglas de av-radio-, av-checkbox- borradas por commits de reset V8
 * (recuperadas completas desde dd56dac5a). Scope-restringido; sin colateral.
 * ============================================================================ */
/* ===========================================================================
 §30 Av-Checkbox / Av-Radio color & size modifiers — opt-in extensions
 to the base skin (rows ~913–1037 of this file).
 The base skin hard-codes primary color and a fixed 18-px box; these
 modifiers let the showcase (and any future caller) opt into multi-color
 and multi-size variants without touching the canonical primary look used
 by LeadSourceDialog and other production dialogs.
 Apply additively, e.g.:
 <MudCheckBox Class="av-checkbox-color-success av-checkbox-sm" .../>
 <MudRadio Class="av-radio-color-error av-radio-lg" .../>
 =========================================================================== */

/* --- Color modifiers — override the checked/indeterminate base color ---
   html.dark counterparts REQUERIDOS: las reglas base `html.dark .mud-checkbox:has(input:checked)
   .mud-icon-button` (§30 base, line ~1014) tienen specificity (0,4,1) y ganan sobre estos
   modifiers (0,4,0) en dark mode. Sin contraparte dark, todos los color modifiers caen al
   primary-400 base en dark. Cada modifier necesita su counterpart html.dark explícito. */
.av-checkbox-color-default .mud-checkbox:has(input:checked) .mud-icon-button,
.av-checkbox-color-default
  .mud-checkbox:has(input:indeterminate)
  .mud-icon-button,
.av-radio-color-default .mud-radio:has(input:checked) .mud-icon-button {
  background-color: var(--color-gray-700) !important;
  border-color: var(--color-gray-700) !important;
}

html.dark
  .av-checkbox-color-default
  .mud-checkbox:has(input:checked)
  .mud-icon-button,
html.dark
  .av-checkbox-color-default
  .mud-checkbox:has(input:indeterminate)
  .mud-icon-button,
html.dark
  .av-radio-color-default
  .mud-radio:has(input:checked)
  .mud-icon-button {
  background-color: var(--color-gray-500) !important;
  border-color: var(--color-gray-500) !important;
}

.av-checkbox-color-secondary .mud-checkbox:has(input:checked) .mud-icon-button,
.av-checkbox-color-secondary
  .mud-checkbox:has(input:indeterminate)
  .mud-icon-button,
.av-radio-color-secondary .mud-radio:has(input:checked) .mud-icon-button {
  background-color: var(--color-secondary) !important;
  border-color: var(--color-secondary) !important;
}

html.dark
  .av-checkbox-color-secondary
  .mud-checkbox:has(input:checked)
  .mud-icon-button,
html.dark
  .av-checkbox-color-secondary
  .mud-checkbox:has(input:indeterminate)
  .mud-icon-button,
html.dark
  .av-radio-color-secondary
  .mud-radio:has(input:checked)
  .mud-icon-button {
  background-color: var(--color-secondary-light) !important;
  border-color: var(--color-secondary-light) !important;
}

.av-checkbox-color-tertiary .mud-checkbox:has(input:checked) .mud-icon-button,
.av-checkbox-color-tertiary
  .mud-checkbox:has(input:indeterminate)
  .mud-icon-button,
.av-radio-color-tertiary .mud-radio:has(input:checked) .mud-icon-button {
  background-color: var(--color-secondary-light) !important;
  border-color: var(--color-secondary-light) !important;
}

html.dark
  .av-checkbox-color-tertiary
  .mud-checkbox:has(input:checked)
  .mud-icon-button,
html.dark
  .av-checkbox-color-tertiary
  .mud-checkbox:has(input:indeterminate)
  .mud-icon-button,
html.dark
  .av-radio-color-tertiary
  .mud-radio:has(input:checked)
  .mud-icon-button {
  background-color: var(--color-secondary-lighter) !important;
  border-color: var(--color-secondary-lighter) !important;
}

.av-checkbox-color-info .mud-checkbox:has(input:checked) .mud-icon-button,
.av-checkbox-color-info .mud-checkbox:has(input:indeterminate) .mud-icon-button,
.av-radio-color-info .mud-radio:has(input:checked) .mud-icon-button {
  background-color: var(--color-info) !important;
  border-color: var(--color-info) !important;
}

html.dark
  .av-checkbox-color-info
  .mud-checkbox:has(input:checked)
  .mud-icon-button,
html.dark
  .av-checkbox-color-info
  .mud-checkbox:has(input:indeterminate)
  .mud-icon-button,
html.dark .av-radio-color-info .mud-radio:has(input:checked) .mud-icon-button {
  background-color: var(--color-info-light) !important;
  border-color: var(--color-info-light) !important;
}

.av-checkbox-color-success .mud-checkbox:has(input:checked) .mud-icon-button,
.av-checkbox-color-success
  .mud-checkbox:has(input:indeterminate)
  .mud-icon-button,
.av-radio-color-success .mud-radio:has(input:checked) .mud-icon-button {
  background-color: var(--color-success) !important;
  border-color: var(--color-success) !important;
}

html.dark
  .av-checkbox-color-success
  .mud-checkbox:has(input:checked)
  .mud-icon-button,
html.dark
  .av-checkbox-color-success
  .mud-checkbox:has(input:indeterminate)
  .mud-icon-button,
html.dark
  .av-radio-color-success
  .mud-radio:has(input:checked)
  .mud-icon-button {
  background-color: var(--color-success-light) !important;
  border-color: var(--color-success-light) !important;
}

.av-checkbox-color-warning .mud-checkbox:has(input:checked) .mud-icon-button,
.av-checkbox-color-warning
  .mud-checkbox:has(input:indeterminate)
  .mud-icon-button,
.av-radio-color-warning .mud-radio:has(input:checked) .mud-icon-button {
  background-color: var(--color-warning) !important;
  border-color: var(--color-warning) !important;
}

html.dark
  .av-checkbox-color-warning
  .mud-checkbox:has(input:checked)
  .mud-icon-button,
html.dark
  .av-checkbox-color-warning
  .mud-checkbox:has(input:indeterminate)
  .mud-icon-button,
html.dark
  .av-radio-color-warning
  .mud-radio:has(input:checked)
  .mud-icon-button {
  background-color: var(--color-warning-light) !important;
  border-color: var(--color-warning-light) !important;
}

.av-checkbox-color-error .mud-checkbox:has(input:checked) .mud-icon-button,
.av-checkbox-color-error
  .mud-checkbox:has(input:indeterminate)
  .mud-icon-button,
.av-radio-color-error .mud-radio:has(input:checked) .mud-icon-button {
  background-color: var(--color-error) !important;
  border-color: var(--color-error) !important;
}

html.dark
  .av-checkbox-color-error
  .mud-checkbox:has(input:checked)
  .mud-icon-button,
html.dark
  .av-checkbox-color-error
  .mud-checkbox:has(input:indeterminate)
  .mud-icon-button,
html.dark .av-radio-color-error .mud-radio:has(input:checked) .mud-icon-button {
  background-color: var(--color-error-light) !important;
  border-color: var(--color-error-light) !important;
}

/* Hover/focus tints on the modifier — keep the border-only emphasis when
 the box is NOT checked, matching the base behavior. */
.av-checkbox-color-success
  .mud-checkbox:not(:has(input:checked)):not(:has(input:indeterminate)):not(
    .mud-disabled
  ):hover
  .mud-icon-button,
.av-checkbox-color-success
  .mud-checkbox:not(:has(input:checked)):not(:has(input:indeterminate)):not(
    .mud-disabled
  ):focus-within
  .mud-icon-button,
.av-radio-color-success
  .mud-radio:not(:has(input:checked)):not(.mud-disabled):hover
  .mud-icon-button,
.av-radio-color-success
  .mud-radio:not(:has(input:checked)):not(.mud-disabled):focus-within
  .mud-icon-button {
  border-color: var(--color-success) !important;
}

.av-checkbox-color-warning
  .mud-checkbox:not(:has(input:checked)):not(:has(input:indeterminate)):not(
    .mud-disabled
  ):hover
  .mud-icon-button,
.av-checkbox-color-warning
  .mud-checkbox:not(:has(input:checked)):not(:has(input:indeterminate)):not(
    .mud-disabled
  ):focus-within
  .mud-icon-button,
.av-radio-color-warning
  .mud-radio:not(:has(input:checked)):not(.mud-disabled):hover
  .mud-icon-button,
.av-radio-color-warning
  .mud-radio:not(:has(input:checked)):not(.mud-disabled):focus-within
  .mud-icon-button {
  border-color: var(--color-warning) !important;
}

.av-checkbox-color-error
  .mud-checkbox:not(:has(input:checked)):not(:has(input:indeterminate)):not(
    .mud-disabled
  ):hover
  .mud-icon-button,
.av-checkbox-color-error
  .mud-checkbox:not(:has(input:checked)):not(:has(input:indeterminate)):not(
    .mud-disabled
  ):focus-within
  .mud-icon-button,
.av-radio-color-error
  .mud-radio:not(:has(input:checked)):not(.mud-disabled):hover
  .mud-icon-button,
.av-radio-color-error
  .mud-radio:not(:has(input:checked)):not(.mud-disabled):focus-within
  .mud-icon-button {
  border-color: var(--color-error) !important;
}

.av-checkbox-color-info
  .mud-checkbox:not(:has(input:checked)):not(:has(input:indeterminate)):not(
    .mud-disabled
  ):hover
  .mud-icon-button,
.av-checkbox-color-info
  .mud-checkbox:not(:has(input:checked)):not(:has(input:indeterminate)):not(
    .mud-disabled
  ):focus-within
  .mud-icon-button,
.av-radio-color-info
  .mud-radio:not(:has(input:checked)):not(.mud-disabled):hover
  .mud-icon-button,
.av-radio-color-info
  .mud-radio:not(:has(input:checked)):not(.mud-disabled):focus-within
  .mud-icon-button {
  border-color: var(--color-info) !important;
}

.av-checkbox-color-secondary
  .mud-checkbox:not(:has(input:checked)):not(:has(input:indeterminate)):not(
    .mud-disabled
  ):hover
  .mud-icon-button,
.av-checkbox-color-secondary
  .mud-checkbox:not(:has(input:checked)):not(:has(input:indeterminate)):not(
    .mud-disabled
  ):focus-within
  .mud-icon-button,
.av-radio-color-secondary
  .mud-radio:not(:has(input:checked)):not(.mud-disabled):hover
  .mud-icon-button,
.av-radio-color-secondary
  .mud-radio:not(:has(input:checked)):not(.mud-disabled):focus-within
  .mud-icon-button {
  border-color: var(--color-secondary) !important;
}

/* --- Size modifiers — override fixed box width/height + checkmark size ---
 Escala Guía Visual: xs (14 px = size-3.5) · sm (16 px = size-4) · default Mud (~18 px) ·
 md (24 px = size-6) · lg (28 px = size-7). 5 sizes alineadas con el demo
 forms/checkbox/CheckboxSizes.jsx. */

.av-checkbox-xs .mud-checkbox .mud-icon-button,
.av-radio-xs .mud-radio .mud-icon-button {
  width: 14px !important;
  height: 14px !important;
}

.av-checkbox-xs .mud-checkbox:has(input:checked) .mud-icon-button::after {
  background-size: 10px 10px !important;
}

.av-checkbox-xs .mud-checkbox:has(input:indeterminate) .mud-icon-button::after {
  width: 7px !important;
}

.av-checkbox-sm .mud-checkbox .mud-icon-button,
.av-radio-sm .mud-radio .mud-icon-button {
  width: 16px !important;
  height: 16px !important;
}

.av-checkbox-sm .mud-checkbox:has(input:checked) .mud-icon-button::after {
  background-size: 12px 12px !important;
}

.av-checkbox-sm .mud-checkbox:has(input:indeterminate) .mud-icon-button::after {
  width: 8px !important;
}

.av-radio-sm .mud-radio:has(input:checked) .mud-icon-button::after {
  width: 5px !important;
  height: 5px !important;
}

.av-checkbox-md .mud-checkbox .mud-icon-button,
.av-radio-md .mud-radio .mud-icon-button {
  width: 24px !important;
  height: 24px !important;
}

.av-checkbox-md .mud-checkbox:has(input:checked) .mud-icon-button::after {
  background-size: 18px 18px !important;
}

.av-checkbox-md .mud-checkbox:has(input:indeterminate) .mud-icon-button::after {
  width: 12px !important;
}

.av-checkbox-lg .mud-checkbox .mud-icon-button,
.av-radio-lg .mud-radio .mud-icon-button {
  width: 28px !important;
  height: 28px !important;
}

.av-checkbox-lg .mud-checkbox:has(input:checked) .mud-icon-button::after {
  background-size: 22px 22px !important;
}

.av-checkbox-lg .mud-checkbox:has(input:indeterminate) .mud-icon-button::after {
  width: 14px !important;
}

.av-radio-lg .mud-radio:has(input:checked) .mud-icon-button::after {
  width: 10px !important;
  height: 10px !important;
}

/* --- Custom card pattern (Guía Visual Custom demo) — <label> wrapper clickable
 con border que cambia a primary-500 + ring primary/30 cuando el checkbox
 interior está checked. Hidden checkbox visualmente (opacity 0) salvo cuando
 está checked. Pensado para grids de selección rica (Frameworks, options,
 feature toggles con icon + label). */
.av-checkbox-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-200);
  cursor: pointer;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease;
  background-color: var(--color-white);
}

html.dark .av-checkbox-card {
  border-color: var(--color-dark-600);
  background-color: var(--color-dark-700);
}

/* Checked state — border + ring primary-500. */
.av-checkbox-card:has(.mud-checkbox input:checked) {
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 1px rgb(from var(--color-primary-500) r g b / 0.3);
}

/* Hide the checkbox box when unchecked; reveal on check.
 Mantenemos pointer-events para que el toggle siga funcionando vía la <label>. */
.av-checkbox-card .mud-checkbox .mud-icon-button {
  opacity: 0;
  transition: opacity 150ms ease;
}

.av-checkbox-card:has(.mud-checkbox input:checked)
  .mud-checkbox
  .mud-icon-button {
  opacity: 1;
}

/* ===========================================================================
 §33 Av-Checkbox shape variants — Rounded / SquareRounded / Outlined.
 Apply additively on top of optional color modifiers from §30:
 <MudCheckBox Class="av-checkbox-rounded av-checkbox-color-success" .../>
 <MudCheckBox Class="av-checkbox-outlined av-checkbox-color-warning" .../>
 =========================================================================== */

/* --- Rounded — circular box --- */
.av-checkbox-rounded .mud-checkbox .mud-icon-button {
  border-radius: 50% !important;
}

/* --- SquareRounded — larger corner radius square --- */
.av-checkbox-square-rounded .mud-checkbox .mud-icon-button {
  border-radius: var(--radius-md) !important;
}

/* --- Outlined — transparent bg on checked + colored checkmark via mask --- */
.av-checkbox-outlined .mud-checkbox:has(input:checked) .mud-icon-button,
.av-checkbox-outlined .mud-checkbox:has(input:indeterminate) .mud-icon-button {
  background-color: transparent !important;
  --av-check-color: var(--color-primary-600);
}

html.dark
  .av-checkbox-outlined
  .mud-checkbox:has(input:checked)
  .mud-icon-button,
html.dark
  .av-checkbox-outlined
  .mud-checkbox:has(input:indeterminate)
  .mud-icon-button {
  --av-check-color: var(--color-primary-400);
}

/* Replace the white SVG checkmark with a mask using --av-check-color */
.av-checkbox-outlined .mud-checkbox:has(input:checked) .mud-icon-button::after {
  background-image: none !important;
  background-color: var(--av-check-color) !important;
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 1 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/></svg>");
  mask-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 1 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/></svg>");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 14px 14px;
  mask-size: 14px 14px;
}

.av-checkbox-outlined
  .mud-checkbox:has(input:indeterminate)
  .mud-icon-button::after {
  background-color: var(--av-check-color) !important;
  background-image: none !important;
}

/* Outlined + color modifiers — override --av-check-color */
.av-checkbox-outlined.av-checkbox-color-secondary
  .mud-checkbox:has(input:checked)
  .mud-icon-button,
.av-checkbox-outlined.av-checkbox-color-secondary
  .mud-checkbox:has(input:indeterminate)
  .mud-icon-button {
  --av-check-color: var(--color-secondary);
}

.av-checkbox-outlined.av-checkbox-color-info
  .mud-checkbox:has(input:checked)
  .mud-icon-button,
.av-checkbox-outlined.av-checkbox-color-info
  .mud-checkbox:has(input:indeterminate)
  .mud-icon-button {
  --av-check-color: var(--color-info);
}

.av-checkbox-outlined.av-checkbox-color-success
  .mud-checkbox:has(input:checked)
  .mud-icon-button,
.av-checkbox-outlined.av-checkbox-color-success
  .mud-checkbox:has(input:indeterminate)
  .mud-icon-button {
  --av-check-color: var(--color-success);
}

.av-checkbox-outlined.av-checkbox-color-warning
  .mud-checkbox:has(input:checked)
  .mud-icon-button,
.av-checkbox-outlined.av-checkbox-color-warning
  .mud-checkbox:has(input:indeterminate)
  .mud-icon-button {
  --av-check-color: var(--color-warning);
}

.av-checkbox-outlined.av-checkbox-color-error
  .mud-checkbox:has(input:checked)
  .mud-icon-button,
.av-checkbox-outlined.av-checkbox-color-error
  .mud-checkbox:has(input:indeterminate)
  .mud-icon-button {
  --av-check-color: var(--color-error);
}

.av-checkbox-outlined.av-checkbox-color-secondary
  .mud-checkbox:has(input:checked)
  .mud-icon-button,
.av-checkbox-outlined.av-checkbox-color-secondary
  .mud-checkbox:has(input:indeterminate)
  .mud-icon-button {
  border-color: var(--color-secondary) !important;
}

.av-checkbox-outlined.av-checkbox-color-info
  .mud-checkbox:has(input:checked)
  .mud-icon-button,
.av-checkbox-outlined.av-checkbox-color-info
  .mud-checkbox:has(input:indeterminate)
  .mud-icon-button {
  border-color: var(--color-info) !important;
}

.av-checkbox-outlined.av-checkbox-color-success
  .mud-checkbox:has(input:checked)
  .mud-icon-button,
.av-checkbox-outlined.av-checkbox-color-success
  .mud-checkbox:has(input:indeterminate)
  .mud-icon-button {
  border-color: var(--color-success) !important;
}

.av-checkbox-outlined.av-checkbox-color-warning
  .mud-checkbox:has(input:checked)
  .mud-icon-button,
.av-checkbox-outlined.av-checkbox-color-warning
  .mud-checkbox:has(input:indeterminate)
  .mud-icon-button {
  border-color: var(--color-warning) !important;
}

.av-checkbox-outlined.av-checkbox-color-error
  .mud-checkbox:has(input:checked)
  .mud-icon-button,
.av-checkbox-outlined.av-checkbox-color-error
  .mud-checkbox:has(input:indeterminate)
  .mud-icon-button {
  border-color: var(--color-error) !important;
}

/* ===========================================================================
 §34 Av-Radio shape variants — Square / Outlined.
 Same composition rules as §33 — combine with §30 color modifiers.
 =========================================================================== */

/* --- Square — squared box + squared inner dot --- */
.av-radio-square .mud-radio .mud-icon-button {
  border-radius: var(--radius-sm) !important;
}

.av-radio-square .mud-radio:has(input:checked) .mud-icon-button::after {
  border-radius: 1px !important;
}

/* --- Outlined — transparent bg + colored dot --- */
.av-radio-outlined .mud-radio:has(input:checked) .mud-icon-button {
  background-color: transparent !important;
  --av-radio-dot-color: var(--color-primary-600);
}

html.dark .av-radio-outlined .mud-radio:has(input:checked) .mud-icon-button {
  --av-radio-dot-color: var(--color-primary-400);
}

.av-radio-outlined .mud-radio:has(input:checked) .mud-icon-button::after {
  background-color: var(--av-radio-dot-color) !important;
}

/* Outlined + color modifiers — override --av-radio-dot-color + border-color */
.av-radio-outlined.av-radio-color-secondary
  .mud-radio:has(input:checked)
  .mud-icon-button {
  --av-radio-dot-color: var(--color-secondary);
  border-color: var(--color-secondary) !important;
}

.av-radio-outlined.av-radio-color-info
  .mud-radio:has(input:checked)
  .mud-icon-button {
  --av-radio-dot-color: var(--color-info);
  border-color: var(--color-info) !important;
}

.av-radio-outlined.av-radio-color-success
  .mud-radio:has(input:checked)
  .mud-icon-button {
  --av-radio-dot-color: var(--color-success);
  border-color: var(--color-success) !important;
}

.av-radio-outlined.av-radio-color-warning
  .mud-radio:has(input:checked)
  .mud-icon-button {
  --av-radio-dot-color: var(--color-warning);
  border-color: var(--color-warning) !important;
}

.av-radio-outlined.av-radio-color-error
  .mud-radio:has(input:checked)
  .mud-icon-button {
  --av-radio-dot-color: var(--color-error);
  border-color: var(--color-error) !important;
}

/* --- Radio cards — Guía Visual RadioGroups pattern ---
 Replica del demo forms/radio/RadioGroups.jsx: cada MudRadio dentro del group
 se transforma en una card full-width, con bg gray-100 idle, bg primary-500 +
 text white cuando checked, + check icon SVG a la derecha. El círculo nativo
 del radio (.mud-icon-button) se oculta — la card entera es el indicador. */

.av-radio-cards-filled .mud-radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.av-radio-cards-filled .mud-radio {
  position: relative;
  display: flex !important;
  align-items: center;
  width: 100%;
  padding: 16px 56px 16px 20px !important;
  /* right padding = espacio para CheckIcon */
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--color-gray-300) !important;
  background-color: var(--color-gray-100) !important;
  cursor: pointer;
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    color 150ms ease;
  margin: 0 !important;
}

html.dark .av-radio-cards-filled .mud-radio {
  background-color: var(--color-dark-600) !important;
  border-color: var(--color-dark-500) !important;
}

/* Checked state — full bg primary + border primary + texto blanco. */
.av-radio-cards-filled .mud-radio:has(input:checked) {
  background-color: var(--color-primary-500) !important;
  border-color: var(--color-primary-500) !important;
}

.av-radio-cards-filled .mud-radio:has(input:checked),
.av-radio-cards-filled .mud-radio:has(input:checked) * {
  color: var(--color-white) !important;
}

/* Focus ring leve (sustituto del active:ring de Guía Visual). */
.av-radio-cards-filled .mud-radio:focus-within {
  box-shadow: 0 0 0 2px rgb(from var(--color-primary-500) r g b / 0.5);
}

/* Ocultar el círculo nativo del radio — la card entera es el indicador. */
.av-radio-cards-filled .mud-radio .mud-icon-button {
  display: none !important;
}

/* Check icon a la derecha cuando checked — SVG inline replica Guía Visual CheckIcon
 (circle white/0.2 fill + check path white). */
.av-radio-cards-filled .mud-radio:has(input:checked)::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><circle cx='12' cy='12' r='12' fill='%23ffffff' opacity='0.2'/><path d='M7 13l3 3 7-7' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
}

/* ============================================================================
 * RESTAURADO — reglas de av-calendar, av-avatar-dot, av-avatar-squircle, av-avatar-with, av-card-selected, av-popover, av-chip-soft borradas por commits de reset V8
 * (recuperadas completas desde dd56dac5a). Scope-restringido; sin colateral.
 * ============================================================================ */
/* ===========================================================================
 §27 Av-Avatar Dot — small status indicator on a corner of an avatar.
 Mount inside a positioned wrapper:
 <div class="av-avatar-with-dot">
 <MudAvatar>...</MudAvatar>
 <span class="av-avatar-dot av-avatar-dot--success av-avatar-dot--bottom-right" />
 </div>
 Positions and colors via modifier classes. Optional --ping for pulsing halo.
 =========================================================================== */

.av-avatar-with-dot {
  position: relative;
  display: inline-flex;
}

.av-avatar-dot {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 9999px;
  border: 2px solid var(--color-white);
  background-color: var(--color-gray-500);
  z-index: 1;
  pointer-events: none;
}

html.dark .av-avatar-dot {
  border-color: var(--color-dark-800);
}

/* Position modifiers */
.av-avatar-dot--top-right {
  top: 0;
  right: 0;
}

.av-avatar-dot--top-left {
  top: 0;
  left: 0;
}

.av-avatar-dot--bottom-right {
  bottom: 0;
  right: 0;
}

.av-avatar-dot--bottom-left {
  bottom: 0;
  left: 0;
}

/* Color modifiers */
.av-avatar-dot--default {
  background-color: var(--color-gray-500);
}

.av-avatar-dot--primary {
  background-color: var(--color-primary-600);
}

.av-avatar-dot--secondary {
  background-color: var(--color-secondary);
}

.av-avatar-dot--info {
  background-color: var(--color-info);
}

.av-avatar-dot--success {
  background-color: var(--color-success);
}

.av-avatar-dot--warning {
  background-color: var(--color-warning);
}

.av-avatar-dot--error {
  background-color: var(--color-error);
}

/* Ping animation — pulsing halo */
.av-avatar-dot--ping::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: inherit;
  opacity: 0.6;
  animation: av-avatar-dot-ping 1.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes av-avatar-dot-ping {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }

  75% {
    transform: scale(2.2);
    opacity: 0;
  }

  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

/* ===========================================================================
 §28 Av-Card Selected — visual selected state for clickable MudPaper cards.
 Apply additively: <MudPaper Outlined="true" Class="av-card-selected"> when
 the card represents the active selection. Primary-color outer ring + inner
 border emphasis. Theme-aware.
 =========================================================================== */

.av-card-selected.mud-paper {
  border-color: var(--color-primary-500);
  box-shadow:
    0 0 0 1px var(--color-primary-500),
    0 0 0 4px rgb(from var(--color-primary-500) r g b / 0.15);
}

html.dark .av-card-selected.mud-paper {
  border-color: var(--color-primary-400);
  box-shadow:
    0 0 0 1px var(--color-primary-400),
    0 0 0 4px rgb(from var(--color-primary-400) r g b / 0.2);
}

/* ===========================================================================
 §29 Av-Chip Soft — compact "soft" variant for MudChip.
 Light tinted background + colored text + tighter padding + reduced radius.
 Use additively: <MudChip Class="av-chip-soft" Color="Color.Primary">. Works
 with all standard MudChip Color values. Replaces Mud's chip visual entirely
 (any Variant prop on the MudChip is overridden by this class).
 =========================================================================== */

.av-chip-soft.mud-chip {
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.02em;
  height: auto;
  min-height: 0;
  border: 0;
}

.av-chip-soft.mud-chip .mud-chip-icon {
  font-size: 0.875rem;
  width: 0.875rem;
  height: 0.875rem;
}

/* Color tints */
.av-chip-soft.mud-chip.mud-chip-color-primary {
  background-color: rgb(from var(--color-primary-600) r g b / 0.1);
  color: var(--color-primary-700);
}

html.dark .av-chip-soft.mud-chip.mud-chip-color-primary {
  background-color: rgb(from var(--color-primary-400) r g b / 0.18);
  color: var(--color-primary-300);
}

.av-chip-soft.mud-chip.mud-chip-color-secondary {
  background-color: rgb(from var(--color-secondary) r g b / 0.1);
  color: var(--color-secondary-darker);
}

html.dark .av-chip-soft.mud-chip.mud-chip-color-secondary {
  background-color: rgb(from var(--color-secondary) r g b / 0.2);
  color: var(--color-secondary-light);
}

.av-chip-soft.mud-chip.mud-chip-color-info {
  background-color: rgb(from var(--color-info) r g b / 0.1);
  color: var(--color-info-darker);
}

html.dark .av-chip-soft.mud-chip.mud-chip-color-info {
  background-color: rgb(from var(--color-info) r g b / 0.2);
  color: var(--color-info-light);
}

.av-chip-soft.mud-chip.mud-chip-color-success {
  background-color: rgb(from var(--color-success) r g b / 0.12);
  color: var(--color-success-darker);
}

html.dark .av-chip-soft.mud-chip.mud-chip-color-success {
  background-color: rgb(from var(--color-success) r g b / 0.22);
  color: var(--color-success-light);
}

.av-chip-soft.mud-chip.mud-chip-color-warning {
  background-color: rgb(from var(--color-warning) r g b / 0.14);
  color: var(--color-warning-darker);
}

html.dark .av-chip-soft.mud-chip.mud-chip-color-warning {
  background-color: rgb(from var(--color-warning) r g b / 0.22);
  color: var(--color-warning-light);
}

.av-chip-soft.mud-chip.mud-chip-color-error {
  background-color: rgb(from var(--color-error) r g b / 0.1);
  color: var(--color-error-darker);
}

html.dark .av-chip-soft.mud-chip.mud-chip-color-error {
  background-color: rgb(from var(--color-error) r g b / 0.2);
  color: var(--color-error-light);
}

.av-chip-soft.mud-chip.mud-chip-color-default {
  background-color: rgb(from var(--color-gray-900) r g b / 0.08);
  color: var(--color-gray-800);
}

html.dark .av-chip-soft.mud-chip.mud-chip-color-default {
  background-color: rgb(from var(--color-white) r g b / 0.1);
  color: var(--color-dark-100);
}

/* ---------------------------------------------------------------------------
 av-chip-toggle — clickable soft chip (Auto/Manual mode switch on the payment
 calculators). MudChip with OnClick renders as a clickable (filled) chip whose
 label text Mud forces to white; av-chip-soft's own color has no !important and
 loses, so the text vanishes on the light soft background (light mode). This
 modifier restores the soft text color with !important and shows the pointer.
 Scoped to av-chip-toggle → zero collateral on display av-chip-soft chips.
 --------------------------------------------------------------------------- */
.av-chip-toggle.mud-chip {
  cursor: pointer;
}

.av-chip-toggle.mud-chip.mud-chip-color-info {
  color: var(--color-info-darker) !important;
}

html.dark .av-chip-toggle.mud-chip.mud-chip-color-info {
  color: var(--color-info-light) !important;
}

.av-chip-toggle.mud-chip.mud-chip-color-warning {
  color: var(--color-warning-darker) !important;
}

html.dark .av-chip-toggle.mud-chip.mud-chip-color-warning {
  color: var(--color-warning-light) !important;
}

/* ===========================================================================
 §31 Av-Avatar Squircle — Guía Visual exact via SVG mask-image.
 Implementación pixel-perfect del patrón Guía Visual `mask is-squircle`
 (superellipse / iOS-style rounded square). El mask vive como token
 --av-squircle-mask en design-tokens.css y se consume vía mask-image.
 Previamente se aproximaba con border-radius:30% pero la transición de
 esquina del squircle es matemáticamente distinta — smoother corner.
 Esta versión replica el demo Guía Visual pixel-perfect.
 border-radius:0 explícito anula cualquier radius heredado de MudAvatar
 para que no compita con el mask.
 Apply additively: <MudAvatar Class="av-avatar-squircle">.
 =========================================================================== */

.av-avatar-squircle.mud-avatar {
  border-radius: 0 !important;
  -webkit-mask-image: var(--av-squircle-mask);
  mask-image: var(--av-squircle-mask);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* ===========================================================================
 §32 Av-Chip-Soft modifiers — Rounded (pill) + Glow (halo shadow).
 Both opt-in via additive class on top of .av-chip-soft.
 =========================================================================== */

.av-chip-soft.av-chip-soft-rounded.mud-chip {
  border-radius: 9999px;
  padding: 2px 10px;
}

.av-chip-soft.av-chip-soft-glow.mud-chip.mud-chip-color-primary {
  box-shadow: 0 2px 8px -2px rgb(from var(--color-primary-600) r g b / 0.45);
}

.av-chip-soft.av-chip-soft-glow.mud-chip.mud-chip-color-secondary {
  box-shadow: 0 2px 8px -2px rgb(from var(--color-secondary) r g b / 0.45);
}

.av-chip-soft.av-chip-soft-glow.mud-chip.mud-chip-color-info {
  box-shadow: 0 2px 8px -2px rgb(from var(--color-info) r g b / 0.45);
}

.av-chip-soft.av-chip-soft-glow.mud-chip.mud-chip-color-success {
  box-shadow: 0 2px 8px -2px rgb(from var(--color-success) r g b / 0.45);
}

.av-chip-soft.av-chip-soft-glow.mud-chip.mud-chip-color-warning {
  box-shadow: 0 2px 8px -2px rgb(from var(--color-warning) r g b / 0.45);
}

.av-chip-soft.av-chip-soft-glow.mud-chip.mud-chip-color-error {
  box-shadow: 0 2px 8px -2px rgb(from var(--color-error) r g b / 0.45);
}

/* ===========================================================================
 §36 Av-Popover — dropdown skin for MudSelect / MudAutocomplete popovers.
 MudBlazor renders Select/Autocomplete dropdowns via MudPopover (portaled).
 Apply opt-in via PopoverClass on the consumer:
 <MudSelect PopoverClass="av-popover" ...>
 The class lands on the .mud-popover element so compound selector works.
 Rows are .mud-list-item inside .mud-list inside the popover.
 =========================================================================== */

.av-popover.mud-popover {
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--color-gray-200) !important;
  box-shadow:
    0 10px 25px -3px rgb(from var(--color-gray-900) r g b / 0.12),
    0 4px 10px -2px rgb(from var(--color-gray-900) r g b / 0.05) !important;
  overflow: hidden !important;
  padding: 4px 0 !important;
  background-color: var(--color-white) !important;
}

html.dark .av-popover.mud-popover {
  border-color: var(--color-dark-500) !important;
  background-color: var(--color-dark-750) !important;
  box-shadow:
    0 10px 25px -3px rgb(from var(--color-dark-900) r g b / 0.45),
    0 4px 10px -2px rgb(from var(--color-dark-900) r g b / 0.3) !important;
}

/* List inside the popover — neutralize Mud's default padding/divider */
.av-popover .mud-list {
  padding: 0 !important;
  background-color: transparent !important;
}

/* Each row */
.av-popover .mud-list-item {
  padding: 8px 16px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  min-height: 0 !important;
  transition:
    background-color 120ms ease,
    color 120ms ease !important;
  cursor: pointer;
}

.av-popover .mud-list-item .mud-list-item-text {
  margin: 0 !important;
}

/* Hover (when not selected) */
.av-popover
  .mud-list-item:hover:not(.mud-selected-item):not(.mud-list-item-disabled) {
  background-color: var(--color-gray-100) !important;
}

html.dark
  .av-popover
  .mud-list-item:hover:not(.mud-selected-item):not(.mud-list-item-disabled) {
  background-color: var(--color-dark-600) !important;
}

/* Selected row */
.av-popover .mud-list-item.mud-selected-item {
  background-color: var(--color-primary-600) !important;
  color: var(--color-white) !important;
}

html.dark .av-popover .mud-list-item.mud-selected-item {
  background-color: var(--color-primary-500) !important;
}

.av-popover .mud-list-item.mud-selected-item .mud-typography,
.av-popover .mud-list-item.mud-selected-item .mud-list-item-text {
  color: var(--color-white) !important;
}

/* Disabled row */
.av-popover .mud-list-item.mud-list-item-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ===========================================================================
 §37 Av-Calendar — calendar popover skin for MudDatePicker / MudDateRangePicker.
 Apply opt-in via PopoverClass:
 <MudDatePicker PopoverClass="av-calendar" ...>
 Targets the calendar grid + day cells + selected / today markers.
 =========================================================================== */

.av-calendar.mud-picker-popover-paper,
.av-calendar.mud-popover {
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--color-gray-200) !important;
  box-shadow:
    0 10px 25px -3px rgb(from var(--color-gray-900) r g b / 0.12),
    0 4px 10px -2px rgb(from var(--color-gray-900) r g b / 0.05) !important;
  overflow: hidden !important;
  background-color: var(--color-white) !important;
}

html.dark .av-calendar.mud-picker-popover-paper,
html.dark .av-calendar.mud-popover {
  border-color: var(--color-dark-500) !important;
  background-color: var(--color-dark-750) !important;
}

/* Calendar header (month/year nav) */
.av-calendar .mud-picker-calendar-header {
  background-color: transparent !important;
  border-bottom: 1px solid var(--color-gray-100) !important;
  padding: 8px 12px !important;
}

html.dark .av-calendar .mud-picker-calendar-header {
  border-bottom-color: var(--color-dark-600) !important;
}

.av-calendar .mud-picker-calendar-header-transition {
  color: var(--color-gray-800) !important;
  font-weight: 600 !important;
}

html.dark .av-calendar .mud-picker-calendar-header-transition {
  color: var(--color-dark-100) !important;
}

/* Day-of-week row labels (Mo Tu We...) */
.av-calendar .mud-picker-calendar-day-of-week {
  color: var(--color-gray-500) !important;
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

html.dark .av-calendar .mud-picker-calendar-day-of-week {
  color: var(--color-dark-300) !important;
}

/* Day cells */
.av-calendar .mud-picker-calendar-day {
  border-radius: 50% !important;
  transition:
    background-color 120ms ease,
    color 120ms ease !important;
  font-weight: 400;
}

/* Hover (not selected) */
.av-calendar
  .mud-picker-calendar-day:hover:not(.mud-picker-calendar-day-selected):not(
    [disabled]
  ) {
  background-color: var(--color-gray-100) !important;
  color: var(--color-gray-900) !important;
}

html.dark
  .av-calendar
  .mud-picker-calendar-day:hover:not(.mud-picker-calendar-day-selected):not(
    [disabled]
  ) {
  background-color: var(--color-dark-600) !important;
  color: var(--color-dark-50) !important;
}

/* Today marker (un-selected) */
.av-calendar .mud-current:not(.mud-picker-calendar-day-selected) {
  border: 1px solid var(--color-primary-600) !important;
  color: var(--color-primary-600) !important;
  font-weight: 600;
}

html.dark .av-calendar .mud-current:not(.mud-picker-calendar-day-selected) {
  border-color: var(--color-primary-400) !important;
  color: var(--color-primary-400) !important;
}

/* Selected day */
.av-calendar .mud-picker-calendar-day-selected,
.av-calendar .mud-picker-calendar-day.mud-button-filled-primary {
  background-color: var(--color-primary-600) !important;
  color: var(--color-white) !important;
  font-weight: 600;
}

html.dark .av-calendar .mud-picker-calendar-day-selected,
html.dark .av-calendar .mud-picker-calendar-day.mud-button-filled-primary {
  background-color: var(--color-primary-500) !important;
}

/* Range-picker — in-range days (between start and end) */
.av-calendar .mud-range-between {
  background-color: rgb(from var(--color-primary-600) r g b / 0.1) !important;
  color: var(--color-primary-700) !important;
  border-radius: 0 !important;
}

html.dark .av-calendar .mud-range-between {
  background-color: rgb(from var(--color-primary-400) r g b / 0.18) !important;
  color: var(--color-primary-300) !important;
}

/* Disabled day */
.av-calendar .mud-picker-calendar-day[disabled] {
  color: var(--color-gray-300) !important;
  cursor: not-allowed;
}

html.dark .av-calendar .mud-picker-calendar-day[disabled] {
  color: var(--color-dark-400) !important;
}

/* Footer actions (Cancel / OK) — keep visual consistent */
.av-calendar .mud-picker-actions {
  padding: 8px 12px !important;
  border-top: 1px solid var(--color-gray-100) !important;
}

html.dark .av-calendar .mud-picker-actions {
  border-top-color: var(--color-dark-600) !important;
}

/* ============================================================================
 * RESTAURADO — reglas de av-pagination__ borradas por commits de reset V8
 * (recuperadas completas desde dd56dac5a). Scope-restringido; sin colateral.
 * ============================================================================ */
.av-pagination__info.mud-typography {
  color: var(--color-gray-600);
}

html.dark .av-pagination__info.mud-typography {
  color: var(--color-dark-200);
}

.av-pagination__controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.av-pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-gray-600);
  cursor: pointer;
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    color 150ms ease;
}

.av-pagination__btn:hover:not(:disabled) {
  background: var(--color-gray-100);
  border-color: var(--color-gray-300);
  color: var(--color-gray-900);
}

.av-pagination__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.av-pagination__btn .mud-icon-root {
  width: 16px;
  height: 16px;
}

html.dark .av-pagination__btn {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
  color: var(--color-dark-200);
}

html.dark .av-pagination__btn:hover:not(:disabled) {
  background: var(--color-dark-600);
  border-color: var(--color-dark-400);
  color: var(--color-dark-50);
}

.av-pagination__numbers {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 4px;
}

.av-pagination__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-gray-600);
  cursor: pointer;
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    color 150ms ease;
}

.av-pagination__num:hover:not(.av-pagination__num--active) {
  background: var(--color-gray-100);
  border-color: var(--color-gray-300);
  color: var(--color-gray-900);
}

.av-pagination__num--active {
  background: var(--color-primary-600);
  border-color: var(--color-primary-600);
  color: var(--color-white);
  cursor: default;
}

.av-pagination__num--active:hover {
  background: var(--color-primary-600);
  border-color: var(--color-primary-600);
  color: var(--color-white);
}

html.dark .av-pagination__num {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
  color: var(--color-dark-200);
}

html.dark .av-pagination__num:hover:not(.av-pagination__num--active) {
  background: var(--color-dark-600);
  border-color: var(--color-dark-400);
  color: var(--color-white);
}

html.dark .av-pagination__num--active {
  background: var(--color-primary-500);
  border-color: var(--color-primary-500);
  color: var(--color-white);
}

html.dark .av-pagination__num--active:hover {
  background: var(--color-primary-500);
  border-color: var(--color-primary-500);
  color: var(--color-white);
}

.av-pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--color-gray-400);
}

html.dark .av-pagination__ellipsis {
  color: var(--color-dark-300);
}

.av-pagination__size {
  display: flex;
  align-items: center;
  gap: 8px;
}

.av-pagination__size .mud-typography {
  color: var(--color-gray-600);
}

html.dark .av-pagination__size .mud-typography {
  color: var(--color-dark-200);
}

.av-pagination__select {
  width: 80px;
  min-width: 80px;
}

@media (max-width: 640px) {
  .av-pagination__controls {
    justify-content: center;
  }

  .av-pagination__size {
    justify-content: center;
  }

  .av-pagination__numbers {
    display: none;
  }
}

/* ============================================================================
 * RESTAURADO — reglas de av-pagination borradas por commits de reset V8
 * (recuperadas completas desde dd56dac5a). Scope-restringido; sin colateral.
 * ============================================================================ */
/* ===========================================================================
 §22 Pagination — app-wide pagination control
 Used by any table / list with a 1-based CurrentPage + PageSize + TotalCount
 tuple. Visual baseline: flat solid primary pill for the active page, no
 ripple / focus halo (we render buttons via MudElement HtmlTag="button"
 so MudButton's two-tone overlay does not apply).
 =========================================================================== */

.av-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0.5rem 1rem;
  border-top: 1px solid var(--color-gray-200);
}

html.dark .av-pagination {
  border-top-color: var(--color-dark-500);
}

@media (max-width: 640px) {
  .av-pagination {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
}

/* ============================================================================
 * RESTAURADO — reglas de av-table-card__btn borradas por commits de reset V8
 * (recuperadas completas desde dd56dac5a). Scope-restringido; sin colateral.
 * ============================================================================ */
/* Pill-shaped primary action on the toolbar (Add / New …). Matches the
 visual rhythm of MudTextField Margin="Dense" (~38px) so search + button
 line up. */
.av-table-card__btn.mud-button-root {
  background: var(--color-primary-600);
  color: var(--color-white);
  text-transform: none;
  letter-spacing: 0;
  border-radius: var(--radius-md);
  height: 32px;
  min-width: 0;
  padding: 0 12px;
  box-shadow: none;
}

.av-table-card__btn.mud-button-root .mud-button-label {
  font-weight: 500;
  font-size: var(--text-xs);
}

.av-table-card__btn.mud-button-root .mud-icon-root {
  width: 16px;
  height: 16px;
}

.av-table-card__btn.mud-button-root:hover {
  background: var(--color-primary-700);
  box-shadow: none;
}

html.dark .av-table-card__btn.mud-button-root {
  background: var(--color-primary-500);
}

html.dark .av-table-card__btn.mud-button-root:hover {
  background: var(--color-primary-400);
}

/* Disabled state — explicit gray rather than Mud's default opacity reduction
 on the primary fill. Used when an action is gated (e.g. "Next" until a
 template is selected). */
.av-table-card__btn.mud-button-root:disabled,
.av-table-card__btn.mud-button-root.mud-disabled,
.av-table-card__btn.mud-button-disabled {
  background: var(--color-gray-200) !important;
  color: var(--color-gray-400) !important;
  cursor: not-allowed;
  opacity: 1 !important;
}

html.dark .av-table-card__btn.mud-button-root:disabled,
html.dark .av-table-card__btn.mud-button-root.mud-disabled,
html.dark .av-table-card__btn.mud-button-disabled {
  background: var(--color-dark-600) !important;
  color: var(--color-dark-400) !important;
}

@media (max-width: 640px) {
  .av-table-card__btn.mud-button-root {
    width: 100%;
  }
}

/* ============================================================================
 * §54 ─── Av-Add-Btn — primary "Add X" action for section / card headers
 * ============================================================================
 * Same visual contract as the table-card primary button, but semantically
 * scoped to section/card headers (e.g. the "Add Address" / "Add Stakeholder" /
 * "Add Industry" buttons in the Organization detail tabs) — NOT to a datatable
 * toolbar. Use on a MudButton with StartIcon + DisableElevation:
 *   <MudButton StartIcon="@HeroIcons.Outline.Plus" Class="av-add-btn"
 *              DisableElevation="true" OnClick="...">Add X</MudButton>
 * The class owns the full look (primary fill, white text, theme-aware), so do
 * NOT pass Variant / Color. */
.av-add-btn.mud-button-root {
    background: var(--color-primary-600);
    color: var(--color-white);
    text-transform: none;
    letter-spacing: 0;
    border-radius: var(--radius-md);
    height: 32px;
    min-width: 0;
    padding: 0 12px;
    box-shadow: none;
}

.av-add-btn.mud-button-root .mud-button-label {
    font-weight: 500;
    font-size: var(--text-xs);
}

.av-add-btn.mud-button-root .mud-icon-root {
    width: 16px;
    height: 16px;
}

.av-add-btn.mud-button-root:hover {
    background: var(--color-primary-700);
    box-shadow: none;
}

html.dark .av-add-btn.mud-button-root {
    background: var(--color-primary-500);
}

html.dark .av-add-btn.mud-button-root:hover {
    background: var(--color-primary-400);
}

.av-add-btn.mud-button-root:disabled,
.av-add-btn.mud-button-root.mud-disabled,
.av-add-btn.mud-button-disabled {
    background: var(--color-gray-200) !important;
    color: var(--color-gray-400) !important;
    cursor: not-allowed;
    opacity: 1 !important;
}

html.dark .av-add-btn.mud-button-root:disabled,
html.dark .av-add-btn.mud-button-root.mud-disabled,
html.dark .av-add-btn.mud-button-disabled {
    background: var(--color-dark-600) !important;
    color: var(--color-dark-400) !important;
}

@media (max-width: 640px) {
    .av-add-btn.mud-button-root {
        width: 100%;
    }
}

/* ============================================================================
 * RESTAURADO — reglas de av-cells-left, av-datagrid-toolbar__chip borradas por commits de reset V8
 * (recuperadas completas desde dd56dac5a). Scope-restringido; sin colateral.
 * ============================================================================ */
/* Cell alignment (head + body) — scope-restringido a tablas que opten in:
 - .av-datagrid wrapper (AdvancedTable / AdvancedGrid showcases) — opt-in via wrapper.
 - .styled-table.av-cells-left — opt-in via class directo en el MudTable
 (TableShowcase Basic + cualquier tabla standalone que quiera el patrón).
 Las celdas marcadas explicitamente con .cell-center (columna Actions, etc.)
 preservan su centrado. La regla bate el auto-center :has(.mud-chip) /
 :has(.mud-icon-button) del styled-table base por especificidad (5,0) vs (3,0). */
.av-datagrid .styled-table .mud-table-head .mud-table-cell:not(.cell-center):not(.cell-right),
.av-datagrid .styled-table .mud-table-body .mud-table-cell:not(.cell-center):not(.cell-right),
.styled-table.av-cells-left .mud-table-head .mud-table-cell:not(.cell-center):not(.cell-right),
.styled-table.av-cells-left .mud-table-body .mud-table-cell:not(.cell-center):not(.cell-right) {
  text-align: left;
}

/* RTL — the forced left-alignment above is an LTR opt-in; under RTL the cells
   must sit against the start (right) edge, else the header opens a whitespace
   gap on the leading side. `.mud-rtl` (direction:rtl) is stamped on a
   layout-level ancestor, so these are descendant selectors. */
[dir="rtl"] .av-datagrid .styled-table .mud-table-head .mud-table-cell:not(.cell-center):not(.cell-right),
[dir="rtl"] .av-datagrid .styled-table .mud-table-body .mud-table-cell:not(.cell-center):not(.cell-right),
[dir="rtl"] .styled-table.av-cells-left .mud-table-head .mud-table-cell:not(.cell-center):not(.cell-right),
[dir="rtl"] .styled-table.av-cells-left .mud-table-body .mud-table-cell:not(.cell-center):not(.cell-right) {
  text-align: right;
}

[dir="rtl"] .av-datagrid .mud-data-grid-header-cell:not(.cell-center):not(.cell-right) {
  text-align: right;
}

/* Trailing (cell-right) columns point to the left edge in RTL. */
[dir="rtl"] .styled-table .mud-table-cell.cell-right,
[dir="rtl"] .styled-table .mud-data-grid-header-cell.cell-right {
  text-align: left;
}

.av-datagrid
  .styled-table.mud-table-bordered
  .mud-table-container
  .mud-table-root
  .mud-table-body
  .mud-table-row
  .mud-table-cell:not(:last-child) {
  border-right: 1px solid var(--color-gray-200);
}

html.dark
  .av-datagrid
  .styled-table.mud-table-bordered
  .mud-table-container
  .mud-table-root
  .mud-table-body
  .mud-table-row
  .mud-table-cell:not(:last-child) {
  border-right-color: var(--color-dark-600);
}

.av-datagrid
  .styled-table.mud-table-striped
  .mud-table-container
  .mud-table-root
  .mud-table-body
  .mud-table-row:nth-of-type(odd)
  > .mud-table-cell {
  background-color: var(--color-gray-100);
}

html.dark
  .av-datagrid
  .styled-table.mud-table-striped
  .mud-table-container
  .mud-table-root
  .mud-table-body
  .mud-table-row:nth-of-type(odd)
  > .mud-table-cell {
  background-color: var(--color-dark-800);
}

/* Filter pill (showcase Advanced Table/Grid) — MudButton Outlined Size.Small
 base ya provee el look idle. La clase .is-active modificadora (toggled desde
 el showcase via @* `_vipFilter ? "is-active" : ""` *@) pinta el active state
 con primary tint + border + text para señalizar que el filtro está aplicado. */
.av-datagrid-toolbar__chip.mud-button-root.is-active {
  border-color: var(--color-primary-600);
  color: var(--color-primary-700);
  background: rgb(from var(--color-primary-500) r g b / 0.08);
}

html.dark .av-datagrid-toolbar__chip.mud-button-root.is-active {
  border-color: var(--color-primary-400);
  color: var(--color-primary-300);
  background: rgb(from var(--color-primary-400) r g b / 0.16);
}

/* ============================================================================
 * RESTAURADO — reglas de av-address-card, av-permission-tree, av-filter-popover, av-permission-list, av-table-card, av-form-errors, av-tailux-table borradas por commits de reset V8
 * (recuperadas completas desde dd56dac5a). Scope-restringido; sin colateral.
 * ============================================================================ */
html.dark .av-filter-popover__radio-dot {
  border-color: var(--color-dark-400);
}

html.dark .av-filter-popover__item--selected .av-filter-popover__radio-dot {
  border-color: var(--color-primary-400);
  background-color: var(--color-primary-400);
}

/* ----------------------------------------------------------------------------
   av-filter-popover__group / __radio — MudRadioGroup + MudRadio integration
   for filter chip popovers. The group renders nothing visible (no MudInput
   chrome around the items list), and the inner radio is non-interactive so
   the MudMenuItem's OnClick is the single source of state change (otherwise
   the group's ValueChanged would fire too and double-trigger the filter).
   The radio is purely a visual indicator that reads `FilterCategory` /
   `FilterDateRange` via the group's one-way binding. */
.av-filter-popover__group.mud-input-control {
  margin: 0 !important;
  padding: 0 !important;
}

.av-filter-popover__group .mud-input-control-input-container {
  padding: 0 !important;
  margin: 0 !important;
}

.av-filter-popover__group .mud-input-helper-text {
  display: none !important;
}

/* The radio sits where the deprecated `__radio-dot` span used to — no extra
   margin, the same flex slot. Mud paints `.mud-radio` with its own padding
   for ripple area; collapse it so the popover row stays compact. */
.av-filter-popover__radio.mud-radio {
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0;
  /* MudMenuItem captures the click → calls OnXFilterClick → updates the
       bound FilterX → group re-renders → this radio shows the new checked
       state. Without `pointer-events: none` the radio would also fire the
       group's ValueChanged on its own click and we'd double-call the
       handler. */
  pointer-events: none;
}

/* Footer wrapper — the Clear Filter button is flush with the popover edges
   (rounded-none, no inset padding). The button's own background acts as the
   visual separator from the items list above; no border-top needed. */
.av-filter-popover__footer {
  display: flex;
  padding: 0;
}

/* The `:not(.mud-icon-button):not(.mud-fab)` chain echoes mud-bridge.css §LAST-2
   which globally forces `border-radius: var(--radius-lg)` on every MudButton.
   Without matching those :not()s here, that global rule wins by specificity
   and the Clear Filter button gets rounded top corners — which we don't want
   inside a popover footer that must be flush with the panel edges. */
.av-filter-popover__clear.mud-button-root:not(.mud-icon-button):not(.mud-fab) {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-sans);
  font-size: var(--text-xs-plus);
  font-weight: 500;
  color: var(--color-gray-900);
  background: rgb(from var(--color-gray-200) r g b / 0.7);
  border: 0;
  border-radius: 0 !important;
  box-shadow: none;
}

.av-filter-popover__clear.mud-button-root:not(.mud-icon-button):not(
    .mud-fab
  ):hover,
.av-filter-popover__clear.mud-button-root:not(.mud-icon-button):not(
    .mud-fab
  ):focus {
  background: var(--color-gray-200);
  color: var(--color-gray-900);
}

.av-filter-popover__clear.mud-button-root:not(.mud-icon-button):not(
    .mud-fab
  ):active {
  background: rgb(from var(--color-gray-200) r g b / 0.8);
}

html.dark
  .av-filter-popover__clear.mud-button-root:not(.mud-icon-button):not(
    .mud-fab
  ) {
  color: var(--color-dark-50);
  background: var(--surface-2);
}

html.dark
  .av-filter-popover__clear.mud-button-root:not(.mud-icon-button):not(
    .mud-fab
  ):hover,
html.dark
  .av-filter-popover__clear.mud-button-root:not(.mud-icon-button):not(
    .mud-fab
  ):focus {
  background: var(--surface-1);
}

html.dark
  .av-filter-popover__clear.mud-button-root:not(.mud-icon-button):not(
    .mud-fab
  ):active {
  background: rgb(from var(--surface-1) r g b / 0.9);
}

/* ============================================================================
   FilterSelector popover — search input header (mirrors Tailux Combobox).
   The FilterSelector button itself reuses the base .av-table-filter-btn
   style (no special variant) so visually it sits in the same row as the
   other chips; only its badge content differs (a count, not a value label).
   ============================================================================ */

/* Search header — the entire strip carries a soft gray-100 background; the
   bg itself acts as the visual separator from the items list below (no
   border-bottom). Matches Tailux Combobox: `bg-gray-100 py-1` container with
   a borderless input floating inside. */
.av-filter-popover__search {
  padding: 1px 6px;
  margin-bottom: 3px;
  background: var(--color-gray-100);
  border-bottom: 0;
}

html.dark .av-filter-popover__search {
  background: var(--color-dark-900);
  border-bottom: 0;
}

/* Compact height (32 px), matches the chip family rhythm. */
.av-filter-popover__search .mud-input-control {
  height: 32px;
  min-height: 32px;
}

.av-filter-popover__search .mud-input-control .mud-input,
.av-filter-popover__search .mud-input-control .mud-input-slot {
  min-height: 32px;
  height: 32px;
}

.av-filter-popover__search .mud-input-control .mud-input-slot input {
  font-size: var(--text-xs-plus);
  padding-top: 0;
  padding-bottom: 0;
}

/* Kill the outlined fieldset entirely. The Mud bridge (§LAST-3) repaints the
   border on every state of `.mud-input-outlined-border`; instead of fighting
   it with `border-color: transparent`, we remove the fieldset from the render
   tree. The fieldset is a sibling of the actual <input>, so display:none
   doesn't affect the input's layout. */
.av-filter-popover__search .mud-input-outlined-border,
.av-filter-popover__search
  .mud-input.mud-input-outlined
  .mud-input-outlined-border {
  display: none !important;
}

.av-filter-popover__search .mud-input-control .mud-input-adornment-start {
  margin-top: 0;
}

/* Magnifying glass + placeholder both render gray at rest and switch to the
   active brand primary only when the input is focused. Matches the Tailux
   Combobox: `text-gray-400 peer-focus:text-primary-600`. */
.av-filter-popover
  .av-filter-popover__search
  .mud-input-control
  .mud-input-adornment
  .mud-icon-root,
.av-filter-popover__search
  .mud-input.mud-input-outlined
  .mud-input-adornment
  .mud-icon-root {
  width: 16px !important;
  height: 16px !important;
  font-size: 16px !important;
  color: var(--color-gray-400) !important;
  transition: color 150ms ease;
}

.av-filter-popover
  .av-filter-popover__search
  .mud-input-control
  .mud-input-slot
  input::placeholder,
.av-filter-popover__search
  .mud-input.mud-input-outlined
  .mud-input-slot
  input::placeholder {
  color: var(--color-gray-400) !important;
  opacity: 1;
}

/* Focus state — both icon and (placeholder remains because text is gray
   while typing). The icon turns primary to signal the active input. */
.av-filter-popover__search
  .mud-input-control:focus-within
  .mud-input-adornment
  .mud-icon-root,
.av-filter-popover__search
  .mud-input.mud-input-outlined:focus-within
  .mud-input-adornment
  .mud-icon-root {
  color: var(--color-primary-600) !important;
}

html.dark
  .av-filter-popover
  .av-filter-popover__search
  .mud-input-control
  .mud-input-adornment
  .mud-icon-root,
html.dark
  .av-filter-popover__search
  .mud-input.mud-input-outlined
  .mud-input-adornment
  .mud-icon-root {
  color: var(--color-dark-300) !important;
}

html.dark
  .av-filter-popover
  .av-filter-popover__search
  .mud-input-control
  .mud-input-slot
  input::placeholder,
html.dark
  .av-filter-popover__search
  .mud-input.mud-input-outlined
  .mud-input-slot
  input::placeholder {
  color: var(--color-dark-300) !important;
}

html.dark
  .av-filter-popover__search
  .mud-input-control:focus-within
  .mud-input-adornment
  .mud-icon-root,
html.dark
  .av-filter-popover__search
  .mud-input.mud-input-outlined:focus-within
  .mud-input-adornment
  .mud-icon-root {
  color: var(--color-primary-500) !important;
}

/* Empty state shown when the search query filters out every available filter */
.av-filter-popover__empty {
  padding: 16px 12px;
  text-align: center;
  color: var(--color-gray-500);
}

html.dark .av-filter-popover__empty {
  color: var(--color-dark-300);
}

/* Checkbox row inside the selector popover — replaces the radio-dot pattern */
.av-filter-popover__check {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid var(--color-gray-400);
  background: transparent;
  flex-shrink: 0;
  position: relative;
  transition:
    background 150ms ease,
    border-color 150ms ease;
}

.av-filter-popover__item--selected .av-filter-popover__check {
  background: var(--color-primary-500);
  border-color: var(--color-primary-500);
}

.av-filter-popover__item--selected .av-filter-popover__check::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid var(--color-white);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

html.dark .av-filter-popover__check {
  border-color: var(--color-dark-400);
}

html.dark .av-filter-popover__item--selected .av-filter-popover__check {
  background: var(--color-primary-400);
  border-color: var(--color-primary-400);
}

/* FilterSelector popover items are MULTI-select (checkboxes). The checked
   state is communicated by the filled blue check itself — the row should
   NOT also gain a tinted background or bold/primary label, otherwise it
   reads like a single-select radio. Scoped with :has() so the rule fires
   only on items that carry a `.av-filter-popover__check` indicator and
   leaves the radio-dot rows (single-select chip popovers) untouched. */
.av-filter-popover__item--selected.mud-list-item:has(.av-filter-popover__check),
.av-filter-popover__item--selected.mud-menu-item:has(
    .av-filter-popover__check
  ) {
  background-color: transparent !important;
}

.av-filter-popover__item--selected:has(.av-filter-popover__check)
  .av-filter-popover__item-name.mud-typography {
  color: var(--color-gray-800);
  font-weight: 400;
}

html.dark
  .av-filter-popover__item--selected:has(.av-filter-popover__check)
  .av-filter-popover__item-name.mud-typography {
  color: var(--color-dark-100);
}

/* Sticky filter row — locked active, not disabled. MudMenuItem with Disabled
   defaults to 0.5 opacity which would read as "unavailable"; we override to
   full opacity so the row stays prominently checked, but block interaction
   (cursor + no hover tint) so the user can't toggle it off. Paired with the
   `key == "contacts" && !enabled` guard in ToggleToolbarFilter. */
.av-filter-popover__item--sticky.mud-list-item.mud-disabled,
.av-filter-popover__item--sticky.mud-menu-item.mud-disabled {
  opacity: 1 !important;
  cursor: not-allowed !important;
  pointer-events: auto !important;
}

.av-filter-popover__item--sticky.mud-list-item.mud-disabled:hover,
.av-filter-popover__item--sticky.mud-menu-item.mud-disabled:hover {
  background-color: transparent !important;
}

/* — Tab Services wrapper: card around the table area — — — — — — — — — — */

.av-table-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

html.dark .av-table-card {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

/* Toolbar above the table — title left, search right */
.av-table-card__toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-gray-200);
}

html.dark .av-table-card__toolbar {
  border-bottom-color: var(--color-dark-500);
}

.av-table-card__title {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.av-table-card__title-text.mud-typography {
  color: var(--color-gray-900);
}

html.dark .av-table-card__title-text.mud-typography {
  color: var(--color-dark-50);
}

.av-table-card__title-hint.mud-typography {
  color: var(--color-gray-500);
}

html.dark .av-table-card__title-hint.mud-typography {
  color: var(--color-dark-300);
}

.av-table-card__search {
  flex-shrink: 0;
  width: 280px;
  max-width: 100%;
}

/* Match the input height to the toolbar button height (32 px, set on
   `.av-table-card__btn`) so search + Add button read as a single horizontally
   aligned row. Mud's default Dense Outlined input sits at ~40px, which towers
   over the buttons; this override aligns them. Mirrors the same pattern
   applied to `.av-page-filters__search` above. */
.av-table-card__search .mud-input-control {
  height: 32px;
  min-height: 32px;
}

.av-table-card__search .mud-input-control .mud-input,
.av-table-card__search .mud-input-control .mud-input-slot {
  min-height: 32px;
  height: 32px;
}

.av-table-card__search .mud-input-control .mud-input-slot input {
  font-size: var(--text-xs);
  padding-top: 0;
  padding-bottom: 0;
}

.av-table-card__search .mud-input-control .mud-input-outlined-border {
  border-radius: var(--radius-md);
}

.av-table-card__search .mud-input-control .mud-input-adornment-start {
  margin-top: 0;
}

.av-table-card__search .mud-input-control .mud-input-adornment .mud-icon-root {
  width: 16px;
  height: 16px;
  font-size: 16px;
}

/* Toolbar tools cluster — search + primary action button side-by-side,
 replacing the legacy "search-only" slot when the toolbar needs an action. */
.av-table-card__tools {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Clickable-row modifier — adds cursor:pointer so users know the row is
 interactive. Use on tables with OnRowClick to pick a record (wizards,
 pickers). Multi-row select tables should keep the default cursor. */
.av-tailux-table--clickable .mud-table-body .mud-table-row {
  cursor: pointer;
}

/* The MudTable lives flush inside the card so its head row meets the toolbar
 border without a double divider. */
.av-table-card .av-tailux-table .mud-table-container {
  border-radius: 0;
}

.av-table-card .av-tailux-table .mud-table-head .mud-table-cell:first-child,
.av-table-card .av-tailux-table .mud-table-head .mud-table-cell:last-child {
  border-radius: 0;
}

.av-table-card .av-tailux-table .mud-table-pagination,
.av-table-card .av-tailux-table .mud-table-pagination-toolbar {
  border: 0;
  border-top: 1px solid var(--color-gray-200);
  border-radius: 0;
  background: transparent;
}

html.dark .av-table-card .av-tailux-table .mud-table-pagination,
html.dark .av-table-card .av-tailux-table .mud-table-pagination-toolbar {
  border-top-color: var(--color-dark-500);
}

.av-address-card__actions {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Icon-only round buttons used in the head actions row (Copy + Edit) */
.av-address-card__icon-btn.mud-icon-button {
  width: 32px;
  height: 32px;
  padding: 6px;
  border-radius: 9999px;
  color: var(--color-gray-600);
  background: transparent;
  transition:
    background-color 150ms ease,
    color 150ms ease;
}

.av-address-card__icon-btn.mud-icon-button:hover {
  background: var(--color-gray-100);
  color: var(--color-gray-900);
}

.av-address-card__icon-btn.mud-icon-button .mud-icon-root {
  width: 16px;
  height: 16px;
}

html.dark .av-address-card__icon-btn.mud-icon-button {
  color: var(--color-dark-200);
}

html.dark .av-address-card__icon-btn.mud-icon-button:hover {
  background: var(--color-dark-600);
  color: var(--color-dark-50);
}

/* Primary tint when the action is the main affordance of the card head */
.av-address-card__icon-btn--primary.mud-icon-button {
  color: var(--color-primary-600);
}

.av-address-card__icon-btn--primary.mud-icon-button:hover {
  background: rgb(from var(--color-primary-600) r g b / 0.1);
  color: var(--color-primary-700);
}

html.dark .av-address-card__icon-btn--primary.mud-icon-button {
  color: var(--color-primary-300);
}

html.dark .av-address-card__icon-btn--primary.mud-icon-button:hover {
  background: rgb(from var(--color-primary-400) r g b / 0.16);
  color: var(--color-primary-200);
}

/* Field grid — 2 cols, with a dashed divider between rows like the legacy card */
.av-address-card__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px 24px;
}

.av-address-card__grid + .av-address-card__grid {
  padding-top: 12px;
  border-top: 1px dashed var(--color-gray-200);
}

html.dark .av-address-card__grid + .av-address-card__grid {
  border-top-color: var(--color-dark-500);
}

.av-address-card__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.av-address-card__label.mud-typography {
  color: var(--color-gray-500);
}

html.dark .av-address-card__label.mud-typography {
  color: var(--color-dark-300);
}

.av-address-card__value.mud-typography {
  color: var(--color-gray-900);
  word-break: break-word;
}

html.dark .av-address-card__value.mud-typography {
  color: var(--color-dark-50);
}


/* ===========================================================================
 §23 Permission list — read-only chip-row list used inside ShowPermissionsDialog
 (and any other surface that needs to render a flat list of permission names).
 =========================================================================== */

.av-permission-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
  max-height: 380px;
  overflow-y: auto;
  padding-right: 4px;
}

.av-permission-list__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-100);
  min-width: 0;
}

html.dark .av-permission-list__item {
  background: rgb(from var(--color-dark-500) r g b / 0.3);
  border-color: var(--color-dark-500);
}

.av-permission-list__icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  background: rgb(from var(--color-primary-600) r g b / 0.1);
  color: var(--color-primary-600);
  flex-shrink: 0;
}

.av-permission-list__icon-wrap .mud-icon-root {
  width: 14px;
  height: 14px;
}

html.dark .av-permission-list__icon-wrap {
  background: rgb(from var(--color-primary-400) r g b / 0.16);
  color: var(--color-primary-300);
}

.av-permission-list__text.mud-typography {
  color: var(--color-gray-800);
  /* Read-only list: full permission name must be legible. Names are dotted
     tokens with no spaces (Controller.Action), so wrap needs anywhere. */
  overflow-wrap: anywhere;
}

html.dark .av-permission-list__text.mud-typography {
  color: var(--color-dark-50);
}

/* Empty state when the search yields no matches */
.av-permission-list__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 16px;
  border-radius: var(--radius-lg);
  background: var(--color-gray-50);
  border: 1px dashed var(--color-gray-200);
  color: var(--color-gray-500);
}

html.dark .av-permission-list__empty {
  background: rgb(from var(--color-dark-500) r g b / 0.2);
  border-color: var(--color-dark-500);
  color: var(--color-dark-300);
}

.av-permission-list__empty-icon.mud-icon-root {
  width: 28px;
  height: 28px;
}

.av-permission-list__empty-text.mud-typography {
  color: inherit;
}

/* ===========================================================================
 §24 Permission tree — wrapper around MudTreeView used in AddRoleDialog so
 the tree reads as a framed control instead of a bare list on top of the
 dialog background.
 =========================================================================== */

.av-permission-tree {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-200);
  background: var(--color-white);
  overflow: hidden;
}

html.dark .av-permission-tree {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}

/* Licence view (ShowGrantSource): row = permission name + one procedencia chip per GrantSource flag.
   Layout only — the name's typography comes from Typo.body2, the chips carry their own scale. */
.av-permission-tree__grant-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  width: 100%;
}

.av-permission-tree__grant-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.av-permission-tree__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-gray-100);
  background: var(--color-gray-50);
}

html.dark .av-permission-tree__header {
  background: rgb(from var(--color-dark-500) r g b / 0.3);
  border-bottom-color: var(--color-dark-500);
}

.av-permission-tree__title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* Two-line title (title + hint) used in page-level placements */
.av-permission-tree__title-text-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.av-permission-tree__title-hint.mud-typography {
  color: var(--color-gray-500);
}

html.dark .av-permission-tree__title-hint.mud-typography {
  color: var(--color-dark-300);
}

/* Page-level placement: the tree sits on the page background instead of a
 dialog body, so the framing border softens slightly. */
.av-permission-tree--page {
  border-color: var(--color-gray-200);
}

html.dark .av-permission-tree--page {
  border-color: var(--color-dark-500);
}

.av-permission-tree__title-icon.mud-icon-root {
  color: var(--color-primary-600);
  width: 18px;
  height: 18px;
}

html.dark .av-permission-tree__title-icon.mud-icon-root {
  color: var(--color-primary-300);
}

.av-permission-tree__title-text.mud-typography {
  color: var(--color-gray-900);
}

html.dark .av-permission-tree__title-text.mud-typography {
  color: var(--color-dark-50);
}

.av-permission-tree__body {
  max-height: 360px;
  overflow-y: auto;
  padding: 8px 4px;
  background: var(--color-white);
}

html.dark .av-permission-tree__body {
  background: var(--color-dark-700);
}

/* Tall variant for full-page placements where the tree is the main canvas */
.av-permission-tree__body--tall {
  max-height: 60vh;
  padding: 12px 8px;
}

/* Tighten Mud's row spacing so the tree reads as a compact, professional list.
 Parent rows keep a tight 4px vertical rhythm; child rows (the ones rendered
 inside a `.mud-collapse-wrapper` when a parent is expanded) get 8px so they
 read clearly without the chevron / icon column making them feel cramped. */
.av-permission-tree .mud-treeview-item {
  background: transparent !important;
}

.av-permission-tree .mud-treeview-item-content {
  padding: 4px 8px;
  gap: 8px;
  border-radius: var(--radius-md);
  transition: background-color 120ms ease;
}

.av-permission-tree .mud-treeview-item-content:hover {
  background: var(--color-gray-100);
}

html.dark .av-permission-tree .mud-treeview-item-content:hover {
  background: rgb(from var(--color-dark-500) r g b / 0.4);
}

.av-permission-tree .mud-treeview-item-label {
  color: var(--color-gray-800);
  font-size: var(--text-xs-plus);
}

html.dark .av-permission-tree .mud-treeview-item-label {
  color: var(--color-dark-100);
}

/* Slightly larger gap between sibling nodes so the rows do not feel glued */
.av-permission-tree .mud-treeview-group .mud-treeview-item + .mud-treeview-item,
.av-permission-tree > .mud-treeview-item + .mud-treeview-item {
  margin-top: 2px;
}

/* MudBlazor reserves a 32px-wide icon slot per tree item (plus 4px right
 margin) regardless of whether the item actually has an icon — that's
 ~36px of dead space before every label that reads as accidental padding.
 Shrink the slot to just-enough for our lock icon (14px) and drop the
 margin. The slot stays a fixed width so locked / non-locked siblings
 still align vertically; non-locked items just have a slightly smaller
 empty slot. */
.av-permission-tree .mud-treeview-item-icon {
  width: 18px;
  margin-right: 0;
  margin-inline-end: 0;
}

/* Within that tighter slot, right-align the lock so it lands against the
 label text instead of being centered with empty space on both sides. */
.av-permission-tree .fixed-permission-item .mud-treeview-item-icon {
  justify-content: flex-end;
}

/* Indeterminate (partial-selection) parent visual.
 MudBlazor 9.2 applies `.mud-checkbox-null` to a parent's checkbox button
 when its loaded children are partially selected (driven by AutoSelectParent
 + TriState). The library ships the class as a hook but provides NO default
 visual rules for it, and inside an ItemTemplate the IndeterminateIcon swap
 doesn't reliably fire — the rendered SVG stays as CheckBoxOutlineBlank.
 We paint the indeterminate visual explicitly: filled primary square with
 a white horizontal dash, matching Material Design's IndeterminateCheckBox. */
.av-permission-tree__view
  .mud-treeview-item-checkbox
  .mud-icon-button.mud-checkbox-null {
  position: relative;
  color: var(--color-primary-600);
}

/* Hide the SVG MudBlazor renders (it doesn't match the null state). */
.av-permission-tree__view
  .mud-treeview-item-checkbox
  .mud-icon-button.mud-checkbox-null
  .mud-icon-root {
  visibility: hidden;
}

/* Filled square — same size and radius as Material's IndeterminateCheckBox. */
.av-permission-tree__view
  .mud-treeview-item-checkbox
  .mud-icon-button.mud-checkbox-null::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  background-color: currentColor;
  border-radius: 3px;
  pointer-events: none;
}

/* Horizontal dash inside the square. */
.av-permission-tree__view
  .mud-treeview-item-checkbox
  .mud-icon-button.mud-checkbox-null::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 2px;
  background-color: var(--color-white);
  border-radius: 1px;
  pointer-events: none;
}

html.dark
  .av-permission-tree__view
  .mud-treeview-item-checkbox
  .mud-icon-button.mud-checkbox-null {
  color: var(--color-primary-400);
}

/* ===========================================================================
 §25 Form errors — friendly inline error block inside a form-dialog body.
 Replaces the legacy MudExpansionPanel "Validation Summary" UI.
 =========================================================================== */

.av-form-errors {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin-top: 12px;
  border-radius: var(--radius-md);
  background: rgb(from var(--color-error) r g b / 0.08);
  border: 1px solid rgb(from var(--color-error) r g b / 0.25);
  color: var(--color-error-darker);
}

html.dark .av-form-errors {
  background: rgb(from var(--color-error) r g b / 0.14);
  border-color: rgb(from var(--color-error) r g b / 0.35);
  color: var(--color-error-light);
}

.av-form-errors__icon.mud-icon-root {
  color: inherit;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}

.av-form-errors__list {
  list-style: disc;
  padding-left: 16px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.av-form-errors__item .mud-typography {
  color: inherit;
}

@media (max-width: 640px) {
  .av-table-card__toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .av-table-card__search {
    width: 100%;
  }

  .av-table-card__tools {
    flex-direction: column;
    align-items: stretch;
  }

  .av-address-card__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .av-table-card__btn.mud-button-root {
    width: 100%;
  }
}

/* ============================================================================
 * RESTAURADO — reglas de av-phone-input, av-avatar-group, av-avatar-xs, av-avatar-xl, av-avatar-xxl borradas por commits de reset V8
 * (recuperadas completas desde dd56dac5a). Scope-restringido; sin colateral.
 * ============================================================================ */
/* 4) Label is FORCED permanently into the shrunk (floating) position via a
   transform. Without this, the label sits in the natural centered position
   when the input is empty + unfocused, and the intl-tel-input country
   selector (the flag + dial code on the left) renders on top of it,
   producing the visual collapse you saw in the Tenant Contact Phone vs
   Email comparison. The background pin makes the label "cut" the border
   cleanly; --color-white / --color-dark-700 matches both .av-page-card and
   .av-form-dialog so the cut looks unbroken in either surface. Padding 0 4px
   gives the label some lateral breath inside the cut. */
.av-phone-input.mud-input-control .mud-input-label-outlined {
  transform: translate(14px, -6px) scale(0.75) !important;
  background-color: var(--color-white) !important;
  padding: 0 4px !important;
}

html.dark .av-phone-input.mud-input-control .mud-input-label-outlined {
  background-color: var(--color-dark-700) !important;
}

/* 5) Vertical padding variants — exact values pulled from MudBlazor 9.2.0
   `MudBlazor.min.css` for outlined inputs so the phone input lines up flush
   with sibling MudTextFields in the same form:
     • Dense  → `padding: 10.5px` (rule `input.mud-input-root-outlined.mud-input-root-margin-dense`)
     • Normal → `padding: 18.5px` (rule `input.mud-input-root-outlined`)
   The library does NOT respect the parent's Margin prop on the iti__tel-input
   directly, so we apply the same numbers here with !important to win against
   the vendored override at `lib/intl-tel-input/intlTelInput.css §end`. */
.av-phone-input--dense .iti__tel-input {
  padding-top: 10.5px !important;
  padding-bottom: 10.5px !important;
}

.av-phone-input--normal .iti__tel-input {
  padding-top: 18.5px !important;
  padding-bottom: 18.5px !important;
}

/* 6) Border parity with sibling inputs. The phone field is a standard Outlined
   MudTextField, so MudBlazor's `.mud-input-outlined-border` <fieldset> is the
   single source of the border (painted by the global state machine §6.1 +
   bridge §LAST-3, identical to every other input). The intl-tel-input native
   <input> (`.iti__tel-input`) must therefore NOT draw any border / box-shadow
   of its own — otherwise it stacks a stray UA/library line inside the Mud
   border with a different color + width. We also re-assert the fieldset state
   machine here (descendant selectors, same tokens as §6.1 / bridge) so the
   border matches siblings in every state even though intl-tel-input restructures
   the input subtree. Scope-restricted to av-phone-input — zero collateral. */

.av-phone-input .iti__tel-input,
.av-phone-input .iti__tel-input:focus,
.av-phone-input .iti__tel-input:focus-visible {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    /* Kill the browser's native focus outline on the intl-tel-input <input>.
       Regular MudTextFields suppress it already, but the native iti input keeps
       it, drawing a stray rounded ring on top of Mud's outlined fieldset on
       focus — the mismatch seen vs sibling inputs. The focus highlight must come
       ONLY from the Mud fieldset (primary-600, painted above), like every other
       field. */
    outline: none !important;
}

/* idle — gray-300 / dark-400, 1 px (matches §6.1 idle). */
.av-phone-input .mud-input.mud-input-outlined:not(:focus-within):not(.mud-input-error) .mud-input-outlined-border {
    border-width: 1px !important;
    border-color: var(--color-gray-300) !important;
}
html.dark .av-phone-input .mud-input.mud-input-outlined:not(:focus-within):not(.mud-input-error) .mud-input-outlined-border {
    border-color: var(--color-dark-400) !important;
}

/* hover — gray-400 / dark-300. */
.av-phone-input .mud-input.mud-input-outlined:hover:not(.mud-disabled):not(:focus-within):not(.mud-input-error) .mud-input-outlined-border {
    border-color: var(--color-gray-400) !important;
}
html.dark .av-phone-input .mud-input.mud-input-outlined:hover:not(.mud-disabled):not(:focus-within):not(.mud-input-error) .mud-input-outlined-border {
    border-color: var(--color-dark-300) !important;
}

/* focus — primary-600 / primary-500, pinned to 1 px (cancels Mud's 2 px jump). */
.av-phone-input .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-width: 1px !important;
    border-color: var(--color-primary-600) !important;
}
html.dark .av-phone-input .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: var(--color-primary-500) !important;
}

/* error — error / error-lighter, 1 px. */
.av-phone-input.mud-input-error .mud-input-outlined-border,
.av-phone-input .mud-input.mud-input-outlined.mud-input-error .mud-input-outlined-border {
    border-width: 1px !important;
    border-color: var(--color-error) !important;
}
html.dark .av-phone-input.mud-input-error .mud-input-outlined-border,
html.dark .av-phone-input .mud-input.mud-input-outlined.mud-input-error .mud-input-outlined-border {
    border-color: var(--color-error-lighter) !important;
}

/* ===========================================================================
 §26 Av-Avatar Group — stacked overlap pattern (avatars share a ring).
 Use as <div class="av-avatar-group"> wrapping MudAvatars. Each avatar
 overlaps the previous by 8px and shows a 2px surface-color ring.
 =========================================================================== */

.iti--container {
  z-index: 10000 !important;
}

.iti__dropdown-content {
  position: absolute;
  z-index: 1500;
  background: var(--color-white) !important;
  border: 1px solid var(--color-gray-200) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 8px 24px rgb(from var(--color-gray-900) r g b / 0.1) !important;
  overflow: hidden;
}

.iti--container .iti__dropdown-content {
  position: static;
}

html.dark .iti__dropdown-content {
  background: var(--color-dark-700) !important;
  border-color: var(--color-dark-500) !important;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.35) !important;
}

/* Search input at the top of the dropdown — same borderless treatment as the
   FilterSelector popover (av-filter-popover__search): no outlined frame, a
   hairline bottom divider separates the search from the country list.
   padding-left: 36px reserves space for the absolutely-positioned search
   icon (.iti__search-icon) so the placeholder text doesn't sit under it. */
.iti__dropdown-content .iti__search-input {
  background-color: var(--color-white) !important;
  color: var(--color-gray-900) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--color-gray-100) !important;
  border-radius: 0 !important;
  padding: 10px 36px 10px 36px !important;
  font-size: var(--text-xs-plus) !important;
  font-family: var(--font-sans) !important;
  outline: none !important;
  box-shadow: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Search-input wrapper — make the icon position predictable */
.iti__dropdown-content .iti__search-input-wrapper {
  position: relative;
  background: var(--color-white) !important;
}

html.dark .iti__dropdown-content .iti__search-input-wrapper {
  background: var(--color-dark-700) !important;
}

/* Search icon — pin to the left edge, vertically centered */
.iti__dropdown-content .iti__search-icon {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  pointer-events: none;
  color: var(--color-gray-400);
  display: flex;
  align-items: center;
}

html.dark .iti__dropdown-content .iti__search-icon {
  color: var(--color-dark-300);
}

.iti__dropdown-content .iti__search-icon-svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

/* Search clear (X) — same right-edge pinning */
.iti__dropdown-content .iti__search-clear {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer;
  color: var(--color-gray-500);
  padding: 4px;
}

.iti__dropdown-content .iti__search-input:focus,
.iti__dropdown-content .iti__search-input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-bottom-color: var(--color-primary-500) !important;
}

.iti__dropdown-content .iti__search-input::placeholder {
  color: var(--color-gray-400) !important;
  opacity: 1;
}

html.dark .iti__dropdown-content .iti__search-input {
  background-color: var(--color-dark-700) !important;
  color: var(--color-dark-50) !important;
  border-bottom-color: var(--color-dark-600) !important;
}

html.dark .iti__dropdown-content .iti__search-input::placeholder {
  color: var(--color-dark-300) !important;
}

html.dark .iti__dropdown-content .iti__search-input:focus,
html.dark .iti__dropdown-content .iti__search-input:focus-visible {
  border-bottom-color: var(--color-primary-400) !important;
}

/* Country list rows — compact, hover with our subtle gray tint, primary tint
   for the highlighted (keyboard-focused) row. */
.iti__dropdown-content .iti__country-list {
  padding: 4px;
  max-height: 280px;
  background: var(--color-white) !important;
  border: 0 !important;
}

html.dark .iti__dropdown-content .iti__country-list {
  background: var(--color-dark-700) !important;
}

.iti__dropdown-content .iti__country {
  padding: 6px 10px !important;
  border-radius: var(--radius-md) !important;
  transition: background-color 150ms ease !important;
}

.iti__dropdown-content .iti__country:hover,
.iti__dropdown-content .iti__country.iti__highlight {
  background: rgb(from var(--color-gray-900) r g b / 0.04) !important;
}

html.dark .iti__dropdown-content .iti__country:hover,
html.dark .iti__dropdown-content .iti__country.iti__highlight {
  background: rgb(from var(--color-white) r g b / 0.06) !important;
}

.iti__dropdown-content .iti__country.iti__active {
  background: rgb(from var(--color-primary-500) r g b / 0.1) !important;
}

html.dark .iti__dropdown-content .iti__country.iti__active {
  background: rgb(from var(--color-primary-400) r g b / 0.18) !important;
}

/* Country row typography — name in body text, dial code in secondary tone. */
.iti__dropdown-content .iti__country-name {
  color: var(--color-gray-800) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-xs-plus) !important;
}

html.dark .iti__dropdown-content .iti__country-name {
  color: var(--color-dark-100) !important;
}

.iti__dropdown-content .iti__dial-code {
  color: var(--color-gray-500) !important;
  font-family: var(--font-mono) !important;
  font-size: var(--text-xs) !important;
}

html.dark .iti__dropdown-content .iti__dial-code {
  color: var(--color-dark-300) !important;
}

/* Empty state ("No results found for …") inside the dropdown */
.iti__dropdown-content .iti__no-results {
  padding: 12px 14px;
  color: var(--color-gray-500) !important;
  font-size: var(--text-xs-plus) !important;
  text-align: center;
}

html.dark .iti__dropdown-content .iti__no-results {
  color: var(--color-dark-300) !important;
}

.av-avatar-group {
  display: inline-flex;
}

.av-avatar-group > .mud-avatar {
  margin-inline-start: -8px;
  box-shadow: 0 0 0 2px var(--color-white);
  transition:
    transform 150ms ease,
    z-index 150ms ease;
  position: relative;
}

.av-avatar-group > .mud-avatar:first-child {
  margin-inline-start: 0;
}

.av-avatar-group > .mud-avatar:hover {
  transform: translateY(-2px);
  z-index: 1;
}

html.dark .av-avatar-group > .mud-avatar {
  box-shadow: 0 0 0 2px var(--color-dark-800);
}

/* ===========================================================================
 §35 Av-Avatar size scale extensions — xs / xl / xxl.
 MudAvatar natively supports Small/Medium/Large. These add the Guía Visual-style
 smaller xs and bigger xl / xxl. Apply additively:
 <MudAvatar Class="av-avatar-xxl">JD</MudAvatar>
 =========================================================================== */

.av-avatar-xs.mud-avatar {
  width: 24px !important;
  height: 24px !important;
  font-size: 10px !important;
}

.av-avatar-xs.mud-avatar .mud-icon-root {
  width: 14px;
  height: 14px;
  font-size: 14px;
}

.av-avatar-xl.mud-avatar {
  width: 64px !important;
  height: 64px !important;
  font-size: 20px !important;
}

.av-avatar-xl.mud-avatar .mud-icon-root {
  width: 32px;
  height: 32px;
  font-size: 32px;
}

.av-avatar-xxl.mud-avatar {
  width: 96px !important;
  height: 96px !important;
  font-size: 30px !important;
}

.av-avatar-xxl.mud-avatar .mud-icon-root {
  width: 48px;
  height: 48px;
  font-size: 48px;
}

/* ============================================================================
 * Task Manager - reglas minimas para clases referenciadas en markup sin CSS
 * (NO son del reset V8: los componentes TM las usaban sin definir). Espejan a
 * sus hermanos ya estilados. Scope-restringido, dark-safe.
 * ============================================================================ */

/* CompletedView - fecha "cuando": iguala a su hermano __when-time. */
.av-task-completed__when-date {
  color: var(--color-gray-950);
}

html.dark .av-task-completed__when-date {
  color: var(--color-dark-50);
}

/* AddTaskDrawer - campo Visibility (label sobre los tiles). */
.av-task-drawer__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.av-task-drawer__label {
  display: block;
  font-size: var(--text-xs-plus);
  font-weight: 500;
  color: var(--color-gray-700);
}

html.dark .av-task-drawer__label {
  color: var(--color-dark-200);
}

/* TaskClosureDialog - label de campo (ya trae Typo.overline) + seccion follow-up. */
.av-form-dialog__field-label {
  display: block;
  margin-bottom: 6px;
}

.av-form-dialog__follow-section {
  margin-top: 4px;
}

/* ============================================================================
 * RESTAURADO - re-bind de variables intl-tel-input a tokens Avalme (light+dark)
 * borrado por el reset V8. avalme.css solo las ataba a `.phone-input` y
 * `.iti--container`; el dropdown INLINE (intlTelInputInterop.js, sin portal)
 * vive dentro de `.iti` y no recibia el binding -> `--iti-dropdown-bg` caia al
 * default blanco del :root vendorizado -> panel blanco en dark. Atar a `.iti`
 * (ancestro siempre presente, inline y portaleado) lo corrige. El CSS
 * vendorizado ya consume estas vars: dropdown-content bg, country highlight,
 * borde y dial-code. Scope-restringido a intl-tel-input.
 * ============================================================================ */
.iti,
.iti--container {
  --iti-border-color: var(--color-gray-300);
  --iti-hover-color: rgb(from var(--color-gray-900) r g b / 0.04);
  --iti-dropdown-bg: var(--color-white);
  --iti-dialcode-color: var(--color-gray-500);
}

html.dark .iti,
html.dark .iti--container {
  --iti-border-color: var(--color-dark-450);
  --iti-hover-color: rgb(from var(--color-white) r g b / 0.06);
  --iti-dropdown-bg: var(--color-dark-700);
  --iti-dialcode-color: var(--color-dark-300);
}

/* 2) Input area chrome reset. The MudTextField outlined fieldset is the ONE
   visible border (skinned by mud-bridge §LAST-3). Every other inner element
   gets its border / outline / box-shadow nuked so we don't paint a second
   border on top, and the country selector button doesn't show a browser focus
   ring on click.
   IMPORTANT: must EXCLUDE .iti--container — that's the portaled dropdown,
   which is its OWN popover and needs its own border (set further down). */
.iti:not(.iti--container),
.iti:not(.iti--container):focus-within,
.iti__tel-input,
.iti__tel-input:focus,
.iti__tel-input:focus-visible,
.iti__tel-input:active,
.iti__tel-input:hover {
  outline: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

.iti__country-container,
.iti__country-container *,
.iti__selected-country,
.iti__selected-country *,
.iti__selected-country-primary,
.iti__selected-country-primary *,
.iti__country-container::before,
.iti__country-container::after,
.iti__selected-country::before,
.iti__selected-country::after,
.iti__selected-country-primary::before,
.iti__selected-country-primary::after {
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

.iti__country-container,
.iti__selected-country,
.iti__selected-country-primary {
  background: transparent !important;
}

.iti__selected-country:focus,
.iti__selected-country:focus-visible,
.iti__selected-country-primary:focus,
.iti__selected-country-primary:focus-visible,
.iti__selected-country[aria-expanded="true"],
.iti__selected-country-primary[aria-expanded="true"] {
  outline: none !important;
  box-shadow: none !important;
  border: 0 !important;
  background: transparent !important;
}

.iti__selected-country:hover,
.iti__selected-country-primary:hover {
  background: rgb(from var(--color-gray-900) r g b / 0.04) !important;
}

html.dark .iti__selected-country:hover,
html.dark .iti__selected-country-primary:hover {
  background: rgb(from var(--color-white) r g b / 0.06) !important;
}

/* Dropdown stacking — the country panel is portaled to <body> (dropdownContainer)
   so it can escape the dialog's overflow. But the vendored intl-tel-input CSS
   (loaded AFTER this file in index.html) sets `.iti--container { z-index: 1060 }`,
   which sits BELOW MudDialog's overlay/content (z-index 1400) — the dialog
   backdrop then covers the panel completely and it reads as "the dropdown never
   opens". `avalme.css` had a 9999 rule but it loses the cascade to the later
   vendored 1060. Re-assert it here with !important so it wins regardless of load
   order and floats above the dialog (and any other Mud layer). */
.iti--container {
    z-index: 9999 !important;
}

/* La <ul> .iti__country-list es transparente por defecto; en algunos modos de
 * render queda sobre el panel sin mostrar su fondo. Atar su background a la
 * misma var --iti-dropdown-bg (ya con light+dark) garantiza el panel opaco. */
.iti__country-list {
  background: var(--iti-dropdown-bg);
}

.iti__selected-dial-code {
  color: var(--color-gray-600) !important;
}

html.dark .iti__selected-dial-code {
  color: var(--color-dark-300) !important;
}

/* 3) The actual <input> takes the body's color so no inner tint leaks around
   the country selector. The placeholder follows our text-disabled token. */
.iti__tel-input {
  background: transparent !important;
  color: var(--color-gray-900) !important;
  font-size: var(--text-sm) !important;
  line-height: 1.4375 !important;
}

html.dark .iti__tel-input {
  color: var(--color-dark-50) !important;
}

.iti__tel-input::placeholder {
  color: var(--color-gray-400) !important;
  opacity: 1;
}

html.dark .iti__tel-input::placeholder {
  color: var(--color-dark-300) !important;
}

/* Disabled-colored + filled: MudBlazor marca el boton disabled con `.mud-disabled`
 * (sin atributo nativo `disabled`) y pinta el texto gris con !important, ganandole
 * al `color: white` de av-btn-filled. Forzamos blanco con alta especificidad +
 * !important en el root y en el label/typography, para que el texto y el spinner
 * (Color.Inherit -> currentColor) queden legibles sobre el fondo saturado. Solo
 * filled; outlined/soft conservan su color propio. */
.av-btn-disabled-colored.av-btn-filled.mud-button-root.mud-disabled,
.av-btn-disabled-colored.av-btn-filled.mud-button-root.mud-button-disabled,
.av-btn-disabled-colored.av-btn-filled.mud-button-root[disabled],
.av-btn-disabled-colored.av-btn-filled.mud-button-root.mud-disabled
  .mud-button-label,
.av-btn-disabled-colored.av-btn-filled.mud-button-root.mud-button-disabled
  .mud-button-label,
.av-btn-disabled-colored.av-btn-filled.mud-button-root[disabled]
  .mud-button-label,
.av-btn-disabled-colored.av-btn-filled.mud-button-root.mud-disabled
  .mud-typography,
.av-btn-disabled-colored.av-btn-filled.mud-button-root.mud-button-disabled
  .mud-typography,
.av-btn-disabled-colored.av-btn-filled.mud-button-root[disabled]
  .mud-typography {
  color: var(--color-white) !important;
}

/* Boxes saturados (6 colored + glow + gradient): titulo y descripcion SIEMPRE
 * blancos (light y dark). Forzamos con !important porque el bloque de marca
 * [data-theme-brand=avalme] .mud-typography-body2 (light: charcoal; dark 0,3,1:
 * text-primary) le ganaba al `color: inherit` del box (0,3,0) y dejaba el body
 * sin blanco. El fondo saturado es identico en ambos modos -> blanco siempre. */
.av-box-primary.mud-paper .mud-typography,
.av-box-secondary.mud-paper .mud-typography,
.av-box-info.mud-paper .mud-typography,
.av-box-success.mud-paper .mud-typography,
.av-box-warning.mud-paper .mud-typography,
.av-box-error.mud-paper .mud-typography,
.av-box-gradient-purple-indigo.mud-paper .mud-typography,
.av-box-gradient-fuchsia-pink.mud-paper .mud-typography,
.av-box-gradient-amber-orange.mud-paper .mud-typography {
  color: var(--color-white) !important;
}

/* Boxes neutros (Bordered / Outlined-gradient inner): en DARK su fondo es oscuro
 * -> texto blanco. Solo dark: en light tienen fondo claro y el blanco seria
 * invisible (ahi conservan el texto oscuro normal de la escala). */
html.dark .av-box-bordered.mud-paper .mud-typography,
html.dark .av-box-outlined-gradient-inner.mud-paper .mud-typography {
  color: var(--color-white) !important;
}

/* Modifier opt-in para redondear el frame del grid (mismo borde + radius-xl que
 * .av-table-card de /tenants). Scope-restringido: solo aplica a la tabla que
 * lleve la clase, sin afectar las datatables de produccion que comparten
 * .styled-table / .mud-data-grid. overflow:hidden recorta las esquinas; el
 * scroll horizontal vive en .mud-table-container (interno), no se ve afectado. */
.av-table--rounded.mud-table,
.av-table--rounded.mud-data-grid {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

html.dark .av-table--rounded.mud-table,
html.dark .av-table--rounded.mud-data-grid {
  border-color: var(--color-dark-500);
}

/* Striped (PANTALLA). La unica regla striped de .styled-table vivia dentro de
 * @media print, asi que el toggle "Striped" del View no pintaba nada en
 * pantalla. Esta regla (espejo de la de /tenants .av-tailux-table) tinta las
 * filas impares en pantalla. Cubre MudTable y MudDataGrid: ambos exponen
 * .mud-table-striped en el root + .mud-table-body .mud-table-row cuando
 * Striped=true. Bugfix global de .styled-table (no solo el showcase). */
.styled-table.mud-table-striped
  .mud-table-body
  .mud-table-row:nth-of-type(odd)
  > .mud-table-cell {
  background-color: var(--color-gray-100);
}

html.dark
  .styled-table.mud-table-striped
  .mud-table-body
  .mud-table-row:nth-of-type(odd)
  > .mud-table-cell {
  background-color: var(--color-dark-800);
}

/* Rail colapsado — altura de fila. La fila la dimensiona el WRAPPER .mud-nav-item
 * (MudNavLink renderiza .mud-nav-item > .mud-nav-link); el height sobre el
 * .mud-nav-link interno no controla la fila (en DevTools salia tachado). Desde
 * avalme-v1 (ultimo en cargar) fijamos la fila a 35px y ajustamos el link para
 * que entre sin desbordar. Scope-restringido al rail colapsado. */
.av-nav-rail--collapsed .mud-nav-item {
  height: 36px !important;
  min-height: 36px !important;
}

.av-nav-rail--collapsed .mud-nav-item .mud-nav-link {
  height: 36px !important;
  min-height: 36px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* §70 ─── av-org-create — rich "create organization" options inside the org autocomplete dropdown.
   Two action rows (icon tile + title + one-line description) so the user understands the difference
   between a quick external employer and a full tracked CRM organization. Layout/color only —
   typography comes from the MudText Typo on the markup (no font props here). */
.av-org-create-header {
    padding: 8px 12px 4px;
    color: var(--color-gray-500);
}

html.dark .av-org-create-header {
    color: var(--color-dark-300);
}

.av-org-create-opt {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
}

.av-org-create-opt__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-lg);
    background: rgb(from var(--color-primary-500) r g b / 0.10);
    color: var(--color-primary-600);
    flex-shrink: 0;
}

html.dark .av-org-create-opt__icon {
    background: rgb(from var(--color-primary-400) r g b / 0.18);
    color: var(--color-primary-400);
}

.av-org-create-opt__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* ──────────────────────────────────────────────────────────────────────────
 * Section-header rows inside a MudSelect MultiSelection popover.
 * Used by the case task drawer (Form1003TaskDrawer) assignee picker, where we
 * render disabled MudSelectItems as group headers (Internal / External / Email
 * / Staff). MudSelect paints a checkbox on every item including disabled ones —
 * hide it here and make the row read as a non-interactive subheader. The
 * MudSelect popover is portaled to the page root, so this MUST be global (a
 * component-scoped style would never reach it).
 * ────────────────────────────────────────────────────────────────────────── */
.av-select-section-header .mud-checkbox,
.av-select-section-header .mud-list-item-icon {
  display: none !important;
}

.av-select-section-header {
  pointer-events: none;
  opacity: 1 !important;
  background-color: transparent !important;
  cursor: default !important;
}

/* ============================================================================
 * §70 ─── Av-Channel-Viewlist — read-only "View all" list for contact channels
 * ----------------------------------------------------------------------------
 * Used by the Communication tab's "View all" dialogs (PhoneViewAllDialog /
 * EmailViewAllDialog). Each item is a soft card with a leading tinted icon, the
 * value, and its labels (type / primary / extension). The primary item is
 * highlighted. Layout/color/spacing only — typography comes from Typo.* in the
 * markup (typography-scale doctrine).
 * ────────────────────────────────────────────────────────────────────────── */

/* Uniform chip row for comma-separated multi-values (AvTagList) — replaces the
   hard-to-read "a, b, c" line with soft chips. */
.av-tag-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.av-channel-viewlist {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.av-channel-viewlist__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  transition: border-color 150ms ease, background-color 150ms ease;
}

.av-channel-viewlist__item:hover {
  border-color: var(--color-gray-300);
  background: var(--color-gray-50);
}

.av-channel-viewlist__item--primary {
  border-color: rgb(from var(--color-primary-500) r g b / 0.35);
  background: rgb(from var(--color-primary-500) r g b / 0.05);
}

.av-channel-viewlist__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 9999px;
  color: var(--color-gray-500);
  background: var(--color-gray-100);
}

.av-channel-viewlist__item--primary .av-channel-viewlist__icon {
  color: var(--color-primary-600);
  background: rgb(from var(--color-primary-500) r g b / 0.12);
}

.av-channel-viewlist__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}

.av-channel-viewlist__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

html.dark .av-channel-viewlist__item {
  border-color: var(--color-dark-600);
  background: var(--color-dark-700);
}

html.dark .av-channel-viewlist__item:hover {
  border-color: var(--color-dark-500);
  background: var(--color-dark-600);
}

html.dark .av-channel-viewlist__item--primary {
  border-color: rgb(from var(--color-primary-400) r g b / 0.40);
  background: rgb(from var(--color-primary-400) r g b / 0.12);
}

html.dark .av-channel-viewlist__icon {
  color: var(--color-dark-200);
  background: var(--color-dark-600);
}

html.dark .av-channel-viewlist__item--primary .av-channel-viewlist__icon {
  color: var(--color-primary-400);
  background: rgb(from var(--color-primary-400) r g b / 0.18);
}


/* ===========================================================================
   §26 Family Profile V2 — full-page profile view of a person's family graph.
   Stacks 4 cards: header (avatar + name + chip + meta), current structure
   (Parents / Children grid), members list (avatar + name + role), and
   relationship history (Active + Past colapsable). Driven by the
   CRMFamilyRelationship model; legacy Household UI is untouched.
   =========================================================================== */

.av-family-profile-v2 {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    width: 100%;
}

.av-family-profile-v2--loading {
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.av-family-profile-v2__demo-banner.mud-alert {
    border-radius: var(--radius-lg);
}

/* --- card chrome shared by all 4 cards in the page --- */

.av-family-profile-v2 .av-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    box-shadow: none;
    overflow: hidden;
}

html.dark .av-family-profile-v2 .av-card {
    background: var(--color-dark-700);
    border-color: var(--color-dark-500);
}

.av-family-v2-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px 12px;
}

.av-family-v2-card__body {
    padding: 14px 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* --- Header card --- */

/* --- Family Profile V2 Header card —
   Layout: top row (avatar + title + actions) → divider → label/value rows.
   Card takes full available width via the page's max-width container. */

.av-family-v2-header {
    display: flex;
    flex-direction: column;
    padding: 20px 24px;
    gap: 14px;
    width: 100%;
}

.av-family-v2-header__top {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
/* Clickable when the group's wrapper contact is known — opens the group detail. */
.av-family-v2-header__top--link { cursor: pointer; }
.av-family-v2-header__top--link:hover .av-family-v2-header__title.mud-typography { color: var(--color-primary-600); }
html.dark .av-family-v2-header__top--link:hover .av-family-v2-header__title.mud-typography { color: var(--color-primary-400); }

.av-family-v2-header__avatar.mud-avatar {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}

/* Group avatar image (when the family group has a photo) — same 56px circle as the
   icon avatar. */
.av-family-v2-header__avatar-img.mud-image,
.av-family-v2-header__avatar-img {
    width: 56px;
    height: 56px;
    border-radius: 9999px;
    flex-shrink: 0;
    object-fit: cover;
    background: var(--color-gray-200);
}

html.dark .av-family-v2-header__avatar-img {
    background: var(--color-dark-500);
}

.av-family-v2-header__title.mud-typography {
    color: var(--color-gray-900);
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

html.dark .av-family-v2-header__title.mud-typography {
    color: var(--color-dark-50);
}

.av-family-v2-header__divider.mud-divider {
    margin: 0;
    border-color: var(--color-gray-100);
}

html.dark .av-family-v2-header__divider.mud-divider {
    border-color: var(--color-dark-600);
}

.av-family-v2-header__rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.av-family-v2-header__row {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.av-family-v2-header__row-label.mud-typography {
    color: var(--color-gray-600);
    flex-shrink: 0;
}

html.dark .av-family-v2-header__row-label.mud-typography {
    color: var(--color-dark-300);
}

.av-family-v2-header__row-value.mud-typography {
    color: var(--color-gray-900);
}

html.dark .av-family-v2-header__row-value.mud-typography {
    color: var(--color-dark-50);
}

.av-family-v2-header__row-value--accent.mud-typography {
    color: var(--color-primary-600);
    font-weight: 500;
}

html.dark .av-family-v2-header__row-value--accent.mud-typography {
    color: var(--color-primary-400);
}

/* --- Accordion pattern shared by Structure / MarriageInfo / MarriageHistory cards --- */

.av-family-v2-accordion__head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 0 20px;
    min-height: 52px;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    color: inherit;
    font: inherit;
}

.av-family-v2-accordion__head .mud-typography-h6 {
    margin: 0;
    line-height: 1.4;
}

.av-family-v2-accordion__head:hover {
    background: var(--color-gray-50);
}

html.dark .av-family-v2-accordion__head:hover {
    background: rgb(from var(--color-white) r g b / 0.04);
}

.av-family-v2-accordion__chevron.mud-icon-root {
    width: 18px;
    height: 18px;
    color: var(--color-gray-500);
    transition: transform 160ms ease;
    flex-shrink: 0;
}

html.dark .av-family-v2-accordion__chevron.mud-icon-root {
    color: var(--color-dark-300);
}

.av-family-v2-accordion__chevron.is-open {
    transform: rotate(180deg);
}

.av-family-v2-accordion__divider.mud-divider {
    margin: 0;
    border-color: var(--color-gray-100);
}

html.dark .av-family-v2-accordion__divider.mud-divider {
    border-color: var(--color-dark-600);
}

/* When the accordion head hosts inline action controls (e.g. the view toggle
   in FamilyStructureCard), the head becomes a <div> wrapping a title-button
   and a chevron-button instead of being a single button. Drop the hover bg
   on the wrapper itself; the inner buttons own their own hover states. */
div.av-family-v2-accordion__head {
    cursor: default;
}

div.av-family-v2-accordion__head:hover {
    background: transparent;
}

html.dark div.av-family-v2-accordion__head:hover {
    background: transparent;
}

/* Title-only button inside the head — same look as the legacy full-row
   button, but only covers the title text. Keeps text-align, font, color
   inherited from the parent. */
.av-family-v2-accordion__head-toggle {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: inherit;
    font: inherit;
    text-align: left;
}

.av-family-v2-accordion__head-toggle:hover .mud-typography-h6 {
    color: var(--color-primary-600);
}

html.dark .av-family-v2-accordion__head-toggle:hover .mud-typography-h6 {
    color: var(--color-primary-400);
}

/* Chevron rendered as MudIconButton (instead of an inline MudIcon) so it
   has its own focusable target separate from the title. The button base
   styling comes from Mud; we just rotate the inner icon when open. */
.av-family-v2-accordion__chevron-btn .mud-icon-root {
    transition: transform 160ms ease;
}

.av-family-v2-accordion__chevron-btn.is-open .mud-icon-root {
    transform: rotate(180deg);
}

/* ── av-view-toggle — segmented Structure/Graph switch ─────────────────────
   Icon-only segmented control: two compact MudIconButtons inside a pill
   container. Tooltip on hover surfaces the textual label. Sits in the
   header of FamilyStructureCard between MudSpacer and the chevron.

   `flex-shrink: 0` on the container is mandatory: the parent flex row
   ('.av-family-v2-accordion__head') would otherwise compress the toggle
   to zero width and the two buttons would overlap visually. */
.av-view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    background: var(--color-gray-100);
    border-radius: var(--radius-full);
    flex-shrink: 0;
    width: max-content;
}

html.dark .av-view-toggle {
    background: var(--color-dark-600);
}

/* Each button is a MudIconButton; the .av-view-toggle__btn class is added
   on top so we own the visual recipe (size, radius, color states) while
   Mud handles a11y, focus ring and event wiring. !important is used to
   defeat Mud's default IconButton paddings/sizes. */
.av-view-toggle__btn.mud-icon-button {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    padding: 0 !important;
    border-radius: 9999px !important;
    background: transparent !important;
    color: var(--color-gray-600) !important;
    box-shadow: none !important;
    transition: background-color 120ms ease, color 120ms ease !important;
}

html.dark .av-view-toggle__btn.mud-icon-button {
    color: var(--color-dark-200) !important;
}

.av-view-toggle__btn.mud-icon-button:hover:not(.is-active) {
    background: transparent !important;
    color: var(--color-gray-900) !important;
}

html.dark .av-view-toggle__btn.mud-icon-button:hover:not(.is-active) {
    color: var(--color-dark-50) !important;
}

.av-view-toggle__btn.mud-icon-button.is-active {
    background: var(--color-white) !important;
    color: var(--color-primary-600) !important;
    box-shadow: 0 1px 2px rgb(from var(--color-gray-900) r g b / 0.08) !important;
}

html.dark .av-view-toggle__btn.mud-icon-button.is-active {
    background: var(--color-dark-700) !important;
    color: var(--color-primary-400) !important;
}

.av-view-toggle__btn .mud-icon-root {
    width: 16px;
    height: 16px;
    color: currentColor;
}

/* --- Structure card --- */

.av-family-v2-structure__group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.av-family-v2-structure__group-title.mud-typography {
    color: var(--color-gray-500);
}

html.dark .av-family-v2-structure__group-title.mud-typography {
    color: var(--color-dark-300);
}

.av-family-v2-structure__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 480px) {
    .av-family-v2-structure__grid {
        grid-template-columns: 1fr;
    }
}

.av-family-v2-structure__tile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    background: var(--color-white);
    min-width: 0;
}

html.dark .av-family-v2-structure__tile {
    border-color: var(--color-dark-500);
    background: var(--color-dark-650);
}

.av-family-v2-structure__avatar.mud-avatar {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.av-family-v2-structure__tile-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.av-family-v2-structure__name.mud-typography {
    color: var(--color-gray-900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html.dark .av-family-v2-structure__name.mud-typography {
    color: var(--color-dark-50);
}

.av-family-v2-structure__role.mud-typography {
    color: var(--color-gray-600);
}

html.dark .av-family-v2-structure__role.mud-typography {
    color: var(--color-dark-200);
}

.av-family-v2-structure__chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.av-family-v2-structure__chip-icon.mud-icon-root {
    width: 12px;
    height: 12px;
}

/* --- Members list card (table) --- */

.av-family-v2-members__body {
    padding: 0 8px 8px;
}

.av-family-v2-members__table.mud-table {
    background: transparent;
    box-shadow: none;
    border-radius: var(--radius-md);
}

.av-family-v2-members__table .mud-table-head .mud-table-cell {
    background: var(--color-gray-50);
    color: var(--color-gray-600);
    font-weight: 500;
    border-bottom: 1px solid var(--color-gray-200);
    text-transform: none;
}

html.dark .av-family-v2-members__table .mud-table-head .mud-table-cell {
    background: var(--color-dark-650);
    color: var(--color-dark-200);
    border-bottom-color: var(--color-dark-500);
}

.av-family-v2-members__table .mud-table-body .mud-table-cell {
    border-bottom: 1px solid var(--color-gray-100);
    color: var(--color-gray-800);
    vertical-align: middle;
}

html.dark .av-family-v2-members__table .mud-table-body .mud-table-cell {
    border-bottom-color: var(--color-dark-600);
    color: var(--color-dark-100);
}

.av-family-v2-members__table .mud-table-body .mud-table-row:last-child .mud-table-cell {
    border-bottom: none;
}

.av-family-v2-members__col-actions {
    width: 48px;
    text-align: right;
}

.av-family-v2-members__name-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.av-family-v2-members__avatar.mud-avatar {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

/* Avatar image (when the member has a photo) — same 32px circle as the initials avatar,
   mirrors the pedigree tree's __avatar-img. */
.av-family-v2-members__avatar-img.mud-image,
.av-family-v2-members__avatar-img {
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    flex-shrink: 0;
    object-fit: cover;
    background: var(--color-gray-200);
}

html.dark .av-family-v2-members__avatar-img {
    background: var(--color-dark-500);
}

.av-family-v2-members__name.mud-typography {
    color: var(--color-gray-900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

html.dark .av-family-v2-members__name.mud-typography {
    color: var(--color-dark-50);
}

.av-family-v2-members__email.mud-typography {
    color: var(--color-primary-600);
}

html.dark .av-family-v2-members__email.mud-typography {
    color: var(--color-primary-400);
}

/* --- Marriage Information card --- */

.av-family-v2-marriage-info__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 20px 16px;
}

/* When the group has several active marriages, a hairline separates each couple. */
.av-family-v2-marriage-info__body + .av-family-v2-marriage-info__body {
    border-top: 1px solid var(--color-gray-100);
}

html.dark .av-family-v2-marriage-info__body + .av-family-v2-marriage-info__body {
    border-top-color: var(--color-dark-600);
}

.av-family-v2-marriage-info__primary {
    display: flex;
    align-items: center;
    gap: 10px;
}

.av-family-v2-marriage-info__heart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgb(from var(--color-rose-500) r g b / 0.10);
    color: var(--color-rose-600);
    flex-shrink: 0;
}

html.dark .av-family-v2-marriage-info__heart {
    background: rgb(from var(--color-rose-500) r g b / 0.18);
    color: var(--color-rose-400);
}

.av-family-v2-marriage-info__label {
    color: var(--color-gray-700);
    margin-right: 4px;
}

html.dark .av-family-v2-marriage-info__label {
    color: var(--color-dark-100);
}

.av-family-v2-marriage-info__name {
    color: var(--color-primary-600);
    font-weight: 500;
}

html.dark .av-family-v2-marriage-info__name {
    color: var(--color-primary-400);
}

.av-family-v2-marriage-info__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    background: var(--color-gray-50);
    margin-left: 38px;
}

html.dark .av-family-v2-marriage-info__meta {
    border-color: var(--color-dark-500);
    background: var(--color-dark-650);
}

.av-family-v2-marriage-info__meta-label {
    color: var(--color-gray-600);
    margin-right: 4px;
}

html.dark .av-family-v2-marriage-info__meta-label {
    color: var(--color-dark-300);
}

.av-family-v2-marriage-info__meta-value {
    color: var(--color-gray-900);
}

html.dark .av-family-v2-marriage-info__meta-value {
    color: var(--color-dark-50);
}

.av-family-v2-marriage-info__meta-sep {
    color: var(--color-gray-400);
}

html.dark .av-family-v2-marriage-info__meta-sep {
    color: var(--color-dark-300);
}

/* --- Marriage History card (timeline) --- */

.av-family-v2-marriage-history__head-icon.mud-icon-root {
    width: 18px;
    height: 18px;
    color: var(--color-gray-600);
    flex-shrink: 0;
}

html.dark .av-family-v2-marriage-history__head-icon.mud-icon-root {
    color: var(--color-dark-200);
}

/* --- Generic timeline (Title / Time / Content layout with connecting vertical line) ---
   The vertical line is drawn as a ::before on each item, starting just below the point and
   running to the bottom of that item. The last item's line fades into transparent. */

.av-timeline {
    display: flex;
    flex-direction: column;
    padding: 14px 20px 18px;
    --av-timeline-point-size: 0.75rem;
    --av-timeline-line-width: 1px;
}

.av-timeline__item {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    padding-bottom: 32px;
}

.av-timeline__item::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-inline-end: 0;
    top: var(--av-timeline-point-size);
    bottom: 0;
    order: -1;
    width: var(--av-timeline-line-width);
    transform: translateX(calc((var(--av-timeline-point-size) / 2) - (var(--av-timeline-line-width) / 2)));
}

.av-timeline__item:not(:last-child)::before {
    background: var(--color-gray-300);
}

html.dark .av-timeline__item:not(:last-child)::before {
    background: var(--color-dark-400);
}

.av-timeline__item:last-child::before {
    background: linear-gradient(to bottom, var(--color-gray-300), transparent);
}

html.dark .av-timeline__item:last-child::before {
    background: linear-gradient(to bottom, var(--color-dark-400), transparent);
}

.av-timeline__item:last-child {
    padding-bottom: 0;
}

.av-timeline__item-point {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    margin: 0;
    width: var(--av-timeline-point-size);
    height: var(--av-timeline-point-size);
    border-radius: 9999px;
    background: var(--color-gray-300);
}

html.dark .av-timeline__item-point {
    background: var(--color-dark-400);
}

.av-timeline__item--active .av-timeline__item-point {
    background: var(--color-success-500);
}

html.dark .av-timeline__item--active .av-timeline__item-point {
    background: var(--color-success-400);
}

.av-timeline__item-body {
    flex: 1 1 auto;
    padding-inline-start: 16px;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

@media (min-width: 640px) {
    .av-timeline__item-body {
        padding-inline-start: 32px;
    }
}

.av-timeline__item-title.mud-typography {
    color: var(--color-gray-600);
    padding-bottom: 6px;
    line-height: 1;
    font-weight: 500;
}

html.dark .av-timeline__item-title.mud-typography {
    color: var(--color-dark-100);
}

.av-timeline__item-time.mud-typography {
    color: var(--color-gray-400);
}

html.dark .av-timeline__item-time.mud-typography {
    color: var(--color-dark-300);
}

.av-timeline__item-content.mud-typography {
    padding: 4px 0;
    color: var(--color-gray-700);
}

html.dark .av-timeline__item-content.mud-typography {
    color: var(--color-dark-100);
}

/* --- Form section (used inside AddFamilyMemberDialog) --- */

.av-form-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.av-form-section__title.mud-typography {
    color: var(--color-gray-500);
}

html.dark .av-form-section__title.mud-typography {
    color: var(--color-dark-300);
}

/* --- "Also link spouse as parent" composite (checkbox + hint) --- */

.av-form-link-spouse {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
}

html.dark .av-form-link-spouse {
    background: var(--color-dark-700);
    border-color: var(--color-dark-500);
}

.av-form-link-spouse__hint.mud-typography {
    padding-left: 28px;
    color: var(--color-gray-500);
}

html.dark .av-form-link-spouse__hint.mud-typography {
    color: var(--color-dark-300);
}

/* --- Pill toggle [Select Existing | Create New] --- */

.av-form-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 4px;
    background: var(--color-gray-100);
    border-radius: var(--radius-md);
}

html.dark .av-form-toggle {
    background: var(--color-dark-600);
}

.av-form-toggle__option {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: calc(var(--radius-md) - 2px);
    cursor: pointer;
    user-select: none;
    color: var(--color-gray-600);
    font-size: var(--text-xs-plus);
    font-weight: 500;
    transition: background-color 120ms ease, color 120ms ease;
}

html.dark .av-form-toggle__option {
    color: var(--color-dark-200);
}

.av-form-toggle__option:hover {
    color: var(--color-gray-900);
}

html.dark .av-form-toggle__option:hover {
    color: var(--color-dark-50);
}

.av-form-toggle__option.is-selected {
    background: var(--color-white);
    color: var(--color-primary-600);
    box-shadow: 0 1px 2px rgb(from var(--color-gray-900) r g b / 0.08);
}

html.dark .av-form-toggle__option.is-selected {
    background: var(--color-dark-700);
    color: var(--color-primary-400);
}

/* --- Empty family group card --- */

.av-family-v2-empty-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 32px 20px;
    text-align: center;
}

.av-family-v2-empty-card__icon-wrap {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(from var(--color-primary-500) r g b / 0.10);
}

html.dark .av-family-v2-empty-card__icon-wrap {
    background: rgb(from var(--color-primary-400) r g b / 0.15);
}

.av-family-v2-empty-card__icon.mud-icon-root {
    width: 32px;
    height: 32px;
    color: var(--color-primary-600);
}

html.dark .av-family-v2-empty-card__icon.mud-icon-root {
    color: var(--color-primary-400);
}

.av-family-v2-empty-card__title.mud-typography {
    color: var(--color-gray-900);
}

html.dark .av-family-v2-empty-card__title.mud-typography {
    color: var(--color-dark-50);
}

.av-family-v2-empty-card__description.mud-typography {
    color: var(--color-gray-600);
    max-width: 360px;
}

html.dark .av-family-v2-empty-card__description.mud-typography {
    color: var(--color-dark-200);
}

/* --- Family Graph card (accordion + tree forest of couple/single units) ----------------------
   Layout: the forest is a flex row of root units; each unit recursively renders its couple
   card and, if any, the row of children below. Connectors between generations are CSS
   pseudo-elements (no SVG, no JS, no coordinate calc):
     - Vertical line down from couple → top of children row (av-family-graph__children::before)
     - Horizontal sibling line across the children row (av-family-graph__child::after)
     - Vertical line up from sibling line → top of each child (av-family-graph__child::before)
   The horizontal sibling line is trimmed on the first/last child so it doesn't overshoot. */

.av-family-graph__body {
    overflow-x: auto;
}

.av-family-graph__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
}

.av-family-graph__viewport {
    display: flex;
    justify-content: center;
    padding: 16px 8px 24px;
    min-width: max-content;
}

.av-family-graph__forest {
    display: flex;
    align-items: flex-start;
    gap: 48px;
}

.av-family-graph__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Couple / single card ------------------------------------------------------------------------ */

.av-family-graph__couple {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px rgb(from var(--color-gray-900) r g b / 0.04);
}

html.dark .av-family-graph__couple {
    background: var(--color-dark-700);
    border-color: var(--color-dark-500);
}

.av-family-graph__couple--centroid {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 2px rgb(from var(--color-primary-500) r g b / 0.18);
}

html.dark .av-family-graph__couple--centroid {
    border-color: var(--color-primary-400);
    box-shadow: 0 0 0 2px rgb(from var(--color-primary-400) r g b / 0.22);
}

/* Person chip (avatar + name) ----------------------------------------------------------------- */

.av-family-graph__person {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 80px;
    max-width: 120px;
}

.av-family-graph__avatar.mud-avatar,
.av-family-graph__avatar-img.mud-image,
.av-family-graph__avatar-img {
    width: 48px;
    height: 48px;
    border-radius: 9999px;
    flex-shrink: 0;
    object-fit: cover;
    background: var(--color-gray-200);
}

html.dark .av-family-graph__avatar-img {
    background: var(--color-dark-500);
}

.av-family-graph__name.mud-typography {
    text-align: center;
    color: var(--color-gray-800);
    line-height: 1.2;
    word-break: break-word;
}

html.dark .av-family-graph__name.mud-typography {
    color: var(--color-dark-50);
}

/* Role label under the person's name — Self / Spouse / Parent / Child /
   Grandparent / Grandchild. Muted color so the name stays the focal point. */
.av-family-graph__role.mud-typography {
    text-align: center;
    color: var(--color-gray-500);
    line-height: 1.1;
    margin-top: 2px;
}

html.dark .av-family-graph__role.mud-typography {
    color: var(--color-dark-300);
}

/* Heart connector between the two persons of a couple ----------------------------------------- */

.av-family-graph__heart {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    background: rgb(from var(--color-pink-500) r g b / 0.12);
    color: var(--color-pink-500);
    flex-shrink: 0;
    margin-bottom: 18px;          /* visual-align with avatars, not names */
}

.av-family-graph__heart .mud-icon-root {
    width: 16px;
    height: 16px;
    color: inherit;
}

html.dark .av-family-graph__heart {
    background: rgb(from var(--color-pink-400) r g b / 0.18);
    color: var(--color-pink-400);
}

/* Children row + connectors ------------------------------------------------------------------- */

.av-family-graph__children {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 32px;
    position: relative;
}

/* Vertical line from couple bottom → top of children row. Height matches
   `__children`'s `margin-top` so the line spans the whole gap, not half. */
.av-family-graph__children::before {
    content: "";
    position: absolute;
    top: -32px;
    left: 50%;
    width: 2px;
    height: 32px;
    background: var(--color-gray-300);
    transform: translateX(-50%);
}

html.dark .av-family-graph__children::before {
    background: var(--color-dark-400);
}

.av-family-graph__child {
    position: relative;
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Vertical line from horizontal sibling line → top of each child. */
.av-family-graph__child::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 16px;
    background: var(--color-gray-300);
    transform: translateX(-50%);
    z-index: 1;
}

html.dark .av-family-graph__child::before {
    background: var(--color-dark-400);
}

/* Horizontal sibling line — only when there's more than one child. The line
   extends -12px on each side (half of __children's 24px gap) so the segments
   on adjacent siblings join across the gap without leaving a visual break. */
.av-family-graph__child:not(:only-child)::after {
    content: "";
    position: absolute;
    top: 0;
    left: -12px;
    right: -12px;
    height: 2px;
    background: var(--color-gray-300);
}

html.dark .av-family-graph__child:not(:only-child)::after {
    background: var(--color-dark-400);
}

/* Trim the horizontal line so it doesn't overshoot past the first/last child
   center. First-child's line starts at its own center; last-child's ends at
   its own center. The opposite edge keeps the -12px gap extension. */
.av-family-graph__child:not(:only-child):first-child::after { left: 50%; }
.av-family-graph__child:not(:only-child):last-child::after  { right: 50%; }

/* ============================================================================================
   §72 av-family-pedigree — full generational pedigree of a family group, read top (oldest
   generation) to bottom (most recent). Coordinate-based: cards are absolutely positioned at the
   (x, y) computed in FamilyPedigreeTree.razor.cs, and an SVG overlay draws the connectors:
     - parent → child elbow (av-family-pedigree__edge)
     - marriage horizontal link between spouses (av-family-pedigree__marriage)
     - lateral dashed link for a loose member anchored to a relative (av-family-pedigree__lateral)
   Geometry (left/top/width/height + svg coords) comes from inline style by necessity; everything
   visual (color / border / radius) lives here.
   ============================================================================================ */

.av-family-pedigree__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
}

.av-family-pedigree__viewport {
    overflow: auto;
    max-height: 70vh;
    padding: 8px;
}

.av-family-pedigree__canvas {
    position: relative;
    min-width: max-content;
}

.av-family-pedigree__links {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
}

.av-family-pedigree__edge {
    fill: none;
    stroke: var(--color-gray-300);
    stroke-width: 2;
}

html.dark .av-family-pedigree__edge {
    stroke: var(--color-dark-400);
}

/* Indirect (dashed) parent connector — bridges the missing middle generation between a lone
   grandparent and a grandchild (the intermediate parent isn't in the data). */
.av-family-pedigree__edge--indirect {
    stroke-dasharray: 5 4;
    opacity: 0.6;
}

.av-family-pedigree__marriage {
    stroke: var(--color-pink-400);
    stroke-width: 2;
}

/* Former (terminal) marriage — dashed line so an ended marriage reads differently from a current one. */
.av-family-pedigree__marriage--former {
    stroke-dasharray: 5 4;
    opacity: 0.7;
}

/* Heart badge on a married person's card — pink = active marriage, muted = former-only. Anchored to
   the card's top-right corner; the card is position:absolute so this sits over it. */
.av-family-pedigree__heart.mud-icon-root {
    position: absolute;
    top: 4px;
    right: 6px;
    width: 14px;
    height: 14px;
    color: var(--color-pink-500);
}

.av-family-pedigree__heart--former.mud-icon-root {
    color: var(--color-gray-400);
    opacity: 0.8;
}

html.dark .av-family-pedigree__heart--former.mud-icon-root {
    color: var(--color-dark-300);
}

/* ============================================================================================
   §73 av-rel-edit-row — rows inside the Edit Relationships dialog (display head + inline edit form).
   ============================================================================================ */
.av-rel-edit-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
}

html.dark .av-rel-edit-row {
    border-color: var(--color-dark-500);
}

.av-rel-edit-row__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.av-rel-edit-row__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.av-rel-edit-row__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}
/* Row-action icons follow the 18px button-icon doctrine (Mud's Size.Small renders ~20px). */
.av-rel-edit-row__actions .mud-icon-root,
.av-rel-edit-row__actions svg {
    width: 18px;
    height: 18px;
    font-size: 18px;
}

.av-family-pedigree__lateral {
    stroke: var(--color-gray-400);
    stroke-width: 2;
    stroke-dasharray: 4 4;
}

html.dark .av-family-pedigree__lateral {
    stroke: var(--color-dark-300);
}

.av-family-pedigree__card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    box-sizing: border-box;
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px rgb(from var(--color-gray-900) r g b / 0.04);
    z-index: 1;
}

html.dark .av-family-pedigree__card {
    background: var(--color-dark-700);
    border-color: var(--color-dark-500);
}

.av-family-pedigree__card--centroid {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 2px rgb(from var(--color-primary-500) r g b / 0.18);
}

html.dark .av-family-pedigree__card--centroid {
    border-color: var(--color-primary-400);
    box-shadow: 0 0 0 2px rgb(from var(--color-primary-400) r g b / 0.22);
}

.av-family-pedigree__card--lateral {
    border-style: dashed;
}

/* Former spouse (ex with no current marriage in the graph) — dashed border so the card reads as a
   former / historical member of the tree, kept for the children co-parented in that marriage. */
.av-family-pedigree__card--former {
    border-style: dashed;
    border-color: var(--color-gray-400);
}

html.dark .av-family-pedigree__card--former {
    border-color: var(--color-dark-300);
}

.av-family-pedigree__avatar.mud-avatar,
.av-family-pedigree__avatar-img.mud-image,
.av-family-pedigree__avatar-img {
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    flex-shrink: 0;
    object-fit: cover;
    background: var(--color-gray-200);
}

html.dark .av-family-pedigree__avatar-img {
    background: var(--color-dark-500);
}

.av-family-pedigree__name.mud-typography {
    color: var(--color-gray-800);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

html.dark .av-family-pedigree__name.mud-typography {
    color: var(--color-dark-50);
}

/* ─────────────────────────────────────────────────────────────────────────
   §74 av-married-note — soft "already married" hint shown in the add-member
   dialog when the picked person already has an active spouse. Layout + color
   only (typography comes from the Typo on the inner MudText).
   ───────────────────────────────────────────────────────────────────────── */
.av-married-note {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--radius-lg);
    background: rgb(from var(--color-primary-500) r g b / 0.08);
    border: 1px solid rgb(from var(--color-primary-500) r g b / 0.20);
}

.av-married-note__icon {
    color: var(--color-primary-600);
    flex-shrink: 0;
}

html.dark .av-married-note {
    background: rgb(from var(--color-primary-400) r g b / 0.16);
    border-color: rgb(from var(--color-primary-400) r g b / 0.30);
}

html.dark .av-married-note__icon {
    color: var(--color-primary-400);
}



/* ===========================================================================
   §26 Family Profile V2 — full-page profile view of a person's family graph.
   Stacks 4 cards: header (avatar + name + chip + meta), current structure
   (Parents / Children grid), members list (avatar + name + role), and
   relationship history (Active + Past colapsable). Driven by the
   CRMFamilyRelationship model; legacy Household UI is untouched.
   =========================================================================== */

.av-family-profile-v2 {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    width: 100%;
}

.av-family-profile-v2--loading {
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.av-family-profile-v2__demo-banner.mud-alert {
    border-radius: var(--radius-lg);
}

/* --- card chrome shared by all 4 cards in the page --- */

.av-family-profile-v2 .av-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    box-shadow: none;
    overflow: hidden;
}

html.dark .av-family-profile-v2 .av-card {
    background: var(--color-dark-700);
    border-color: var(--color-dark-500);
}

.av-family-v2-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px 12px;
}

.av-family-v2-card__body {
    padding: 14px 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* --- Header card --- */

/* --- Family Profile V2 Header card —
   Layout: top row (avatar + title + actions) → divider → label/value rows.
   Card takes full available width via the page's max-width container. */

.av-family-v2-header {
    display: flex;
    flex-direction: column;
    padding: 20px 24px;
    gap: 14px;
    width: 100%;
}

.av-family-v2-header__top {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
/* Clickable when the group's wrapper contact is known — opens the group detail. */
.av-family-v2-header__top--link { cursor: pointer; }
.av-family-v2-header__top--link:hover .av-family-v2-header__title.mud-typography { color: var(--color-primary-600); }
html.dark .av-family-v2-header__top--link:hover .av-family-v2-header__title.mud-typography { color: var(--color-primary-400); }

.av-family-v2-header__avatar.mud-avatar {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}

/* Group avatar image (when the family group has a photo) — same 56px circle as the
   icon avatar. */
.av-family-v2-header__avatar-img.mud-image,
.av-family-v2-header__avatar-img {
    width: 56px;
    height: 56px;
    border-radius: 9999px;
    flex-shrink: 0;
    object-fit: cover;
    background: var(--color-gray-200);
}

html.dark .av-family-v2-header__avatar-img {
    background: var(--color-dark-500);
}

.av-family-v2-header__title.mud-typography {
    color: var(--color-gray-900);
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

html.dark .av-family-v2-header__title.mud-typography {
    color: var(--color-dark-50);
}

.av-family-v2-header__divider.mud-divider {
    margin: 0;
    border-color: var(--color-gray-100);
}

html.dark .av-family-v2-header__divider.mud-divider {
    border-color: var(--color-dark-600);
}

.av-family-v2-header__rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.av-family-v2-header__row {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.av-family-v2-header__row-label.mud-typography {
    color: var(--color-gray-600);
    flex-shrink: 0;
}

html.dark .av-family-v2-header__row-label.mud-typography {
    color: var(--color-dark-300);
}

.av-family-v2-header__row-value.mud-typography {
    color: var(--color-gray-900);
}

html.dark .av-family-v2-header__row-value.mud-typography {
    color: var(--color-dark-50);
}

.av-family-v2-header__row-value--accent.mud-typography {
    color: var(--color-primary-600);
    font-weight: 500;
}

html.dark .av-family-v2-header__row-value--accent.mud-typography {
    color: var(--color-primary-400);
}

/* --- Accordion pattern shared by Structure / MarriageInfo / MarriageHistory cards --- */

.av-family-v2-accordion__head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 0 20px;
    min-height: 52px;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    color: inherit;
    font: inherit;
}

.av-family-v2-accordion__head .mud-typography-h6 {
    margin: 0;
    line-height: 1.4;
}

.av-family-v2-accordion__head:hover {
    background: var(--color-gray-50);
}

html.dark .av-family-v2-accordion__head:hover {
    background: rgb(from var(--color-white) r g b / 0.04);
}

.av-family-v2-accordion__chevron.mud-icon-root {
    width: 18px;
    height: 18px;
    color: var(--color-gray-500);
    transition: transform 160ms ease;
    flex-shrink: 0;
}

html.dark .av-family-v2-accordion__chevron.mud-icon-root {
    color: var(--color-dark-300);
}

.av-family-v2-accordion__chevron.is-open {
    transform: rotate(180deg);
}

.av-family-v2-accordion__divider.mud-divider {
    margin: 0;
    border-color: var(--color-gray-100);
}

html.dark .av-family-v2-accordion__divider.mud-divider {
    border-color: var(--color-dark-600);
}

/* When the accordion head hosts inline action controls (e.g. the view toggle
   in FamilyStructureCard), the head becomes a <div> wrapping a title-button
   and a chevron-button instead of being a single button. Drop the hover bg
   on the wrapper itself; the inner buttons own their own hover states. */
div.av-family-v2-accordion__head {
    cursor: default;
}

div.av-family-v2-accordion__head:hover {
    background: transparent;
}

html.dark div.av-family-v2-accordion__head:hover {
    background: transparent;
}

/* Title-only button inside the head — same look as the legacy full-row
   button, but only covers the title text. Keeps text-align, font, color
   inherited from the parent. */
.av-family-v2-accordion__head-toggle {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: inherit;
    font: inherit;
    text-align: left;
}

.av-family-v2-accordion__head-toggle:hover .mud-typography-h6 {
    color: var(--color-primary-600);
}

html.dark .av-family-v2-accordion__head-toggle:hover .mud-typography-h6 {
    color: var(--color-primary-400);
}

/* Chevron rendered as MudIconButton (instead of an inline MudIcon) so it
   has its own focusable target separate from the title. The button base
   styling comes from Mud; we just rotate the inner icon when open. */
.av-family-v2-accordion__chevron-btn .mud-icon-root {
    transition: transform 160ms ease;
}

.av-family-v2-accordion__chevron-btn.is-open .mud-icon-root {
    transform: rotate(180deg);
}

/* ── av-view-toggle — segmented Structure/Graph switch ─────────────────────
   Icon-only segmented control: two compact MudIconButtons inside a pill
   container. Tooltip on hover surfaces the textual label. Sits in the
   header of FamilyStructureCard between MudSpacer and the chevron.

   `flex-shrink: 0` on the container is mandatory: the parent flex row
   ('.av-family-v2-accordion__head') would otherwise compress the toggle
   to zero width and the two buttons would overlap visually. */
.av-view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    background: var(--color-gray-100);
    border-radius: var(--radius-full);
    flex-shrink: 0;
    width: max-content;
}

html.dark .av-view-toggle {
    background: var(--color-dark-600);
}

/* Each button is a MudIconButton; the .av-view-toggle__btn class is added
   on top so we own the visual recipe (size, radius, color states) while
   Mud handles a11y, focus ring and event wiring. !important is used to
   defeat Mud's default IconButton paddings/sizes. */
.av-view-toggle__btn.mud-icon-button {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    padding: 0 !important;
    border-radius: 9999px !important;
    background: transparent !important;
    color: var(--color-gray-600) !important;
    box-shadow: none !important;
    transition: background-color 120ms ease, color 120ms ease !important;
}

html.dark .av-view-toggle__btn.mud-icon-button {
    color: var(--color-dark-200) !important;
}

.av-view-toggle__btn.mud-icon-button:hover:not(.is-active) {
    background: transparent !important;
    color: var(--color-gray-900) !important;
}

html.dark .av-view-toggle__btn.mud-icon-button:hover:not(.is-active) {
    color: var(--color-dark-50) !important;
}

.av-view-toggle__btn.mud-icon-button.is-active {
    background: var(--color-white) !important;
    color: var(--color-primary-600) !important;
    box-shadow: 0 1px 2px rgb(from var(--color-gray-900) r g b / 0.08) !important;
}

html.dark .av-view-toggle__btn.mud-icon-button.is-active {
    background: var(--color-dark-700) !important;
    color: var(--color-primary-400) !important;
}

.av-view-toggle__btn .mud-icon-root {
    width: 16px;
    height: 16px;
    color: currentColor;
}

/* --- Structure card --- */

.av-family-v2-structure__group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.av-family-v2-structure__group-title.mud-typography {
    color: var(--color-gray-500);
}

html.dark .av-family-v2-structure__group-title.mud-typography {
    color: var(--color-dark-300);
}

.av-family-v2-structure__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 480px) {
    .av-family-v2-structure__grid {
        grid-template-columns: 1fr;
    }
}

.av-family-v2-structure__tile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    background: var(--color-white);
    min-width: 0;
}

html.dark .av-family-v2-structure__tile {
    border-color: var(--color-dark-500);
    background: var(--color-dark-650);
}

.av-family-v2-structure__avatar.mud-avatar {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.av-family-v2-structure__tile-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.av-family-v2-structure__name.mud-typography {
    color: var(--color-gray-900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html.dark .av-family-v2-structure__name.mud-typography {
    color: var(--color-dark-50);
}

.av-family-v2-structure__role.mud-typography {
    color: var(--color-gray-600);
}

html.dark .av-family-v2-structure__role.mud-typography {
    color: var(--color-dark-200);
}

.av-family-v2-structure__chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.av-family-v2-structure__chip-icon.mud-icon-root {
    width: 12px;
    height: 12px;
}

/* --- Members list card (table) --- */

.av-family-v2-members__body {
    padding: 0 8px 8px;
}

.av-family-v2-members__table.mud-table {
    background: transparent;
    box-shadow: none;
    border-radius: var(--radius-md);
}

.av-family-v2-members__table .mud-table-head .mud-table-cell {
    background: var(--color-gray-50);
    color: var(--color-gray-600);
    font-weight: 500;
    border-bottom: 1px solid var(--color-gray-200);
    text-transform: none;
}

html.dark .av-family-v2-members__table .mud-table-head .mud-table-cell {
    background: var(--color-dark-650);
    color: var(--color-dark-200);
    border-bottom-color: var(--color-dark-500);
}

.av-family-v2-members__table .mud-table-body .mud-table-cell {
    border-bottom: 1px solid var(--color-gray-100);
    color: var(--color-gray-800);
    vertical-align: middle;
}

html.dark .av-family-v2-members__table .mud-table-body .mud-table-cell {
    border-bottom-color: var(--color-dark-600);
    color: var(--color-dark-100);
}

.av-family-v2-members__table .mud-table-body .mud-table-row:last-child .mud-table-cell {
    border-bottom: none;
}

.av-family-v2-members__col-actions {
    width: 48px;
    text-align: right;
}

.av-family-v2-members__name-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.av-family-v2-members__avatar.mud-avatar {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

/* Avatar image (when the member has a photo) — same 32px circle as the initials avatar,
   mirrors the pedigree tree's __avatar-img. */
.av-family-v2-members__avatar-img.mud-image,
.av-family-v2-members__avatar-img {
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    flex-shrink: 0;
    object-fit: cover;
    background: var(--color-gray-200);
}

html.dark .av-family-v2-members__avatar-img {
    background: var(--color-dark-500);
}

.av-family-v2-members__name.mud-typography {
    color: var(--color-gray-900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

html.dark .av-family-v2-members__name.mud-typography {
    color: var(--color-dark-50);
}

.av-family-v2-members__email.mud-typography {
    color: var(--color-primary-600);
}

html.dark .av-family-v2-members__email.mud-typography {
    color: var(--color-primary-400);
}

/* --- Marriage Information card --- */

.av-family-v2-marriage-info__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 20px 16px;
}

/* When the group has several active marriages, a hairline separates each couple. */
.av-family-v2-marriage-info__body + .av-family-v2-marriage-info__body {
    border-top: 1px solid var(--color-gray-100);
}

html.dark .av-family-v2-marriage-info__body + .av-family-v2-marriage-info__body {
    border-top-color: var(--color-dark-600);
}

.av-family-v2-marriage-info__primary {
    display: flex;
    align-items: center;
    gap: 10px;
}

.av-family-v2-marriage-info__heart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgb(from var(--color-rose-500) r g b / 0.10);
    color: var(--color-rose-600);
    flex-shrink: 0;
}

html.dark .av-family-v2-marriage-info__heart {
    background: rgb(from var(--color-rose-500) r g b / 0.18);
    color: var(--color-rose-400);
}

.av-family-v2-marriage-info__label {
    color: var(--color-gray-700);
    margin-right: 4px;
}

html.dark .av-family-v2-marriage-info__label {
    color: var(--color-dark-100);
}

.av-family-v2-marriage-info__name {
    color: var(--color-primary-600);
    font-weight: 500;
}

html.dark .av-family-v2-marriage-info__name {
    color: var(--color-primary-400);
}

.av-family-v2-marriage-info__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    background: var(--color-gray-50);
    margin-left: 38px;
}

html.dark .av-family-v2-marriage-info__meta {
    border-color: var(--color-dark-500);
    background: var(--color-dark-650);
}

.av-family-v2-marriage-info__meta-label {
    color: var(--color-gray-600);
    margin-right: 4px;
}

html.dark .av-family-v2-marriage-info__meta-label {
    color: var(--color-dark-300);
}

.av-family-v2-marriage-info__meta-value {
    color: var(--color-gray-900);
}

html.dark .av-family-v2-marriage-info__meta-value {
    color: var(--color-dark-50);
}

.av-family-v2-marriage-info__meta-sep {
    color: var(--color-gray-400);
}

html.dark .av-family-v2-marriage-info__meta-sep {
    color: var(--color-dark-300);
}

/* --- Marriage History card (timeline) --- */

.av-family-v2-marriage-history__head-icon.mud-icon-root {
    width: 18px;
    height: 18px;
    color: var(--color-gray-600);
    flex-shrink: 0;
}

html.dark .av-family-v2-marriage-history__head-icon.mud-icon-root {
    color: var(--color-dark-200);
}

/* --- Generic timeline (Title / Time / Content layout with connecting vertical line) ---
   The vertical line is drawn as a ::before on each item, starting just below the point and
   running to the bottom of that item. The last item's line fades into transparent. */

.av-timeline {
    display: flex;
    flex-direction: column;
    padding: 14px 20px 18px;
    --av-timeline-point-size: 0.75rem;
    --av-timeline-line-width: 1px;
}

.av-timeline__item {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    padding-bottom: 32px;
}

.av-timeline__item::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-inline-end: 0;
    top: var(--av-timeline-point-size);
    bottom: 0;
    order: -1;
    width: var(--av-timeline-line-width);
    transform: translateX(calc((var(--av-timeline-point-size) / 2) - (var(--av-timeline-line-width) / 2)));
}

.av-timeline__item:not(:last-child)::before {
    background: var(--color-gray-300);
}

html.dark .av-timeline__item:not(:last-child)::before {
    background: var(--color-dark-400);
}

.av-timeline__item:last-child::before {
    background: linear-gradient(to bottom, var(--color-gray-300), transparent);
}

html.dark .av-timeline__item:last-child::before {
    background: linear-gradient(to bottom, var(--color-dark-400), transparent);
}

.av-timeline__item:last-child {
    padding-bottom: 0;
}

.av-timeline__item-point {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    margin: 0;
    width: var(--av-timeline-point-size);
    height: var(--av-timeline-point-size);
    border-radius: 9999px;
    background: var(--color-gray-300);
}

html.dark .av-timeline__item-point {
    background: var(--color-dark-400);
}

.av-timeline__item--active .av-timeline__item-point {
    background: var(--color-success-500);
}

html.dark .av-timeline__item--active .av-timeline__item-point {
    background: var(--color-success-400);
}

.av-timeline__item-body {
    flex: 1 1 auto;
    padding-inline-start: 16px;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

@media (min-width: 640px) {
    .av-timeline__item-body {
        padding-inline-start: 32px;
    }
}

.av-timeline__item-title.mud-typography {
    color: var(--color-gray-600);
    padding-bottom: 6px;
    line-height: 1;
    font-weight: 500;
}

html.dark .av-timeline__item-title.mud-typography {
    color: var(--color-dark-100);
}

.av-timeline__item-time.mud-typography {
    color: var(--color-gray-400);
}

html.dark .av-timeline__item-time.mud-typography {
    color: var(--color-dark-300);
}

.av-timeline__item-content.mud-typography {
    padding: 4px 0;
    color: var(--color-gray-700);
}

html.dark .av-timeline__item-content.mud-typography {
    color: var(--color-dark-100);
}

/* --- Form section (used inside AddFamilyMemberDialog) --- */

.av-form-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.av-form-section__title.mud-typography {
    color: var(--color-gray-500);
}

html.dark .av-form-section__title.mud-typography {
    color: var(--color-dark-300);
}

/* --- "Also link spouse as parent" composite (checkbox + hint) --- */

.av-form-link-spouse {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
}

html.dark .av-form-link-spouse {
    background: var(--color-dark-700);
    border-color: var(--color-dark-500);
}

.av-form-link-spouse__hint.mud-typography {
    padding-left: 28px;
    color: var(--color-gray-500);
}

html.dark .av-form-link-spouse__hint.mud-typography {
    color: var(--color-dark-300);
}

/* --- Pill toggle [Select Existing | Create New] --- */

.av-form-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 4px;
    background: var(--color-gray-100);
    border-radius: var(--radius-md);
}

html.dark .av-form-toggle {
    background: var(--color-dark-600);
}

.av-form-toggle__option {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: calc(var(--radius-md) - 2px);
    cursor: pointer;
    user-select: none;
    color: var(--color-gray-600);
    font-size: var(--text-xs-plus);
    font-weight: 500;
    transition: background-color 120ms ease, color 120ms ease;
}

html.dark .av-form-toggle__option {
    color: var(--color-dark-200);
}

.av-form-toggle__option:hover {
    color: var(--color-gray-900);
}

html.dark .av-form-toggle__option:hover {
    color: var(--color-dark-50);
}

.av-form-toggle__option.is-selected {
    background: var(--color-white);
    color: var(--color-primary-600);
    box-shadow: 0 1px 2px rgb(from var(--color-gray-900) r g b / 0.08);
}

html.dark .av-form-toggle__option.is-selected {
    background: var(--color-dark-700);
    color: var(--color-primary-400);
}

/* --- Empty family group card --- */

.av-family-v2-empty-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 32px 20px;
    text-align: center;
}

.av-family-v2-empty-card__icon-wrap {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(from var(--color-primary-500) r g b / 0.10);
}

html.dark .av-family-v2-empty-card__icon-wrap {
    background: rgb(from var(--color-primary-400) r g b / 0.15);
}

.av-family-v2-empty-card__icon.mud-icon-root {
    width: 32px;
    height: 32px;
    color: var(--color-primary-600);
}

html.dark .av-family-v2-empty-card__icon.mud-icon-root {
    color: var(--color-primary-400);
}

.av-family-v2-empty-card__title.mud-typography {
    color: var(--color-gray-900);
}

html.dark .av-family-v2-empty-card__title.mud-typography {
    color: var(--color-dark-50);
}

.av-family-v2-empty-card__description.mud-typography {
    color: var(--color-gray-600);
    max-width: 360px;
}

html.dark .av-family-v2-empty-card__description.mud-typography {
    color: var(--color-dark-200);
}

/* --- Family Graph card (accordion + tree forest of couple/single units) ----------------------
   Layout: the forest is a flex row of root units; each unit recursively renders its couple
   card and, if any, the row of children below. Connectors between generations are CSS
   pseudo-elements (no SVG, no JS, no coordinate calc):
     - Vertical line down from couple → top of children row (av-family-graph__children::before)
     - Horizontal sibling line across the children row (av-family-graph__child::after)
     - Vertical line up from sibling line → top of each child (av-family-graph__child::before)
   The horizontal sibling line is trimmed on the first/last child so it doesn't overshoot. */

.av-family-graph__body {
    overflow-x: auto;
}

.av-family-graph__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
}

.av-family-graph__viewport {
    display: flex;
    justify-content: center;
    padding: 16px 8px 24px;
    min-width: max-content;
}

.av-family-graph__forest {
    display: flex;
    align-items: flex-start;
    gap: 48px;
}

.av-family-graph__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Couple / single card ------------------------------------------------------------------------ */

.av-family-graph__couple {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px rgb(from var(--color-gray-900) r g b / 0.04);
}

html.dark .av-family-graph__couple {
    background: var(--color-dark-700);
    border-color: var(--color-dark-500);
}

.av-family-graph__couple--centroid {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 2px rgb(from var(--color-primary-500) r g b / 0.18);
}

html.dark .av-family-graph__couple--centroid {
    border-color: var(--color-primary-400);
    box-shadow: 0 0 0 2px rgb(from var(--color-primary-400) r g b / 0.22);
}

/* Person chip (avatar + name) ----------------------------------------------------------------- */

.av-family-graph__person {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 80px;
    max-width: 120px;
}

.av-family-graph__avatar.mud-avatar,
.av-family-graph__avatar-img.mud-image,
.av-family-graph__avatar-img {
    width: 48px;
    height: 48px;
    border-radius: 9999px;
    flex-shrink: 0;
    object-fit: cover;
    background: var(--color-gray-200);
}

html.dark .av-family-graph__avatar-img {
    background: var(--color-dark-500);
}

.av-family-graph__name.mud-typography {
    text-align: center;
    color: var(--color-gray-800);
    line-height: 1.2;
    word-break: break-word;
}

html.dark .av-family-graph__name.mud-typography {
    color: var(--color-dark-50);
}

/* Role label under the person's name — Self / Spouse / Parent / Child /
   Grandparent / Grandchild. Muted color so the name stays the focal point. */
.av-family-graph__role.mud-typography {
    text-align: center;
    color: var(--color-gray-500);
    line-height: 1.1;
    margin-top: 2px;
}

html.dark .av-family-graph__role.mud-typography {
    color: var(--color-dark-300);
}

/* Heart connector between the two persons of a couple ----------------------------------------- */

.av-family-graph__heart {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    background: rgb(from var(--color-pink-500) r g b / 0.12);
    color: var(--color-pink-500);
    flex-shrink: 0;
    margin-bottom: 18px;          /* visual-align with avatars, not names */
}

.av-family-graph__heart .mud-icon-root {
    width: 16px;
    height: 16px;
    color: inherit;
}

html.dark .av-family-graph__heart {
    background: rgb(from var(--color-pink-400) r g b / 0.18);
    color: var(--color-pink-400);
}

/* Children row + connectors ------------------------------------------------------------------- */

.av-family-graph__children {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 32px;
    position: relative;
}

/* Vertical line from couple bottom → top of children row. Height matches
   `__children`'s `margin-top` so the line spans the whole gap, not half. */
.av-family-graph__children::before {
    content: "";
    position: absolute;
    top: -32px;
    left: 50%;
    width: 2px;
    height: 32px;
    background: var(--color-gray-300);
    transform: translateX(-50%);
}

html.dark .av-family-graph__children::before {
    background: var(--color-dark-400);
}

.av-family-graph__child {
    position: relative;
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Vertical line from horizontal sibling line → top of each child. */
.av-family-graph__child::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 16px;
    background: var(--color-gray-300);
    transform: translateX(-50%);
    z-index: 1;
}

html.dark .av-family-graph__child::before {
    background: var(--color-dark-400);
}

/* Horizontal sibling line — only when there's more than one child. The line
   extends -12px on each side (half of __children's 24px gap) so the segments
   on adjacent siblings join across the gap without leaving a visual break. */
.av-family-graph__child:not(:only-child)::after {
    content: "";
    position: absolute;
    top: 0;
    left: -12px;
    right: -12px;
    height: 2px;
    background: var(--color-gray-300);
}

html.dark .av-family-graph__child:not(:only-child)::after {
    background: var(--color-dark-400);
}

/* Trim the horizontal line so it doesn't overshoot past the first/last child
   center. First-child's line starts at its own center; last-child's ends at
   its own center. The opposite edge keeps the -12px gap extension. */
.av-family-graph__child:not(:only-child):first-child::after { left: 50%; }
.av-family-graph__child:not(:only-child):last-child::after  { right: 50%; }

/* ============================================================================================
   §72 av-family-pedigree — full generational pedigree of a family group, read top (oldest
   generation) to bottom (most recent). Coordinate-based: cards are absolutely positioned at the
   (x, y) computed in FamilyPedigreeTree.razor.cs, and an SVG overlay draws the connectors:
     - parent → child elbow (av-family-pedigree__edge)
     - marriage horizontal link between spouses (av-family-pedigree__marriage)
     - lateral dashed link for a loose member anchored to a relative (av-family-pedigree__lateral)
   Geometry (left/top/width/height + svg coords) comes from inline style by necessity; everything
   visual (color / border / radius) lives here.
   ============================================================================================ */

.av-family-pedigree__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
}

.av-family-pedigree__viewport {
    overflow: auto;
    max-height: 70vh;
    padding: 8px;
}

.av-family-pedigree__canvas {
    position: relative;
    min-width: max-content;
}

.av-family-pedigree__links {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
}

.av-family-pedigree__edge {
    fill: none;
    stroke: var(--color-gray-300);
    stroke-width: 2;
}

html.dark .av-family-pedigree__edge {
    stroke: var(--color-dark-400);
}

/* Indirect (dashed) parent connector — bridges the missing middle generation between a lone
   grandparent and a grandchild (the intermediate parent isn't in the data). */
.av-family-pedigree__edge--indirect {
    stroke-dasharray: 5 4;
    opacity: 0.6;
}

.av-family-pedigree__marriage {
    stroke: var(--color-pink-400);
    stroke-width: 2;
}

/* Former (terminal) marriage — dashed line so an ended marriage reads differently from a current one. */
.av-family-pedigree__marriage--former {
    stroke-dasharray: 5 4;
    opacity: 0.7;
}

/* Heart badge on a married person's card — pink = active marriage, muted = former-only. Anchored to
   the card's top-right corner; the card is position:absolute so this sits over it. */
.av-family-pedigree__heart.mud-icon-root {
    position: absolute;
    top: 4px;
    right: 6px;
    width: 14px;
    height: 14px;
    color: var(--color-pink-500);
}

.av-family-pedigree__heart--former.mud-icon-root {
    color: var(--color-gray-400);
    opacity: 0.8;
}

html.dark .av-family-pedigree__heart--former.mud-icon-root {
    color: var(--color-dark-300);
}

/* ============================================================================================
   §73 av-rel-edit-row — rows inside the Edit Relationships dialog (display head + inline edit form).
   ============================================================================================ */
.av-rel-edit-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
}

html.dark .av-rel-edit-row {
    border-color: var(--color-dark-500);
}

.av-rel-edit-row__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.av-rel-edit-row__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.av-rel-edit-row__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}
/* Row-action icons follow the 18px button-icon doctrine (Mud's Size.Small renders ~20px). */
.av-rel-edit-row__actions .mud-icon-root,
.av-rel-edit-row__actions svg {
    width: 18px;
    height: 18px;
    font-size: 18px;
}

.av-family-pedigree__lateral {
    stroke: var(--color-gray-400);
    stroke-width: 2;
    stroke-dasharray: 4 4;
}

html.dark .av-family-pedigree__lateral {
    stroke: var(--color-dark-300);
}

.av-family-pedigree__card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    box-sizing: border-box;
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px rgb(from var(--color-gray-900) r g b / 0.04);
    z-index: 1;
}

html.dark .av-family-pedigree__card {
    background: var(--color-dark-700);
    border-color: var(--color-dark-500);
}

.av-family-pedigree__card--centroid {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 2px rgb(from var(--color-primary-500) r g b / 0.18);
}

html.dark .av-family-pedigree__card--centroid {
    border-color: var(--color-primary-400);
    box-shadow: 0 0 0 2px rgb(from var(--color-primary-400) r g b / 0.22);
}

.av-family-pedigree__card--lateral {
    border-style: dashed;
}

/* Former spouse (ex with no current marriage in the graph) — dashed border so the card reads as a
   former / historical member of the tree, kept for the children co-parented in that marriage. */
.av-family-pedigree__card--former {
    border-style: dashed;
    border-color: var(--color-gray-400);
}

html.dark .av-family-pedigree__card--former {
    border-color: var(--color-dark-300);
}

.av-family-pedigree__avatar.mud-avatar,
.av-family-pedigree__avatar-img.mud-image,
.av-family-pedigree__avatar-img {
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    flex-shrink: 0;
    object-fit: cover;
    background: var(--color-gray-200);
}

html.dark .av-family-pedigree__avatar-img {
    background: var(--color-dark-500);
}

.av-family-pedigree__name.mud-typography {
    color: var(--color-gray-800);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

html.dark .av-family-pedigree__name.mud-typography {
    color: var(--color-dark-50);
}


/* ============================================================================
   §75 av-approvals — Pending ownership-transfer approvals.
   Shared skin for the AppBar bell popover and the dashboard card. Manager-facing
   queue with inline Approve / Reject. Layout/color/spacing only — all text comes
   from MudText Typo.* per the typography doctrine.
   ============================================================================ */
.av-approvals-popover {
    width: 384px;
    max-width: calc(100vw - 32px);
}

.av-approvals {
    display: flex;
    flex-direction: column;
}

.av-approvals__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-gray-150);
}

html.dark .av-approvals__head {
    border-bottom-color: var(--color-dark-600);
}

.av-approvals__head-icon {
    color: var(--color-primary-600);
}

html.dark .av-approvals__head-icon {
    color: var(--color-primary-400);
}

.av-approvals__count {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 8px;
    border-radius: 9999px;
    background: rgb(from var(--color-primary-500) r g b / 0.12);
    color: var(--color-primary-700);
}

html.dark .av-approvals__count {
    background: rgb(from var(--color-primary-400) r g b / 0.20);
    color: var(--color-primary-200);
}

.av-approvals__list {
    display: flex;
    flex-direction: column;
    max-height: 360px;
    overflow-y: auto;
}

.av-approvals__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-gray-100);
}

html.dark .av-approvals__item {
    border-bottom-color: var(--color-dark-700);
}

.av-approvals__item:last-child {
    border-bottom: none;
}

.av-approvals__item-text {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.av-approvals__item-meta {
    color: var(--color-gray-500);
}

html.dark .av-approvals__item-meta {
    color: var(--color-dark-300);
}

.av-approvals__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.av-approvals__footer {
    padding: 8px;
    border-top: 1px solid var(--color-gray-150);
}

html.dark .av-approvals__footer {
    border-top-color: var(--color-dark-600);
}

.av-approvals__empty {
    padding: 28px 16px;
}

/* Dashboard-card variant — the av-card already supplies the padded surface,
   so drop the popover's outer paddings/borders on the head + footer. */
.av-approvals--card .av-approvals__head {
    padding: 0 0 12px;
}

.av-approvals--card .av-approvals__list {
    max-height: 340px;
}

.av-approvals--card .av-approvals__item {
    padding-left: 0;
    padding-right: 0;
}

.av-approvals--card .av-approvals__footer {
    padding: 8px 0 0;
}

/* ─ Change Priority dialog (WI #956) ──────────────────────────────────────
   Lista de 4 rows clickables; cada row es un native <button> wrapping un
   .av-tag de prioridad + un check icon a la derecha cuando es la prioridad
   actual de la task. El skin reuses los tokens estándar:
     - Botón sin chrome propio (transparent, hover --color-gray-150)
     - Padding generoso (10/14) para hit-area grande
     - Row del current marcado con bg primary tinted suave
*/
.av-change-priority__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.av-change-priority__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: left;
    transition: background-color 120ms ease, border-color 120ms ease;
}

html.dark .av-change-priority__row {
    border-color: var(--color-dark-500);
}

.av-change-priority__row:hover,
.av-change-priority__row:focus-visible {
    background-color: var(--color-gray-100);
    border-color: var(--color-gray-300);
    outline: none;
}

html.dark .av-change-priority__row:hover,
html.dark .av-change-priority__row:focus-visible {
    background-color: var(--color-dark-600);
    border-color: var(--color-dark-400);
}

.av-change-priority__row--current {
    background-color: rgb(from var(--color-primary-500) r g b / 0.08);
    border-color: var(--color-primary-300);
}

html.dark .av-change-priority__row--current {
    background-color: rgb(from var(--color-primary-400) r g b / 0.14);
    border-color: var(--color-primary-500);
}

.av-change-priority__check {
    color: var(--color-primary-600);
}

html.dark .av-change-priority__check {
    color: var(--color-primary-400);
}

/* ============================================================================
   §76 av-timeline — Activity-log timeline. Colored circular marker per entry on
   a continuous connecting line, title + relative time + description. Tone of the
   marker is driven by the event/action (success/error/info/primary/warning/
   secondary). Layout/color/spacing only — text sizing comes from Typo.*.
   ============================================================================ */
.av-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 4px 0 8px;
}

.av-timeline__item {
    position: relative;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

/* Connector: one segment per item, from this marker's center down to the next marker
   (the opaque marker covers the ends, so it reads as a single continuous line). */
.av-timeline__item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 18px;
    bottom: -22px;
    width: 2px;
    background: var(--color-gray-200);
}

html.dark .av-timeline__item:not(:last-child)::before {
    background: var(--color-dark-500);
}

/* Last item — short line stub that fades out below the final marker. */
.av-timeline__item:last-child::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 18px;
    height: 24px;
    width: 2px;
    background: linear-gradient(to bottom, var(--color-gray-300), transparent);
}

html.dark .av-timeline__item:last-child::before {
    background: linear-gradient(to bottom, var(--color-dark-500), transparent);
}

.av-timeline__marker {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    border: 2px solid var(--color-gray-300);
    background: var(--color-white);
    color: var(--color-gray-500);
}

html.dark .av-timeline__marker {
    background: var(--color-dark-700);
    border-color: var(--color-dark-500);
    color: var(--color-dark-200);
}

.av-timeline__marker--primary {
    border-color: var(--color-primary-500);
    color: var(--color-primary-600);
}

html.dark .av-timeline__marker--primary {
    border-color: var(--color-primary-400);
    color: var(--color-primary-400);
}

.av-timeline__marker--success {
    border-color: var(--color-success);
    color: var(--color-success);
}

.av-timeline__marker--info {
    border-color: var(--color-info);
    color: var(--color-info);
}

.av-timeline__marker--warning {
    border-color: var(--color-warning);
    color: var(--color-warning);
}

.av-timeline__marker--error {
    border-color: var(--color-error);
    color: var(--color-error);
}

.av-timeline__marker--secondary {
    border-color: var(--color-secondary);
    color: var(--color-secondary);
}

.av-timeline__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding-top: 3px;
    padding-bottom: 4px;
}

.av-timeline__title {
    color: var(--color-gray-800);
}

html.dark .av-timeline__title {
    color: var(--color-dark-50);
}

.av-timeline__time {
    color: var(--color-gray-400);
}

html.dark .av-timeline__time {
    color: var(--color-dark-300);
}

.av-timeline__desc {
    color: var(--color-gray-600);
}

html.dark .av-timeline__desc {
    color: var(--color-dark-200);
}

.av-timeline__meta {
    color: var(--color-gray-500);
}

html.dark .av-timeline__meta {
    color: var(--color-dark-300);
}

/* av-timeline diff-style detail — a Created/Deleted row renders each captured field as an
   added (+) / removed (−) line, like an audit "diff". Layout + color only; text sizing stays
   on the Typo.* scale via the markup. */
.av-timeline__diff {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 4px;
}

.av-timeline__diff-line {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 3px 8px;
    border-radius: var(--radius-md);
}

.av-timeline__diff-line--add {
    color: var(--color-success-700);
    background: rgb(from var(--color-success-500) r g b / 0.08);
}

html.dark .av-timeline__diff-line--add {
    color: var(--color-success-300);
    background: rgb(from var(--color-success-400) r g b / 0.15);
}

.av-timeline__diff-line--remove {
    color: var(--color-error-700);
    background: rgb(from var(--color-error-500) r g b / 0.08);
}

html.dark .av-timeline__diff-line--remove {
    color: var(--color-error-300);
    background: rgb(from var(--color-error-400) r g b / 0.15);
}

.av-timeline__diff-sign {
    flex: 0 0 auto;
    color: inherit;
}

.av-timeline__diff-text {
    color: inherit;
    min-width: 0;
}

.av-timeline__diff-label {
    color: inherit;
    opacity: 0.75;
}

/* av-access-list — Shared Access tab participant list: a bordered card whose rows are
   separated by hairlines and light up on hover, matching the contact-list surface. Layout
   + color only; text sizing stays on the user-cell / av-tag skins and Typo.* markup. */
.av-access-list {
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    background: var(--surface-1);
    overflow: hidden;
}

html.dark .av-access-list {
    border-color: var(--color-dark-600);
    background: var(--color-dark-700);
}

.av-access-list__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-gray-100);
    transition: background-color 120ms ease;
}

html.dark .av-access-list__row {
    border-bottom-color: var(--color-dark-600);
}

.av-access-list__row:last-child {
    border-bottom: none;
}

.av-access-list__row:hover {
    background: var(--color-gray-50);
}

html.dark .av-access-list__row:hover {
    background: var(--color-dark-600);
}

/* ============================================================================
   §77 av-pt-card — Dashboard pending-transfers widget. Fills the dv1 highlights
   slot (same size as "Properties Sold"), matches the dv1-card look. Layout/color
   only; text sizing via Typo.*, button via av-btn skin.
   ============================================================================ */
.av-pt-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.av-pt-card__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 10px;
    flex: 1 1 auto;
}

.av-pt-card__item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.av-pt-card__marker {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9999px;
    background: rgb(from var(--color-primary-500) r g b / 0.10);
    color: var(--color-primary-600);
}

html.dark .av-pt-card__marker {
    background: rgb(from var(--color-primary-400) r g b / 0.16);
    color: var(--color-primary-400);
}

.av-pt-card__marker .mud-icon-root {
    width: 16px;
    height: 16px;
    font-size: 16px;
}

.av-pt-card__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.av-pt-card__name {
    color: var(--color-gray-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html.dark .av-pt-card__name {
    color: var(--color-dark-50);
}

.av-pt-card__meta {
    color: var(--color-gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html.dark .av-pt-card__meta {
    color: var(--color-dark-300);
}

.av-pt-card__item .mud-button-root {
    flex: 0 0 auto;
}

.av-pt-card__empty {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: 12px 0;
}

.av-pt-card__empty-icon {
    color: var(--color-success);
}

.av-pt-card__footer {
    margin-top: 12px;
}

/* ────────────────────────────────────────────────────────────────────────
 * §71 ─── Av-Export-Menu — shrink the export submenu leading icons so they
 *         match the toolbar Export button's StartIcon (nested MudMenu renders
 *         StartIcon at list-icon size, which is larger than a button icon).
 * ──────────────────────────────────────────────────────────────────────── */
.av-export-menu-popover .mud-icon-root {
    width: 1.25rem;
    height: 1.25rem;
}

/* ============================================================================
 * §72 ─── Av-Routing-Rule — rich lead-routing rule dialog (IF / THEN builder)
 * ============================================================================
 * Layout + color only; text sizing comes from the markup's Typo (scale doctrine).
 * ============================================================================ */

.av-rr__name-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}
.av-rr__name-row > *:first-child {
  flex: 1 1 auto;
  min-width: 0;
}
.av-rr__between {
  display: flex;
  gap: 6px;
}
.av-rr__cond-card > .mud-button-root {
  align-self: flex-start;
}
.av-rr__active {
  display: flex;
  align-items: center;
  height: 40px;
  flex-shrink: 0;
}

/* Section divider: label + hairline + optional right slot */
.av-rr__section {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 8px;
}
.av-rr__section-line {
  flex: 1 1 auto;
  height: 1px;
  background: var(--color-gray-200);
}
html.dark .av-rr__section-line { background: var(--color-dark-500); }

/* Segmented All / Any toggle */
.av-rr__seg {
  display: inline-flex;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  overflow: hidden;
  flex-shrink: 0;
}
html.dark .av-rr__seg { border-color: var(--color-dark-400); }
.av-rr__seg-item {
  padding: 4px 12px;
  cursor: pointer;
  color: var(--color-gray-600);
  background: transparent;
  border: none;
  transition: background 150ms ease, color 150ms ease;
}
html.dark .av-rr__seg-item { color: var(--color-dark-200); }
.av-rr__seg-item--active {
  background: rgb(from var(--color-primary-500) r g b / 0.12);
  color: var(--color-primary-700);
}
html.dark .av-rr__seg-item--active {
  background: rgb(from var(--color-primary-400) r g b / 0.18);
  color: var(--color-primary-300);
}

/* Conditions card */
.av-rr__cond-card {
  background: var(--color-gray-150);
  border-radius: var(--radius-lg);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
html.dark .av-rr__cond-card { background: var(--color-dark-700); }
.av-rr__cond-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.95fr) minmax(0, 1.1fr) 32px;
  gap: 8px;
  align-items: center;
}
.av-rr__cond-join {
  color: var(--color-gray-500);
  padding-left: 2px;
}
html.dark .av-rr__cond-join { color: var(--color-dark-300); }
.av-rr__cond-empty {
  color: var(--color-gray-500);
  padding: 2px;
}
html.dark .av-rr__cond-empty { color: var(--color-dark-300); }

/* Strategy tiles */
.av-rr__strategies {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.av-rr__strategy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  border: 2px solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  padding: 14px 10px;
  cursor: pointer;
  background: transparent;
  text-align: center;
  transition: border-color 150ms ease, background 150ms ease;
}
.av-rr__strategy-sub { color: var(--color-gray-500); }
html.dark .av-rr__strategy-sub { color: var(--color-dark-300); }
.av-rr__field-label { margin: 0 0 6px; }

/* Gray panel wrapping the whole conditions block */
.av-rr__cond-panel {
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: 14px;
}
html.dark .av-rr__cond-panel {
  background: rgb(from var(--color-dark-700) r g b / 0.5);
  border-color: var(--color-dark-500);
}
html.dark .av-rr__strategy { border-color: var(--color-dark-400); }
.av-rr__strategy--active {
  border-color: var(--color-primary-500);
  background: rgb(from var(--color-primary-500) r g b / 0.06);
}
.av-rr__strategy--disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Assignee card */
.av-rr__assignee {
  display: flex;
  align-items: center;
  gap: 10px;
}
.av-rr__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgb(from var(--color-primary-500) r g b / 0.14);
  color: var(--color-primary-700);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
html.dark .av-rr__avatar { color: var(--color-primary-300); }
.av-rr__assignee-text { flex: 1 1 auto; min-width: 0; }
.av-rr__pool-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Options rows */
.av-rr__opt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
}
.av-rr__options {
  border-top: 1px solid var(--color-gray-200);
  padding-top: 4px;
  margin-top: 4px;
}
html.dark .av-rr__options { border-top-color: var(--color-dark-500); }
.av-rr__opt-num {
  max-width: 110px;
  flex-shrink: 0;
}

/* v2 — header icon, grouped conditions, conector chip, destino card, option rows */
.av-rr__head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.av-rr__head-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-lg);
  background: rgb(from var(--color-primary-500) r g b / 0.12);
  color: var(--color-primary-600);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
html.dark .av-rr__head-icon { color: var(--color-primary-300); }

.av-rr__cond-group {
  display: flex;
  gap: 12px;
}
.av-rr__cond-bar {
  width: 2px;
  border-radius: 1px;
  background: var(--color-gray-200);
  margin: 4px 0;
  flex-shrink: 0;
}
html.dark .av-rr__cond-bar { background: var(--color-dark-500); }
.av-rr__cond-col {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.av-rr__cond-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.av-rr__cond {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 28px;
  gap: 8px;
  /* Top-align: when a field shows a validation helper below it, the inputs stay on one line
     instead of the whole row re-centering around the taller cell. */
  align-items: start;
}
/* Keep the delete button on the input line even when a helper hangs below a field. */
.av-rr__cond-remove { justify-self: center; margin-top: 5px; }
/* Required marker on external field labels (Mud's asterisk only renders on floating labels).
   Matches the app's asterisk convention (see .av-bi-*__asterisk): error red, bold, lighter in dark. */
.av-req { color: var(--color-error); font-weight: 700; margin-left: 2px; }
html.dark .av-req { color: var(--color-error-lighter); }
/* Hairline above the Add-condition action, inside the panel. */
.av-rr__cond-divider {
  height: 1px;
  background: var(--color-gray-200);
  margin: 2px 0;
}
html.dark .av-rr__cond-divider { background: var(--color-dark-500); }
/* Add-condition: shrink the leading plus to 18px to match the compact row scale. */
.av-rr__add-cond .mud-icon-root {
  width: 18px;
  height: 18px;
  font-size: 18px;
}
.av-rr__conector {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
}
.av-rr__conector-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 9999px;
  background: rgb(from var(--color-primary-500) r g b / 0.12);
  color: var(--color-primary-700);
  border: none;
  cursor: pointer;
}
html.dark .av-rr__conector-chip { color: var(--color-primary-300); }
.av-rr__conector-hint { color: var(--color-gray-500); }
html.dark .av-rr__conector-hint { color: var(--color-dark-300); }

.av-rr__destino {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-gray-150);
  border-radius: var(--radius-lg);
  padding: 10px 12px;
}
html.dark .av-rr__destino { background: var(--color-dark-700); }
.av-rr__destino-text { flex: 1 1 auto; min-width: 0; }

.av-rr__opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}
.av-rr__opt + .av-rr__opt { border-top: 1px solid var(--color-gray-200); }
html.dark .av-rr__opt + .av-rr__opt { border-top-color: var(--color-dark-500); }
.av-rr__opt-icon { color: var(--color-gray-500); flex-shrink: 0; }
html.dark .av-rr__opt-icon { color: var(--color-dark-300); }
.av-rr__opt-text { flex: 1 1 auto; min-width: 0; }
.av-rr__opt-sub { color: var(--color-gray-500); }
html.dark .av-rr__opt-sub { color: var(--color-dark-300); }

/* Plain-language summary — soft blue tint with a matching blue border */
.av-rr__summary {
  background: rgb(from var(--color-primary-500) r g b / 0.07);
  border: 1px solid rgb(from var(--color-primary-500) r g b / 0.22);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
}
.av-rr__summary-text { color: var(--color-primary-700); }
html.dark .av-rr__summary {
  background: rgb(from var(--color-primary-400) r g b / 0.12);
  border-color: rgb(from var(--color-primary-400) r g b / 0.32);
}
html.dark .av-rr__summary-text { color: var(--color-primary-200); }

/* Test-the-rule button (footer, left-aligned, compact — opens the simulation dialog) */
.av-rr__test-toggle {
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 4px 8px;
  margin-right: auto;
  border-radius: var(--radius-md);
}
.av-rr__test-toggle:hover { background: var(--color-gray-100); }
.av-rr__test-toggle:hover .mud-typography { color: var(--color-primary-600); }
html.dark .av-rr__test-toggle:hover { background: var(--color-dark-600); }
html.dark .av-rr__test-toggle:hover .mud-typography { color: var(--color-primary-300); }

/* Test-the-rule simulation panel */
.av-rr__test {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: 14px;
}
html.dark .av-rr__test {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
}
.av-rr__test-head { display: flex; flex-direction: column; gap: 2px; }
.av-rr__test-inputs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}
.av-rr__test-field { display: flex; flex-direction: column; gap: 4px; }
.av-rr__test-results { display: flex; flex-direction: column; gap: 6px; }
.av-rr__test-row { display: flex; align-items: center; gap: 8px; }
.av-rr__test-ok { color: var(--color-success); }
.av-rr__test-no { color: var(--color-gray-400); }
html.dark .av-rr__test-no { color: var(--color-dark-400); }

/* Verdict banner */
.av-rr__test-verdict {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-md);
  padding: 10px 12px;
}
.av-rr__test-verdict--match {
  background: rgb(from var(--color-success) r g b / 0.10);
  border: 1px solid rgb(from var(--color-success) r g b / 0.30);
  color: var(--color-success-darker);
}
.av-rr__test-verdict--no {
  background: var(--color-gray-100);
  border: 1px solid var(--color-gray-200);
  color: var(--color-gray-700);
}
html.dark .av-rr__test-verdict--match { color: var(--color-success-lighter); }
html.dark .av-rr__test-verdict--no {
  background: var(--color-dark-600);
  border-color: var(--color-dark-500);
  color: var(--color-dark-100);
}

/* ============================================================================
 * §73 ─── Av-Rr-Page — routing rules dashboard (header, KPIs, rules + log tables)
 * ============================================================================ */
.av-rr-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* The toolbar owns its bottom spacing (av-page-filters padding-bottom: 16px);
   cancel the page gap below it so the toolbar→table distance matches every
   other av-page-filters usage instead of stacking 16px + 20px. */
.av-rr-page .av-page-filters { margin-bottom: -20px; }
.av-rr-page__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
/* Decision-log section header only — tighten the gap to its toolbar (does not touch the page header). */
.av-rr-dlog-head { margin-bottom: -10px; }
.av-rr-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.av-rr-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
}
.av-rr-toolbar__search { flex: 1 1 320px; min-width: 0; }
.av-rr-toolbar__right { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.av-rr-tbl {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  overflow: hidden;
}
html.dark .av-rr-tbl { border-color: var(--color-dark-500); background: var(--color-dark-800); }
.av-rr-tbl__head,
.av-rr-tbl__row {
  display: grid;
  grid-template-columns: 36px minmax(0, 2.4fr) minmax(0, 1.5fr) 84px 96px 84px;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
}
.av-rr-tbl__head {
  background: var(--color-gray-50);
  border-bottom: 1px solid var(--color-gray-200);
  color: var(--color-gray-500);
}
html.dark .av-rr-tbl__head { background: var(--color-dark-700); border-bottom-color: var(--color-dark-500); color: var(--color-dark-300); }
.av-rr-tbl__row { border-top: 1px solid var(--color-gray-100); transition: background 120ms ease; }
.av-rr-tbl__row:first-of-type { border-top: none; }
.av-rr-tbl__row:hover { background: var(--color-gray-50); }
html.dark .av-rr-tbl__row { border-top-color: var(--color-dark-600); }
html.dark .av-rr-tbl__row:hover { background: rgb(from var(--color-dark-700) r g b / 0.5); }
.av-rr-tbl__num { color: var(--color-gray-400); }
html.dark .av-rr-tbl__num { color: var(--color-dark-400); }
.av-rr-tbl__summary { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.av-rr-tbl__assign { display: flex; align-items: center; gap: 8px; min-width: 0; }
.av-rr-tbl__assign-icon { color: var(--color-gray-500); flex-shrink: 0; }
html.dark .av-rr-tbl__assign-icon { color: var(--color-dark-300); }
.av-rr-tbl__assign-text { min-width: 0; display: flex; flex-direction: column; }
.av-rr-tbl__accent { color: var(--color-primary-600); }
html.dark .av-rr-tbl__accent { color: var(--color-primary-400); }
.av-rr-tbl__events { display: flex; align-items: center; gap: 10px; color: var(--color-gray-500); }
html.dark .av-rr-tbl__events { color: var(--color-dark-300); }
.av-rr-tbl__ev { display: inline-flex; align-items: center; gap: 4px; }
.av-rr-tbl__actions { display: flex; align-items: center; gap: 2px; justify-content: flex-end; }
.av-rr-tbl__actions-head { text-align: right; }
.av-rr-tbl__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-top: 1px solid var(--color-gray-200);
  color: var(--color-gray-500);
}
html.dark .av-rr-tbl__foot { border-top-color: var(--color-dark-500); color: var(--color-dark-300); }

.av-rr-dlog__head,
.av-rr-dlog__row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1.6fr) minmax(0, 1.3fr) minmax(0, 1fr) 110px;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
}
/* Match the rules table exactly: gray header bar + hover rows. */
.av-rr-dlog__head { background: var(--color-gray-50); color: var(--color-gray-500); border-bottom: 1px solid var(--color-gray-200); }
html.dark .av-rr-dlog__head { background: var(--color-dark-700); color: var(--color-dark-300); border-bottom-color: var(--color-dark-500); }
.av-rr-dlog__row { border-top: 1px solid var(--color-gray-100); transition: background 120ms ease; }
.av-rr-dlog__row:first-of-type { border-top: none; }
.av-rr-dlog__row:hover { background: var(--color-gray-50); }
html.dark .av-rr-dlog__row { border-top-color: var(--color-dark-600); }
html.dark .av-rr-dlog__row:hover { background: rgb(from var(--color-dark-700) r g b / 0.5); }
.av-rr-dlog__rule { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.av-rr-link { color: var(--color-primary-600); cursor: pointer; }
html.dark .av-rr-link { color: var(--color-primary-400); }

@media (max-width: 900px) {
  .av-rr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CALENDAR MODULE (/calendar) — consolidado desde calendar.css
   ═══════════════════════════════════════════════════════════════════════════
   Diseño visual Google Calendar adaptado a los tokens del proyecto, propio del
   módulo Calendar (Pages/Calendar + Shared/Calendar). Convención de clases:
   av-cal-* (abreviatura para evitar colisiones). El dark mode usa html.dark.

   NOTA de namespace: este bloque NO se relaciona con el calendario del Task
   Manager V8 (av-cal-conn-card / av-cal-sub-row, más arriba en este archivo) ni
   con av-calendar (skin del popover de MudDatePicker). Son features distintas;
   los nombres no colisionan. Este módulo acepta declarar font-size/font-family
   fuera de la escala tipográfica por decisión de producto para esta sección.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Layout principal ─────────────────────────────────────────────── */

.av-cal-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  font-family: var(--font-sans, 'Inter', sans-serif);
  color: var(--color-gray-800, #3c4043);
  background: var(--color-white, #ffffff);
  border-radius: 16px;
  overflow: hidden;
}

html.dark .av-cal-page {
  color: var(--color-dark-50, #e8eaed);
  background: var(--color-dark-900, #202124);
}

.av-cal-body {
  display: flex;
  flex-grow: 1;
  overflow: hidden;
  height: calc(100vh - 64px); /* viewport minus topbar */
}

/* ── Topbar ────────────────────────────────────────────────────────── */

.av-cal-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 16px;
  border-bottom: 1px solid var(--color-gray-200, #dadce0);
  background: var(--color-white, #ffffff);
  flex-shrink: 0;
}

html.dark .av-cal-topbar {
  border-bottom-color: var(--color-dark-500, #3c4043);
  background: var(--color-dark-900, #202124);
}

.av-cal-topbar-left,
.av-cal-topbar-center,
.av-cal-topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.av-cal-menu-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  color: var(--color-gray-500, #70757a);
}

.av-cal-menu-icon svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.av-cal-menu-icon:hover {
  background: var(--color-gray-100, #f1f3f4);
}

html.dark .av-cal-menu-icon:hover {
  background: var(--color-dark-700, #303134);
}

.av-cal-logo {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.av-cal-brand {
  font-size: 22px;
  font-weight: 400;
  color: var(--color-gray-500, #70757a);
  padding-left: 4px;
  user-select: none;
}

html.dark .av-cal-brand {
  color: var(--color-dark-200, #9aa0a6);
}

/* Espaciador duplica el gap entre "Calendario" y Today */
.av-cal-brand-spacer {
  width: 130px;
  flex-shrink: 0;
}

.av-cal-btn-today {
  border: 1px solid var(--color-gray-300, #dadce0);
  background: transparent;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  color: var(--color-gray-800, #3c4043);
  font-family: inherit;
  transition: background 150ms ease;
  white-space: nowrap;
}

.av-cal-btn-today:hover {
  background: var(--color-gray-100, #f1f3f4);
}

html.dark .av-cal-btn-today {
  border-color: var(--color-dark-500, #3c4043);
  color: var(--color-dark-50, #e8eaed);
}

html.dark .av-cal-btn-today:hover {
  background: var(--color-dark-700, #303134);
}

.av-cal-nav-arrows {
  display: flex;
  gap: 2px;
  margin-left: 4px;
}

.av-cal-btn-icon {
  background: transparent;
  border: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  color: var(--color-gray-500, #70757a);
  transition: background 150ms ease;
}

.av-cal-btn-icon svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.av-cal-btn-icon:hover {
  background: var(--color-gray-100, #f1f3f4);
}

html.dark .av-cal-btn-icon:hover {
  background: var(--color-dark-700, #303134);
}

.av-cal-current-date {
  font-size: 22px;
  font-weight: 400;
  margin: 0 12px;
  min-width: 150px;
  white-space: nowrap;
  color: var(--color-gray-900, #3c4043);
  user-select: none;
}

html.dark .av-cal-current-date {
  color: var(--color-dark-50, #e8eaed);
}

.av-cal-view-selector {
  padding: 8px 12px;
  border: 1px solid var(--color-gray-300, #dadce0);
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
  background: var(--color-white, #ffffff);
  color: var(--color-gray-800, #3c4043);
  cursor: pointer;
  min-width: 100px;
}

.av-cal-view-selector:focus {
  outline: 2px solid var(--color-primary-500, #1a73e8);
  outline-offset: 1px;
}

html.dark .av-cal-view-selector {
  border-color: var(--color-dark-500, #3c4043);
  background: var(--color-dark-800, #292a2d);
  color: var(--color-dark-50, #e8eaed);
}

.av-cal-header-actions,
.av-cal-header-apps {
  display: flex;
  align-items: center;
  gap: 4px;
}

.av-cal-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-left: 8px;
  cursor: pointer;
  object-fit: cover;
}

/* Wrapper del botón Settings (Sync menu) — ancla el popover. */
.av-cal-sync-wrapper {
  position: relative;
  display: inline-block;
}

/* Popover del Sync menu — posicionado bajo el botón, alineado a la derecha. */
.av-cal-sync-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1000;
  min-width: 220px;
  margin-top: 4px;
}

/* ── Sidebar ───────────────────────────────────────────────────────── */

.av-cal-sidebar {
  width: 256px;
  min-width: 256px;
  border-right: 1px solid var(--color-gray-200, #dadce0);
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: var(--color-white, #ffffff);
  flex-shrink: 0;
}

html.dark .av-cal-sidebar {
  border-right-color: var(--color-dark-500, #3c4043);
  background: var(--color-dark-900, #202124);
}

.av-cal-create-container {
  padding: 0 16px 16px;
  position: relative;
}

.av-cal-create-btn {
  display: flex;
  align-items: center;
  background: var(--color-white, #ffffff);
  border: none;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
  border-radius: 28px;
  padding: 8px 24px 8px 12px;
  cursor: pointer;
  transition: box-shadow 0.2s;
  width: 100%;
  font-family: inherit;
  color: var(--color-gray-800, #3c4043);
}

.av-cal-create-btn:hover {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 4px 8px 3px rgba(0, 0, 0, 0.2);
}

.av-cal-create-btn svg {
  flex-shrink: 0;
}

/* Símbolo + en color de marca Avalme, dentro de un badge circular tintado */
.av-cal-create-plus {
  color: var(--color-primary-600, #1a73e8);
  background: color-mix(in srgb, var(--color-primary-600, #1a73e8) 12%, transparent);
  border-radius: 999px;
  padding: 5px;
  box-sizing: content-box;
  transition: background 0.2s, transform 0.2s;
}

.av-cal-create-btn:hover .av-cal-create-plus {
  background: color-mix(in srgb, var(--color-primary-600, #1a73e8) 20%, transparent);
  transform: rotate(90deg);
}

.av-cal-create-text {
  font-size: 14px;
  font-weight: 500;
  padding-left: 12px;
  flex: 1;
  text-align: left;
}

.av-cal-create-dropdown-icon {
  width: 18px;
  height: 18px;
  fill: var(--color-gray-500, #70757a);
}

html.dark .av-cal-create-btn {
  background: var(--color-dark-800, #292a2d);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5), 0 1px 3px 1px rgba(0, 0, 0, 0.3);
  color: var(--color-dark-50, #e8eaed);
}

html.dark .av-cal-create-btn:hover {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.6), 0 4px 8px 3px rgba(0, 0, 0, 0.4);
}

html.dark .av-cal-create-dropdown-icon {
  fill: var(--color-dark-200, #9aa0a6);
}

html.dark .av-cal-create-plus {
  color: var(--color-primary-400, #8ab4f8);
  background: color-mix(in srgb, var(--color-primary-400, #8ab4f8) 18%, transparent);
}

html.dark .av-cal-create-btn:hover .av-cal-create-plus {
  background: color-mix(in srgb, var(--color-primary-400, #8ab4f8) 28%, transparent);
}

/* Backdrop transparente que cierra los popover (Create / Sync) al hacer clic
   fuera. Cubre todo el viewport por debajo del popover (z-index 1000) para
   capturar el clic sin oscurecer la pantalla. */
.av-cal-popover-backdrop {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: transparent;
}

.av-cal-create-popover {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  margin-top: 4px;
  border-radius: 12px !important;
  padding: 6px !important;
  min-width: 248px !important;
  border: 1px solid var(--color-gray-200, #e0e0e0);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

.av-cal-create-popover .mud-list {
  padding: 0;
}

.av-cal-create-popover .mud-list-item {
  border-radius: 8px;
  margin: 2px 0;
  padding: 10px 12px;
  gap: 12px;
  transition: background 0.15s;
}

.av-cal-create-popover .mud-list-item:hover {
  background: color-mix(in srgb, var(--color-primary-600, #1a73e8) 8%, transparent);
}

.av-cal-create-popover .mud-list-item-icon {
  min-width: 0;
  margin: 0;
  padding: 7px;
  border-radius: 8px;
  color: var(--color-primary-600, #1a73e8);
  background: color-mix(in srgb, var(--color-primary-600, #1a73e8) 10%, transparent);
}

.av-cal-create-popover .mud-divider {
  margin: 4px 8px;
}

html.dark .av-cal-create-popover {
  border-color: var(--color-dark-600, #3c4043);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

html.dark .av-cal-create-popover .mud-list-item:hover {
  background: color-mix(in srgb, var(--color-primary-400, #8ab4f8) 14%, transparent);
}

html.dark .av-cal-create-popover .mud-list-item-icon {
  color: var(--color-primary-400, #8ab4f8);
  background: color-mix(in srgb, var(--color-primary-400, #8ab4f8) 16%, transparent);
}

/* ── Mini calendario (sidebar) ─────────────────────────────────────── */

.av-cal-mini {
  padding: 0 16px 20px;
}

.av-cal-mini-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 500;
  padding: 0 8px 8px;
  color: var(--color-gray-800, #3c4043);
}

html.dark .av-cal-mini-header {
  color: var(--color-dark-50, #e8eaed);
}

.av-cal-mini-nav {
  display: flex;
  gap: 2px;
}

.av-cal-btn-icon-sm {
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 4px;
  border-radius: 50%;
  color: var(--color-gray-500, #70757a);
  transition: background 150ms ease;
}

.av-cal-btn-icon-sm svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.av-cal-btn-icon-sm:hover {
  background: var(--color-gray-100, #f1f3f4);
}

html.dark .av-cal-btn-icon-sm:hover {
  background: var(--color-dark-700, #303134);
}

.av-cal-mini-days-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  font-size: 11px;
  text-align: center;
  color: var(--color-gray-500, #70757a);
  padding-bottom: 8px;
}

html.dark .av-cal-mini-days-header {
  color: var(--color-dark-300, #9aa0a6);
}

.av-cal-mini-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  font-size: 11px;
  text-align: center;
  gap: 2px;
}

.av-cal-mini-day {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  font-size: 11px;
  color: var(--color-gray-800, #3c4043);
  transition: background 150ms ease;
  margin: 0 auto;
  position: relative;
}

.av-cal-mini-day:hover {
  background: var(--color-gray-100, #f1f3f4);
}

html.dark .av-cal-mini-day {
  color: var(--color-dark-50, #e8eaed);
}

html.dark .av-cal-mini-day:hover {
  background: var(--color-dark-700, #303134);
}

.av-cal-mini-day--today {
  background: var(--color-primary-600, #1a73e8) !important;
  color: white !important;
  font-weight: 500;
}

html.dark .av-cal-mini-day--today {
  background: var(--color-primary-500, #8ab4f8) !important;
  color: var(--color-dark-900, #202124) !important;
}

.av-cal-mini-day--selected {
  outline: 2px solid var(--color-primary-600, #1a73e8);
  outline-offset: -2px;
}

html.dark .av-cal-mini-day--selected {
  outline-color: var(--color-primary-400, #8ab4f8);
}

.av-cal-mini-day--inactive {
  color: var(--color-gray-400, #70757a);
  opacity: 0.5;
}

html.dark .av-cal-mini-day--inactive {
  color: var(--color-dark-500, #3c4043);
}

.av-cal-mini-day--has-event::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-primary-600, #1a73e8);
}

html.dark .av-cal-mini-day--has-event::after {
  background: var(--color-primary-400, #8ab4f8);
}

/* ── Sidebar — búsqueda de personas ────────────────────────────────── */

.av-cal-search-people {
  padding: 0 16px 20px;
}

.av-cal-search-wrapper {
  display: flex;
  align-items: center;
  background: var(--color-gray-100, #f1f3f4);
  border-radius: 8px;
  padding: 0 12px;
}

html.dark .av-cal-search-wrapper {
  background: var(--color-dark-700, #303134);
}

.av-cal-search-wrapper svg {
  width: 18px;
  height: 18px;
  fill: var(--color-gray-500, #70757a);
  flex-shrink: 0;
}

html.dark .av-cal-search-wrapper svg {
  fill: var(--color-dark-300, #9aa0a6);
}

.av-cal-search-input {
  border: none;
  background: transparent;
  padding: 10px 8px;
  font-size: 14px;
  width: 100%;
  color: var(--color-gray-800, #3c4043);
  font-family: inherit;
}

.av-cal-search-input::placeholder {
  color: var(--color-gray-500, #70757a);
}

.av-cal-search-input:focus {
  outline: none;
}

html.dark .av-cal-search-input {
  color: var(--color-dark-50, #e8eaed);
}

html.dark .av-cal-search-input::placeholder {
  color: var(--color-dark-300, #9aa0a6);
}

/* ── Búsqueda de eventos — modal centrado ──────────────────────────────
   Overlay de búsqueda que filtra eventos de todos los proveedores por
   nombre / fecha / rango. Sigue las convenciones visuales locales de
   av-cal-* (tarjeta blanca, inputs gris, botón primary, paridad dark). */

.av-cal-search-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1300;
  background: rgba(0, 0, 0, 0.4);
}

.av-cal-search-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1301;
  width: min(480px, calc(100vw - 32px));
  max-height: min(640px, calc(100vh - 64px));
  display: flex;
  flex-direction: column;
  background: var(--color-white, #ffffff);
  border: 1px solid var(--color-gray-200, #dadce0);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

html.dark .av-cal-search-modal {
  background: var(--color-dark-800, #292a2d);
  border-color: var(--color-dark-600, #3c4043);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.4);
}

.av-cal-search-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-gray-200, #dadce0);
  flex-shrink: 0;
}

html.dark .av-cal-search-modal__header {
  border-bottom-color: var(--color-dark-500, #3c4043);
}

.av-cal-search-modal__title {
  color: var(--color-gray-800, #3c4043);
}

html.dark .av-cal-search-modal__title {
  color: var(--color-dark-50, #e8eaed);
}

.av-cal-search-modal__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  overflow-y: auto;
}

/* Botón limpiar dentro del wrapper de nombre. */
.av-cal-search-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 4px;
  cursor: pointer;
  flex-shrink: 0;
  border-radius: 50%;
}

.av-cal-search-clear svg {
  width: 16px;
  height: 16px;
  fill: var(--color-gray-500, #70757a);
}

html.dark .av-cal-search-clear svg {
  fill: var(--color-dark-300, #9aa0a6);
}

.av-cal-search-clear:hover {
  background: var(--color-gray-100, #f1f3f4);
}

html.dark .av-cal-search-clear:hover {
  background: var(--color-dark-700, #303134);
}

/* Rango de fechas (Desde / Hasta). */
.av-cal-search-dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.av-cal-search-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.av-cal-search-field-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-gray-500, #70757a);
}

html.dark .av-cal-search-field-label {
  color: var(--color-dark-300, #9aa0a6);
}

.av-cal-search-date {
  border: 1px solid var(--color-gray-300, #dadce0);
  background: var(--color-white, #ffffff);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 14px;
  font-family: inherit;
  color: var(--color-gray-800, #3c4043);
  width: 100%;
}

.av-cal-search-date:focus {
  outline: none;
  border-color: var(--color-primary-600, #1a73e8);
}

html.dark .av-cal-search-date {
  background: var(--color-dark-700, #303134);
  border-color: var(--color-dark-500, #3c4043);
  color: var(--color-dark-50, #e8eaed);
  color-scheme: dark;
}

/* Proveedores. */
.av-cal-search-providers {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.av-cal-search-providers-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.av-cal-search-providers-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-gray-500, #70757a);
}

html.dark .av-cal-search-providers-label {
  color: var(--color-dark-300, #9aa0a6);
}

.av-cal-search-providers-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
}

/* Acción — buscar. */
.av-cal-search-actions {
  display: flex;
}

.av-cal-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  background: var(--color-primary-600, #1a73e8);
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 150ms ease;
}

.av-cal-search-btn:hover:not(:disabled) {
  background: var(--color-primary-700, #1765cc);
}

.av-cal-search-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.av-cal-search-spinner {
  color: #ffffff;
}

/* Resultados. */
.av-cal-search-results {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.av-cal-search-results-count {
  font-size: 12px;
  color: var(--color-gray-500, #70757a);
  padding: 0 4px 4px;
}

html.dark .av-cal-search-results-count {
  color: var(--color-dark-300, #9aa0a6);
}

.av-cal-search-hint {
  font-size: 13px;
  color: var(--color-gray-500, #70757a);
  text-align: center;
  padding: 16px 8px;
}

html.dark .av-cal-search-hint {
  color: var(--color-dark-300, #9aa0a6);
}

.av-cal-search-result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 150ms ease;
}

.av-cal-search-result:hover {
  background: var(--color-gray-100, #f1f3f4);
}

html.dark .av-cal-search-result:hover {
  background: var(--color-dark-700, #303134);
}

.av-cal-search-result-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

/* Badge de fuente/tipo, anclado a la derecha del resultado. */
.av-cal-search-result-badge {
  flex-shrink: 0;
}

.av-cal-search-result-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-gray-800, #3c4043);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html.dark .av-cal-search-result-title {
  color: var(--color-dark-50, #e8eaed);
}

.av-cal-search-result-meta {
  font-size: 12px;
  color: var(--color-gray-500, #70757a);
}

html.dark .av-cal-search-result-meta {
  color: var(--color-dark-300, #9aa0a6);
}

/* Móvil: fechas y proveedores en una sola columna. */
@media (max-width: 520px) {
  .av-cal-search-dates,
  .av-cal-search-providers-list {
    grid-template-columns: 1fr;
  }
}

/* ── Sidebar — secciones de calendarios (checkboxes) ───────────────── */

.av-cal-section {
  padding: 0 16px 20px;
}

.av-cal-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: 12px;
  color: var(--color-gray-800, #3c4043);
}

html.dark .av-cal-section-header {
  color: var(--color-dark-50, #e8eaed);
}

.av-cal-section-header svg {
  width: 16px;
  height: 16px;
  fill: var(--color-gray-500, #70757a);
  transition: transform 150ms ease;
}

/* Colapsado: chevron rota 180° (apunta hacia abajo). */
.av-cal-section-header svg.av-cal-chevron-collapsed {
  transform: rotate(180deg);
}

html.dark .av-cal-section-header svg {
  fill: var(--color-dark-300, #9aa0a6);
}

.av-cal-checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.av-cal-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
  color: var(--color-gray-800, #3c4043);
  user-select: none;
}

html.dark .av-cal-checkbox-label {
  color: var(--color-dark-50, #e8eaed);
}

.av-cal-checkbox-label input[type="checkbox"] {
  accent-color: var(--color-primary-600, #1a73e8);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.av-cal-color-dot {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  flex-shrink: 0;
  /* Fills the dot with the source colour so the sidebar filters double as the
     grid legend. Source dots carry it via --av-event-color (set by
     .av-cal-source-*); owner dots override it with their own background-color. */
  background-color: var(--av-event-color, transparent);
}

/* Checkbox del último filtro activo — deshabilitado (no se puede ocultar todo). */
.av-cal-checkbox-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Main content — contenedor de vistas ───────────────────────────── */

.av-cal-main-content {
  flex-grow: 1;
  overflow: hidden;
  background: var(--color-white, #ffffff);
  position: relative;
}

html.dark .av-cal-main-content {
  background: var(--color-dark-900, #202124);
}

.av-cal-view-container {
  height: 100%;
  display: none;
  flex-direction: column;
}

.av-cal-view-container--active {
  display: flex;
}

/* ── Vista mes ─────────────────────────────────────────────────────── */

.av-cal-month-headers {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--color-gray-200, #dadce0);
}

html.dark .av-cal-month-headers {
  border-bottom-color: var(--color-dark-500, #3c4043);
}

.av-cal-month-headers > div {
  text-align: center;
  font-size: 11px;
  color: var(--color-gray-500, #70757a);
  padding: 8px 0;
  border-right: 1px solid var(--color-gray-200, #dadce0);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.av-cal-month-headers > div:last-child {
  border-right: none;
}

html.dark .av-cal-month-headers > div {
  color: var(--color-dark-300, #9aa0a6);
  border-right-color: var(--color-dark-500, #3c4043);
}

.av-cal-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  flex-grow: 1;
  grid-auto-rows: minmax(100px, 1fr);
}

.av-cal-month-cell {
  border-right: 1px solid var(--color-gray-200, #dadce0);
  border-bottom: 1px solid var(--color-gray-200, #dadce0);
  padding: 4px;
  position: relative;
  min-height: 80px;
  cursor: pointer;
  overflow: hidden;
}

.av-cal-month-cell:nth-child(7n) {
  border-right: none;
}

html.dark .av-cal-month-cell {
  border-color: var(--color-dark-500, #3c4043);
}

.av-cal-month-cell-date {
  text-align: center;
  margin-bottom: 2px;
  padding: 2px 0;
}

.av-cal-month-cell-date span {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-gray-800, #3c4043);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

html.dark .av-cal-month-cell-date span {
  color: var(--color-dark-50, #e8eaed);
}

.av-cal-month-cell-date-num {
  cursor: pointer;
  transition: background-color 120ms ease;
}

.av-cal-month-cell-date-num:hover {
  background: var(--color-gray-200, #e8eaed);
}

html.dark .av-cal-month-cell-date-num:hover {
  background: var(--color-dark-600, #3c4043);
}

.av-cal-month-cell--today .av-cal-month-cell-date-num:hover {
  background: var(--color-primary-700, #1557b0);
}

.av-cal-month-cell--today .av-cal-month-cell-date span {
  background: var(--color-primary-600, #1a73e8);
  color: white;
}

html.dark .av-cal-month-cell--today .av-cal-month-cell-date span {
  background: var(--color-primary-500, #8ab4f8);
  color: var(--color-dark-900, #202124);
}

.av-cal-month-cell--outside .av-cal-month-cell-date span {
  color: var(--color-gray-400, #70757a);
}

html.dark .av-cal-month-cell--outside .av-cal-month-cell-date span {
  color: var(--color-dark-500, #3c4043);
}

.av-cal-month-event {
  margin: 1px 0;
  padding: 2px 6px;
  font-size: 11px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  transition: filter 150ms ease;
}

.av-cal-month-event:hover {
  filter: brightness(0.9);
}

/* Ocurrencia extraída de su serie (una fecha editada por separado). Marca compartida por las vistas
   de mes, semana y día para que el usuario distinga la excepción SIN pasar el mouse; el badge con el
   texto vive en la tarjeta de hover y en el detalle. Se dibuja con `outline` y no con `border` a
   propósito: el borde ocuparía espacio y desplazaría el chip, que en la celda del mes va justo. */
.av-cal-exception {
  outline: 1px dashed rgb(from currentColor r g b / 0.65);
  outline-offset: -1px;
}

/* Event whose source closed (completed / cancelled / final phase / archived): kept, de-emphasized.
   Opacity reads the same on light and dark chips; the status icon inherits currentColor. */
.av-cal-event--closed {
  opacity: 0.7;
}

.av-cal-event-status-icon {
  flex-shrink: 0;
  margin-inline-end: 4px;
  vertical-align: -2px;
}

/* Evento all-day: fondo sólido (color por dato vía --av-event-color) + texto blanco */
.av-cal-month-event--allday {
  color: white;
  font-weight: 500;
  background-color: var(--av-event-color, var(--color-primary-600, #1a73e8));
}

.av-cal-month-event--timed {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--color-gray-800, #3c4043);
  font-weight: 400;
}

html.dark .av-cal-month-event--timed {
  color: var(--color-dark-50, #e8eaed);
}

.av-cal-month-event--timed::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--av-event-color, var(--color-primary-600, #1a73e8));
  flex-shrink: 0;
}

/* Evento multidía: barra sólida (color por dato) que cruza celdas */
.av-cal-month-event--multiday {
  color: white;
  font-weight: 500;
  border-radius: 4px;
  background-color: var(--av-event-color, var(--color-primary-600, #1a73e8));
}

.av-cal-multiday-start {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  margin-right: 0;
}

.av-cal-multiday-middle {
  border-radius: 0;
  margin-left: 0;
  margin-right: 0;
  border-left: none;
}

.av-cal-multiday-end {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: 0;
}

.av-cal-month-more {
  font-size: 11px;
  color: var(--color-gray-600, #70757a);
  padding: 0 6px;
  font-weight: 500;
  cursor: pointer;
}

.av-cal-month-more:hover {
  color: var(--color-primary-600, #1a73e8);
}

html.dark .av-cal-month-more {
  color: var(--color-dark-300, #9aa0a6);
}

html.dark .av-cal-month-more:hover {
  color: var(--color-primary-400, #8ab4f8);
}

/* ── Vista semana / día (horario) ──────────────────────────────────── */

/* Contenedor raíz de las vistas Semana/Día: columna flex de altura completa
   para que la fila de cabecera y la de "todo el día" queden fijas y el grid
   horario (av-cal-view-scroll) tome el alto restante y haga scroll interno.
   El número de columnas de las 3 grillas (cabecera, all-day, horario) se
   parametriza con --av-cal-cols, seteado UNA vez en este contenedor (1 = día,
   7 = semana) y heredado por los descendientes. */
.av-cal-week {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.av-cal-week-day-headers {
  display: grid;
  grid-template-columns: 60px repeat(var(--av-cal-cols, 7), 1fr);
  border-bottom: 1px solid var(--color-gray-200, #dadce0);
  border-right: 1px solid var(--color-gray-200, #dadce0);
  flex-shrink: 0;
  /* Same scrollbar lane as .av-cal-view-scroll so the columns line up. */
  overflow-y: hidden;
  scrollbar-gutter: stable;
}

html.dark .av-cal-week-day-headers {
  border-color: var(--color-dark-500, #3c4043);
}

.av-cal-week-day-corner {
  width: 60px;
  min-width: 60px;
  border-right: 1px solid var(--color-gray-200, #dadce0);
}

html.dark .av-cal-week-day-corner {
  border-right-color: var(--color-dark-500, #3c4043);
}

.av-cal-week-day-header {
  text-align: center;
  padding: 6px 4px;
  font-size: 12px;
  color: var(--color-gray-600, #70757a);
  border-right: 1px solid var(--color-gray-200, #dadce0);
  box-sizing: border-box;
  text-transform: capitalize;
}

.av-cal-week-day-header:last-child {
  border-right: none;
}

html.dark .av-cal-week-day-header {
  color: var(--color-dark-300, #9aa0a6);
  border-right-color: var(--color-dark-500, #3c4043);
}

.av-cal-week-day-header--today {
  color: var(--color-primary-600, #1a73e8);
  font-weight: 600;
}

html.dark .av-cal-week-day-header--today {
  color: var(--color-primary-400, #8ab4f8);
}

/* All-day row — comparte el número de columnas con la cabecera y el grid
   horario vía --av-cal-cols (heredado de .av-cal-week). */
.av-cal-allday-section {
  display: grid;
  grid-template-columns: 60px repeat(var(--av-cal-cols, 7), 1fr);
  border-bottom: 1px solid var(--color-gray-200, #dadce0);
  border-right: 1px solid var(--color-gray-200, #dadce0);
  min-height: 44px;
  flex-shrink: 0;
  /* Same scrollbar lane as .av-cal-view-scroll so the columns line up. */
  overflow-y: hidden;
  scrollbar-gutter: stable;
}

html.dark .av-cal-allday-section {
  border-color: var(--color-dark-500, #3c4043);
}

/* Celda de la fila all-day (una por día): compacta respecto al grid horario. */
.av-cal-allday-section .av-cal-hour-cell {
  min-height: 24px;
  padding: 2px;
}

/* Evento all-day dentro de la fila all-day de Semana/Día: tipografía compacta. */
.av-cal-allday-section .av-cal-month-event {
  font-size: 10px;
}

.av-cal-allday-label {
  width: 60px;
  min-width: 60px;
  font-size: 10px;
  color: var(--color-gray-500, #70757a);
  text-align: right;
  padding: 8px 8px 0 0;
  border-right: 1px solid var(--color-gray-200, #dadce0);
  box-sizing: border-box;
}

html.dark .av-cal-allday-label {
  border-right-color: var(--color-dark-500, #3c4043);
  color: var(--color-dark-300, #9aa0a6);
}

.av-cal-allday-grid {
  flex-grow: 1;
  display: grid;
  position: relative;
  padding: 2px 0;
}

.av-cal-view-scroll {
  overflow-y: auto;
  flex-grow: 1;
  position: relative;
  scrollbar-gutter: stable;
  /* Room for the first hour label, which is lifted over its line.
     .av-cal-events-layer offsets by the same amount. */
  padding-top: 8px;
}

.av-cal-hour-grid {
  display: grid;
  grid-template-columns: 60px repeat(var(--av-cal-cols, 7), 1fr);
  grid-auto-rows: 48px;
  position: relative;
}

.av-cal-hour-label {
  grid-column: 1;
  font-size: 10px;
  color: var(--color-gray-500, #70757a);
  text-align: right;
  padding-right: 8px;
  transform: translateY(-7px);
  font-weight: 400;
}

html.dark .av-cal-hour-label {
  color: var(--color-dark-300, #9aa0a6);
}

.av-cal-hour-cell {
  border-right: 1px solid var(--color-gray-200, #dadce0);
  border-bottom: 1px solid var(--color-gray-200, #dadce0);
}

.av-cal-hour-cell:last-child {
  border-right: none;
}

/* Hour rows draw their line on top: each label gets its own line (12 AM included)
   and nothing is drawn after the last hour. */
.av-cal-hour-grid .av-cal-hour-cell {
  border-bottom: none;
  border-top: 1px solid var(--color-gray-200, #dadce0);
}

html.dark .av-cal-hour-cell {
  border-color: var(--color-dark-500, #3c4043);
}

.av-cal-hour-cell--today {
  background: rgb(from var(--color-primary-500, #1a73e8) r g b / 0.03);
}

.av-cal-events-layer {
  position: absolute;
  top: 8px; /* matches .av-cal-view-scroll padding-top */
  left: 60px;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.av-cal-event-abs {
  position: absolute;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.4);
  pointer-events: auto;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
  z-index: 5;
  color: white;
  line-height: 1.3;
}

.av-cal-event-abs:hover {
  z-index: 10;
  filter: brightness(1.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.av-cal-event-abs__title {
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 11px;
}

.av-cal-event-abs__time {
  font-size: 10px;
  opacity: 0.9;
}

/* ── Hover card (tooltip rico de evento) ───────────────────────────── */

/* Neutraliza la superficie default del MudTooltip (bg oscuro, padding, max-width,
   shadow) SOLO en los tooltips que contienen el hover card — :has() restringe el
   scope a este caso, cero impacto sobre el resto de tooltips de la app. El card
   interno (av-popover-panel) aporta todo el chrome visible. */
.mud-tooltip:has(.av-cal-event-hovercard),
.mud-popover:has(.av-cal-event-hovercard) {
  background-color: transparent !important;
  color: inherit !important;
  padding: 0 !important;
  max-width: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.av-cal-month-event__tip-root {
  display: block;
}

.av-cal-event-abs__tip-root {
  position: absolute;
  border-radius: 4px;
  /* El color lo aporta la clase de fuente (av-cal-source-*) que acompaña a esta en el mismo
     elemento; el style inline solo lleva la geometría calculada (top/height/left/width). */
  background-color: var(--av-event-color, var(--color-primary-600, #1a73e8));
}

.av-cal-event-abs--in-tip {
  inset: 0;
}

/* Punto de color del header del card (color por dato vía --av-event-color). */
.av-cal-hovercard__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  background-color: var(--av-event-color, var(--color-primary-600, #1a73e8));
}

.av-cal-hovercard__icon {
  flex-shrink: 0;
}

.av-cal-hovercard__title {
  flex: 1;
  text-align: left;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.av-cal-hovercard__rowtext {
  min-width: 0;
  flex: 1;
  text-align: left;
}

/* Event dialog location kind picker — separates the radios from the field of the chosen kind. WI #1791. */
.av-cal-location__kind {
  padding-bottom: 12px;
}

/* Event location row (detail + hover card) — a meeting link has no spaces, so let it wrap. WI #1791. */
.av-cal-location__text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.av-cal-hovercard__desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Vista año ─────────────────────────────────────────────────────── */

.av-cal-year-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  flex-grow: 1;
  gap: 24px;
  padding: 24px;
  overflow-y: auto;
}

.av-cal-year-month {
  border: 1px solid var(--color-gray-200, #dadce0);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
}

html.dark .av-cal-year-month {
  border-color: var(--color-dark-500, #3c4043);
}

.av-cal-year-month-header {
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-gray-200, #dadce0);
  color: var(--color-gray-800, #3c4043);
}

html.dark .av-cal-year-month-header {
  border-bottom-color: var(--color-dark-500, #3c4043);
  color: var(--color-dark-50, #e8eaed);
}

.av-cal-year-month-days {
  flex-grow: 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  padding-top: 12px;
  font-size: 10px;
  text-align: center;
}

.av-cal-year-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2px 0;
  color: var(--color-gray-800, #3c4043);
  cursor: pointer;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  margin: 0 auto;
  transition: background 150ms ease;
}

.av-cal-year-day:hover {
  background: var(--color-gray-100, #f1f3f4);
}

html.dark .av-cal-year-day {
  color: var(--color-dark-50, #e8eaed);
}

html.dark .av-cal-year-day:hover {
  background: var(--color-dark-700, #303134);
}

.av-cal-year-day--inactive {
  color: var(--color-gray-400, #70757a);
  opacity: 0.5;
}

html.dark .av-cal-year-day--inactive {
  color: var(--color-dark-500, #3c4043);
}

.av-cal-year-day--today {
  background: var(--color-primary-600, #1a73e8);
  color: white !important;
}

html.dark .av-cal-year-day--today {
  background: var(--color-primary-500, #8ab4f8);
  color: var(--color-dark-900, #202124) !important;
}

.av-cal-year-dot {
  width: 5px;
  height: 5px;
  background: var(--color-primary-600, #1a73e8);
  border-radius: 50%;
  margin: 2px auto 0;
}

html.dark .av-cal-year-dot {
  background: var(--color-primary-400, #8ab4f8);
}

/* On "today" the day sits on a filled primary circle, so the same-color dot
   would vanish — render it in the circle's foreground color for contrast. */
.av-cal-year-day--today .av-cal-year-dot {
  background: white;
}

html.dark .av-cal-year-day--today .av-cal-year-dot {
  background: var(--color-dark-900, #202124);
}

/* ── Vista agenda ──────────────────────────────────────────────────── */

.av-cal-agenda {
  overflow-y: auto;
  padding: 16px 24px;
  height: 100%;
}

.av-cal-agenda-group {
  display: flex;
  border-bottom: 1px solid var(--color-gray-200, #dadce0);
  padding: 16px 0;
  gap: 16px;
}

html.dark .av-cal-agenda-group {
  border-bottom-color: var(--color-dark-500, #3c4043);
}

/* Estado vacío de la agenda. */
.av-cal-agenda-empty {
  padding: 32px 0;
  text-align: center;
  font-size: 14px;
  color: var(--color-gray-500, #70757a);
}

html.dark .av-cal-agenda-empty {
  color: var(--color-dark-300, #9aa0a6);
}

.av-cal-agenda-day-info {
  width: 100px;
  min-width: 100px;
  font-size: 12px;
  text-align: center;
  color: var(--color-gray-800, #3c4043);
  display: flex;
  flex-direction: column;
  align-items: center;
}

html.dark .av-cal-agenda-day-info {
  color: var(--color-dark-50, #e8eaed);
}

.av-cal-agenda-day-num {
  font-size: 22px;
  margin-bottom: 2px;
  font-weight: 500;
}

.av-cal-agenda-day-month {
  font-size: 11px;
  color: var(--color-gray-500, #70757a);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

html.dark .av-cal-agenda-day-month {
  color: var(--color-dark-300, #9aa0a6);
}

.av-cal-agenda-events {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.av-cal-agenda-item {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 4px;
  transition: background 150ms ease;
}

.av-cal-agenda-item:hover {
  background: var(--color-gray-100, #f1f3f4);
}

html.dark .av-cal-agenda-item:hover {
  background: var(--color-dark-700, #303134);
}

.av-cal-agenda-time {
  font-size: 12px;
  color: var(--color-gray-500, #70757a);
  width: 80px;
  text-align: right;
  flex-shrink: 0;
  font-weight: 400;
}

html.dark .av-cal-agenda-time {
  color: var(--color-dark-300, #9aa0a6);
}

/* Secondary (tenant-zone) time, stacked under the primary viewer time.
   Dual-time display, WI #640. */
.av-cal-agenda-time-tenant {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 400;
  color: var(--color-gray-400, #9aa0a6);
}

html.dark .av-cal-agenda-time-tenant {
  color: var(--color-dark-400, #80868b);
}

/* Punto de color del evento en agenda (color por dato vía --av-event-color). */
.av-cal-agenda-color-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background-color: var(--av-event-color, var(--color-primary-600, #1a73e8));
}

.av-cal-agenda-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-gray-800, #3c4043);
  flex: 1;
}

html.dark .av-cal-agenda-title {
  color: var(--color-dark-50, #e8eaed);
}

/* Mini Start/End table inside the New/Edit Event tenant-preview alert.
   Layout-only (typography comes from the MudText Typo). WI #640. */
.av-cal-preview-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  align-items: center;
}

/* "Date and Time Details" fieldset grouping zone/all-day/start/end/preview inside
   the event dialog. min-width:0 stops the native fieldset min-content sizing from
   overflowing the dialog. Legend keeps the browser-native size; only color is
   themed. WI #640. */
.av-cal-fieldset {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: 12px 14px 14px;
  margin: 0;
  min-width: 0;
}

.av-cal-fieldset__legend {
  font-size: 14px;
  padding: 0 6px;
  color: var(--color-gray-600);
}

html.dark .av-cal-fieldset {
  border-color: var(--color-dark-600);
}

html.dark .av-cal-fieldset__legend {
  color: var(--color-dark-200);
}

/* Tenant-zone preview alert: hide MudAlert's severity (i) icon so the pill reads
   as the left-aligned heading. The soft tint comes from av-alert-soft. WI #640. */
.av-cal-tenant-alert .mud-alert-icon {
  display: none;
}

/* Weekday chips (BYDAY) — forced onto a single row: each chip flexes to an equal
   share and the row never wraps. Layout-only; chip color/variant stays on MudChip,
   typography stays on the scale. WI #640. */
.av-cal-recurrence-days {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  margin-top: 6px;
}

.av-cal-recurrence-days .mud-chip {
  margin: 0;
  flex: 1 1 0;
  min-width: 0;
  height: 30px;
  padding: 0 2px;
  justify-content: center;
}

/* Error message under the weekday chips. They are not a Mud input, so the message
   cannot ride the field's own helper-text slot; this places it where that slot would
   be. Color only — the typography comes from the global .validation-message rule.
   Same colour pair as Mud's own error helper text, so this message reads identically
   to the one under any other field of the form. */
.av-cal-recurrence-days-error {
  display: block;
  margin-top: 4px;
  color: var(--color-error);
}

html.dark .av-cal-recurrence-days-error {
  color: var(--color-error-lighter);
}

/* Recurrence end-mode radios — stacked vertically (the descriptive labels do not
   fit on one row), each on its own line. Scope-restricted to this group so no
   other MudRadio is affected. */
.av-cal-recurrence-ends {
  align-items: center;
  justify-content: center;
  margin-top: 4px;
}

.av-cal-recurrence-ends .mud-radio {
  display: flex !important;
  flex-direction: column;
}

/* Recurrence block — visually groups every recurrence control (toggle, interval,
   unit, weekday chips, end mode) into one bordered panel. WI #640. */
.av-cal-recurrence-group {
  padding: 14px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-200);
  background-color: var(--surface-1);
}

html.dark .av-cal-recurrence-group {
  border-color: var(--color-dark-600);
  background-color: rgb(from var(--color-dark-700) r g b / 0.40);
}

/* Inner stack of recurrence controls, shown when the repeat toggle is on. */
.av-cal-recurrence-body {
  margin-top: 12px;
}

/* ── Modal — detalles de evento ────────────────────────────────────── */

.av-cal-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.av-cal-modal {
  background: var(--color-white, #ffffff);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  width: 448px;
  max-width: 90vw;
  position: relative;
  color: var(--color-gray-800, #3c4043);
}

html.dark .av-cal-modal {
  background: var(--color-dark-800, #292a2d);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  color: var(--color-dark-50, #e8eaed);
}

.av-cal-modal-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-gray-200, #dadce0);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

html.dark .av-cal-modal-header {
  border-bottom-color: var(--color-dark-500, #3c4043);
}

.av-cal-modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

.av-cal-modal-body {
  padding: 24px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.av-cal-modal-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--color-gray-200, #dadce0);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

html.dark .av-cal-modal-footer {
  border-top-color: var(--color-dark-500, #3c4043);
}

.av-cal-create-modal {
  height: auto;
  max-height: 80vh;
}

.av-cal-modal-title-input {
  border: none;
  border-bottom: 1px solid var(--color-gray-200, #dadce0);
  font-size: 22px;
  padding: 10px 0;
  width: 100%;
  background: transparent;
  color: var(--color-gray-800, #3c4043);
  font-family: inherit;
}

.av-cal-modal-title-input::placeholder {
  color: var(--color-gray-400, #70757a);
}

.av-cal-modal-title-input:focus {
  outline: none;
  border-bottom: 2px solid var(--color-primary-600, #1a73e8);
}

html.dark .av-cal-modal-title-input {
  border-bottom-color: var(--color-dark-500, #3c4043);
  color: var(--color-dark-50, #e8eaed);
}

html.dark .av-cal-modal-title-input:focus {
  border-bottom-color: var(--color-primary-400, #8ab4f8);
}

.av-cal-modal-form-row {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 14px;
  color: var(--color-gray-800, #3c4043);
}

html.dark .av-cal-modal-form-row {
  color: var(--color-dark-50, #e8eaed);
}

.av-cal-modal-form-row svg {
  width: 18px;
  height: 18px;
  fill: var(--color-gray-500, #70757a);
  flex-shrink: 0;
}

html.dark .av-cal-modal-form-row svg {
  fill: var(--color-dark-300, #9aa0a6);
}

/* Punto de color del header del detalle de evento (color por dato vía
   --av-event-color). Geometría en la clase; solo el color viaja inline. */
.av-cal-detail__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  background-color: var(--av-event-color, var(--color-primary-600, #1a73e8));
}

.av-cal-btn-primary {
  background: var(--color-primary-600, #1a73e8);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  transition: background 150ms ease;
}

.av-cal-btn-primary:hover {
  background: var(--color-primary-700, #185abc);
}

html.dark .av-cal-btn-primary {
  background: var(--color-primary-500, #8ab4f8);
  color: var(--color-dark-900, #202124);
}

html.dark .av-cal-btn-primary:hover {
  background: var(--color-primary-400, #aecbfa);
}

.av-cal-btn-close {
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 50%;
  color: var(--color-gray-500, #70757a);
  transition: background 150ms ease;
}

.av-cal-btn-close svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.av-cal-btn-close:hover {
  background: var(--color-gray-100, #f1f3f4);
}

html.dark .av-cal-btn-close:hover {
  background: var(--color-dark-700, #303134);
}

/* ── Event colour — por source type (--av-event-color) ─────────────────
   Estos hexes DEBEN reflejar GetColorBySourceType del backend
   (GetCalendarEventsQueryHandler): el evento en la grilla pinta su color con
   ese valor exacto (inline --av-event-color por dato), así que el punto del
   filtro sólo sirve de leyenda si usa los mismos colores. Son fijos (no
   theme-driven) porque el color de la grilla también lo es; cambiar el tema no
   los altera, para que la leyenda siga coincidiendo con la grilla. Si el
   backend cambia un color, actualizar acá también. */
.av-cal-source-task        { --av-event-color: #007BFF; } /* Task — azul */
.av-cal-source-appointment { --av-event-color: #28A745; } /* Appointment — verde */
.av-cal-source-occasion    { --av-event-color: #FFC107; } /* Occasion — amarillo */
.av-cal-source-loan        { --av-event-color: #DC3545; } /* Loan milestone — rojo */
.av-cal-source-holiday     { --av-event-color: #6F42C1; } /* Holiday — púrpura */
.av-cal-source-personal    { --av-event-color: #6C757D; } /* Personal — gris */
/* Proveedores externos importados — colores de marca reconocibles (Google rojo,
   Microsoft azul). En la grilla los importados son Personal (gris); estos hues
   son sólo una ayuda del filtro para distinguir Google/Microsoft de un vistazo. */
.av-cal-source-google    { --av-event-color: #ea4335; }
.av-cal-source-microsoft { --av-event-color: #0078d4; }

/* Dark: los colores por tipo se mantienen fijos (mismos hexes) porque la grilla
   tampoco los aclara en modo oscuro — así la leyenda sigue coincidiendo. Sólo
   los tonos de marca importados tienen variante aclarada para el fondo oscuro. */
html.dark .av-cal-source-google    { --av-event-color: #f28b82; }
html.dark .av-cal-source-microsoft { --av-event-color: #4aa5f0; }

/* ── Related Calendars (subordinados) ──────────────────────────────── */

/* Grupo de rol colapsable dentro del panel "Related Calendars". */
.av-cal-related-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.av-cal-related-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}

.av-cal-related-group-header svg {
  width: 14px;
  height: 14px;
  fill: var(--color-gray-500, #70757a);
  transition: transform 150ms ease;
  flex-shrink: 0;
}

.av-cal-related-group-header svg.av-cal-chevron-collapsed {
  transform: rotate(180deg);
}

html.dark .av-cal-related-group-header svg {
  fill: var(--color-dark-300, #9aa0a6);
}

/* Subheader de rol. La tipografía (11px / 600 / uppercase / tracking) la aporta
   Typo.overline en el markup; esta clase sólo define color, para respetar la escala
   tipográfica canónica. */
.av-cal-related-group-label {
  color: var(--color-gray-500, #70757a);
  margin: 0;
}

html.dark .av-cal-related-group-label {
  color: var(--color-dark-300, #9aa0a6);
}

/* Miembros del grupo — misma separación vertical que la lista principal. */
.av-cal-related-group-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Punto de color por PROPIETARIO (no por source): a diferencia de av-cal-source-*, un
   owner no tiene semántica de color, así que se le asigna un tono de una rueda de 8
   hues distintos, rotados por índice. Se pinta background-color directo (el dot base
   .av-cal-color-dot no trae fondo). Los 8 hues son fijos —igual que los colores de
   marca de Google/Microsoft de arriba— porque el sistema de tokens sólo cubre 6 ramas
   semánticas y aquí se necesitan 8 tonos personales bien separados; cada uno con su
   variante dark aclarada. El punto "Todos" usa el primario (theme-driven). */
.av-cal-owner-all       { background-color: var(--color-primary-600, #1a73e8); }
.av-cal-owner-color-1   { background-color: #7c3aed; } /* violet   */
.av-cal-owner-color-2   { background-color: #db2777; } /* pink     */
.av-cal-owner-color-3   { background-color: #0891b2; } /* cyan     */
.av-cal-owner-color-4   { background-color: #0d9488; } /* teal     */
.av-cal-owner-color-5   { background-color: #65a30d; } /* lime     */
.av-cal-owner-color-6   { background-color: #ea580c; } /* orange   */
.av-cal-owner-color-7   { background-color: #c026d3; } /* fuchsia  */
.av-cal-owner-color-8   { background-color: #4f46e5; } /* indigo   */

html.dark .av-cal-owner-all       { background-color: var(--color-primary-400, #8ab4f8); }
html.dark .av-cal-owner-color-1   { background-color: #a78bfa; }
html.dark .av-cal-owner-color-2   { background-color: #f472b6; }
html.dark .av-cal-owner-color-3   { background-color: #22d3ee; }
html.dark .av-cal-owner-color-4   { background-color: #2dd4bf; }
html.dark .av-cal-owner-color-5   { background-color: #a3e635; }
html.dark .av-cal-owner-color-6   { background-color: #fb923c; }
html.dark .av-cal-owner-color-7   { background-color: #e879f9; }
html.dark .av-cal-owner-color-8   { background-color: #818cf8; }

/* ── Responsive ────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .av-cal-topbar {
    flex-wrap: wrap;
    height: auto;
    padding: 8px 12px;
    gap: 4px;
  }

  .av-cal-topbar-center {
    order: 3;
    flex: 0 0 100%;
    justify-content: center;
    margin-top: 4px;
  }

  .av-cal-sidebar {
    display: none;
  }

  .av-cal-month-grid {
    grid-auto-rows: minmax(60px, 1fr);
  }

  .av-cal-month-cell {
    min-height: 60px;
    padding: 2px;
  }

  .av-cal-year-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 12px;
  }
}

@media (max-width: 480px) {
  .av-cal-current-date {
    font-size: 16px;
    min-width: auto;
  }

  .av-cal-brand {
    display: none;
  }

  .av-cal-year-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 12px;
  }

  .av-cal-month-cell {
    min-height: 50px;
  }
}
/* ═══════════════════ FIN CALENDAR MODULE ═══════════════════════════ */

/* ============================================================================
   AV-ADDABLE-DATE — hover affordance to add a contact date to the calendar.
   The date reads as an interactive link; on hover a rich popover card offers to
   add it to the calendar. Layout / color only (no typography) per the doctrine.
   ============================================================================ */
.av-addable-date {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.av-addable-date__value {
    margin: 0;
}

.av-addable-date__value--link {
    color: var(--color-primary-600);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: rgb(from var(--color-primary-600) r g b / 0.4);
    cursor: pointer;
    transition: text-decoration-color 120ms ease, color 120ms ease;
}

.av-addable-date:hover .av-addable-date__value--link {
    text-decoration-color: var(--color-primary-600);
}

html.dark .av-addable-date__value--link {
    color: var(--color-primary-400);
    text-decoration-color: rgb(from var(--color-primary-400) r g b / 0.4);
}

html.dark .av-addable-date:hover .av-addable-date__value--link {
    text-decoration-color: var(--color-primary-400);
}

/* Popover card (Paper=false → we own the surface) */
.av-addable-date__popover {
    overflow: visible;
}

.av-addable-date__popover .av-addable-date__card {
    position: relative;
    width: 300px;
    margin-top: 10px;
    padding: 16px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-150);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

html.dark .av-addable-date__popover .av-addable-date__card {
    background: var(--color-dark-700);
    border-color: var(--color-dark-500);
}

.av-addable-date__card-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.av-addable-date__card-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    background: rgb(from var(--color-primary-600) r g b / 0.10);
    color: var(--color-primary-600);
}

html.dark .av-addable-date__card-icon {
    background: rgb(from var(--color-primary-400) r g b / 0.16);
    color: var(--color-primary-400);
}

.av-addable-date__card-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.av-addable-date__card-title {
    color: var(--color-gray-900);
}

html.dark .av-addable-date__card-title {
    color: var(--color-dark-50);
}

.av-addable-date__card-divider {
    height: 1px;
    margin: 12px 0;
    background: var(--color-gray-150);
}

html.dark .av-addable-date__card-divider {
    background: var(--color-dark-500);
}

.av-addable-date__cta.mud-button-root {
    justify-content: center;
    gap: 8px;
    padding: 6px 8px;
    color: var(--color-primary-600);
    text-transform: none;
    border-radius: var(--radius-lg);
}

.av-addable-date__cta.mud-button-root:hover {
    background: rgb(from var(--color-primary-600) r g b / 0.08);
}

html.dark .av-addable-date__cta.mud-button-root {
    color: var(--color-primary-400);
}

html.dark .av-addable-date__cta.mud-button-root:hover {
    background: rgb(from var(--color-primary-400) r g b / 0.14);
}

/* CTA — remove (danger). No trailing chevron → group icon+label centered instead of space-between. */
.av-addable-date__cta--danger.mud-button-root {
    justify-content: center;
    gap: 8px;
    color: var(--color-error);
}

.av-addable-date__cta--danger.mud-button-root:hover {
    background: rgb(from var(--color-error) r g b / 0.08);
}

/* "On your calendar" state — small check before the date */
.av-addable-date__added-check.mud-icon-root {
    width: 15px;
    height: 15px;
    margin-right: 4px;
    color: var(--color-success);
    vertical-align: -2px;
}

/* Card icon in the "added" state → success tint */
.av-addable-date__card-icon--added {
    background: rgb(from var(--color-success) r g b / 0.12);
    color: var(--color-success);
}

/* ============================================================================
   AV-LICENSE — professional-tab license field grid (label + value + icon square).
   Layout / color only (no typography) per the typography doctrine.
   ============================================================================ */
.av-license-item {
    padding: 16px 0;
}

.av-license-item + .av-license-item {
    border-top: 1px solid var(--color-gray-100);
}

html.dark .av-license-item + .av-license-item {
    border-top-color: var(--color-dark-600);
}

.av-license-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    row-gap: 16px;
}

.av-license-field {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 0 16px;
}

.av-license-field:first-child {
    padding-left: 0;
}

/* Vertical divider between fields */
.av-license-field:not(:first-child)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    width: 1px;
    background: var(--color-gray-150);
}

html.dark .av-license-field:not(:first-child)::before {
    background: var(--color-dark-600);
}

@media (max-width: 1100px) {
    .av-license-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 20px;
    }

    .av-license-field {
        padding: 0;
    }

    .av-license-field:not(:first-child)::before {
        display: none;
    }
}

@media (max-width: 640px) {
    .av-license-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.av-license-field__label {
    color: var(--color-gray-500);
}

html.dark .av-license-field__label {
    color: var(--color-dark-300);
}

.av-license-field__value-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 34px;
}

.av-license-field__value {
    color: var(--color-gray-900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html.dark .av-license-field__value {
    color: var(--color-dark-50);
}

.av-license-field__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-lg);
    background: rgb(from var(--color-primary-600) r g b / 0.08);
    color: var(--color-primary-600);
}

html.dark .av-license-field__icon {
    background: rgb(from var(--color-primary-400) r g b / 0.15);
    color: var(--color-primary-400);
}

/* Status: colored dot + label (no icon square) */
.av-license-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.av-license-status__dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background: var(--color-gray-400);
}

.av-license-status--success .av-license-status__dot {
    background: var(--color-success);
}

.av-license-status--error .av-license-status__dot {
    background: var(--color-error);
}

.av-license-status--warning .av-license-status__dot {
    background: var(--color-warning);
}

/* ============================================================================
   AV-KEYDATE — "Important Dates" list: filter chips + colored date badge +
   category/yearly chips + urgency countdown ring. Layout / color only.
   ============================================================================ */

/* Filter chips */
.av-keydate-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 4px;
}

.av-keydate-filter {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 9999px;
    border: 1px solid var(--color-gray-200);
    background: var(--color-white);
    color: var(--color-gray-600);
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

/* Hover only on inactive chips — hovering the active (primary) chip must not repaint its text. */
.av-keydate-filter:not(.av-keydate-filter--active):hover {
    background: var(--color-gray-50);
    border-color: var(--color-gray-300);
    color: var(--color-gray-900);
}

.av-keydate-filter--active {
    background: var(--color-primary-600);
    border-color: var(--color-primary-600);
    color: var(--color-white);
}

.av-keydate-filter--active:hover {
    background: var(--color-primary-700);
    border-color: var(--color-primary-700);
    color: var(--color-white);
}

.av-keydate-filter__icon {
    width: 14px;
    height: 14px;
}

/* MudText renders its own color; force it to follow the chip (white when active, gray when idle). */
.av-keydate-filter .mud-typography {
    color: inherit;
}

.av-keydate-filter__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    padding: 0 4px;
    border-radius: 9999px;
    background: var(--color-gray-100);
    color: var(--color-gray-600);
}

.av-keydate-filter--active .av-keydate-filter__count {
    background: rgb(from var(--color-white) r g b / 0.22);
    color: var(--color-white);
}

html.dark .av-keydate-filter {
    background: var(--color-dark-700);
    border-color: var(--color-dark-500);
    color: var(--color-dark-200);
}

html.dark .av-keydate-filter:not(.av-keydate-filter--active):hover {
    background: var(--color-dark-600);
    border-color: var(--color-dark-400);
    color: var(--color-dark-50);
}

html.dark .av-keydate-filter--active,
html.dark .av-keydate-filter--active:hover {
    background: var(--color-primary-500);
    border-color: var(--color-primary-500);
    color: var(--color-white);
}

html.dark .av-keydate-filter__count {
    background: var(--color-dark-600);
    color: var(--color-dark-200);
}

/* List + row */
.av-keydate-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

.av-keydate {
    /* Category color drives the left accent + badge month; overridden per modifier below. */
    --cat-color: var(--color-gray-400);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border: 1px solid var(--color-gray-150);
    border-left: 3px solid var(--cat-color);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    transition: box-shadow 120ms ease, border-color 120ms ease;
}

.av-keydate:hover {
    box-shadow: var(--shadow-sm);
}

html.dark .av-keydate {
    background: var(--color-dark-700);
    border-color: var(--color-dark-600);
    border-left-color: var(--cat-color);
}

/* Category → accent color */
.av-keydate--reminder { --cat-color: var(--color-warning); }
.av-keydate--birthday { --cat-color: var(--color-secondary); }
.av-keydate--license { --cat-color: var(--color-warning); }
.av-keydate--anniversary { --cat-color: var(--color-primary-600); }
.av-keydate--compliance { --cat-color: var(--color-info); }
.av-keydate--other { --cat-color: var(--color-gray-400); }

/* Date badge */
.av-keydate__badge {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 46px;
}

.av-keydate__badge-month {
    color: var(--cat-color);
}

.av-keydate__badge-day {
    color: var(--color-gray-900);
}

html.dark .av-keydate__badge-day {
    color: var(--color-dark-50);
}

/* Main */
.av-keydate__main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.av-keydate__title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.av-keydate__title {
    color: var(--color-gray-900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

html.dark .av-keydate__title {
    color: var(--color-dark-50);
}

.av-keydate__chip-icon {
    width: 13px;
    height: 13px;
    margin-right: 4px;
}

/* Actions — revealed on row hover */
.av-keydate__actions {
    display: flex;
    align-items: center;
    gap: 2px;
    opacity: 0;
    transition: opacity 120ms ease;
}

.av-keydate:hover .av-keydate__actions,
.av-keydate:focus-within .av-keydate__actions {
    opacity: 1;
}

/* Lock placeholder for derived (read-only) rows — same footprint as the icon buttons so it aligns. */
.av-keydate__lock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
}

/* Countdown ring */
.av-keydate-ring {
    --ring-color: var(--color-gray-400);
    position: relative;
    flex-shrink: 0;
    width: 54px;
    height: 54px;
}

.av-keydate-ring--late { --ring-color: var(--color-error); }
.av-keydate-ring--soon { --ring-color: var(--color-warning); }
.av-keydate-ring--mid { --ring-color: var(--color-info); }
.av-keydate-ring--far { --ring-color: var(--color-gray-400); }

.av-keydate-ring__svg {
    width: 54px;
    height: 54px;
    display: block;
}

.av-keydate-ring__track {
    fill: none;
    stroke: var(--color-gray-150);
    stroke-width: 2.5;
}

html.dark .av-keydate-ring__track {
    stroke: var(--color-dark-500);
}

.av-keydate-ring__progress {
    fill: none;
    stroke: var(--ring-color);
    stroke-width: 2.5;
    stroke-linecap: round;
    transition: stroke-dashoffset 300ms ease;
}

.av-keydate-ring__label {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    line-height: 1;
    text-align: center;
}

.av-keydate-ring__num,
.av-keydate-ring__unit {
    line-height: 1;
}

.av-keydate-ring__num {
    color: var(--color-gray-900);
}

html.dark .av-keydate-ring__num {
    color: var(--color-dark-50);
}

.av-keydate-ring__unit {
    color: var(--ring-color);
}

@media (max-width: 640px) {
    .av-keydate__date {
        display: none;
    }
}

/* ═══════════════════ §78 MI RATE MATRICES (editor) ═══════════════════
   Column widths for the Mortgage Insurance year editor matrices so the
   decimal LTV / rate values are fully visible. Layout only (no font/color).
   Consumer: Pages/Settings/MortgageInsuranceRates/MortgageInsuranceYearDialog.razor
   ==================================================================== */
/* Wider dialog so the FHA/VA matrices have room. The extra specificity
   (three classes) beats the .av-form-dialog--size-xl modifier without !important. */
.av-form-dialog.av-mi-dialog.mud-dialog {
  max-width: 68rem;
}

.av-mi-matrix table {
  table-layout: fixed;
  width: 100%;
}

.av-mi-matrix th,
.av-mi-matrix td {
  padding-left: 6px;
  padding-right: 6px;
  vertical-align: middle;
}

/* Numeric inputs / selects fill their (now sized) cell. */
.av-mi-matrix .mud-input-control,
.av-mi-matrix .mud-select {
  width: 100%;
  min-width: 0;
}

/* FHA Annual MIP: Term | Balance | LTV min | LTV max | Rate | Duration | delete.
   LTV min/max, Rate and delete are fixed px so they stay constant as the dialog
   widens; Term, Balance and Duration have no width, so they split the remaining
   space (grow with the dialog). */
.av-mi-matrix--fha th:nth-child(3), .av-mi-matrix--fha td:nth-child(3),
.av-mi-matrix--fha th:nth-child(4), .av-mi-matrix--fha td:nth-child(4),
.av-mi-matrix--fha th:nth-child(5), .av-mi-matrix--fha td:nth-child(5) { width: 110px; }
.av-mi-matrix--fha th:nth-child(7), .av-mi-matrix--fha td:nth-child(7) { width: 64px; }

/* Conventional PMI: LTV min | LTV max | Rate | delete */
.av-mi-matrix--pmi th:nth-child(1), .av-mi-matrix--pmi td:nth-child(1) { width: 30%; }
.av-mi-matrix--pmi th:nth-child(2), .av-mi-matrix--pmi td:nth-child(2) { width: 30%; }
.av-mi-matrix--pmi th:nth-child(3), .av-mi-matrix--pmi td:nth-child(3) { width: 28%; }
.av-mi-matrix--pmi th:nth-child(4), .av-mi-matrix--pmi td:nth-child(4) { width: 12%; }

/* VA Funding Fee: Usage | Purpose | Down min | Down max | Rate | delete.
   Down min/max, Rate and delete are fixed px (constant); Usage and Purpose have
   no width, so they split the remaining space (grow with the dialog). */
.av-mi-matrix--va th:nth-child(3), .av-mi-matrix--va td:nth-child(3),
.av-mi-matrix--va th:nth-child(4), .av-mi-matrix--va td:nth-child(4),
.av-mi-matrix--va th:nth-child(5), .av-mi-matrix--va td:nth-child(5) { width: 110px; }
.av-mi-matrix--va th:nth-child(6), .av-mi-matrix--va td:nth-child(6) { width: 64px; }

/* ════════════════════════════════════════════════════════════════════════════
   §79 av-fu — Contact Follow-ups timeline (live TaskV2 activity, grouped by task)
   Read-only timeline: one group per task, a colored node per event on a connecting
   line, event card, right-side badge, and a per-task note/follow-up composer.
   Layout / color / spacing / border / radius only — ALL text sizing comes from
   Typo.* on the MudText inside (typography-scale doctrine §3.3).
   ============================================================================ */
.av-fu-task { margin-bottom: 24px; }

.av-fu-task__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.av-fu-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.av-fu-row {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

/* Node column: circle marker + connecting line down to the next row. */
.av-fu-node {
    position: relative;
    flex: 0 0 auto;
    width: 34px;
    display: flex;
    justify-content: center;
}

.av-fu-node__dot {
    width: 34px;
    height: 34px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-1);
    border: 1px solid var(--color-gray-200);
    color: var(--color-gray-500);
    z-index: 1;
}

.av-fu-row:not(:last-child) .av-fu-node::after {
    content: "";
    position: absolute;
    top: 34px;
    bottom: -12px;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: var(--color-gray-200);
}

html.dark .av-fu-node__dot {
    background: var(--color-dark-700);
    border-color: var(--color-dark-500);
    color: var(--color-dark-200);
}

html.dark .av-fu-row:not(:last-child) .av-fu-node::after {
    background: var(--color-dark-500);
}

/* Node tone per event kind. */
.av-fu-node__dot--created  { color: var(--color-gray-600); }
.av-fu-node__dot--note     { color: var(--color-warning); border-color: rgb(from var(--color-warning) r g b / 0.45); }
.av-fu-node__dot--followup { color: var(--color-primary-600); border-color: rgb(from var(--color-primary-600) r g b / 0.45); }
.av-fu-node__dot--progress { color: var(--color-info); border-color: rgb(from var(--color-info) r g b / 0.45); }
.av-fu-node__dot--done     { color: var(--color-success); border-color: rgb(from var(--color-success) r g b / 0.45); }
.av-fu-node__dot--danger   { color: var(--color-error); border-color: rgb(from var(--color-error) r g b / 0.45); }

/* Event card — flex row: [avatar + text block] grows, [meta column] pinned right. */
.av-fu-card {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    background: var(--surface-1);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: 12px 16px;
}

html.dark .av-fu-card {
    background: var(--color-dark-700);
    border-color: var(--color-dark-500);
}

/* Left/main: avatar + text. */
.av-fu-card__body {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
}

.av-fu-card__main {
    min-width: 0;
}

/* First line: author · event label, inline. */
.av-fu-card__line {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Right meta column: badge on top, then time, then relative — right-aligned. */
.av-fu-card__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex: 0 0 auto;
    text-align: right;
}

/* Event label color per kind (color only — permitted in component CSS). */
.av-fu-label--created  { color: var(--color-gray-600); }
.av-fu-label--note     { color: var(--color-warning); }
.av-fu-label--followup { color: var(--color-primary-600); }
.av-fu-label--progress { color: var(--color-info); }
.av-fu-label--done     { color: var(--color-success); }
.av-fu-label--danger   { color: var(--color-error); }

/* Right-side status badge pill. */
.av-fu-badge {
    flex: 0 0 auto;
    padding: 2px 10px;
    border-radius: 9999px;
    background: var(--color-gray-100);
    color: var(--color-gray-600);
}

.av-fu-badge--note     { background: rgb(from var(--color-warning) r g b / 0.14);     color: var(--color-warning); }
.av-fu-badge--followup { background: rgb(from var(--color-primary-600) r g b / 0.12); color: var(--color-primary-700); }
.av-fu-badge--progress { background: rgb(from var(--color-info) r g b / 0.14);        color: var(--color-info); }
.av-fu-badge--done     { background: rgb(from var(--color-success) r g b / 0.14);     color: var(--color-success); }
.av-fu-badge--danger   { background: rgb(from var(--color-error) r g b / 0.14);       color: var(--color-error); }

html.dark .av-fu-badge { background: var(--color-dark-600); color: var(--color-dark-200); }

/* Per-task composer card (create note / follow-up on the task). */
.av-fu-composer {
    flex: 1 1 auto;
    min-width: 0;
    background: var(--surface-2);
    border: 1px dashed var(--color-gray-300);
    border-radius: var(--radius-lg);
    padding: 12px 16px;
}

html.dark .av-fu-composer {
    background: var(--color-dark-750);
    border-color: var(--color-dark-500);
}

/* ════════════════════════════════════════════════════════════════════════════
   §80 av-contact-tasks-list — spacing wrapper for the Contact Tasks tab.
   ListView renders its .av-task-group sections as direct siblings with no gap;
   /task-manager gets the gap from its own .tm8-content. This wrapper reproduces
   the same vertical rhythm for the ContactTasksTab (Contact / Household /
   Organization / Property views). Layout only.
   ============================================================================ */
.av-contact-tasks-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ════════════════════════════════════════════════════════════════════════════
   §81 av-tasks-toolbar — Contact Tasks tab toolbar (search + filters + actions).
   Two rows inside one surface: row 1 = search (grows) + Refresh/Add on the right;
   row 2 = filter pills + date range + clear. Layout / color only.
   ============================================================================ */
.av-tasks-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;                 /* single line; wraps only when the viewport is too narrow */
    padding: 10px 12px;
    background: var(--surface-1);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
}

html.dark .av-tasks-toolbar {
    background: var(--color-dark-700);
    border-color: var(--color-dark-500);
}

/* Search — small, grows a little, never dominates the bar. */
.av-tasks-toolbar .av-search-input {
    flex: 1 1 200px;
    min-width: 150px;
    max-width: 300px;
}

/* Uniform 38px control height across every toolbar element (pills already ship 38px). */
.av-tasks-toolbar .av-search-input {
    height: 38px;
    min-height: 38px;
}

/* Due-date pill popover holds a static range calendar — give it room, drop the item-list padding. */
.av-tasks-toolbar__datepop {
    padding: 4px;
}

/* Actions group pinned to the right. */
.av-tasks-toolbar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* Vertical divider separating the filters from the Refresh/Add actions. */
.av-toolbar-divider {
    width: 1px;
    height: 20px;
    background: var(--color-gray-200);
    flex: 0 0 auto;
}

html.dark .av-toolbar-divider {
    background: var(--color-dark-500);
}

/* Icon-only action buttons — square, same 38px height as the rest, bordered (av-btn look).
   !important is required because MudBlazor's own .mud-icon-button-root defaults (no border,
   transparent bg, its own sizing) would otherwise win by source order. */
.av-tasks-toolbar .av-toolbar-btn.mud-icon-button {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 8px !important;
    border: 1px solid var(--color-gray-300) !important;
    color: var(--color-gray-700) !important;
    background: var(--surface-1) !important;
}

.av-tasks-toolbar .av-toolbar-btn.mud-icon-button:hover {
    background: var(--color-gray-100) !important;
}

/* Icon glyph sized proportionally to the 38px button (matches the 18px icon standard used elsewhere). */
.av-tasks-toolbar .av-toolbar-btn.mud-icon-button .mud-icon-root,
.av-tasks-toolbar .av-toolbar-btn.mud-icon-button svg {
    width: 18px !important;
    height: 18px !important;
    font-size: 18px !important;
}

.av-tasks-toolbar .av-toolbar-btn--primary.mud-icon-button-root {
    background: var(--color-primary-600) !important;
    border-color: var(--color-primary-600) !important;
    color: var(--color-white) !important;
}

.av-tasks-toolbar .av-toolbar-btn--primary.mud-icon-button-root:hover {
    background: var(--color-primary-700) !important;
    border-color: var(--color-primary-700) !important;
}

html.dark .av-tasks-toolbar .av-toolbar-btn.mud-icon-button {
    border-color: var(--color-dark-400) !important;
    color: var(--color-dark-100) !important;
    background: var(--color-dark-700) !important;
}

html.dark .av-tasks-toolbar .av-toolbar-btn.mud-icon-button:hover {
    background: var(--color-dark-600) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   §82 av-cm-dash — Contact Manager dashboard v1. Professional card layout
   (rounded-xl surfaces, soft shadow, colored KPI icon boxes, funnel bars).
   Layout / color / spacing only — typography via Typo.*, icons via HeroIcons.
   ============================================================================ */
.av-cm-dash__kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.av-cm-dash__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.av-cm-dash__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-bottom: 16px;
}
/* Sync status sticks to the left; filters + refresh stay on the right. */
.av-cm-dash__toolbar .dv1-sync-status { margin-right: auto; }

/* Right column of the charts row: pending transfers stacked over mini KPI cards. */
.av-cm-dash__side { display: flex; flex-direction: column; gap: 16px; }
.av-cm-dash__mini-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; align-items: stretch; }
/* Cancel the masonry row-span from --tall/--horiz so both cards share one row height. */
.av-cm-dash__mini-grid > .dv1-mini-card { grid-row: auto; height: 100%; }
/* Footer links (Task Manager, View all) right-aligned in the CM dashboard grid cards. */
.av-cm-dash__grid .dv1-card-footer { text-align: right; }

/* Top-contact amount — plain bold value (no pill), right column of the app row. */
.av-cm-dash .dv1-app-amount { color: var(--dv1-ink); white-space: nowrap; }

/* Pipeline / Tasks-by-type rows have NO avatar — 2-col grid (body + chip), not the 3-col officer row. */
.av-cm-dash .dv1-officer-row { grid-template-columns: minmax(0, 1fr) auto; }
/* Per-stage colored count chips (bar fill reuses av-cm-bar__fill--{tone}). */
.av-cm-dash .dv1-workload-chip--primary { background: rgb(from var(--color-primary-500) r g b / 0.14); color: var(--color-primary-700); }
.av-cm-dash .dv1-workload-chip--info    { background: rgb(from var(--color-info) r g b / 0.14);        color: var(--color-info); }
.av-cm-dash .dv1-workload-chip--success { background: rgb(from var(--color-success) r g b / 0.14);     color: var(--color-success-700); }
.av-cm-dash .dv1-workload-chip--warning { background: rgb(from var(--color-warning) r g b / 0.16);     color: var(--color-warning); }
.av-cm-dash .dv1-workload-chip--orange  { background: rgb(from var(--color-orange-500) r g b / 0.14);  color: var(--color-orange-500); }
.av-cm-dash .dv1-workload-chip--error   { background: rgb(from var(--color-error) r g b / 0.14);       color: var(--color-error); }
@media (max-width: 560px) {
    .av-cm-dash__mini-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1100px) {
    .av-cm-dash__kpis { grid-template-columns: repeat(2, 1fr); }
    .av-cm-dash__grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .av-cm-dash__kpis { grid-template-columns: 1fr; }
}

/* KPI cards reuse the canonical .av-kpi system (§18); card surfaces reuse .dv1-card
   (main dashboard) — no local surface/header override here. */

/* ── Funnel / progress bars (pipeline, lead sources) ── */
.av-cm-funnel { display: flex; flex-direction: column; gap: 14px; }
.av-cm-funnel__row { display: flex; flex-direction: column; gap: 6px; }
.av-cm-funnel__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.av-cm-funnel__count { color: var(--color-gray-700); }
html.dark .av-cm-funnel__count { color: var(--color-dark-100); }

/* ── Generic list ── */
.av-cm-list { display: flex; flex-direction: column; gap: 12px; }

/* ── Top contact row ── */
.av-cm-topcontact { display: flex; align-items: center; gap: 12px; }
.av-cm-topcontact__value { flex: 0 0 auto; color: var(--color-gray-800); }
html.dark .av-cm-topcontact__value { color: var(--color-dark-50); }

/* ── Recent activity row ── */
.av-cm-activity {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-gray-100);
}

.av-cm-activity:last-child { border-bottom: none; padding-bottom: 0; }
html.dark .av-cm-activity { border-color: var(--color-dark-600); }

.av-cm-activity__icon {
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
    color: var(--color-gray-500);
    flex: 0 0 auto;
}

html.dark .av-cm-activity__icon { background: var(--color-dark-600); color: var(--color-dark-200); }

/* ── Alerts & At Risk: prominent tile strip under the KPIs, one tile per active alert, colored by
      severity so risk reads at a glance (mirrors the KPI strip that sits right above it) ── */
.av-cm-alertbar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}
.av-cm-alertbar__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--color-gray-150);
    border-left-width: 4px;
    border-radius: var(--radius-lg);
    background: var(--surface-1);
    transition: box-shadow 150ms ease, transform 150ms ease;
}
.av-cm-alertbar__item:hover { box-shadow: var(--shadow-md); }
html.dark .av-cm-alertbar__item { border-color: var(--color-dark-600); }
.av-cm-alertbar__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 9999px;
}
.av-cm-alertbar__icon .mud-icon-root { width: 22px; height: 22px; }
.av-cm-alertbar__text { display: flex; flex-direction: column; min-width: 0; }
.av-cm-alertbar__label { color: var(--color-gray-600); }
html.dark .av-cm-alertbar__label { color: var(--color-dark-200); }

.av-cm-alertbar__item.av-cm-alert--critical {
    border-left-color: var(--color-error);
    background: color-mix(in srgb, var(--color-error) 6%, var(--surface-1));
}
.av-cm-alertbar__item.av-cm-alert--critical .av-cm-alertbar__icon { background: color-mix(in srgb, var(--color-error) 14%, transparent); color: var(--color-error); }
.av-cm-alertbar__item.av-cm-alert--critical .av-cm-alertbar__count { color: var(--color-error); }
.av-cm-alertbar__item.av-cm-alert--warning {
    border-left-color: var(--color-warning);
    background: color-mix(in srgb, var(--color-warning) 8%, var(--surface-1));
}
.av-cm-alertbar__item.av-cm-alert--warning .av-cm-alertbar__icon { background: color-mix(in srgb, var(--color-warning) 16%, transparent); color: var(--color-warning); }
.av-cm-alertbar__item.av-cm-alert--warning .av-cm-alertbar__count { color: var(--color-warning); }
.av-cm-alertbar__item.av-cm-alert--info {
    border-left-color: var(--color-info);
    background: color-mix(in srgb, var(--color-info) 7%, var(--surface-1));
}
.av-cm-alertbar__item.av-cm-alert--info .av-cm-alertbar__icon { background: color-mix(in srgb, var(--color-info) 14%, transparent); color: var(--color-info); }
.av-cm-alertbar__item.av-cm-alert--info .av-cm-alertbar__count { color: var(--color-info); }

html.dark .av-cm-alertbar__item.av-cm-alert--critical { background: color-mix(in srgb, var(--color-error) 12%, var(--color-dark-700)); }
html.dark .av-cm-alertbar__item.av-cm-alert--warning { background: color-mix(in srgb, var(--color-warning) 14%, var(--color-dark-700)); }
html.dark .av-cm-alertbar__item.av-cm-alert--info { background: color-mix(in srgb, var(--color-info) 12%, var(--color-dark-700)); }

/* ── Team performance: colored inline task stats inside the dv1 app-row meta ── */
.av-cm-team-stat--success { color: var(--color-success); }
.av-cm-team-stat--danger { color: var(--color-error); }

/* ── Pipeline funnel bar (per-stage color; label+count on top, bar below) ── */
.av-cm-bar {
    height: 8px;
    background: var(--color-gray-100);
    border-radius: 9999px;
    overflow: hidden;
}

html.dark .av-cm-bar { background: var(--color-dark-600); }

.av-cm-bar__fill {
    display: block;
    height: 100%;
    min-width: 8px;
    border-radius: 9999px;
    transition: width 200ms ease;
}

.av-cm-bar__fill--primary { background: var(--color-primary-500); }
.av-cm-bar__fill--info    { background: var(--color-info); }
.av-cm-bar__fill--success { background: var(--color-success); }
.av-cm-bar__fill--warning { background: var(--color-warning); }
.av-cm-bar__fill--orange  { background: var(--color-orange-500); }
.av-cm-bar__fill--error   { background: var(--color-error); }

/* ============================================================================
   §83 — Contact Manager dashboard: charts band (ApexCharts area / donut)
   ============================================================================ */
.av-cm-dash__charts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

/* ApexCharts area container (Sales-Performance-style monthly chart). */
.av-cm-chart--apex {
    width: 100%;
    min-height: 280px;
    margin: 4px -8px 0;
    overflow-x: visible;
}

.av-cm-chart--apex .apexcharts-canvas {
    width: 100% !important;
}

@media (max-width: 1100px) {
    .av-cm-dash__charts { grid-template-columns: 1fr; }
}

/* ============================================================================
   §84 av-ls — Lead Sources management (settings): header · stats · source
   cards (accordion) · campaigns table · Google Forms section.
   Layout / color / spacing only — typography via Typo.*, icons via HeroIcons.
   ============================================================================ */
.av-ls-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.av-ls-header__text { display: flex; flex-direction: column; gap: 2px; }

.av-ls-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
@media (max-width: 1100px) { .av-ls-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .av-ls-stats { grid-template-columns: 1fr; } }

.av-ls-list { display: flex; flex-direction: column; gap: 12px; }

.av-ls-card {
    background: var(--surface-1);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
html.dark .av-ls-card { background: var(--color-dark-700); border-color: var(--color-dark-500); }
.av-ls-card:hover { border-color: var(--color-gray-300); }
html.dark .av-ls-card:hover { border-color: var(--color-dark-400); }
.av-ls-card--inactive { opacity: 0.7; }

.av-ls-card__head { display: flex; align-items: center; gap: 12px; padding: 16px; cursor: pointer; }
.av-ls-card__head:hover { background: var(--color-gray-50); }
html.dark .av-ls-card__head:hover { background: var(--color-dark-600); }
.av-ls-card__head--static { cursor: default; }
.av-ls-card__head--static:hover { background: transparent; }
html.dark .av-ls-card__head--static:hover { background: transparent; }

.av-ls-card__icon {
    width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: rgb(from var(--color-primary-600) r g b / 0.10);
    color: var(--color-primary-600);
}
html.dark .av-ls-card__icon { background: rgb(from var(--color-primary-400) r g b / 0.16); color: var(--color-primary-300); }

.av-ls-card__info { flex: 1 1 auto; min-width: 0; }
.av-ls-card__name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.av-ls-card__meta { display: flex; align-items: center; gap: 16px; margin-top: 4px; color: var(--color-gray-500); }
html.dark .av-ls-card__meta { color: var(--color-dark-300); }
.av-ls-card__meta-item { display: inline-flex; align-items: center; gap: 4px; }
.av-ls-card__meta-item .mud-icon-root { width: 16px; height: 16px; }
.av-ls-card__chevron { color: var(--color-gray-400); flex: 0 0 auto; }

.av-ls-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 9999px; }
.av-ls-badge--active   { background: rgb(from var(--color-success) r g b / 0.12); color: var(--color-success-darker); }
.av-ls-badge--inactive { background: var(--color-gray-100); color: var(--color-gray-600); }
.av-ls-badge--system   { background: rgb(from var(--color-info) r g b / 0.12); color: var(--color-info-darker); }
html.dark .av-ls-badge--inactive { background: var(--color-dark-600); color: var(--color-dark-200); }

.av-ls-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 0 16px 16px; }
.av-ls-action {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 7px;
    border: 1px solid var(--color-gray-200); background: transparent;
    color: var(--color-gray-600); cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.av-ls-action .mud-icon-root { width: 14px; height: 14px; }
.av-ls-action:hover { background: var(--color-gray-100); border-color: var(--color-gray-300); }
.av-ls-action--disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
html.dark .av-ls-action { border-color: var(--color-dark-500); color: var(--color-dark-200); }
html.dark .av-ls-action:hover { background: var(--color-dark-600); }

/* Colored at rest (soft), stronger on hover — one tone per action. */
.av-ls-action--info    { color: var(--color-info-darker);    border-color: rgb(from var(--color-info) r g b / 0.30); }
.av-ls-action--info:hover    { background: rgb(from var(--color-info) r g b / 0.10);    border-color: var(--color-info); }
.av-ls-action--primary { color: var(--color-primary-600);    border-color: rgb(from var(--color-primary-500) r g b / 0.30); }
.av-ls-action--primary:hover { background: rgb(from var(--color-primary-500) r g b / 0.08); border-color: var(--color-primary-400); }
.av-ls-action--warning { color: var(--color-warning-darker); border-color: rgb(from var(--color-warning) r g b / 0.30); }
.av-ls-action--warning:hover { background: rgb(from var(--color-warning) r g b / 0.10); border-color: var(--color-warning); }
.av-ls-action--success { color: var(--color-success-darker); border-color: rgb(from var(--color-success) r g b / 0.30); }
.av-ls-action--success:hover { background: rgb(from var(--color-success) r g b / 0.10); border-color: var(--color-success); }
.av-ls-action--danger  { color: var(--color-error);          border-color: rgb(from var(--color-error) r g b / 0.30); }
.av-ls-action--danger:hover  { background: rgb(from var(--color-error) r g b / 0.08); border-color: var(--color-error); }
html.dark .av-ls-action--info    { color: var(--color-info-light); }
html.dark .av-ls-action--primary { color: var(--color-primary-300); }
html.dark .av-ls-action--warning { color: var(--color-warning-light); }
html.dark .av-ls-action--success { color: var(--color-success-light); }
html.dark .av-ls-action--danger  { color: var(--color-error-light); }

.av-ls-expand { border-top: 1px solid var(--color-gray-100); padding: 16px; background: var(--surface-2); }
html.dark .av-ls-expand { border-color: var(--color-dark-600); background: var(--color-dark-750); }

.av-ls-sub-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.av-ls-sub-title { display: inline-flex; align-items: center; gap: 6px; color: var(--color-gray-700); }
html.dark .av-ls-sub-title { color: var(--color-dark-100); }

.av-ls-ctable-wrap { overflow-x: auto; }
.av-ls-ctable { width: 100%; border-collapse: collapse; }
.av-ls-ctable th { text-align: left; padding: 8px 12px; color: var(--color-gray-500); border-bottom: 1px solid var(--color-gray-200); white-space: nowrap; }
.av-ls-ctable td { padding: 10px 12px; border-bottom: 1px solid var(--color-gray-100); }
html.dark .av-ls-ctable th { color: var(--color-dark-300); border-color: var(--color-dark-500); }
html.dark .av-ls-ctable td { border-color: var(--color-dark-600); }
.av-ls-ctable__name { display: inline-flex; align-items: center; gap: 8px; }
.av-ls-ctable__actions { display: inline-flex; gap: 4px; }

.av-ls-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px; text-align: center; color: var(--color-gray-500); }
html.dark .av-ls-empty { color: var(--color-dark-300); }
.av-ls-empty .mud-icon-root { width: 32px; height: 32px; opacity: 0.6; }

.av-ls-gf { margin-top: 16px; }
.av-ls-gf__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.av-ls-gf__title { display: inline-flex; align-items: center; gap: 8px; }
.av-ls-gf__actions { display: inline-flex; align-items: center; gap: 8px; }
.av-ls-gf__connected { display: inline-flex; align-items: center; gap: 4px; color: var(--color-success-darker); }
.av-ls-gf__connected .mud-icon-root { width: 16px; height: 16px; }

.av-ls-gf__banner { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: var(--radius-lg); background: rgb(from var(--color-primary-500) r g b / 0.06); border: 1px dashed var(--color-primary-300); }
.av-ls-gf__banner-body { flex: 1 1 auto; min-width: 0; }

.av-ls-gf__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.av-ls-gf__card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--radius-lg); border: 1px solid var(--color-gray-200); background: var(--surface-1); }
html.dark .av-ls-gf__card { border-color: var(--color-dark-500); background: var(--color-dark-700); }
.av-ls-gf__card-top { display: flex; align-items: center; justify-content: space-between; }
.av-ls-gf__card-stats { display: flex; gap: 16px; color: var(--color-gray-500); }
html.dark .av-ls-gf__card-stats { color: var(--color-dark-300); }
.av-ls-gf__stat { display: inline-flex; align-items: center; gap: 4px; }
.av-ls-gf__stat .mud-icon-root { width: 16px; height: 16px; }
.av-ls-gf__card-footer { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--color-gray-100); padding-top: 8px; color: var(--color-gray-500); }
html.dark .av-ls-gf__card-footer { border-color: var(--color-dark-600); color: var(--color-dark-300); }
.av-ls-gf__card-date { display: inline-flex; align-items: center; gap: 4px; }
.av-ls-gf__card-date .mud-icon-root { width: 14px; height: 14px; }
.av-ls-gf__quick { display: inline-flex; gap: 4px; }
.av-ls-gf__add { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; border-radius: var(--radius-lg); border: 1px dashed var(--color-gray-300); background: transparent; color: var(--color-gray-600); cursor: pointer; min-height: 120px; }
.av-ls-gf__add:hover { border-color: var(--color-primary-400); color: var(--color-primary-600); }
html.dark .av-ls-gf__add { border-color: var(--color-dark-400); color: var(--color-dark-200); }

.av-ls-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--color-gray-200); background: transparent; color: var(--color-gray-600); cursor: pointer; }
.av-ls-iconbtn .mud-icon-root { width: 16px; height: 16px; }
.av-ls-iconbtn:hover { background: var(--color-gray-100); }
.av-ls-iconbtn--danger:hover { color: var(--color-error); background: rgb(from var(--color-error) r g b / 0.08); }
.av-ls-iconbtn--primary:hover { color: var(--color-primary-600); }
html.dark .av-ls-iconbtn { border-color: var(--color-dark-500); color: var(--color-dark-200); }
html.dark .av-ls-iconbtn:hover { background: var(--color-dark-600); }

/* ============================================================================
   §85 av-lg — Lead Generation umbrella view: header · stats · Campaigns/Sources
   tabs · campaign accordion rows (source badges + per-channel performance).
   Layout / color / spacing only — typography via Typo.*, icons via HeroIcons.
   ============================================================================ */
.av-lg { display: flex; flex-direction: column; }

/* Header */
.av-lg__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
/* Action-only tab headers (Questionnaire / Routing): a single-child space-between
   drifts the button cluster to the start; pin it to the trailing edge instead.
   flex-end is direction-aware — right in LTR, left in RTL — which is where the
   action toolbar belongs in each reading direction. */
.av-lg__header--toolbar { justify-content: flex-end; }
.av-lg__head-text { display: flex; flex-direction: column; gap: 2px; }
.av-lg__title { color: var(--color-gray-900); }
html.dark .av-lg__title { color: var(--color-dark-50); }
.av-lg__subtitle { color: var(--color-gray-500); }
html.dark .av-lg__subtitle { color: var(--color-dark-300); }

/* Stats (flat tiles) */
.av-lg__stats {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px; margin-bottom: 24px;
}
@media (max-width: 1100px) { .av-lg__stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .av-lg__stats { grid-template-columns: 1fr; } }
.av-lg-stat { background: var(--surface-1); border-radius: var(--radius-lg); padding: 16px; display: flex; flex-direction: column; gap: 4px; }
html.dark .av-lg-stat { background: var(--color-dark-700); }
.av-lg-stat__label { color: var(--color-gray-500); }
html.dark .av-lg-stat__label { color: var(--color-dark-300); }
.av-lg-stat__value { color: var(--color-gray-900); }
html.dark .av-lg-stat__value { color: var(--color-dark-50); }

.av-lg__tabs { margin-bottom: 16px; }

/* Campaign accordion rows */
.av-lg__list { display: flex; flex-direction: column; gap: 8px; }

.av-lg-row {
    background: var(--surface-1); border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl); overflow: hidden;
    transition: border-color 150ms ease;
}
html.dark .av-lg-row { background: var(--color-dark-700); border-color: var(--color-dark-500); }
.av-lg-row:hover { border-color: var(--color-gray-300); }
html.dark .av-lg-row:hover { border-color: var(--color-dark-400); }

.av-lg-row__head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; }
.av-lg-row__head--static { cursor: default; }
.av-lg-row__icon {
    width: 36px; height: 36px; border-radius: var(--radius-lg); flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: rgb(from var(--color-primary-600) r g b / 0.10); color: var(--color-primary-600);
}
.av-lg-row__icon .mud-icon-root { width: 18px; height: 18px; }
html.dark .av-lg-row__icon { background: rgb(from var(--color-primary-400) r g b / 0.16); color: var(--color-primary-300); }
.av-lg-row__icon--muted { background: rgb(from var(--color-warning) r g b / 0.14); color: var(--color-warning-darker); }

.av-lg-row__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.av-lg-row__name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.av-lg-row__name { color: var(--color-gray-900); }
html.dark .av-lg-row__name { color: var(--color-dark-50); }
.av-lg-row__badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.av-lg-row__no-ch { color: var(--color-gray-400); }
html.dark .av-lg-row__no-ch { color: var(--color-dark-300); }

.av-lg-src {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;
    border-radius: 9999px; border: 1px solid var(--color-gray-200);
    background: var(--surface-2); color: var(--color-gray-600);
}
.av-lg-src .mud-icon-root { width: 12px; height: 12px; }
html.dark .av-lg-src { border-color: var(--color-dark-500); background: var(--color-dark-600); color: var(--color-dark-200); }

.av-lg-row__metrics { text-align: right; min-width: 92px; display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; }
.av-lg-row__leads { color: var(--color-gray-900); }
html.dark .av-lg-row__leads { color: var(--color-dark-50); }
.av-lg-row__money { color: var(--color-gray-500); }
html.dark .av-lg-row__money { color: var(--color-dark-300); }
.av-lg-row__metrics--muted .av-lg-row__leads,
.av-lg-row__metrics--muted .av-lg-row__money { color: var(--color-gray-400); }
html.dark .av-lg-row__metrics--muted .av-lg-row__leads,
html.dark .av-lg-row__metrics--muted .av-lg-row__money { color: var(--color-dark-300); }

.av-lg-row__chev { color: var(--color-gray-400); flex: 0 0 auto; transition: transform 200ms ease; }
.av-lg-row__chev--open { transform: rotate(180deg); }
/* RTL — mirror the directional chevron (points toward the leading edge, which
   is the left in RTL). The open state composes the mirror with its rotate. */
[dir="rtl"] .av-lg-row__chev { transform: scaleX(-1); }
[dir="rtl"] .av-lg-row__chev--open { transform: scaleX(-1) rotate(180deg); }

.av-lg-pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 9999px; white-space: nowrap; }
.av-lg-pill--active    { background: rgb(from var(--color-success) r g b / 0.12); color: var(--color-success-darker); }
.av-lg-pill--draft     { background: rgb(from var(--color-warning) r g b / 0.14); color: var(--color-warning-darker); }
.av-lg-pill--paused    { background: var(--color-gray-100); color: var(--color-gray-600); }
.av-lg-pill--completed { background: rgb(from var(--color-info) r g b / 0.12); color: var(--color-info-darker); }
.av-lg-pill--expired   { background: rgb(from var(--color-error) r g b / 0.12); color: var(--color-error-darker); }
html.dark .av-lg-pill--paused { background: var(--color-dark-600); color: var(--color-dark-200); }

.av-lg-row__setup {
    display: inline-flex; align-items: center; padding: 4px 12px; flex: 0 0 auto;
    border: 1px solid var(--color-gray-300); border-radius: var(--radius); background: transparent;
    color: var(--color-primary-600); cursor: pointer; white-space: nowrap;
    transition: background 120ms ease, border-color 120ms ease;
}
.av-lg-row__setup:hover { border-color: var(--color-primary-400); background: rgb(from var(--color-primary-500) r g b / 0.06); }
html.dark .av-lg-row__setup { border-color: var(--color-dark-400); color: var(--color-primary-300); }

/* Expanded — channel performance */
.av-lg-row__detail { border-top: 1px solid var(--color-gray-100); padding: 12px 16px 16px; background: var(--surface-2); }
html.dark .av-lg-row__detail { border-color: var(--color-dark-600); background: var(--color-dark-750); }
.av-lg-perf__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.av-lg-perf__head-label { color: var(--color-gray-500); }
html.dark .av-lg-perf__head-label { color: var(--color-dark-300); }

.av-lg-perf { background: var(--surface-1); border-radius: var(--radius-lg); overflow: hidden; }
html.dark .av-lg-perf { background: var(--color-dark-700); }
.av-lg-perf__row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.av-lg-perf__row + .av-lg-perf__row { border-top: 1px solid var(--color-gray-100); }
html.dark .av-lg-perf__row + .av-lg-perf__row { border-color: var(--color-dark-600); }
.av-lg-perf__icon {
    width: 28px; height: 28px; border-radius: 6px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: rgb(from var(--color-primary-600) r g b / 0.10); color: var(--color-primary-600);
}
.av-lg-perf__icon .mud-icon-root { width: 14px; height: 14px; }
html.dark .av-lg-perf__icon { background: rgb(from var(--color-primary-400) r g b / 0.16); color: var(--color-primary-300); }
.av-lg-perf__body { flex: 1 1 auto; min-width: 0; }
.av-lg-perf__top { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.av-lg-perf__name { color: var(--color-gray-800); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.dark .av-lg-perf__name { color: var(--color-dark-100); }
.av-lg-perf__meta { color: var(--color-gray-500); flex: 0 0 auto; white-space: nowrap; }
html.dark .av-lg-perf__meta { color: var(--color-dark-300); }
.av-lg-bar { height: 6px; border-radius: 3px; background: var(--color-gray-150); overflow: hidden; }
html.dark .av-lg-bar { background: var(--color-dark-600); }
.av-lg-bar__fill { height: 100%; border-radius: 3px; background: var(--color-primary-600); width: var(--av-bar-w, 0%); transition: width 300ms ease; }
html.dark .av-lg-bar__fill { background: var(--color-primary-400); }

.av-lg__empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 24px; text-align: center; color: var(--color-gray-500); }
html.dark .av-lg__empty { color: var(--color-dark-300); }
.av-lg__empty .mud-icon-root { width: 40px; height: 40px; opacity: 0.5; }

/* Campaign detail — page with sub-nav (Phase 1 navigation shell). */
.av-lg-detail { display: flex; flex-direction: column; gap: 8px; }
/* av-page-filters owns its 16px bottom spacing; cancel the detail gap below it
   so a tab's toolbar→content distance matches every other av-page-filters usage. */
.av-lg-detail > .av-page-filters { margin-bottom: -8px; }
.av-lg-detail__back { align-self: flex-start; margin-bottom: 4px; }
/* RTL — the back chevron points right (back = toward the trailing edge). */
[dir="rtl"] .av-lg-detail__back .mud-icon-root { transform: scaleX(-1); }
.av-lg-detail__card { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.av-lg-detail__card-head { display: flex; align-items: center; justify-content: space-between; }
.av-lg-check__row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--color-gray-100); }
.av-lg-check__row:last-child { border-bottom: none; }
html.dark .av-lg-check__row { border-color: var(--color-dark-600); }
.av-lg-check__row .mud-icon-root.av-lg-check__icon { width: 18px; height: 18px; color: var(--color-gray-400); flex: 0 0 auto; }
.av-lg-check__row .mud-icon-root.av-lg-check__icon--done { color: var(--color-success); }
.av-lg-check__label { flex: 1; }

/* Sources tab summary grid (kept simple; LeadSourceList hosts full management) */
.av-lg-src-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (max-width: 640px) { .av-lg-src-grid { grid-template-columns: 1fr; } }

/* Expanded-row action links (Add channel · View report) */
.av-lg-perf__actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.av-lg-perf__sep { color: var(--color-gray-300); }
html.dark .av-lg-perf__sep { color: var(--color-dark-500); }
.av-lg-link {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 0; border: none; background: transparent; cursor: pointer;
    color: var(--color-primary-600);
    transition: color 120ms ease;
}
.av-lg-link .mud-icon-root { width: 14px; height: 14px; }
.av-lg-link:hover { color: var(--color-primary-700); }
html.dark .av-lg-link { color: var(--color-primary-300); }
.av-lg-link--muted { color: var(--color-gray-500); }
.av-lg-link--muted:hover { color: var(--color-gray-800); }
html.dark .av-lg-link--muted { color: var(--color-dark-300); }
html.dark .av-lg-link--muted:hover { color: var(--color-dark-100); }

/* ============================================================================
   §87 av-rep — Campaign report dialog: rich header (icon + meta) · range tabs ·
   leads-over-time chart. Layout / color / spacing only.
   ============================================================================ */
.av-rep__head { display: flex; align-items: center; gap: 12px; width: 100%; }
.av-rep__icon {
    width: 40px; height: 40px; border-radius: var(--radius-lg); flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: rgb(from var(--color-primary-600) r g b / 0.10); color: var(--color-primary-600);
}
.av-rep__icon .mud-icon-root { width: 20px; height: 20px; }
html.dark .av-rep__icon { background: rgb(from var(--color-primary-400) r g b / 0.16); color: var(--color-primary-300); }
.av-rep__head-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.av-rep__title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.av-rep__meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; color: var(--color-gray-500); }
html.dark .av-rep__meta { color: var(--color-dark-300); }
.av-rep__meta-item { display: inline-flex; align-items: center; gap: 4px; }
.av-rep__meta-item .mud-icon-root { width: 14px; height: 14px; }

.av-rep { display: flex; flex-direction: column; }
.av-rep__section-title { color: var(--color-gray-800); margin-bottom: 12px; }
html.dark .av-rep__section-title { color: var(--color-dark-100); }

.av-rep__range { display: inline-flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.av-rep__range-btn {
    display: inline-flex; align-items: center; padding: 6px 14px;
    border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg);
    background: transparent; color: var(--color-gray-600); cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.av-rep__range-btn:hover { background: var(--color-gray-100); border-color: var(--color-gray-300); }
.av-rep__range-btn--active { background: rgb(from var(--color-primary-500) r g b / 0.10); border-color: var(--color-primary-400); color: var(--color-primary-700); }
html.dark .av-rep__range-btn { border-color: var(--color-dark-500); color: var(--color-dark-200); }
html.dark .av-rep__range-btn:hover { background: var(--color-dark-600); }
html.dark .av-rep__range-btn--active { background: rgb(from var(--color-primary-400) r g b / 0.16); border-color: var(--color-primary-500); color: var(--color-primary-200); }

.av-rep__chart { min-height: 300px; }
.av-rep__empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 24px; text-align: center; color: var(--color-gray-500); }
html.dark .av-rep__empty { color: var(--color-dark-300); }
.av-rep__empty .mud-icon-root { width: 36px; height: 36px; opacity: 0.5; }

/* ============================================================================
   §86 av-wiz — New campaign wizard: step bar · panels (details / channels /
   allocate / review) · footer. Layout / color / spacing only.
   ============================================================================ */
.av-wiz { display: flex; flex-direction: column; }

/* Step bar */
.av-wiz__steps { display: flex; gap: 0; margin-bottom: 24px; }
.av-wiz__step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; z-index: 1; }
.av-wiz__dot {
    width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--color-gray-300); background: var(--surface-1); color: var(--color-gray-500);
    transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.av-wiz__dot .mud-icon-root { width: 16px; height: 16px; }
.av-wiz__dot--active { background: var(--color-primary-600); color: var(--color-white); border-color: var(--color-primary-600); }
.av-wiz__dot--done { background: rgb(from var(--color-success) r g b / 0.15); color: var(--color-success-darker); border-color: var(--color-success); }
html.dark .av-wiz__dot { background: var(--color-dark-700); border-color: var(--color-dark-400); color: var(--color-dark-300); }
html.dark .av-wiz__dot--active { background: var(--color-primary-500); color: var(--color-white); border-color: var(--color-primary-500); }

.av-wiz__label { color: var(--color-gray-500); text-align: center; }
.av-wiz__label--active { color: var(--color-gray-900); }
html.dark .av-wiz__label { color: var(--color-dark-300); }
html.dark .av-wiz__label--active { color: var(--color-dark-50); }

.av-wiz__line { position: absolute; top: 14px; left: calc(50% + 20px); right: calc(-50% + 20px); height: 1px; background: var(--color-gray-200); }
.av-wiz__line--done { background: var(--color-success); }
html.dark .av-wiz__line { background: var(--color-dark-500); }

/* Panels */
.av-wiz__panel { display: flex; flex-direction: column; }
.av-wiz__panel-head { margin-bottom: 20px; }
.av-wiz__panel-title { color: var(--color-gray-900); }
html.dark .av-wiz__panel-title { color: var(--color-dark-50); }
.av-wiz__panel-sub { color: var(--color-gray-500); }
html.dark .av-wiz__panel-sub { color: var(--color-dark-300); }

/* Channel option rows */
.av-wiz-ch {
    display: flex; align-items: center; gap: 12px; padding: 12px;
    border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg);
    cursor: pointer; margin-bottom: 8px;
    transition: border-color 150ms ease, background 150ms ease;
}
.av-wiz-ch:hover { border-color: var(--color-gray-300); }
.av-wiz-ch--sel { border-color: var(--color-primary-400); background: rgb(from var(--color-primary-500) r g b / 0.06); }
html.dark .av-wiz-ch { border-color: var(--color-dark-500); }
html.dark .av-wiz-ch:hover { border-color: var(--color-dark-400); }
html.dark .av-wiz-ch--sel { border-color: var(--color-primary-500); background: rgb(from var(--color-primary-400) r g b / 0.12); }

.av-wiz-ch__icon {
    width: 32px; height: 32px; border-radius: 8px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: rgb(from var(--color-primary-600) r g b / 0.10); color: var(--color-primary-600);
}
.av-wiz-ch__icon .mud-icon-root { width: 18px; height: 18px; }
html.dark .av-wiz-ch__icon { background: rgb(from var(--color-primary-400) r g b / 0.16); color: var(--color-primary-300); }
.av-wiz-ch__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.av-wiz-ch__name { color: var(--color-gray-900); }
html.dark .av-wiz-ch__name { color: var(--color-dark-50); }
.av-wiz-ch__sub { color: var(--color-gray-500); }
html.dark .av-wiz-ch__sub { color: var(--color-dark-300); }
.av-wiz-ch__check {
    width: 20px; height: 20px; border-radius: 6px; flex: 0 0 auto; margin-left: auto;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--color-gray-300); color: transparent;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.av-wiz-ch__check .mud-icon-root { width: 14px; height: 14px; }
.av-wiz-ch--sel .av-wiz-ch__check { background: var(--color-primary-600); border-color: var(--color-primary-600); color: var(--color-white); }
html.dark .av-wiz-ch__check { border-color: var(--color-dark-400); }

.av-wiz__hint { color: var(--color-gray-500); margin-top: 12px; }
html.dark .av-wiz__hint { color: var(--color-dark-300); }

/* Allocate rows */
.av-wiz-alloc { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--color-gray-100); }
.av-wiz-alloc:last-child { border-bottom: none; }
html.dark .av-wiz-alloc { border-color: var(--color-dark-600); }
.av-wiz-alloc__icon {
    width: 28px; height: 28px; border-radius: 6px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: rgb(from var(--color-primary-600) r g b / 0.10); color: var(--color-primary-600);
}
.av-wiz-alloc__icon .mud-icon-root { width: 15px; height: 15px; }
html.dark .av-wiz-alloc__icon { background: rgb(from var(--color-primary-400) r g b / 0.16); color: var(--color-primary-300); }
.av-wiz-alloc__name { flex: 1 1 auto; min-width: 0; color: var(--color-gray-800); }
html.dark .av-wiz-alloc__name { color: var(--color-dark-100); }
.av-wiz-alloc__input { width: 96px; flex: 0 0 auto; }
.av-wiz-alloc__pct { min-width: 40px; text-align: right; color: var(--color-gray-500); }
html.dark .av-wiz-alloc__pct { color: var(--color-dark-300); }

.av-wiz-alloc__total { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-gray-200); }
html.dark .av-wiz-alloc__total { border-color: var(--color-dark-500); }
.av-wiz-alloc__remaining--ok { color: var(--color-success-darker); }
.av-wiz-alloc__remaining--bad { color: var(--color-error); }

/* Review */
.av-wiz-review { background: var(--surface-2); border-radius: var(--radius-lg); padding: 16px; }
html.dark .av-wiz-review { background: var(--color-dark-750); }
.av-wiz-review__row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; }
.av-wiz-review__row + .av-wiz-review__row { border-top: 1px solid var(--color-gray-100); }
html.dark .av-wiz-review__row + .av-wiz-review__row { border-color: var(--color-dark-600); }
.av-wiz-review__label { color: var(--color-gray-500); }
html.dark .av-wiz-review__label { color: var(--color-dark-300); }
.av-wiz-review__val { color: var(--color-gray-900); }
html.dark .av-wiz-review__val { color: var(--color-dark-50); }
.av-wiz-review__ch { display: inline-flex; align-items: center; gap: 8px; }

/* Footer */
.av-wiz__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
.av-wiz__footer-right { display: inline-flex; align-items: center; gap: 8px; }

/* ============================================================================
   §88 av-gf — Google Form builder dialog: toolbar · empty · question cards ·
   scale editor · review · creating/success states. Consumes av-wiz + av-form.
   ============================================================================ */

/* Step-2 toolbar — panel head on the left, "Add question" on the right */
.av-gf-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }

/* Empty state */
.av-gf-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 32px 16px; }
.av-gf-empty__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--surface-2); color: var(--color-primary-600); margin-bottom: 4px; }
.av-gf-empty__icon .mud-icon-root { width: 28px; height: 28px; }
html.dark .av-gf-empty__icon { background: var(--color-dark-700); color: var(--color-primary-400); }
.av-gf-empty__title { color: var(--color-gray-900); }
html.dark .av-gf-empty__title { color: var(--color-dark-50); }
.av-gf-empty__hint { color: var(--color-gray-500); max-width: 340px; }
html.dark .av-gf-empty__hint { color: var(--color-dark-300); }
.av-gf-empty__quick { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }

/* Question list */
.av-gf-list { display: flex; flex-direction: column; gap: 12px; }

/* Question card */
.av-gf-q { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); background: var(--surface-1); cursor: pointer; transition: border-color 150ms ease, box-shadow 150ms ease; }
html.dark .av-gf-q { border-color: var(--color-dark-600); background: var(--color-dark-750); }
.av-gf-q:hover { border-color: var(--color-gray-300); }
html.dark .av-gf-q:hover { border-color: var(--color-dark-500); }
.av-gf-q--sel { border-color: var(--color-primary-500); background: rgb(from var(--color-primary-500) r g b / 0.04); }
html.dark .av-gf-q--sel { border-color: var(--color-primary-400); background: rgb(from var(--color-primary-400) r g b / 0.08); }

.av-gf-q__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.av-gf-q__type { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 9999px; background: rgb(from var(--color-primary-600) r g b / 0.08); color: var(--color-primary-700); }
html.dark .av-gf-q__type { background: rgb(from var(--color-primary-400) r g b / 0.16); color: var(--color-primary-300); }
.av-gf-q__type .mud-icon-root { width: 15px; height: 15px; }
.av-gf-q__actions { display: inline-flex; align-items: center; gap: 2px; }
.av-gf-q__del { color: var(--color-error); }

/* Options editor */
.av-gf-q__opts { display: flex; flex-direction: column; gap: 8px; }
.av-gf-q__opt { display: flex; align-items: center; gap: 8px; }
.av-gf-q__opt-bullet { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; color: var(--color-gray-400); }
html.dark .av-gf-q__opt-bullet { color: var(--color-dark-300); }
.av-gf-q__opt .mud-input-control { flex: 1 1 auto; }
.av-gf-q__add-opt { align-self: flex-start; }

/* Scale editor */
.av-gf-q__scale { display: flex; flex-direction: column; gap: 12px; }
.av-gf-q__scale-preview { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface-2); border-radius: var(--radius-md); color: var(--color-gray-500); }
html.dark .av-gf-q__scale-preview { background: var(--color-dark-700); color: var(--color-dark-300); }
.av-gf-q__scale-dots { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; justify-content: center; flex-wrap: wrap; }
.av-gf-q__scale-dot { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--color-gray-300); color: var(--color-gray-600); }
html.dark .av-gf-q__scale-dot { border-color: var(--color-dark-500); color: var(--color-dark-200); }

/* Required toggle row */
.av-gf-q__foot { display: flex; align-items: center; justify-content: flex-end; padding-top: 4px; border-top: 1px solid var(--color-gray-100); }
html.dark .av-gf-q__foot { border-color: var(--color-dark-600); }

/* Review — question type icon chip */
.av-gf-q__type-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-md); background: var(--surface-2); color: var(--color-primary-600); }
html.dark .av-gf-q__type-icon { background: var(--color-dark-700); color: var(--color-primary-400); }
.av-gf-q__type-icon .mud-icon-root { width: 16px; height: 16px; }

/* Creating / success states */
.av-gf-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 28px 16px; }
.av-gf-state__title { color: var(--color-gray-900); margin-top: 6px; }
html.dark .av-gf-state__title { color: var(--color-dark-50); }
.av-gf-state__hint { color: var(--color-gray-500); }
html.dark .av-gf-state__hint { color: var(--color-dark-300); }
.av-gf-success__icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: rgb(from var(--color-success) r g b / 0.12); color: var(--color-success); }
.av-gf-success__icon .mud-icon-root { width: 36px; height: 36px; }
.av-gf-success__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 8px; }

/* Shareable URL box */
.av-gf-url { width: 100%; max-width: 460px; display: flex; flex-direction: column; gap: 6px; margin-top: 8px; text-align: left; }
.av-gf-url__label { color: var(--color-gray-500); }
html.dark .av-gf-url__label { color: var(--color-dark-300); }
.av-gf-url__box { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); background: var(--surface-2); }
html.dark .av-gf-url__box { border-color: var(--color-dark-600); background: var(--color-dark-700); }
.av-gf-url__text { flex: 1 1 auto; color: var(--color-gray-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.dark .av-gf-url__text { color: var(--color-dark-100); }

/* Rich dialog header — primary icon tile + title + subtitle (lives in the
   av-form-dialog title band, pushed left; close button stays right). */
.av-gf-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.av-gf-head__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-lg); background: rgb(from var(--color-primary-600) r g b / 0.12); color: var(--color-primary-600); flex-shrink: 0; }
html.dark .av-gf-head__icon { background: rgb(from var(--color-primary-400) r g b / 0.18); color: var(--color-primary-400); }
.av-gf-head__icon .mud-icon-root { width: 22px; height: 22px; }
.av-gf-head__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.av-gf-head__title { color: var(--color-gray-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.dark .av-gf-head__title { color: var(--color-dark-50); }
.av-gf-head__sub { color: var(--color-gray-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.dark .av-gf-head__sub { color: var(--color-dark-300); }

/* Step-1 selected-campaign confirmation box */
.av-gf-campaign { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-lg); background: rgb(from var(--color-primary-600) r g b / 0.06); border: 1px solid rgb(from var(--color-primary-600) r g b / 0.18); }
html.dark .av-gf-campaign { background: rgb(from var(--color-primary-400) r g b / 0.10); border-color: rgb(from var(--color-primary-400) r g b / 0.24); }
.av-gf-campaign__icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-md); background: rgb(from var(--color-primary-600) r g b / 0.14); color: var(--color-primary-600); flex-shrink: 0; }
html.dark .av-gf-campaign__icon { color: var(--color-primary-400); }
.av-gf-campaign__icon .mud-icon-root { width: 18px; height: 18px; }
.av-gf-campaign__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.av-gf-campaign__name { color: var(--color-gray-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.dark .av-gf-campaign__name { color: var(--color-dark-50); }
.av-gf-campaign__desc { color: var(--color-gray-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.dark .av-gf-campaign__desc { color: var(--color-dark-300); }
.av-gf-campaign__check { width: 20px; height: 20px; color: var(--color-success); flex-shrink: 0; }

/* Step-3 review — form-like preview card */
.av-gf-preview { border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-1); }
html.dark .av-gf-preview { border-color: var(--color-dark-600); background: var(--color-dark-750); }
.av-gf-preview__bar { height: 6px; background: var(--color-primary-600); }
html.dark .av-gf-preview__bar { background: var(--color-primary-500); }
.av-gf-preview__head { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-bottom: 1px solid var(--color-gray-100); }
html.dark .av-gf-preview__head { border-color: var(--color-dark-600); }
.av-gf-preview__title { color: var(--color-gray-900); }
html.dark .av-gf-preview__title { color: var(--color-dark-50); }
.av-gf-preview__desc { color: var(--color-gray-500); }
html.dark .av-gf-preview__desc { color: var(--color-dark-300); }
.av-gf-preview__campaign { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 6px; padding: 4px 10px; border-radius: 9999px; background: rgb(from var(--color-primary-600) r g b / 0.08); color: var(--color-primary-700); }
html.dark .av-gf-preview__campaign { background: rgb(from var(--color-primary-400) r g b / 0.16); color: var(--color-primary-300); }
.av-gf-preview__campaign .mud-icon-root { width: 14px; height: 14px; }
.av-gf-preview__list { display: flex; flex-direction: column; }
.av-gf-preview__q { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.av-gf-preview__q + .av-gf-preview__q { border-top: 1px solid var(--color-gray-100); }
html.dark .av-gf-preview__q + .av-gf-preview__q { border-color: var(--color-dark-700); }
.av-gf-preview__q-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.av-gf-preview__q-title { color: var(--color-gray-900); }
html.dark .av-gf-preview__q-title { color: var(--color-dark-50); }
.av-gf-preview__q-type { color: var(--color-gray-400); }
html.dark .av-gf-preview__q-type { color: var(--color-dark-300); }
.av-gf-preview__req { color: var(--color-error); margin-left: 2px; }
.av-gf-preview__summary { display: flex; align-items: center; gap: 20px; padding: 12px 16px; background: var(--surface-2); border-top: 1px solid var(--color-gray-100); }
html.dark .av-gf-preview__summary { background: var(--color-dark-700); border-color: var(--color-dark-600); }
.av-gf-preview__stat { display: inline-flex; align-items: center; gap: 6px; color: var(--color-gray-500); }
html.dark .av-gf-preview__stat { color: var(--color-dark-300); }
.av-gf-preview__stat .mud-icon-root { width: 16px; height: 16px; }

/* av-gf image-faithful: section head, color tiles, template card, rows, review */

/* Step-1 "Form Details" section head */
.av-gf-section { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.av-gf-section__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-lg); background: rgb(from var(--color-primary-600) r g b / 0.12); color: var(--color-primary-600); flex-shrink: 0; }
html.dark .av-gf-section__icon { background: rgb(from var(--color-primary-400) r g b / 0.16); color: var(--color-primary-400); }
.av-gf-section__icon .mud-icon-root { width: 22px; height: 22px; }
.av-gf-section__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.av-gf-section__title { color: var(--color-gray-900); }
html.dark .av-gf-section__title { color: var(--color-dark-50); }
.av-gf-section__sub { color: var(--color-gray-500); }
html.dark .av-gf-section__sub { color: var(--color-dark-300); }

/* Colored type tile (email green, phone amber, rest blue) */
.av-gf-tile { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-md); flex-shrink: 0; }
.av-gf-tile .mud-icon-root { width: 18px; height: 18px; }
.av-gf-tile--sm { width: 30px; height: 30px; }
.av-gf-tile--sm .mud-icon-root { width: 16px; height: 16px; }
.av-gf-tile--blue { background: rgb(from var(--color-primary-600) r g b / 0.12); color: var(--color-primary-600); }
html.dark .av-gf-tile--blue { background: rgb(from var(--color-primary-400) r g b / 0.16); color: var(--color-primary-400); }
.av-gf-tile--green { background: rgb(from var(--color-success) r g b / 0.14); color: var(--color-success); }
.av-gf-tile--amber { background: rgb(from var(--color-warning) r g b / 0.16); color: var(--color-warning); }

/* Template card (empty state) */
.av-gf-tpl { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 420px; margin-top: 12px; padding: 14px 16px; border-radius: var(--radius-lg); background: rgb(from var(--color-primary-600) r g b / 0.06); border: 1px solid rgb(from var(--color-primary-600) r g b / 0.18); cursor: pointer; transition: background-color 150ms ease; }
html.dark .av-gf-tpl { background: rgb(from var(--color-primary-400) r g b / 0.10); border-color: rgb(from var(--color-primary-400) r g b / 0.24); }
.av-gf-tpl:hover { background: rgb(from var(--color-primary-600) r g b / 0.10); }
.av-gf-tpl__icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-md); background: rgb(from var(--color-primary-600) r g b / 0.14); color: var(--color-primary-600); flex-shrink: 0; }
html.dark .av-gf-tpl__icon { color: var(--color-primary-400); }
.av-gf-tpl__icon .mud-icon-root { width: 18px; height: 18px; }
.av-gf-tpl__text { display: flex; flex-direction: column; gap: 1px; text-align: left; min-width: 0; }
.av-gf-tpl__title { color: var(--color-primary-700); }
html.dark .av-gf-tpl__title { color: var(--color-primary-300); }
.av-gf-tpl__sub { color: var(--color-gray-500); }
html.dark .av-gf-tpl__sub { color: var(--color-dark-300); }

/* Compact question rows */
.av-gf-row { border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); background: var(--surface-1); overflow: hidden; transition: border-color 150ms ease; }
html.dark .av-gf-row { border-color: var(--color-dark-600); background: var(--color-dark-750); }
.av-gf-row:hover { border-color: var(--color-gray-300); }
html.dark .av-gf-row:hover { border-color: var(--color-dark-500); }
.av-gf-row--sel { border-color: var(--color-primary-500); }
html.dark .av-gf-row--sel { border-color: var(--color-primary-400); }
.av-gf-row__bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; }
.av-gf-row__drag { display: inline-flex; align-items: center; color: var(--color-gray-400); cursor: grab; flex-shrink: 0; }
html.dark .av-gf-row__drag { color: var(--color-dark-400); }
.av-gf-row__drag .mud-icon-root { width: 18px; height: 18px; }
.av-gf-row__text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.av-gf-row__title { margin: 0; }
.av-gf-row__type { color: var(--color-gray-400); }
html.dark .av-gf-row__type { color: var(--color-dark-300); }
.av-gf-row__actions { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.av-gf-row__req { display: inline-flex; align-items: center; gap: 4px; color: var(--color-gray-500); margin-right: 4px; }
html.dark .av-gf-row__req { color: var(--color-dark-300); }
.av-gf-row__editor { display: flex; flex-direction: column; gap: 12px; padding: 4px 14px 14px 14px; border-top: 1px solid var(--color-gray-100); }
html.dark .av-gf-row__editor { border-color: var(--color-dark-600); }

/* Step-3 review two columns */
.av-gf-review { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; align-items: start; }
@media (max-width: 640px) { .av-gf-review { grid-template-columns: 1fr; } }
.av-gf-review__left, .av-gf-review__right { border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); background: var(--surface-1); }
html.dark .av-gf-review__left, html.dark .av-gf-review__right { border-color: var(--color-dark-600); background: var(--color-dark-750); }
.av-gf-review__left { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.av-gf-review__head { display: flex; align-items: flex-start; gap: 12px; }
.av-gf-review__head-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-md); background: rgb(from var(--color-primary-600) r g b / 0.12); color: var(--color-primary-600); flex-shrink: 0; }
html.dark .av-gf-review__head-icon { color: var(--color-primary-400); }
.av-gf-review__head-icon .mud-icon-root { width: 18px; height: 18px; }
.av-gf-review__head-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.av-gf-review__title { color: var(--color-gray-900); }
html.dark .av-gf-review__title { color: var(--color-dark-50); }
.av-gf-review__sub { color: var(--color-gray-500); }
html.dark .av-gf-review__sub { color: var(--color-dark-300); }
.av-gf-review__box { border: 1px solid var(--color-gray-150); border-radius: var(--radius-md); background: var(--surface-2); }
html.dark .av-gf-review__box { border-color: var(--color-dark-600); background: var(--color-dark-700); }
.av-gf-review__box-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; }
.av-gf-review__box-row + .av-gf-review__box-row { border-top: 1px solid var(--color-gray-100); }
html.dark .av-gf-review__box-row + .av-gf-review__box-row { border-color: var(--color-dark-600); }
.av-gf-review__box-label { color: var(--color-gray-500); }
html.dark .av-gf-review__box-label { color: var(--color-dark-300); }
.av-gf-review__box-val { color: var(--color-gray-900); text-align: right; }
html.dark .av-gf-review__box-val { color: var(--color-dark-50); }
.av-gf-review__right { display: flex; flex-direction: column; overflow: hidden; }
.av-gf-review__q-head { padding: 12px 16px; border-bottom: 1px solid var(--color-gray-100); color: var(--color-gray-500); }
html.dark .av-gf-review__q-head { border-color: var(--color-dark-600); color: var(--color-dark-300); }
.av-gf-review__q-list { display: flex; flex-direction: column; }
.av-gf-review__q { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.av-gf-review__q + .av-gf-review__q { border-top: 1px solid var(--color-gray-100); }
html.dark .av-gf-review__q + .av-gf-review__q { border-color: var(--color-dark-700); }
.av-gf-review__q-name { flex: 1 1 auto; color: var(--color-gray-900); min-width: 0; }
html.dark .av-gf-review__q-name { color: var(--color-dark-50); }
.av-gf-review__q-type { color: var(--color-gray-400); flex-shrink: 0; }
html.dark .av-gf-review__q-type { color: var(--color-dark-300); }

/* ============================================================================
   §89 av-gforms — Google Forms management listing (header, toolbar, cards,
   create-new dashed card, promo banner). Consumes av-search-input + av-btn.
   ============================================================================ */

.av-gforms { display: flex; flex-direction: column; gap: 20px; }

/* Header */
.av-gforms__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.av-gforms__head-left { display: flex; align-items: center; gap: 14px; }
.av-gforms__head-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-lg); background: rgb(from var(--color-primary-600) r g b / 0.12); color: var(--color-primary-600); flex-shrink: 0; }
html.dark .av-gforms__head-icon { background: rgb(from var(--color-primary-400) r g b / 0.16); color: var(--color-primary-400); }
.av-gforms__head-icon .mud-icon-root { width: 26px; height: 26px; }
.av-gforms__head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.av-gforms__title { color: var(--color-gray-900); }
html.dark .av-gforms__title { color: var(--color-dark-50); }
.av-gforms__sub { color: var(--color-gray-500); }
html.dark .av-gforms__sub { color: var(--color-dark-300); }
.av-gforms__head-right { display: flex; align-items: center; gap: 16px; }
.av-gforms__connected { display: inline-flex; align-items: center; gap: 6px; color: var(--color-gray-600); }
html.dark .av-gforms__connected { color: var(--color-dark-200); }
.av-gforms__connected-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-success); flex-shrink: 0; }
.av-gforms__connected-info { width: 16px; height: 16px; color: var(--color-gray-400); }
html.dark .av-gforms__connected-info { color: var(--color-dark-300); }

/* Toolbar */
.av-gforms__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.av-gforms__toolbar-left { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; }
.av-gforms__toolbar-right { display: flex; align-items: center; gap: 12px; }
.av-gforms__search { max-width: 360px; flex: 1 1 280px; }
.av-gforms__filter { max-width: 160px; min-width: 128px; }
.av-gforms__filter--status { flex: 1 1 280px; max-width: 360px; min-width: 0; }
.av-gforms__view { display: inline-flex; border: 1px solid var(--color-gray-200); border-radius: var(--radius-md); overflow: hidden; flex-shrink: 0; }
html.dark .av-gforms__view { border-color: var(--color-dark-600); }
.av-gforms__view-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: transparent; border: 0; color: var(--color-gray-500); cursor: pointer; transition: background-color 120ms ease, color 120ms ease; }
html.dark .av-gforms__view-btn { color: var(--color-dark-300); }
.av-gforms__view-btn--active { background: rgb(from var(--color-primary-600) r g b / 0.10); color: var(--color-primary-600); }
html.dark .av-gforms__view-btn--active { background: rgb(from var(--color-primary-400) r g b / 0.16); color: var(--color-primary-400); }

/* Grid */
.av-gforms__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.av-gforms__grid--list { grid-template-columns: 1fr; }

/* Form card */
.av-gforms__card { display: flex; flex-direction: column; border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); background: var(--surface-1); transition: border-color 150ms ease, box-shadow 150ms ease; }
html.dark .av-gforms__card { border-color: var(--color-dark-600); background: var(--color-dark-750); }
.av-gforms__card:hover { border-color: var(--color-primary-300); box-shadow: 0 6px 18px rgb(from var(--color-gray-900) r g b / 0.08); }
html.dark .av-gforms__card:hover { border-color: var(--color-primary-400); box-shadow: 0 6px 18px rgb(0 0 0 / 0.35); }
.av-gforms__card-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px; }
.av-gforms__card-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-lg); background: rgb(from var(--color-primary-600) r g b / 0.10); color: var(--color-primary-600); flex-shrink: 0; }
html.dark .av-gforms__card-icon { background: rgb(from var(--color-primary-400) r g b / 0.16); color: var(--color-primary-400); }
.av-gforms__card-icon .mud-icon-root { width: 22px; height: 22px; }
.av-gforms__card-title { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.av-gforms__card-name { color: var(--color-gray-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.dark .av-gforms__card-name { color: var(--color-dark-50); }
.av-gforms__card-campaign { display: inline-flex; align-items: center; gap: 4px; color: var(--color-gray-500); min-width: 0; }
html.dark .av-gforms__card-campaign { color: var(--color-dark-300); }
.av-gforms__card-campaign .mud-icon-root { width: 13px; height: 13px; flex-shrink: 0; }
.av-gforms__card-kebab { flex-shrink: 0; margin: -6px -6px 0 0; }

/* Stats row */
.av-gforms__card-stats { display: flex; align-items: center; padding: 0 16px 14px; }
.av-gforms__stat { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; flex: 1 1 0; padding: 0 14px; border-right: 1px solid var(--color-gray-100); }
html.dark .av-gforms__stat { border-color: var(--color-dark-700); }
.av-gforms__stat:first-child { padding-left: 0; }
.av-gforms__stat-top { display: inline-flex; align-items: center; gap: 6px; }
.av-gforms__stat-top .mud-icon-root { width: 15px; height: 15px; color: var(--color-primary-600); }
html.dark .av-gforms__stat-top .mud-icon-root { color: var(--color-primary-400); }
.av-gforms__stat-num { color: var(--color-gray-900); }
html.dark .av-gforms__stat-num { color: var(--color-dark-50); }
.av-gforms__stat-label { color: var(--color-gray-400); }
html.dark .av-gforms__stat-label { color: var(--color-dark-300); }
.av-gforms__badge { display: inline-flex; align-items: center; gap: 5px; margin-left: 14px; padding: 2px 8px; border-radius: 9999px; background: rgb(from var(--color-success) r g b / 0.12); color: var(--color-success); flex-shrink: 0; align-self: flex-start; }
.av-gforms__badge-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--color-success); flex-shrink: 0; }

/* Card footer */
.av-gforms__card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--color-gray-100); }
html.dark .av-gforms__card-foot { border-color: var(--color-dark-700); }
.av-gforms__card-date { display: inline-flex; align-items: center; gap: 8px; color: var(--color-gray-400); min-width: 0; }
html.dark .av-gforms__card-date { color: var(--color-dark-300); }
.av-gforms__card-date .mud-icon-root { width: 16px; height: 16px; flex-shrink: 0; }
.av-gforms__card-date-val { color: var(--color-gray-700); }
html.dark .av-gforms__card-date-val { color: var(--color-dark-100); }
.av-gforms__card-date-lbl { color: var(--color-gray-400); }
html.dark .av-gforms__card-date-lbl { color: var(--color-dark-300); }
.av-gforms__card-actions { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.av-gforms__card-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--color-gray-200); border-radius: var(--radius-md); background: transparent; color: var(--color-gray-600); cursor: pointer; transition: border-color 120ms ease, color 120ms ease; }
html.dark .av-gforms__card-btn { border-color: var(--color-dark-600); color: var(--color-dark-200); }
.av-gforms__card-btn:hover { border-color: var(--color-primary-400); color: var(--color-primary-600); }
html.dark .av-gforms__card-btn:hover { color: var(--color-primary-400); }

/* Create New Form (dashed) */
.av-gforms__new { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 220px; padding: 24px; border: 2px dashed var(--color-gray-300); border-radius: var(--radius-lg); background: transparent; cursor: pointer; transition: border-color 150ms ease, background-color 150ms ease; }
html.dark .av-gforms__new { border-color: var(--color-dark-500); }
.av-gforms__new:hover { border-color: var(--color-primary-400); background: rgb(from var(--color-primary-600) r g b / 0.03); }
.av-gforms__new-plus { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 6px; border-radius: 50%; border: 1px solid var(--color-primary-300); color: var(--color-primary-600); }
html.dark .av-gforms__new-plus { border-color: rgb(from var(--color-primary-400) r g b / 0.4); color: var(--color-primary-400); }
.av-gforms__new-plus .mud-icon-root { width: 24px; height: 24px; }
.av-gforms__new-title { color: var(--color-gray-900); }
html.dark .av-gforms__new-title { color: var(--color-dark-50); }
.av-gforms__new-sub { color: var(--color-gray-500); }
html.dark .av-gforms__new-sub { color: var(--color-dark-300); }

/* Promo banner */
.av-gforms__promo { display: flex; align-items: center; gap: 16px; padding: 20px 24px; border-radius: var(--radius-lg); background: rgb(from var(--color-primary-600) r g b / 0.05); border: 1px solid rgb(from var(--color-primary-600) r g b / 0.12); }
html.dark .av-gforms__promo { background: rgb(from var(--color-primary-400) r g b / 0.08); border-color: rgb(from var(--color-primary-400) r g b / 0.18); }
.av-gforms__promo-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-lg); background: rgb(from var(--color-primary-600) r g b / 0.14); color: var(--color-primary-600); flex-shrink: 0; }
html.dark .av-gforms__promo-icon { color: var(--color-primary-400); }
.av-gforms__promo-icon .mud-icon-root { width: 24px; height: 24px; }
.av-gforms__promo-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.av-gforms__promo-title { color: var(--color-primary-700); }
html.dark .av-gforms__promo-title { color: var(--color-primary-300); }
.av-gforms__promo-sub { color: var(--color-gray-600); }
html.dark .av-gforms__promo-sub { color: var(--color-dark-200); }

/* ============================================================================
   §90 ApexCharts — global font family. Chart builders no longer set a
   FontFamily literal; SVG text and tooltips inherit the app sans stack here.
   ============================================================================ */
.apexcharts-text,
.apexcharts-title-text,
.apexcharts-legend-text,
.apexcharts-tooltip,
.apexcharts-xaxistooltip,
.apexcharts-yaxistooltip,
.apexcharts-datalabel,
.apexcharts-datalabel-label,
.apexcharts-datalabel-value {
    font-family: var(--font-sans) !important;
}

/* ============================================================================
   §91 av-cm-tasks — Contact Manager dashboard "Next Steps & Tasks" widget.
   Layout / color only; typography via Typo.*, bars reuse .av-cm-funnel/.av-cm-bar.
   ============================================================================ */
.av-cm-tasks__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}
.av-cm-tasks__stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px;
    border-radius: var(--radius-lg);
    background: var(--surface-2);
}
html.dark .av-cm-tasks__stat { background: var(--color-dark-600); }
.av-cm-tasks__value--warning { color: var(--color-warning); }
.av-cm-tasks__value--danger  { color: var(--color-error); }
.av-cm-tasks__value--success { color: var(--color-success); }
.av-cm-tasks__eyebrow { color: var(--color-gray-500); }
html.dark .av-cm-tasks__eyebrow { color: var(--color-dark-300); }

/* ============================================================================
   §92 av-score-ring — circular lead-score gauge. Wraps a MudProgressCircular
   and centers the value label over it. Layout only — typography stays on the
   inner MudText's Typo, colour on the MudProgressCircular's Color.
   ============================================================================ */
.av-score-ring {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* Compact ring — both circles forced to the same 56px box so they overlap exactly. */
.av-score-ring .mud-progress-circular {
  width: 56px;
  height: 56px;
}
/* Small variant — used inline in the leads list card Score row. */
.av-score-ring--sm .mud-progress-circular {
  width: 32px;
  height: 32px;
}
/* The unfilled portion: a full gray track circle sitting behind the colored arc. */
.av-score-ring__track {
  position: absolute;
  inset: 0;
}
.av-score-ring__track .mud-progress-circular-circle {
  stroke: var(--color-gray-200);
}
html.dark .av-score-ring__track .mud-progress-circular-circle {
  stroke: var(--color-dark-500);
}
.av-score-ring__value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* ============================================================================
   §93 av-pipeline — horizontal lead-qualification stage tracker (enterprise
   stepper): connected dots, done = filled + check, current = ring, todo = gray.
   Layout + color only (typography stays on the MudText Typo).
   ============================================================================ */
/* Timeline header — title flush, subtitle carries the gap to the progress bar. */
.av-pipeline-head .av-section-title.mud-typography {
  margin-bottom: 0px;
}
.av-pipeline-head .av-key-dates__label.mud-typography {
  margin-bottom: 20px;
}
/* Standalone progress bar above the stepper — explicit gap so the bar never
   glues to the stepper connector row. */
.av-pipeline-progress.mud-progress-linear {
  margin-top: 8px !important;
  margin-bottom: 44px !important;
}
.av-pipeline {
  display: flex;
  align-items: flex-start;
  width: 100%;
}
.av-pipeline__stage {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
/* Connector: a track to the LEFT of each dot (except the first), colored once reached. */
.av-pipeline__stage:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 17px;
  left: calc(-50% + 24px);
  right: calc(50% + 24px);
  height: 2px;
  background: var(--color-gray-200);
  z-index: 0;
}
.av-pipeline__stage--done::before,
.av-pipeline__stage--current::before {
  background: var(--color-primary-500);
}
.av-pipeline__dot {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-100);
  color: var(--color-gray-400);
  border: 2px solid var(--color-gray-200);
  cursor: pointer;
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease;
}
.av-pipeline__stage--locked .av-pipeline__dot {
  cursor: default;
}
.av-pipeline__stage--done .av-pipeline__dot {
  background: var(--color-primary-500);
  border-color: var(--color-primary-500);
  color: var(--color-white);
}
.av-pipeline__stage--current .av-pipeline__dot {
  background: var(--color-white);
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 4px rgb(from var(--color-primary-500) r g b / 0.15);
}
.av-pipeline__stage--current .av-pipeline__dot::after {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 9999px;
  background: var(--color-primary-500);
}
.av-pipeline__label.mud-typography {
  color: var(--color-gray-500);
}
.av-pipeline__stage--done .av-pipeline__label.mud-typography,
.av-pipeline__stage--current .av-pipeline__label.mud-typography {
  color: var(--color-gray-800);
}
html.dark .av-pipeline__stage:not(:first-child)::before {
  background: var(--color-dark-500);
}
html.dark .av-pipeline__stage--done::before,
html.dark .av-pipeline__stage--current::before {
  background: var(--color-primary-400);
}
html.dark .av-pipeline__dot {
  background: var(--color-dark-600);
  border-color: var(--color-dark-500);
  color: var(--color-dark-300);
}
html.dark .av-pipeline__stage--done .av-pipeline__dot {
  background: var(--color-primary-400);
  border-color: var(--color-primary-400);
  color: var(--color-dark-900);
}
html.dark .av-pipeline__stage--current .av-pipeline__dot {
  background: var(--color-dark-700);
  border-color: var(--color-primary-400);
}
html.dark .av-pipeline__label.mud-typography {
  color: var(--color-dark-300);
}
html.dark .av-pipeline__stage--done .av-pipeline__label.mud-typography,
html.dark .av-pipeline__stage--current .av-pipeline__label.mud-typography {
  color: var(--color-dark-100);
}

/* ============================================================================
   §94 Lead timeline card — stepper label box + date, KEY DATES rows, score gauge.
   Layout + color only (typography via MudText Typo).
   ============================================================================ */
.av-pipeline__labelbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 14px;
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
}
.av-pipeline__stage--current .av-pipeline__labelbox {
  background: rgb(from var(--color-primary-500) r g b / 0.10);
  border-color: rgb(from var(--color-primary-500) r g b / 0.22);
}
html.dark .av-pipeline__stage--current .av-pipeline__labelbox {
  background: rgb(from var(--color-primary-400) r g b / 0.16);
  border-color: rgb(from var(--color-primary-400) r g b / 0.30);
}
.av-pipeline__date.mud-typography {
  color: var(--color-gray-500);
}
html.dark .av-pipeline__date.mud-typography {
  color: var(--color-dark-300);
}
.av-pipeline__stage--todo .av-pipeline__dot {
  border-style: dashed;
}
/* Duration pill sitting on the connector to the left of a stage (centered on the connector midpoint). */
.av-pipeline__pill.mud-typography {
  position: absolute;
  top: 18px;
  left: 0;
  transform: translate(-50%, -50%);
  z-index: 2;
  padding: 1px 8px;
  border-radius: 9999px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  color: var(--color-gray-500);
  white-space: nowrap;
}
html.dark .av-pipeline__pill.mud-typography {
  background: var(--color-dark-700);
  border-color: var(--color-dark-500);
  color: var(--color-dark-300);
}

/* KEY DATES rows */
.av-key-dates {
  display: flex;
  flex-direction: column;
}
.av-key-dates__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--color-gray-100);
}
.av-key-dates__row:last-child {
  border-bottom: none;
}
html.dark .av-key-dates__row {
  border-color: var(--color-dark-600);
}
.av-key-dates__icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(from var(--color-primary-500) r g b / 0.10);
  color: var(--color-primary-600);
}
html.dark .av-key-dates__icon {
  background: rgb(from var(--color-primary-400) r g b / 0.16);
  color: var(--color-primary-300);
}
.av-key-dates__label.mud-typography {
  flex: 1 1 auto;
  color: var(--color-gray-600);
}
html.dark .av-key-dates__label.mud-typography {
  color: var(--color-dark-200);
}
.av-key-dates__value.mud-typography {
  color: var(--color-gray-900);
}
html.dark .av-key-dates__value.mud-typography {
  color: var(--color-dark-50);
}
.av-key-dates__value--accent.mud-typography {
  color: var(--color-success);
}

/* Score gauge — semicircle SVG. */
.av-gauge {
  position: relative;
  width: 100%;
  max-width: 240px;
  margin-inline: auto;
}
.av-gauge__svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.av-gauge__track {
  fill: none;
  stroke: var(--color-gray-200);
  stroke-width: 14;
  stroke-linecap: round;
}
html.dark .av-gauge__track {
  stroke: var(--color-dark-500);
}
.av-gauge__value {
  fill: none;
  stroke-width: 14;
  stroke-linecap: round;
  transition: stroke-dasharray 450ms ease;
}
.av-gauge--cold .av-gauge__value {
  stroke: var(--color-info);
}
.av-gauge--warm .av-gauge__value {
  stroke: var(--color-warning);
}
.av-gauge--hot .av-gauge__value {
  stroke: var(--color-success);
}
.av-gauge__center {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.av-gauge__word.mud-typography {
  color: var(--color-gray-500);
}
.av-gauge--cold .av-gauge__word.mud-typography {
  color: var(--color-info);
}
.av-gauge--warm .av-gauge__word.mud-typography {
  color: var(--color-warning);
}
.av-gauge--hot .av-gauge__word.mud-typography {
  color: var(--color-success);
}
.av-gauge__endpoints {
  display: flex;
  justify-content: space-between;
  padding: 0 4px;
  margin-top: -6px;
}
.av-gauge__endpoints .mud-typography {
  color: var(--color-gray-400);
}
html.dark .av-gauge__endpoints .mud-typography {
  color: var(--color-dark-300);
}

/* 3-column info row — flush-left (no MudGrid padding offset) so the first column's
   label aligns with sibling blocks (Location / Description) below it. */
.av-info-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 640px) {
  .av-info-grid-3 {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   §95 reCAPTCHA v3 badge — Google injects `.grecaptcha-badge` as a fixed
   element on <body>, so it floated over EVERY page (bottom-right, on top of
   the snackbars and the datagrid bulk-actions bar) even though the captcha
   only runs on Login. Scoped to the page that executes it via the marker
   class `av-recaptcha-scope` on the Login root. `visibility` (not `display`)
   is what Google's own hide guidance uses — it keeps grecaptcha working.
   WI #1213.
   ============================================================================ */
.grecaptcha-badge {
    visibility: hidden;
}

body:has(.av-recaptcha-scope) .grecaptcha-badge {
    visibility: visible;
}

/* ============================================================================
   §96 av-error-snackbar — grouped server errors inside a snackbar (WI #1249).
   Layout only; typography via Typo.*. Divider and bullets ride on currentColor
   so they read on every severity surface (§41 paints saturated bg + white text)
   in both light and dark without per-severity overrides.
   ============================================================================ */
.av-error-snackbar__divider {
    border-color: currentColor !important;
    opacity: 0.35;
    margin: 2px 0;
}

/* Every error is listed — no truncation, so no dead-end "and N more" the user cannot
   open. A long list scrolls inside the toast instead of pushing it off the viewport;
   the header stays put because the cap is on the list, not on the snackbar body. */
.av-error-snackbar__list {
    margin: 0;
    padding-inline-start: 1.15rem;
    padding-inline-end: 4px;
    list-style: disc outside;
    max-height: 40vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgb(255 255 255 / 0.45) transparent;
}

.av-error-snackbar__list::-webkit-scrollbar {
    width: 6px;
}

.av-error-snackbar__list::-webkit-scrollbar-thumb {
    background: rgb(255 255 255 / 0.45);
    border-radius: 3px;
}

.av-error-snackbar__list > li + li {
    margin-top: 3px;
}

/* MudText renders <p>; kill the UA margin so bullets keep a tight rhythm. */
.av-error-snackbar__list .mud-typography {
    margin: 0;
}

/* ============================================================================
   §97 av-webform-preview — live render of a web-form schema inside the Builder.
   Layout + surface only; typography via Typo, colors via tokens.
   ============================================================================ */
.av-webform-preview {
    max-width: 460px;
    padding: 24px;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    background: var(--color-white);
}
html.dark .av-webform-preview {
    border-color: var(--color-dark-500);
    background: var(--color-dark-700);
}
.av-webform-preview__title.mud-typography {
    margin-bottom: 2px;
}
.av-webform-preview__subtitle.mud-typography {
    margin-bottom: 16px;
}
.av-webform-preview__fields {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.av-webform-preview__label.mud-typography {
    display: block;
    margin-bottom: 4px;
    color: var(--color-gray-600);
}
html.dark .av-webform-preview__label.mud-typography {
    color: var(--color-dark-200);
}
.av-webform-preview__submit.mud-button-root {
    margin-top: 18px;
    width: 100%;
    text-transform: none;
    border-radius: var(--radius-full);
}

/* ============================================================================
   §98 av-webform-builder — split config / live-preview inside the Builder.
   ============================================================================ */
/* Wide dialog — the split (config + preview) needs the room; cap at 1080 / 96vw. */
.av-webform-builder.mud-dialog {
    max-width: 1080px !important;
    width: 96vw;
}
.av-webform-builder__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}
@media (max-width: 900px) {
    .av-webform-builder__grid {
        grid-template-columns: 1fr;
    }
}
.av-webform-builder__preview {
    position: sticky;
    top: 0;
}
.av-webform-builder__field {
    display: flex;
    align-items: center;
    gap: 10px;
}
/* The label input takes all remaining room; the switch + delete stay compact. */
.av-webform-builder__field > .mud-input-control {
    flex: 1 1 auto;
    min-width: 0;
}
.av-webform-builder__field > .mud-switch {
    flex: 0 0 auto;
}

/* §99 ─── av-campaign-chip — agnostic "flag + campaign name" chip for lead-source panels
   (Google Forms cards, Web Forms list). Icon + muted text, no background. */
.av-campaign-chip { display: inline-flex; align-items: center; gap: 4px; color: var(--color-gray-500); min-width: 0; }
html.dark .av-campaign-chip { color: var(--color-dark-300); }
.av-campaign-chip .mud-icon-root { width: 13px; height: 13px; flex-shrink: 0; }

/* ============================================================================
   Image cropper dialog — crop + resize before upload (WI #1202).
   Layout and color only; typography comes from the canonical scale.
   ============================================================================ */

.av-image-cropper__stage {
    margin-top: 1rem;
    border-radius: var(--radius-lg);
    background: var(--color-gray-150);
    overflow: hidden;
    /* Bound the height so a tall photo cannot push the footer off screen —
       the dialog body scrolls, but the stage itself must stay visible. */
    max-height: 60vh;
}

/* Cropper.js swaps the <img> for its own container; both need the cap. */
.av-image-cropper__stage > img,
.av-image-cropper__stage .cropper-container {
    display: block;
    max-width: 100%;
    max-height: 60vh;
}

.av-image-cropper__tools {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}

/* Stage + live preview side by side; stacks under 640px. */
.av-image-cropper__body {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.av-image-cropper__body > .av-image-cropper__stage {
    flex: 1 1 auto;
    min-width: 0;
}

.av-image-cropper__preview-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

/* Cropper.js fills this element with a live copy of the crop; overflow must clip it. */
.av-image-cropper__preview {
    width: 96px;
    height: 96px;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--color-gray-150);
}

.av-image-cropper__preview--circle {
    border-radius: 50%;
}

/* Aspect-ratio selector (logos only) */
.av-image-cropper__ratios {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.av-image-cropper__ratio {
    border: 1px solid var(--color-gray-300);
    border-radius: 9999px;
    color: var(--color-gray-700);
    text-transform: none;
}

.av-image-cropper__ratio--active {
    border-color: var(--color-primary-600);
    background: rgb(from var(--color-primary-500) r g b / 0.08);
    color: var(--color-primary-700);
}

@media (max-width: 639px) {
    .av-image-cropper__body {
        flex-direction: column;
    }

    .av-image-cropper__preview-col {
        align-self: center;
    }
}

/* Crop selection chrome. Cropper.js ships a 1px blue outline and 5px dots that vanish
   over busy or light photos, so the box and its handles are thickened and given a white
   halo — the pairing stays readable over any image, which raw thickness alone does not.
   Scoped to the stage so nothing else that might use Cropper is affected. */
.av-image-cropper__stage .cropper-view-box {
    outline: 2px solid var(--color-primary-500);
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.85);
}

.av-image-cropper__stage .cropper-line {
    background-color: var(--color-primary-500);
    opacity: 0.35;
}

/* Guide thirds — kept subtle, they orient without competing with the border. */
.av-image-cropper__stage .cropper-dashed {
    border-color: rgb(255 255 255 / 0.7);
    opacity: 0.6;
}

/* Square handles, per the request: bigger, fully opaque and haloed.
   Cropper positions each point with its own offset sized for a 5px dot, so every
   offset is restated for a 12px one — otherwise the handles sit off-corner. */
.av-image-cropper__stage .cropper-point {
    width: 12px;
    height: 12px;
    background-color: var(--color-primary-500);
    border-radius: 0;
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.9);
    opacity: 1;
}

.av-image-cropper__stage .cropper-point.point-e {
    right: -6px;
    margin-top: -6px;
}

.av-image-cropper__stage .cropper-point.point-n {
    top: -6px;
    margin-left: -6px;
}

.av-image-cropper__stage .cropper-point.point-w {
    left: -6px;
    margin-top: -6px;
}

.av-image-cropper__stage .cropper-point.point-s {
    bottom: -6px;
    margin-left: -6px;
}

.av-image-cropper__stage .cropper-point.point-ne {
    top: -6px;
    right: -6px;
}

.av-image-cropper__stage .cropper-point.point-nw {
    top: -6px;
    left: -6px;
}

.av-image-cropper__stage .cropper-point.point-sw {
    bottom: -6px;
    left: -6px;
}

/* Cropper enlarges this one on wide viewports; restated so all eight match. */
.av-image-cropper__stage .cropper-point.point-se {
    width: 12px;
    height: 12px;
    right: -6px;
    bottom: -6px;
}

html.dark .av-image-cropper__stage,
html.dark .av-image-cropper__preview {
    background: var(--color-dark-700);
}

html.dark .av-image-cropper__ratio {
    border-color: var(--color-dark-500);
    color: var(--color-dark-200);
}

html.dark .av-image-cropper__ratio--active {
    border-color: var(--color-primary-400);
    background: rgb(from var(--color-primary-400) r g b / 0.16);
    color: var(--color-primary-200);
}

/* Circular image preview (avatar / logo). Replaces the per-view inline sizing that
   the MudAvatar-to-MudImage swap left behind. Pair the base with one size. */
.av-image-preview {
    border-radius: 50%;
    object-fit: cover;
}

.av-image-preview--md {
    width: 150px;
    height: 150px;
}

.av-image-preview--lg {
    width: 160px;
    height: 160px;
}

/* Logo variant — overrides the circular base on purpose: a corporate logo is rarely
   square, so cropping it to a circle mangles it. Keeps the card radius and scales the
   image inside its box instead of filling it. WI #1578. */
.av-image-preview--logo {
    width: 100%;
    max-width: 240px;
    height: 160px;
    border-radius: var(--radius-lg);
    object-fit: contain;
}

/* §100 ─── av-vis-menu — visibility submenu: labels align on a fixed check gutter.
   The check occupies its slot on every row (hidden when not current) so text never shifts.
   Mud sizes the SVG via font-size (Size.Small = 1.25rem/20px), so we override font-size, not width. */
.av-vis-menu__row { display: inline-flex; align-items: center; gap: 8px; }
.av-vis-menu__check { font-size: 14px !important; width: 14px; height: 14px; flex-shrink: 0; }
.av-vis-menu__check--hidden { visibility: hidden; }

/* §101 ─── av-prole — Professional Role dialog: hero summary + section cards + master-detail licenses. */
.av-prole-hero { display: flex; align-items: center; gap: 16px; padding: 16px; margin-top: 16px; border-radius: var(--radius-lg); background: var(--color-gray-100); }
html.dark .av-prole-hero { background: var(--color-dark-700); }
.av-prole-hero__avatar { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-primary-500); color: #fff; }
.av-prole-hero__avatar--img { background: transparent; overflow: hidden; }
.av-prole-hero__avatar--img img { width: 100%; height: 100%; object-fit: cover; border-radius: 9999px; }
.av-prole-hero__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.av-prole-hero__org { display: inline-flex; align-items: center; gap: 6px; color: var(--color-gray-500); }
html.dark .av-prole-hero__org { color: var(--color-dark-300); }
.av-prole-hero__org .mud-icon-root { width: 16px; height: 16px; flex-shrink: 0; }
.av-prole-hero__stats { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.av-prole-hero__stat { display: flex; flex-direction: column; gap: 4px; }
.av-prole-hero__stat-label { color: var(--color-gray-500); }
html.dark .av-prole-hero__stat-label { color: var(--color-dark-300); }
.av-prole-hero__stat-value { display: inline-flex; align-items: center; gap: 6px; color: var(--color-primary-600); }
html.dark .av-prole-hero__stat-value { color: var(--color-primary-400); }
.av-prole-hero__stat-value .mud-icon-root { width: 16px; height: 16px; }
.av-prole-hero__stat--primary { flex-direction: row; align-items: center; gap: 10px; }
.av-prole-hero__star { color: var(--color-primary-500); }
.av-prole-hero__dot { display: inline-block; width: 7px; height: 7px; border-radius: 9999px; background: currentColor; margin-right: 6px; vertical-align: middle; }

.av-prole-switch { display: flex; align-items: center; gap: 10px; }
.av-prole-switch__icon { color: var(--color-primary-500); flex-shrink: 0; }
.av-prole-switch__text { display: flex; flex-direction: column; }
.av-prole-switch__sub { color: var(--color-gray-500); }
html.dark .av-prole-switch__sub { color: var(--color-dark-300); }

.av-prole-section { border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); padding: 16px; margin-top: 16px; }
html.dark .av-prole-section { border-color: var(--color-dark-600); }
.av-prole-section__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.av-prole-section__icon { flex: 0 0 auto; width: 36px; height: 36px; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; background: rgb(from var(--color-primary-600) r g b / 0.10); color: var(--color-primary-600); }
html.dark .av-prole-section__icon { background: rgb(from var(--color-primary-400) r g b / 0.16); color: var(--color-primary-400); }
.av-prole-section__icon .mud-icon-root { width: 18px; height: 18px; }
.av-prole-section__head-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.av-prole-section__sub { color: var(--color-gray-500); }
html.dark .av-prole-section__sub { color: var(--color-dark-300); }

.av-prole-license-list { display: flex; flex-direction: column; gap: 12px; }
.av-prole-license { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); cursor: pointer; transition: border-color 150ms ease, background 150ms ease; }
.av-prole-license__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.av-prole-license__line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.av-prole-license__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.av-prole-license__meta .av-badge { font-size: 11px; }
.av-prole-license__soon { display: inline-flex; align-items: center; gap: 4px; }
.av-prole-license__soon-icon { width: 12px; height: 12px; font-size: 12px !important; }
html.dark .av-prole-license { border-color: var(--color-dark-600); }
.av-prole-license:hover { border-color: var(--color-gray-300); }
.av-prole-license--selected { border-color: var(--color-primary-500); background: rgb(from var(--color-primary-500) r g b / 0.06); }
.av-prole-license__radio { flex: 0 0 auto; color: var(--color-gray-400); }
.av-prole-license--selected .av-prole-license__radio { color: var(--color-primary-600); }
.av-prole-license__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.av-prole-license__head { display: flex; align-items: center; gap: 10px; }
.av-prole-license__num { color: var(--color-gray-900); white-space: nowrap; }
html.dark .av-prole-license__num { color: var(--color-dark-50); }
.av-prole-license__chips, .av-prole-license__dates { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.av-prole-license__date { display: inline-flex; align-items: center; gap: 4px; color: var(--color-gray-500); }
html.dark .av-prole-license__date { color: var(--color-dark-300); }
.av-prole-license__date .mud-icon-root { width: 13px; height: 13px; flex-shrink: 0; }
.av-prole-license__actions { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; margin-left: auto; }
.av-prole-license__delete .mud-icon-root { color: var(--color-error); }

/* Add License — primary-outlined pill (av-btn--outline is neutral gray; this one is primary). */
.av-prole-add-btn.mud-button-root { background: transparent !important; border: 1px solid var(--color-primary-500) !important; color: var(--color-primary-600) !important; }
.av-prole-add-btn.mud-button-root:hover { background: rgb(from var(--color-primary-500) r g b / 0.08) !important; border-color: var(--color-primary-600) !important; }
html.dark .av-prole-add-btn.mud-button-root { border-color: var(--color-primary-400) !important; color: var(--color-primary-400) !important; }

/* Hero — chips under the org + stat blocks (Licenses / Expiring Soon), divided by a left rule. */
.av-prole-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.av-prole-hero__chip { display: inline-flex; align-items: center; }
.av-prole-hero__chip-star { width: 12px; height: 12px; font-size: 12px !important; margin-right: 4px; }
.av-prole-hero__stats { align-items: stretch; }
.av-prole-hero__stat { justify-content: center; padding-left: 28px; border-left: 1px solid var(--color-gray-200); }
html.dark .av-prole-hero__stat { border-left-color: var(--color-dark-600); }
.av-prole-hero__stat-head { display: inline-flex; align-items: center; gap: 6px; color: var(--color-gray-500); }
html.dark .av-prole-hero__stat-head { color: var(--color-dark-300); }
.av-prole-hero__stat-head .mud-icon-root { width: 16px; height: 16px; color: var(--color-primary-600); }
html.dark .av-prole-hero__stat-head .mud-icon-root { color: var(--color-primary-400); }
.av-prole-hero__stat-num { color: var(--color-gray-900); }
html.dark .av-prole-hero__stat-num { color: var(--color-dark-50); }

/* Role Info — Organization + New Org button on one row (aligned). */
.av-prole-orgrow { display: flex; align-items: center; gap: 12px; }
.av-prole-orgrow__field { flex: 1 1 auto; min-width: 0; }
.av-prole-orgrow__newbtn.mud-button-root { flex: 0 0 auto; height: 40px; }

/* Three-column field row (mirrors av-form-row-2). */
.av-form-row-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 720px) { .av-form-row-3 { grid-template-columns: 1fr; } }

/* License Details — view/edit header, add-jurisdiction panel, edit footer. */
.av-prole-detail-head-actions { display: inline-flex; align-items: center; gap: 6px; }
.av-prole-editing-chip { flex: 0 0 auto; }
.av-prole-addjur { display: flex; flex-direction: column; gap: 12px; padding: 14px; margin-top: 4px; border: 1px solid var(--color-gray-200); border-radius: var(--radius-md); background: var(--color-gray-100); }
html.dark .av-prole-addjur { border-color: var(--color-dark-600); background: var(--color-dark-700); }
.av-prole-addjur__actions { display: flex; justify-content: flex-end; gap: 12px; }
.av-prole-detail-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 14px; margin-top: 4px; border-top: 1px solid var(--color-gray-150); }
html.dark .av-prole-detail-footer { border-top-color: var(--color-dark-600); }
.av-prole-detail-footer__actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }

/* Read-only License Details — fields look disabled (grey fill) but keep their values fully visible. */
.av-prole-fields--ro .mud-input-root { background-color: var(--color-gray-150); }
html.dark .av-prole-fields--ro .mud-input-root { background-color: var(--color-dark-700); }

/* License card — jurisdiction count row + "..." overflow menu. */
.av-prole-license__jur-count { display: inline-flex; align-items: center; gap: 4px; color: var(--color-gray-500); }
html.dark .av-prole-license__jur-count { color: var(--color-dark-300); }
.av-prole-license__jur-count .mud-icon-root { width: 14px; height: 14px; flex-shrink: 0; }
.av-prole-license__menu { margin-left: auto; }

/* Details empty state. */
.av-prole-detail-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 220px; text-align: center; padding: 24px; }
.av-prole-detail-empty__icon { width: 40px; height: 40px; font-size: 40px !important; color: var(--color-gray-300); }
html.dark .av-prole-detail-empty__icon { color: var(--color-dark-500); }

/* Jurisdictions block (master-detail inside License Details). */
.av-prole-jur-block { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); background: var(--color-gray-50); }
html.dark .av-prole-jur-block { border-color: var(--color-dark-600); background: var(--color-dark-800); }
.av-prole-jur-block__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.av-prole-jur-list { display: flex; flex-direction: column; gap: 8px; }
.av-prole-jur { border: 1px solid var(--color-gray-200); border-radius: var(--radius-md); background: var(--surface-1); padding: 10px 12px; }
html.dark .av-prole-jur { border-color: var(--color-dark-600); background: var(--color-dark-700); }
.av-prole-jur__row { display: flex; align-items: center; gap: 10px; }
.av-prole-jur__grip { color: var(--color-gray-400); cursor: grab; flex-shrink: 0; width: 16px; height: 16px; }
.av-prole-jur__avatar { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; color: var(--color-white); }
.av-prole-jur__text { flex: 0 0 auto; min-width: 92px; display: flex; flex-direction: column; }
.av-prole-jur__name { color: var(--color-gray-900); }
html.dark .av-prole-jur__name { color: var(--color-dark-50); }
.av-prole-jur__counties { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 6px; }
.av-prole-jur__actions { flex: 0 0 auto; display: flex; gap: 2px; }
.av-prole-jur__editor { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--color-gray-200); }
html.dark .av-prole-jur__editor { border-top-color: var(--color-dark-600); }

/* State avatar tints — deterministic 0-5 via semantic tokens (no hardcoded hex). */
.av-prole-jur__avatar--c0 { background: var(--color-primary-500); }
.av-prole-jur__avatar--c1 { background: var(--color-secondary); }
.av-prole-jur__avatar--c2 { background: var(--color-info); }
.av-prole-jur__avatar--c3 { background: var(--color-success); }
.av-prole-jur__avatar--c4 { background: var(--color-warning); }
.av-prole-jur__avatar--c5 { background: var(--color-error); }

/* ─────────────────────────────────────────────────────────────────────────
   §102 ─── av-field-error — full-width inline field error with a warning icon
   scaled to the caption text. The icon lives inside the MudText, so 1em == the
   caption font size; color comes from the MudText (Color.Error) via currentColor.
   ───────────────────────────────────────────────────────────────────────── */
.av-field-error {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
}

.av-field-error .mud-icon-root {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Caption-sized variant — icon scaled down to sit inline with caption text. */
.av-field-error--sm .mud-icon-root {
    width: 16px;
    height: 16px;
}

/* ─────────────────────────────────────────────────────────────────────────
   §103 ─── av-proroles — Professional roles master-detail with expiry alerts.
   A roles rail (left) drives a license detail pane (right); an aggregated,
   collapsible queue surfaces expired / expiring-soon licenses. Colored soft
   pills reuse the av-badge skin; borders/radius adapt to dark via one local var.
   ───────────────────────────────────────────────────────────────────────── */
.av-proroles {
    --avp-border: var(--color-gray-200);
    background: var(--surface-2);
    border: 0.5px solid var(--avp-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

html.dark .av-proroles {
    --avp-border: var(--color-dark-500);
}

.av-proroles__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 0.5px solid var(--avp-border);
}

.av-proroles__title {
    color: var(--text-primary);
}

.av-proroles__empty {
    padding: 24px 16px;
}

/* Padded body for simple (non-master-detail) sections reusing the proroles card+head.
   White surface (flips to the dark card surface in dark mode) under the gray head strip. */
.av-proroles__body {
    padding: 12px 16px 16px;
    background: var(--surface-1);
}

/* Expiry queue */
.av-proroles__queue {
    padding: 10px 16px 11px;
    background: rgb(from var(--color-error) r g b / 0.08);
    border-bottom: 0.5px solid rgb(from var(--color-error) r g b / 0.25);
}

.av-proroles__queue-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.av-proroles__queue-head--collapsible {
    cursor: pointer;
}

.av-proroles__queue-icon,
.av-proroles__queue-text,
.av-proroles__queue-toggle {
    color: var(--color-error);
}

.av-proroles__queue-toggle {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 5px;
}

.av-proroles__queue-body {
    margin-top: 8px;
}

.av-proroles__queue-body--scroll {
    max-height: 190px;
    overflow-y: auto;
}

.av-proroles__qrow {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    cursor: pointer;
    border-top: 0.5px solid rgb(from var(--color-error) r g b / 0.20);
}

.av-proroles__qrow:first-child {
    border-top: none;
}

.av-proroles__qrow-name {
    color: var(--text-primary);
}

.av-proroles__qrow-num {
    color: var(--text-secondary);
}

.av-proroles__qrow-pill {
    margin-left: auto;
}

.av-proroles__qrow-arrow {
    flex-shrink: 0;
    color: var(--text-secondary);
}

/* Status dots (rail + queue) */
.av-proroles__dot {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: transparent;
}

.av-proroles__dot--expired {
    background: var(--color-error);
}

.av-proroles__dot--soon {
    background: var(--color-warning);
}

/* Master-detail grid */
.av-proroles__grid {
    display: grid;
    grid-template-columns: 212px minmax(0, 1fr);
}

.av-proroles__side {
    border-right: 0.5px solid var(--avp-border);
    background: var(--surface-1);
}

.av-proroles__filter {
    padding: 8px 10px 0;
}

.av-proroles__filter-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-radius: var(--radius-lg);
    cursor: pointer;
    color: var(--text-secondary);
}

.av-proroles__filter-btn--active {
    background: rgb(from var(--color-error) r g b / 0.10);
    color: var(--color-error);
}

.av-proroles__rail {
    padding: 8px;
}

.av-proroles__role {
    display: flex;
    gap: 7px;
    padding: 9px 10px;
    margin-bottom: 4px;
    border-radius: var(--radius-lg);
    cursor: pointer;
}

.av-proroles__role--active {
    background: var(--surface-2);
    box-shadow: inset 2px 0 0 var(--color-primary-500);
}

.av-proroles__role > .av-proroles__dot {
    margin-top: 5px;
}

.av-proroles__role-main {
    min-width: 0;
}

.av-proroles__role-line {
    display: flex;
    align-items: center;
    gap: 5px;
}

.av-proroles__role-name {
    color: var(--text-primary);
}

.av-proroles__role-star {
    width: 12px;
    height: 12px;
    color: var(--color-primary-600);
}

.av-proroles__role-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
}

.av-proroles__flag {
    flex-shrink: 0;
}

/* Detail pane */
.av-proroles__detail {
    padding: 14px 16px;
    min-height: 300px;
}

.av-proroles__detail-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
}

.av-proroles__detail-name {
    color: var(--text-primary);
}

.av-proroles__detail-actions {
    margin-left: auto;
    display: flex;
    gap: 4px;
}

.av-proroles__detail-org {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

.av-proroles__detail-orglink {
    color: var(--color-primary-600);
}

.av-proroles__detail-orgname {
    color: var(--text-secondary);
}

.av-proroles__detail-sub {
    margin-bottom: 12px;
}

/* License card */
.av-lic-card {
    padding: 11px 12px;
    margin-bottom: 8px;
    border: 0.5px solid var(--avp-border);
    border-radius: var(--radius-lg);
}

.av-lic-card--expired {
    border-color: rgb(from var(--color-error) r g b / 0.45);
}

.av-lic-card--soon {
    border-color: rgb(from var(--color-warning) r g b / 0.45);
}

.av-lic-card--focus {
    border: 2px solid var(--color-primary-500);
}

.av-lic-card__head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.av-lic-card__num {
    color: var(--text-primary);
}

.av-lic-card__meta {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.av-lic-card__jur {
    padding: 7px 10px;
    background: var(--surface-1);
    border-radius: var(--radius-lg);
}

.av-lic-card__jur-row {
    display: flex;
    align-items: baseline;
    gap: 9px;
    padding: 4px 0;
}

.av-lic-card__jur-badge {
    flex-shrink: 0;
}

.av-lic-card__jur-counties {
    color: var(--text-primary);
}

.av-lic-card__renew {
    margin-top: 8px;
}

/* ─────────────────────────────────────────────────────────────────────────
   §104 ─── av-workhist — Work History as a vertical timeline.
   Positions ordered most-recent first; a rail (dot + connector) runs down the
   left, employment gaps surface as faint-lined chips, and each role's work
   contact info sits in an inset panel. Deep-links to tracked employers.
   Layout/color/spacing only — text metrics come from the Typo.* scale.
   ───────────────────────────────────────────────────────────────────────── */
.av-workhist {
    --awh-border: var(--color-gray-200);
    --awh-line: var(--color-gray-300);
    background: var(--surface-2);
    border: 0.5px solid var(--awh-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

html.dark .av-workhist {
    --awh-border: var(--color-dark-500);
    --awh-line: var(--color-dark-400);
}

.av-workhist__head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 16px;
    border-bottom: 0.5px solid var(--awh-border);
}

.av-workhist__head-icon {
    color: var(--color-primary-600);
}

.av-workhist__title {
    color: var(--text-primary);
}

.av-workhist__count {
    color: var(--text-secondary);
}

.av-workhist__add {
    margin-left: auto;
}

.av-workhist__empty {
    padding: 24px 16px;
}

/* Timeline grid: fixed rail column + flexible content column */
.av-workhist__timeline {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 0 14px;
    padding: 16px 16px 8px;
}

/* Rail cell — centers the dot / connector line */
.av-workhist__rail {
    position: relative;
    display: flex;
    justify-content: center;
    padding-top: 5px;
}

.av-workhist__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1.5px solid var(--awh-line);
    z-index: 1;
    margin-top: 1px;
}

.av-workhist__dot--current {
    width: 11px;
    height: 11px;
    background: var(--color-primary-500);
    border: none;
    box-shadow: 0 0 0 3px rgb(from var(--color-primary-500) r g b / 0.18);
    margin-top: 0;
}

.av-workhist__line {
    position: absolute;
    top: 16px;
    bottom: 0;
    width: 1.5px;
    background: var(--awh-line);
}

.av-workhist__line--faint {
    top: 0;
    opacity: 0.45;
}

/* Content cell */
.av-workhist__content {
    padding-bottom: 20px;
}

.av-workhist__pos-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.av-workhist__pos-title {
    color: var(--text-primary);
}

.av-workhist__actions {
    margin-left: auto;
    display: flex;
    gap: 4px;
}

.av-workhist__meta {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 3px;
}

.av-workhist__orglink {
    color: var(--color-primary-600);
}

.av-workhist__orgname {
    color: var(--text-secondary);
}

.av-workhist__sep {
    color: var(--text-muted);
}

.av-workhist__dates {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.av-workhist__dates-dur {
    color: var(--text-muted);
}

/* Inset contact panel */
.av-workhist__contact {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 9px;
    padding: 8px 11px;
    background: var(--surface-1);
    border-radius: var(--radius-md);
}

.av-workhist__contact-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-primary);
}

.av-workhist__contact-icon {
    color: var(--text-secondary);
}

.av-workhist__years {
    display: block;
    margin-top: 8px;
}

/* Employment-gap marker */
.av-workhist__gap {
    padding: 2px 0 16px;
}

.av-workhist__gap-chip {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--radius-sm);
    background: var(--surface-1);
    color: var(--text-muted);
}

/* ============================================================================
   §105 ─── av-tailux-group — group rows inside .av-tailux-table.

   For tables rendered with MudTable GroupBy: a tinted header row that separates
   each group, plus a muted modifier for rows that belong to the group visually
   but are not part of its subject (e.g. the platform account replicated into a
   tenant). Scoped under .av-tailux-table so no other MudTable is affected.

   Typography lives in the markup (Typo.*) per the canonical scale — this block
   only declares color, spacing and opacity.
   ========================================================================= */

/* The band is primary-tinted, not gray: the column header is already gray and the
   data rows sit on the card surface, so a third gray would read as a fourth shade
   of the same thing. The tint is the only cue that says "this is a divider, not a
   record". :has() reaches the whole <tr> so the expand-toggle cell MudTable renders
   beside the template is tinted too — otherwise the band starts mid-row. */
.av-tailux-table .mud-table-body .mud-table-row:has(> .av-tailux-group),
.av-tailux-table .mud-table-body .mud-table-row:has(> .av-tailux-group):hover {
  background: rgb(from var(--color-primary-500) r g b / 0.08) !important;
}

html.dark .av-tailux-table .mud-table-body .mud-table-row:has(> .av-tailux-group),
html.dark
  .av-tailux-table
  .mud-table-body
  .mud-table-row:has(> .av-tailux-group):hover {
  background: rgb(from var(--color-primary-400) r g b / 0.16) !important;
}

.av-tailux-table .mud-table-body .mud-table-row:has(> .av-tailux-group) .mud-table-cell {
  border-top: 1px solid rgb(from var(--color-primary-500) r g b / 0.25);
  border-bottom: 1px solid rgb(from var(--color-primary-500) r g b / 0.25);
}

html.dark
  .av-tailux-table
  .mud-table-body
  .mud-table-row:has(> .av-tailux-group)
  .mud-table-cell {
  border-top-color: rgb(from var(--color-primary-400) r g b / 0.3);
  border-bottom-color: rgb(from var(--color-primary-400) r g b / 0.3);
}

/* The expand chevron is rendered INSIDE this cell, not in a cell of its own, so
   this padding-left is what sets its distance from the row's left edge. Widening
   the first column does nothing to it — that only moves the checkboxes of the
   data rows. */
.av-tailux-table .av-tailux-group {
  padding: 8px 16px 8px 40px;
}

/* .av-table--no-select-all — drops the header's master checkbox. Opt-in, for
   tables where "select every row on the page" is not a meaningful action: in a
   grouped table one click would sweep across several tenants at once.

   The CELL stays and only its control is hidden — removing the cell would take
   the column out of alignment with the row checkboxes below it. MudTable has no
   parameter for this; MultiSelection renders the master checkbox unconditionally.
   Targets `> *` rather than a specific class so it holds whatever wrapper Mud
   renders inside the cell. */
.av-table--no-select-all .mud-table-head .mud-table-cell-checkbox > * {
  display: none;
}

/* The selection column holds a checkbox and nothing else, so it is pinned to a
   narrow centred box instead of sizing itself to whatever the header label needs.
   It does NOT govern the group chevron — that one lives inside the group cell and
   is positioned by its padding-left, above.

   Table layout only: below the breakpoint Mud collapses cells into DataLabel
   cards, where a fixed cell width would squash the row. */
@media (min-width: 600px) {
  .av-tailux-table:has(.av-tailux-group) .mud-table-cell.mud-table-cell-checkbox {
    width: 56px;
    min-width: 56px;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center;
  }
}

/* Vertical centring of cell content.

   Mud ships `.mud-table-cell .mud-checkbox { margin: -4px }` — a negative margin
   that pulls the checkbox up, which is why it reads higher than the chevron and
   the text on the same row. Resetting it is the actual fix; the explicit
   vertical-align just pins the cells so nothing further up the cascade can put
   them back on a baseline.

   Specificity (0,3,0) beats Mud's (0,2,0), so no !important is needed. */
.av-tailux-table .mud-table-cell {
  vertical-align: middle;
}

.av-tailux-table .mud-table-cell .mud-checkbox {
  margin: 0;
}

/* RTL — the header "select all" label carries Mud's global `margin-right:16px`
   (a radio-group spacing hack, avalme-v1.css §0). In RTL that physical margin
   shoves the header checkbox left, off the body axis. Zero it for the header
   checkbox ONLY (scoped to `th.av-col-checkbox`) — body rows stay untouched. */
[dir="rtl"] th.av-col-checkbox .mud-checkbox {
  margin-right: 0 !important;
}

/* Left accent stripe — same 3 px signature the selected row and the nav rail use,
   so "structural marker" reads the same everywhere in the app. It hangs off the
   row's FIRST cell, not off the template's cell: MudTable renders the expand
   toggle in a cell of its own ahead of the template, and anchoring to the template
   would start the stripe mid-row. */
.av-tailux-table
  .mud-table-body
  .mud-table-row:has(> .av-tailux-group)
  > .mud-table-cell:first-child {
  position: relative;
}

.av-tailux-table
  .mud-table-body
  .mud-table-row:has(> .av-tailux-group)
  > .mud-table-cell:first-child::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--color-primary-600);
}

html.dark
  .av-tailux-table
  .mud-table-body
  .mud-table-row:has(> .av-tailux-group)
  > .mud-table-cell:first-child::before {
  background: var(--color-primary-400);
}

/* Icon + expand toggle follow the band's tint instead of the body text color. */
.av-tailux-table .av-tailux-group .mud-icon-root,
.av-tailux-table
  .mud-table-body
  .mud-table-row:has(> .av-tailux-group)
  .mud-button-root
  .mud-icon-root {
  color: var(--color-primary-600);
}

html.dark .av-tailux-table .av-tailux-group .mud-icon-root,
html.dark
  .av-tailux-table
  .mud-table-body
  .mud-table-row:has(> .av-tailux-group)
  .mud-button-root
  .mud-icon-root {
  color: var(--color-primary-300);
}

.av-tailux-group__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.av-tailux-group__name {
  color: var(--color-primary-800);
}

html.dark .av-tailux-group__name {
  color: var(--color-primary-100);
}

.av-tailux-group__meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.av-tailux-group__count {
  color: var(--color-primary-700);
}

html.dark .av-tailux-group__count {
  color: var(--color-primary-200);
}

/* Row present in the group but not part of its subject — dimmed, never hidden,
   so the user can still see and act on it. */
.av-tailux-table .mud-table-body .mud-table-row.av-tailux-row--muted .mud-table-cell {
  opacity: 0.65;
}

.av-tailux-table
  .mud-table-body
  .mud-table-row.av-tailux-row--muted:hover
  .mud-table-cell {
  opacity: 1;
}

/* §102 ─── av-phone — style-neutral read-only phone display (AvPhoneNumber).
   Renders inline and INHERITS font-family / size / weight / color from the host
   so it matches any context (table cell, card, header, body text). Only layout
   and de-emphasis live here — never declare font metrics or color, that would
   defeat the adaptation. To pin a look, style the host or pass a Class. */
.av-phone__ext {
    margin-inline-start: 0.25rem;
    opacity: 0.7;   /* de-emphasis via alpha only — size/family/color stay inherited */
}

.av-phone__copy.mud-icon-button {
    padding: 2px;              /* subtle; does not dictate the text style */
    vertical-align: middle;
}

/* §107 ─── AvPhoneNumber (.av-phone) context styling. The component is style-neutral, so the channel
   contexts restore the value color + long-number wrap the old baked-in class used to provide. Low
   specificity (one descendant) so a per-site override — a compound .av-phone.<class> — can still win. */
.av-channel-summary__main .av-phone,
.av-channel-viewlist__body .av-phone {
    color: var(--color-gray-900);
    overflow-wrap: anywhere;
}

html.dark .av-channel-summary__main .av-phone,
html.dark .av-channel-viewlist__body .av-phone {
    color: var(--color-dark-50);
}

/* §109 ─── av-option-card — botón-tarjeta "elegí una opción" dentro de un form dialog.
   La etiqueta es un bloque TÍTULO + DESCRIPCIÓN, así que la tarjeta se dimensiona por su
   contenedor (width: 100%) y la descripción envuelve. Medirla por el texto es lo que
   ensanchaba el diálogo y disparaba el scroll horizontal según el idioma (WI #1360):
   .av-tag trae `white-space: nowrap` + ancho shrink-to-fit, correcto para una píldora de
   una palabra y no para dos líneas. El min-height mantiene las tarjetas idénticas con 1 o
   2 líneas de descripción, así cambiar de idioma nunca reflowea el diálogo.
   Skin único y neutro: las opciones se distinguen por icono + título, no por color. */
.av-option-card.mud-button-root {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 84px;
    align-items: center;
    justify-content: flex-start;
    padding: 12px 16px;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-lg);
    background-color: transparent;
    color: var(--color-gray-900);
    text-align: start;
    white-space: normal;
    overflow-wrap: anywhere;
    transition: background-color 150ms ease, border-color 150ms ease;
}

/* Mud mete los hijos en .mud-button-label, que hereda el flex/centrado del root — se
   redefine para que el icono y el bloque de texto queden en fila, alineados a la izquierda. */
.av-option-card.mud-button-root .mud-button-label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    width: 100%;
    min-width: 0;
    text-align: start;
}

/* El gap del label maneja la separación; los márgenes que Mud aplica al StartIcon la
   descuadrarían. */
.av-option-card.mud-button-root .mud-button-icon-start {
    margin: 0;
    flex-shrink: 0;
    color: var(--color-gray-500);
}

.av-option-card.mud-button-root .mud-button-icon-start .mud-icon-root,
.av-option-card.mud-button-root .mud-button-icon-start svg {
    width: 24px;
    height: 24px;
}

/* min-width: 0 es lo que deja al texto envolver en lugar de empujar el ancho del flex item. */
.av-option-card__text {
    min-width: 0;
}

.av-option-card.mud-button-root:hover:not(:disabled),
.av-option-card.mud-button-root:focus-visible:not(:disabled) {
    border-color: var(--color-primary-500);
    background-color: rgb(from var(--color-primary-500) r g b / 0.06);
}

.av-option-card.mud-button-root:disabled,
.av-option-card.mud-button-root.mud-disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

html.dark .av-option-card.mud-button-root {
    border-color: var(--color-dark-450);
    color: var(--color-dark-50);
}

html.dark .av-option-card.mud-button-root .mud-button-icon-start {
    color: var(--color-dark-300);
}

html.dark .av-option-card.mud-button-root:hover:not(:disabled),
html.dark .av-option-card.mud-button-root:focus-visible:not(:disabled) {
    border-color: var(--color-primary-400);
    background-color: rgb(from var(--color-primary-400) r g b / 0.14);
}

/* ============================================================================
   §50 — Background-task center (WI #1389)

   Own namespace on purpose: the bell's `.notification-badge*` rules in §8.2
   hard-code red, so reusing them would paint the "running" state red too.
   ============================================================================ */

/* §50.1 — AppBar trigger. The icon mounts and unmounts with the task list, so
   it fades in rather than popping into the action cluster. Hover matches
   .notification-bell-btn so the two triggers feel like the same family. */
.av-bgtask-icon {
    animation: av-bgtask-fade-in 180ms ease-out;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.av-bgtask-icon:hover {
    transform: scale(1.05);
}

@keyframes av-bgtask-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* §50.2 — Dot. Geometry, ring and offset copied from the bell (§8.2) so both
   read as one family; the COLOUR is the only thing that differs, and it is
   what carries the meaning.

   The ring is what makes it radiate: a box-shadow growing 0 → 6px while its
   alpha falls to zero. An opacity blink alone looks flat next to the bell.

   The colour is NOT baked into the keyframes — it comes from --av-bgtask-ring,
   set by the state modifier, so one animation serves both states. */
.av-bgtask-badge .mud-badge.mud-badge-dot {
    --av-bgtask-ring: var(--color-info);
    width: 10px;
    height: 10px;
    min-width: 10px;
    min-height: 10px;
    padding: 0;
    border-radius: 9999px;
    border: 2px solid var(--color-white);
    box-shadow: 0 0 0 1px rgb(0 0 0 / 0.04);
    animation: av-bgtask-badge-pulse 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

html.dark .av-bgtask-badge .mud-badge.mud-badge-dot {
    border-color: var(--color-dark-700);
    box-shadow: 0 0 0 1px rgb(0 0 0 / 0.4);
}

/* Failure radiates in red — same reading as the bell's "this needs you". */
.av-bgtask-badge--failed .mud-badge.mud-badge-dot {
    --av-bgtask-ring: var(--color-error);
}

@keyframes av-bgtask-badge-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow:
            0 0 0 0 rgb(from var(--av-bgtask-ring) r g b / 0.55),
            0 0 0 1px rgb(0 0 0 / 0.04);
    }

    50% {
        transform: scale(1.15);
        box-shadow:
            0 0 0 6px rgb(from var(--av-bgtask-ring) r g b / 0),
            0 0 0 1px rgb(0 0 0 / 0.04);
    }
}

/* Same offset as the bell's dot, so both sit identically over their icon. */
.av-bgtask-badge .mud-badge.mud-badge-top.right.mud-badge-overlap {
    inset: auto auto calc(100% - 14px) calc(100% - 12px) !important;
}

@media (prefers-reduced-motion: reduce) {
    .av-bgtask-icon,
    .av-bgtask-badge .mud-badge.mud-badge-dot {
        animation: none;
    }
}

/* §50.3 — Row inside the drawer. */
.av-bgtask {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
}

html.dark .av-bgtask {
    border-color: var(--color-dark-500);
    background-color: var(--color-dark-700);
}

.av-bgtask__title {
    color: var(--color-gray-800);
}

html.dark .av-bgtask__title {
    color: var(--color-dark-100);
}

.av-bgtask__bar {
    margin-top: 2px;
}

.av-bgtask__counter,
.av-bgtask__error {
    color: var(--color-gray-500);
}

html.dark .av-bgtask__counter,
html.dark .av-bgtask__error {
    color: var(--color-dark-300);
}

.av-bgtask__error {
    color: var(--color-error);
}

html.dark .av-bgtask__error {
    color: var(--color-error-lighter);
}

.av-bgtask__actions {
    margin-top: 2px;
}

/* =============================================================================
   §60 — Contact Briefing drawer skin (light hero). Loaded last → this is the
   single source of truth; it supersedes the earlier av-briefing-* rules.
   Consumes the MudBlazor palette vars so it follows theme automatically.
   ============================================================================= */

.av-briefing-drawer {
    --av-pad: 20px;
    --av-radius: 12px;
    --av-radius-sm: 8px;
    --av-label-col: 116px;
    --av-hero-from: #4f46e5;
    --av-hero-to: #7c3aed;
    --av-surface: var(--mud-palette-surface);
    --av-muted-bg: var(--mud-palette-background-grey);
    --av-line: var(--mud-palette-lines-default);
    --av-text: var(--mud-palette-text-primary);
    --av-text-dim: var(--mud-palette-text-secondary);
    --av-fs-label: .6875rem;
    --av-fs-meta: .75rem;
    --av-fs-body: .8125rem;
    --av-fs-title: 1.0625rem;

    background: var(--av-surface);
    border-left: 1px solid var(--av-line);
    box-shadow: -8px 0 32px rgb(15 23 42 / 12%);
}

.av-briefing-wrapper { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; }

/* ---------- HERO (light) ---------- */
.av-briefing-hero {
    position: relative; flex-shrink: 0; overflow: hidden;
    padding: 14px var(--av-pad) 16px;
    color: var(--av-text); background: var(--av-surface);
    border-bottom: 1px solid var(--av-line);
}
.av-briefing-hero-orb { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(36px); }
.av-briefing-hero-orb-1 {
    top: -80px; right: -50px; width: 190px; height: 190px; opacity: .5;
    background: radial-gradient(circle, color-mix(in srgb, var(--mud-palette-primary) 22%, transparent) 0%, transparent 70%);
}
.av-briefing-hero-orb-2 { display: none; }

.av-briefing-close {
    position: absolute; top: 11px; right: 12px; z-index: 2;
    display: grid; place-items: center; width: 30px; height: 30px; padding: 0;
    color: var(--av-text-dim); cursor: pointer; background: transparent; border: 0;
    border-radius: var(--av-radius-sm); transition: background .15s ease, color .15s ease;
}
.av-briefing-close:hover { color: var(--av-text); background: var(--av-muted-bg); }
.av-briefing-close:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
/* RTL — the close button moves to the left edge so the (now right-aligned)
   hero tagline no longer collides with it. */
.mud-rtl .av-briefing-close,
[dir="rtl"] .av-briefing-close { left: 12px; right: auto; }
.mud-rtl .av-briefing-hero-orb-1,
[dir="rtl"] .av-briefing-hero-orb-1 { right: auto; left: -50px; }

.av-briefing-hero-content { position: relative; z-index: 1; display: flex; gap: 14px; align-items: flex-start; }

.av-briefing-avatar {
    display: grid; place-items: center; flex-shrink: 0;
    width: 56px; height: 56px; overflow: hidden;
    font-size: 1.0625rem; font-weight: 600; color: #fff; letter-spacing: -.01em;
    background: linear-gradient(135deg, var(--av-hero-from) 0%, var(--av-hero-to) 100%);
    border-radius: var(--av-radius); box-shadow: 0 1px 2px rgb(15 23 42 / 8%);
}
.av-briefing-avatar img {
    width: 100%; height: 100%; background: #fff;
    box-shadow: inset 0 0 0 1px var(--av-line); object-fit: contain;
}

.av-briefing-hero-info { min-width: 0; flex: 1; }
.av-briefing-hero-tagline {
    display: flex; gap: 5px; align-items: center; margin-bottom: 10px;
    font-size: var(--av-fs-label); font-weight: 600; color: var(--av-text-dim);
    letter-spacing: .07em; text-transform: uppercase;
}
.av-briefing-hero-tagline .mud-icon-root { width: .875rem; height: .875rem; color: var(--mud-palette-primary); }
/* Higher specificity + explicit family so the Avalme brand's `[data-theme-brand] h2`
   (Montserrat 32px) doesn't blow up the name. */
.av-briefing-drawer .av-briefing-name {
    margin: 0; font-size: 1.0625rem; font-weight: 600;
    line-height: 1.25; color: var(--av-text); letter-spacing: -.01em;
    font-family: var(--font-sans);
}
.av-briefing-nickname { margin-left: 6px; font-size: var(--av-fs-meta); font-weight: 400; color: var(--av-text-dim); }

.av-briefing-hero-meta, .av-briefing-hero-contact {
    display: flex; flex-wrap: wrap; gap: 3px 11px; margin-top: 6px;
    font-size: var(--av-fs-meta); color: var(--av-text-dim);
}
.av-briefing-hero-meta > span, .av-briefing-hero-contact > div {
    display: inline-flex; gap: 4px; align-items: center; min-width: 0;
}
.av-briefing-hero-meta .mud-icon-root, .av-briefing-hero-contact .mud-icon-root {
    width: .875rem; height: .875rem; color: var(--mud-palette-text-disabled);
}
.av-briefing-hero-contact { color: var(--mud-palette-primary); }
.av-briefing-hero-contact .mud-icon-root { color: var(--mud-palette-primary); opacity: .7; }

.av-briefing-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.av-briefing-badge {
    display: inline-flex; gap: 5px; align-items: center; padding: 2px 9px;
    font-size: var(--av-fs-label); font-weight: 600; color: var(--av-text-dim);
    background: var(--av-muted-bg); border: 1px solid var(--av-line); border-radius: 999px;
}
.av-briefing-badge::before { width: 6px; height: 6px; content: ""; background: currentcolor; border-radius: 50%; opacity: .75; }
.av-briefing-badge--plain::before { display: none; }
.av-briefing-badge--success {
    color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 10%, var(--av-surface));
    border-color: color-mix(in srgb, var(--mud-palette-success) 28%, var(--av-line));
}
.av-briefing-badge--primary {
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, var(--av-surface));
    border-color: color-mix(in srgb, var(--mud-palette-primary) 28%, var(--av-line));
}
.av-briefing-badge--warning {
    color: var(--mud-palette-warning);
    background: color-mix(in srgb, var(--mud-palette-warning) 10%, var(--av-surface));
    border-color: color-mix(in srgb, var(--mud-palette-warning) 28%, var(--av-line));
}
.av-briefing-badge--muted { opacity: .7; }

/* ---------- BODY ---------- */
.av-briefing-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.av-briefing-body::-webkit-scrollbar { width: 8px; }
.av-briefing-body::-webkit-scrollbar-thumb { background: var(--av-line); border: 2px solid var(--av-surface); border-radius: 999px; }
.av-briefing-section { padding: 14px var(--av-pad); border-bottom: 1px solid var(--av-line); }
.av-briefing-section:last-child { border-bottom: 0; }
.av-briefing-section-header {
    display: flex; gap: 6px; margin-bottom: 9px;
    font-size: var(--av-fs-label); font-weight: 600; color: var(--av-text-dim);
    letter-spacing: .07em; text-transform: uppercase;
}
.av-briefing-section-header .mud-icon-root { width: .875rem; height: .875rem; }
/* Household section subtitle: the opened contact's own relation ("Hill's Family · son of Samuel Hall").
   Italic (state modifier) + family icon to flag it as THIS contact's role. */
.av-briefing-household-self { display: inline-flex; align-items: center; gap: 5px; margin: -3px 0 10px; color: var(--av-text-dim); font-style: italic; }
.av-briefing-household-self .mud-icon-root { width: .875rem; height: .875rem; flex-shrink: 0; }

/* ---------- SIGNALS ---------- */
.av-briefing-signals { display: flex; flex-direction: column; gap: 7px; padding-top: 14px; background: var(--av-muted-bg); }
.av-briefing-signal {
    display: flex; gap: 9px; align-items: flex-start; padding: 9px 11px;
    background: var(--av-surface); border: 1px solid var(--av-line);
    border-left: 3px solid var(--mud-palette-text-disabled); border-radius: var(--av-radius-sm);
}
.av-briefing-signal .mud-icon-root { width: 1rem; height: 1rem; margin-top: 1px; }
.av-briefing-signal > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.av-briefing-signal strong { font-size: var(--av-fs-body); font-weight: 600; line-height: 1.35; color: var(--av-text); }
.av-briefing-signal span { font-size: var(--av-fs-meta); line-height: 1.4; color: var(--av-text-dim); }
.av-briefing-signal-info, .av-briefing-signal-low { border-left-color: var(--mud-palette-info); }
.av-briefing-signal-info .mud-icon-root, .av-briefing-signal-low .mud-icon-root { color: var(--mud-palette-info); }
.av-briefing-signal-warn, .av-briefing-signal-warning, .av-briefing-signal-medium {
    border-left-color: var(--mud-palette-warning);
    background: color-mix(in srgb, var(--mud-palette-warning) 7%, var(--av-surface));
}
.av-briefing-signal-warn .mud-icon-root, .av-briefing-signal-warning .mud-icon-root, .av-briefing-signal-medium .mud-icon-root { color: var(--mud-palette-warning); }
.av-briefing-signal-error, .av-briefing-signal-critical, .av-briefing-signal-high {
    border-left-color: var(--mud-palette-error);
    background: color-mix(in srgb, var(--mud-palette-error) 7%, var(--av-surface));
}
.av-briefing-signal-error .mud-icon-root, .av-briefing-signal-critical .mud-icon-root, .av-briefing-signal-high .mud-icon-root { color: var(--mud-palette-error); }
.av-briefing-signal-success { border-left-color: var(--mud-palette-success); }
.av-briefing-signal-success .mud-icon-root { color: var(--mud-palette-success); }

/* ---------- ROWS ---------- */
.av-briefing-pipeline { display: flex; flex-direction: column; }
.av-briefing-row {
    display: grid; grid-template-columns: var(--av-label-col) 1fr; gap: 12px;
    align-items: baseline; padding: 4px 0; font-size: var(--av-fs-body); color: var(--av-text);
}
.av-briefing-row:not(:has(.av-briefing-row-label)) { grid-template-columns: 1fr; }
.av-briefing-row-label { font-size: var(--av-fs-meta); color: var(--av-text-dim); }
.av-briefing-row > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.av-briefing-nexttask { font-weight: 600; color: var(--mud-palette-primary); }

/* ---------- LISTS ---------- */
.av-briefing-list { display: flex; flex-direction: column; gap: 6px; padding: 0; margin: 0; list-style: none; }
.av-briefing-list > li {
    display: flex; gap: 8px; align-items: baseline;
    font-size: var(--av-fs-body); line-height: 1.45; color: var(--av-text-dim);
}
.av-briefing-list > li strong { font-weight: 600; color: var(--av-text); }
.av-briefing-list > li > .mud-icon-root { width: .9375rem; height: .9375rem; color: var(--av-text-dim); transform: translateY(2px); }

/* ---------- KINSHIP (ego-centric family groups) ---------- */
.av-briefing-kin-group + .av-briefing-kin-group { margin-top: 13px; }
.av-briefing-kin-heading {
    display: block; margin: 0 0 5px;
    font-size: var(--av-fs-label); font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: var(--av-text-dim);
}
.av-briefing-kin-list { display: flex; flex-direction: column; gap: 5px; padding: 0; margin: 0; list-style: none; }
.av-briefing-kin-list > li { display: flex; flex-direction: column; gap: 2px; font-size: var(--av-fs-body); line-height: 1.45; }
.av-briefing-kin-list > li strong { font-weight: 600; color: var(--av-text); }
.av-briefing-kin-role { color: var(--av-text-dim); }
.av-briefing-kin-note {
    margin-left: 3px; padding-left: 9px;
    border-left: 2px solid var(--av-line); color: var(--av-text-dim);
    font-size: var(--av-fs-label); line-height: 1.35;
}
.av-briefing-kin-divider { margin: 13px 0; border-color: var(--av-line); }

/* ---------- FAMILY NUCLEI (household-group briefing) ---------- */
.av-briefing-nucleus + .av-briefing-nucleus { margin-top: 15px; }
.av-briefing-nucleus__title { font-size: var(--av-fs-body); line-height: 1.4; }
.av-briefing-nucleus__title strong { font-weight: 600; color: var(--av-text); }
.av-briefing-nucleus__amp { color: var(--av-text-dim); margin: 0 4px; }
.av-briefing-nucleus__married { display: block; margin: 1px 0 7px; font-size: var(--av-fs-label); color: var(--av-text-dim); }
.av-briefing-nucleus__rows { display: flex; flex-direction: column; gap: 5px; padding: 0; margin: 0; list-style: none; }
.av-briefing-nucleus__rows > li { display: flex; gap: 12px; align-items: baseline; font-size: var(--av-fs-body); line-height: 1.4; color: var(--av-text-dim); }
.av-briefing-nucleus__rows > li strong { font-weight: 600; color: var(--av-text); }
.av-briefing-nucleus__role { flex: 0 0 48px; color: var(--av-text-dim); font-size: var(--av-fs-label); text-transform: capitalize; }
.av-briefing-nucleus__empty { color: var(--av-text-dim); font-style: italic; }
.av-briefing-nucleus__others { margin-top: 15px; }
/* Address aligned under the section-header text (icon .875rem + 6px gap). */
.av-briefing-address {
    margin: 0; padding-left: calc(0.875rem + 6px);
    font-size: var(--av-fs-body); line-height: 1.5; color: var(--av-text); overflow-wrap: anywhere;
}

/* Family Members table — primary role chip + "+N más" (tooltip breakdown). */
.av-fam-role { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.av-fam-role__chip {
    display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 9999px;
    background: rgb(from var(--color-primary-500) r g b / 0.10); color: var(--color-primary-700);
    text-transform: capitalize; white-space: nowrap;
}
html.dark .av-fam-role__chip {
    background: rgb(from var(--color-primary-400) r g b / 0.16); color: var(--color-primary-300);
}
.av-fam-role__more {
    color: var(--color-gray-500); cursor: default;
    text-decoration: underline dotted; text-underline-offset: 2px;
}
html.dark .av-fam-role__more { color: var(--color-dark-300); }
.av-fam-role__pop { display: flex; flex-direction: column; gap: 3px; text-align: left; max-width: 280px; }

/* ---------- LOANS ---------- */
.av-briefing-loan {
    display: flex; flex-direction: column; gap: 5px; padding: 10px 11px;
    background: var(--av-muted-bg); border: 1px solid var(--av-line); border-radius: var(--av-radius-sm);
}
.av-briefing-loan + .av-briefing-loan { margin-top: 7px; }
.av-briefing-loan__top { display: flex; gap: 8px; width: 100%; align-items: center; justify-content: space-between; }
.av-briefing-loan__top strong { font-size: var(--av-fs-body); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--av-text); }
.av-briefing-loan__status {
    display: inline-flex; gap: 5px; align-items: center; flex-shrink: 0;
    font-size: var(--av-fs-label); font-weight: 600; color: var(--av-text-dim);
}
.av-briefing-loan__dot { width: 7px; height: 7px; border-radius: 50%; }
.av-briefing-loan__roles { display: flex; flex-wrap: wrap; gap: 5px; }
.av-briefing-loan__role {
    padding: 1px 7px; font-size: .625rem; font-weight: 600; line-height: 1.6;
    color: var(--mud-palette-primary); letter-spacing: .05em;
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent); border-radius: 999px;
}
.av-briefing-loan__meta { font-size: var(--av-fs-meta); color: var(--av-text-dim); }

/* ---------- WORK HISTORY (timeline) ---------- */
.av-briefing-timeline-summary { color: var(--av-text-dim); margin: -2px 0 9px; }
.av-briefing-timeline { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 0 0 0 3px; margin: 0; list-style: none; }
.av-briefing-timeline__item { position: relative; display: flex; gap: 12px; }
.av-briefing-timeline__item::before {
    content: ""; position: absolute; left: 4px; top: 15px; bottom: -14px;
    width: 2px; background: var(--av-line);
}
.av-briefing-timeline__item:last-child::before { display: none; }
.av-briefing-timeline__dot {
    position: relative; z-index: 1; flex-shrink: 0; width: 10px; height: 10px; margin-top: 5px;
    border-radius: 50%; background: var(--av-muted-bg); border: 2px solid var(--av-text-dim);
}
.av-briefing-timeline__item--current .av-briefing-timeline__dot {
    background: var(--mud-palette-primary); border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
}
.av-briefing-timeline__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.av-briefing-timeline__title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.av-briefing-timeline__title { font-size: var(--av-fs-body); font-weight: 600; color: var(--av-text); }
.av-briefing-timeline__org { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--av-fs-meta); color: var(--av-text); }
.av-briefing-timeline__sep { color: var(--av-text-dim); }
.av-briefing-timeline__dates { font-size: var(--av-fs-meta); color: var(--av-text-dim); }
.av-briefing-timeline__dur { color: var(--av-text-dim); }
.av-briefing-timeline__badge {
    display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px;
    font-size: var(--av-fs-label); font-weight: 600; letter-spacing: .03em; line-height: 1.6; flex-shrink: 0;
}
.av-briefing-timeline__badge--current {
    color: var(--mud-palette-success); background: color-mix(in srgb, var(--mud-palette-success) 13%, transparent);
}
.av-briefing-timeline__badge--muted {
    color: var(--mud-palette-warning); background: color-mix(in srgb, var(--mud-palette-warning) 15%, transparent);
}

/* ---------- NOTES ---------- */
.av-briefing-notes { display: flex; flex-direction: column; gap: 8px; padding: 0; margin: 0; list-style: none; }
.av-briefing-notes li {
    padding: 9px 11px; background: var(--av-muted-bg);
    border-left: 3px solid var(--av-line); border-radius: 0 var(--av-radius-sm) var(--av-radius-sm) 0;
}
.av-briefing-notes p { margin: 0; font-size: var(--av-fs-body); line-height: 1.55; color: var(--av-text); white-space: pre-line; }

/* ---------- PREFERENCES ---------- */
.av-briefing-pref-group + .av-briefing-pref-group { margin-top: 12px; }
.av-briefing-pref-label { display: block; margin-bottom: 6px; font-size: var(--av-fs-meta); color: var(--av-text-dim); }
.av-briefing-chip-group { display: flex; flex-wrap: wrap; gap: 6px; }
.av-briefing-chip {
    padding: 3px 10px; font-size: var(--av-fs-meta); font-weight: 500; color: var(--av-text);
    background: var(--av-muted-bg); border: 1px solid var(--av-line); border-radius: 999px;
}
.av-briefing-availability { width: 100%; font-size: var(--av-fs-meta); border-collapse: separate; border-spacing: 3px; table-layout: fixed; }
.av-briefing-availability__label-col { width: 88px; }
.av-briefing-availability th {
    padding: 2px 0; font-size: .625rem; font-weight: 600; color: var(--av-text-dim);
    text-align: center; letter-spacing: .04em; text-transform: uppercase;
}
.av-briefing-availability td { height: 26px; text-align: center; background: var(--av-muted-bg); border-radius: 5px; }
.av-briefing-availability td.is-on { color: var(--mud-palette-primary-text, #fff); background: var(--mud-palette-primary); }
.av-briefing-availability td .mud-icon-root { width: .875rem; height: .875rem; stroke-width: 2.5; }
.av-briefing-availability-label {
    display: flex; flex-direction: column; padding-right: 6px !important;
    text-align: left !important; background: transparent !important;
}
.av-briefing-availability-label strong { font-weight: 600; color: var(--av-text); }
.av-briefing-availability-label span { font-size: .625rem; color: var(--av-text-dim); }

/* ---------- FOOTER ---------- */
.av-briefing-footer {
    display: grid; flex-shrink: 0; grid-template-columns: repeat(4, 1fr); gap: 7px;
    padding: 12px var(--av-pad); background: var(--av-muted-bg); border-top: 1px solid var(--av-line);
}
.av-briefing-action-btn {
    display: flex; flex-direction: column; gap: 3px; align-items: center; justify-content: center;
    padding: 8px 4px; font-family: inherit; font-size: var(--av-fs-label); font-weight: 600;
    color: var(--av-text-dim); text-decoration: none; cursor: pointer;
    background: var(--av-surface); border: 1px solid var(--av-line); border-radius: var(--av-radius-sm);
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.av-briefing-action-btn .mud-icon-root { width: 1rem; height: 1rem; }
.av-briefing-action-btn:hover:not([disabled]) {
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 7%, var(--av-surface));
    border-color: color-mix(in srgb, var(--mud-palette-primary) 35%, var(--av-line));
}
.av-briefing-action-btn:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.av-briefing-action-btn[disabled] { cursor: not-allowed; opacity: .45; }

/* ---------- SKELETON (loading) ---------- */
.av-briefing-skeleton {
    position: relative; overflow: hidden;
    background: var(--av-muted-bg);
    border-radius: var(--av-radius-sm);
}
.av-briefing-skeleton::after {
    position: absolute; inset: 0; content: "";
    background: linear-gradient(90deg, transparent, rgb(from var(--av-surface) r g b / .7), transparent);
    transform: translateX(-100%);
    animation: av-briefing-shimmer 1.4s ease-in-out infinite;
}
@keyframes av-briefing-shimmer { to { transform: translateX(100%); } }

.av-briefing-skel-avatar { flex-shrink: 0; width: 56px; height: 56px; border-radius: var(--av-radius); }
.av-briefing-skel-lines { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; padding-top: 4px; }
.av-briefing-skel-line { height: 11px; border-radius: 999px; }
.av-briefing-skel-line--title { height: 15px; width: 55%; }
.av-briefing-skel-line--meta { width: 72%; }
.av-briefing-skel-line--contact { width: 46%; }
.av-briefing-skel-section { display: flex; flex-direction: column; gap: 9px; padding: 14px var(--av-pad); border-bottom: 1px solid var(--av-line); }
.av-briefing-skel-eyebrow { width: 34%; height: 9px; border-radius: 999px; }
.av-briefing-skel-card { height: 52px; border-radius: var(--av-radius-sm); }
.av-briefing-skel-row { height: 13px; border-radius: 999px; }
.av-briefing-skel-row--w80 { width: 80%; }
.av-briefing-skel-row--w60 { width: 60%; }
.av-briefing-skel-row--w70 { width: 70%; }

@media (prefers-reduced-motion: reduce) {
    .av-briefing-skeleton::after { animation: none; }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 600px) {
    .av-briefing-drawer { --av-pad: 16px; --av-label-col: 96px; }
    .av-briefing-row { grid-template-columns: 1fr; gap: 1px; }
    .av-briefing-availability__label-col { width: 68px; }
}

/* §110 ─── family structure text tree — indented descent view of the "Current Family Structure"
   card. Depth-per-generation indent via --av-tree-depth; couples joined by a heart on one row. */
.av-family-tree {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.av-family-tree__loading {
    display: flex;
    justify-content: center;
    padding: 24px 0;
}

.av-family-tree__row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    padding-left: calc(var(--av-tree-depth, 0) * 22px);
    min-width: 0;
}

.av-family-tree__connector {
    color: var(--color-gray-400);
    flex-shrink: 0;
}

html.dark .av-family-tree__connector {
    color: var(--color-dark-300);
}

.av-family-tree__unit {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex-wrap: wrap;
}

.av-family-tree__avatar.mud-avatar {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}
.av-family-tree__avatar-img.mud-image,
.av-family-tree__avatar-img {
    width: 26px;
    height: 26px;
    border-radius: 9999px;
    flex-shrink: 0;
    object-fit: cover;
    background: var(--color-gray-200);
}
html.dark .av-family-tree__avatar-img {
    background: var(--color-dark-500);
}

.av-family-tree__name.mud-typography {
    color: var(--color-gray-900);
}

html.dark .av-family-tree__name.mud-typography {
    color: var(--color-dark-50);
}

.av-family-tree__heart.mud-icon-root {
    width: 14px;
    height: 14px;
    color: var(--color-error);
    flex-shrink: 0;
}

.av-family-tree__others {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-gray-200);
}

html.dark .av-family-tree__others {
    border-top-color: var(--color-dark-500);
}

.av-family-tree__others-title.mud-typography {
    color: var(--color-gray-500);
}

html.dark .av-family-tree__others-title.mud-typography {
    color: var(--color-dark-300);
}

.av-family-tree__other-row.mud-typography {
    color: var(--color-gray-800);
}

html.dark .av-family-tree__other-row.mud-typography {
    color: var(--color-dark-100);
}

.av-family-tree__other-relation {
    color: var(--color-gray-500);
}

html.dark .av-family-tree__other-relation {
    color: var(--color-dark-300);
}

/* §111 ─── av-consent — account-activation consent form + its confirmation screen
   (WI #1381). Two surfaces the user meets back-to-back, so they share one visual
   language: a titled block, a read-only identity row, and a consent list where the
   REQUIRED item is visually distinguishable from the optional one.

   Typography is NOT declared here — every size comes from the canonical scale via
   `Typo.X` in the markup (CLAUDE.md §Typography scale). This section only owns
   color, spacing, border and radius. */

.av-consent {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Read-only identity row. Replaces the disabled MudTextField that used to hold the
   email: it is a DISPLAY, not a field the user can act on, and rendering it as an
   input invited them to try. */
.av-consent__identity {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--color-gray-150);
    border-radius: var(--radius-lg);
}

html.dark .av-consent__identity {
    background: var(--surface-2);
}

.av-consent__identity-icon.mud-icon-root {
    width: 18px;
    height: 18px;
    color: var(--color-gray-500);
    flex-shrink: 0;
}

html.dark .av-consent__identity-icon.mud-icon-root {
    color: var(--color-dark-300);
}

.av-consent__identity-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.av-consent__identity-label.mud-typography {
    color: var(--color-gray-500);
}

html.dark .av-consent__identity-label.mud-typography {
    color: var(--color-dark-300);
}

.av-consent__identity-value.mud-typography {
    color: var(--color-gray-900);
    overflow-wrap: anywhere;
}

html.dark .av-consent__identity-value.mud-typography {
    color: var(--color-dark-50);
}

/* Consent list. The two items are separated by a hairline instead of a gap so they
   read as one block of terms the user is accepting. */
.av-consent__list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

html.dark .av-consent__list {
    border-color: var(--color-dark-500);
}

.av-consent__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px;
}

.av-consent__item + .av-consent__item {
    border-top: 1px solid var(--color-gray-200);
}

html.dark .av-consent__item + .av-consent__item {
    border-top-color: var(--color-dark-500);
}

/* The required item carries a left accent so "which one blocks me" is answerable at
   a glance — the disabled Submit alone did not say WHICH consent was missing. Amber
   while pending, primary once accepted. */
.av-consent__item--required {
    border-left: 3px solid var(--color-warning);
    background: rgb(from var(--color-warning) r g b / 0.05);
}

.av-consent__item--required.av-consent__item--accepted {
    border-left-color: var(--color-primary-600);
    background: rgb(from var(--color-primary-500) r g b / 0.05);
}

html.dark .av-consent__item--required.av-consent__item--accepted {
    border-left-color: var(--color-primary-400);
}

/* The checkbox label. Mud renders the ChildContent inside its own label wrapper, so
   the row layout lives here; the text size stays with the Typo in the markup. */
.av-consent__check .mud-checkbox {
    align-items: flex-start;
    margin-inline-start: -9px;
}

.av-consent__check-label.mud-typography {
    color: var(--color-gray-800);
    line-height: 1.45;
}

html.dark .av-consent__check-label.mud-typography {
    color: var(--color-dark-100);
}

/* Sub-text under a consent (carrier rates, required marker). Indented to line up
   with the label rather than the checkbox. */
.av-consent__note.mud-typography {
    color: var(--color-gray-500);
    padding-inline-start: 34px;
}

html.dark .av-consent__note.mud-typography {
    color: var(--color-dark-300);
}

.av-consent__required-marker.mud-typography {
    color: var(--color-warning-darker);
}

html.dark .av-consent__required-marker.mud-typography {
    color: var(--color-warning);
}

/* Hint under the Submit button — explains WHY the button is inert instead of leaving
   the user to guess. Neutral, never an error: nothing has failed yet. */
.av-consent__submit-hint.mud-typography {
    color: var(--color-gray-500);
    text-align: center;
}

html.dark .av-consent__submit-hint.mud-typography {
    color: var(--color-dark-300);
}

/* ── Confirmation screen (account/register-complete-confirmation) ── */

.av-consent-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
}

.av-consent-done__icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 8px;
    border-radius: 9999px;
    background: rgb(from var(--color-success) r g b / 0.12);
}

.av-consent-done__icon.mud-icon-root {
    width: 32px;
    height: 32px;
    color: var(--color-success);
}

.av-consent-done__title.mud-typography {
    color: var(--color-gray-900);
}

html.dark .av-consent-done__title.mud-typography {
    color: var(--color-dark-50);
}

.av-consent-done__body.mud-typography {
    color: var(--color-gray-600);
    max-width: 44ch;
}

html.dark .av-consent-done__body.mud-typography {
    color: var(--color-dark-200);
}

.av-consent-done__action {
    margin-top: 16px;
    width: 100%;
}

/* Warning tone for the same confirmation surface — the expired-link state reuses the
   layout but must not read as a success. */
.av-consent-done__icon-wrap--warning {
    background: rgb(from var(--color-warning) r g b / 0.12);
}

.av-consent-done__icon--warning.mud-icon-root {
    color: var(--color-warning);
}

/* WI #1428 — the two icon buttons stack inside a table cell; the default MudIconButton
   padding would make the row twice as tall as its neighbours. */
.lo-reorder-arrows .mud-icon-button {
    padding: 2px;
}

/* WI #1429 — Comments is capped at 2000 chars, so the tooltip is bounded and wraps instead of
   stretching into one unreadable line. Long words (URLs, account strings) break, not overflow. */
.lo-comment-indicator__icon.mud-icon-button {
    padding: 2px;
}

.mud-tooltip .lo-comment-indicator__text {
    display: block;
    max-width: 320px;
    max-height: 40vh;
    overflow-y: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    text-align: left;
}

/* §112 ─── lo-liab — the 1003 Liabilities reconciliation table (D5).
   Row tint + the two child-row bands the mockup shows below a row. No typography here: the
   canonical scale owns font-*, and the markup picks the Typo role (CLAUDE.md §Typography scale). */

/* A row the credit run just brought. Reproduces .lrow.blue of the mockup. */
.styled-table .lo-liab-row--new > .mud-table-cell {
    background-color: rgb(from var(--color-info) r g b / 0.06);
}

/* A row the bureau stopped reporting. Reproduces .lrow.amber. */
.styled-table .lo-liab-row--gone > .mud-table-cell {
    background-color: rgb(from var(--color-warning) r g b / 0.07);
}

html.dark .styled-table .lo-liab-row--new > .mud-table-cell {
    background-color: rgb(from var(--color-info) r g b / 0.14);
}

html.dark .styled-table .lo-liab-row--gone > .mud-table-cell {
    background-color: rgb(from var(--color-warning) r g b / 0.14);
}

/* The account number reads as data, not prose. */
.lo-liab-account {
    font-variant-numeric: tabular-nums;
    color: var(--color-gray-500);
}

html.dark .lo-liab-account {
    color: var(--color-dark-300);
}

/* With a hit, the reported payment is struck through and the effective one carries the DTI. */
.lo-liab-payment--replaced {
    text-decoration: line-through;
    color: var(--color-gray-400);
}

html.dark .lo-liab-payment--replaced {
    color: var(--color-dark-400);
}

/* The child row carries the edited-row band and the last comment. */
.styled-table .lo-liab-childrow > td {
    padding: 8px 16px;
    border-top: 0;
}

.lo-liab-lockline,
.lo-liab-noteline {
    padding: 8px 12px;
    border-radius: var(--radius-lg);
}

.lo-liab-lockline {
    background-color: rgb(from var(--color-gray-500) r g b / 0.07);
    color: var(--color-gray-700);
}

.lo-liab-noteline {
    background-color: rgb(from var(--color-info) r g b / 0.06);
    color: var(--color-gray-700);
}

.lo-liab-lockline + .lo-liab-noteline {
    margin-top: 6px;
}

html.dark .lo-liab-lockline {
    background-color: rgb(from var(--color-dark-300) r g b / 0.15);
    color: var(--color-dark-100);
}

html.dark .lo-liab-noteline {
    background-color: rgb(from var(--color-info) r g b / 0.14);
    color: var(--color-dark-100);
}

/* §112.1 ─── lo-liab action chrome (waves 2-4).
   The exclusion pill mirrors the mockup's exchk: amber when the row is out of the DTI. */
.lo-liab-exchk.mud-button-root {
    border-style: dashed;
    border-color: var(--color-gray-300);
    color: var(--color-gray-600);
}

.lo-liab-exchk--on.mud-button-root {
    border-style: solid;
    border-color: rgb(from var(--color-warning) r g b / 0.40);
    background-color: rgb(from var(--color-warning) r g b / 0.13);
    color: var(--color-warning-darker, var(--color-warning));
}

html.dark .lo-liab-exchk.mud-button-root {
    border-color: var(--color-dark-400);
    color: var(--color-dark-200);
}

html.dark .lo-liab-exchk--on.mud-button-root {
    border-color: rgb(from var(--color-warning) r g b / 0.34);
    background-color: rgb(from var(--color-warning) r g b / 0.13);
    color: var(--color-warning);
}

.lo-liab-menu-danger .mud-list-item-text,
.lo-liab-menu-danger {
    color: var(--color-error) !important;
}

/* The hit preview: payments that go UP read in the mockup's violet. */
.lo-liab-hit-up {
    color: #8038c9;
    font-weight: 650;
}

html.dark .lo-liab-hit-up {
    color: #c79bf0;
}

.lo-liab-hit-total > td {
    background-color: var(--color-gray-100);
}

html.dark .lo-liab-hit-total > td {
    background-color: var(--color-dark-700);
}

.lo-liab-hit-delta--up {
    color: var(--color-warning);
    margin-top: 6px;
}

.lo-liab-hit-delta--down {
    color: var(--color-success);
    margin-top: 6px;
}

/* Clamp the note line's body to one line so the band stays a band. */
.lo-liab-noteline__body {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 48ch;
}

/* Bulk-bar violet tier — the mockup's "Penalizar (Hit)" color, same in light and dark
   (the inverted bar keeps it readable on both surfaces). */
.av-datagrid-selected-actions__btn--violet {
    background-color: #7b34c0;
    color: #fff;
}

.av-datagrid-selected-actions__btn--violet:hover {
    background-color: #8f4cd6;
}

/* §112.2 ─── lo-credit-tile — the Credit tab's run strip (mockup §2.2).
   One tile per bureau plus the decision tile. Modifiers mirror the mockup's tints:
   --ovr (score corrected by hand), --fail (the bureau failed), --hi (the decision). */
.lo-credit-tile {
    height: 100%;
}

.lo-credit-tile--ovr {
    border-color: rgb(from var(--color-warning) r g b / 0.40);
    background-color: rgb(from var(--color-warning) r g b / 0.08);
}

.lo-credit-tile--fail {
    border-color: rgb(from var(--color-error) r g b / 0.40);
    background-color: rgb(from var(--color-error) r g b / 0.06);
}

.lo-credit-tile--hi {
    border-color: rgb(from var(--color-primary-500) r g b / 0.45);
    background-color: rgb(from var(--color-primary-500) r g b / 0.07);
}

html.dark .lo-credit-tile--ovr {
    border-color: rgb(from var(--color-warning) r g b / 0.34);
    background-color: rgb(from var(--color-warning) r g b / 0.12);
}

html.dark .lo-credit-tile--fail {
    border-color: rgb(from var(--color-error) r g b / 0.34);
    background-color: rgb(from var(--color-error) r g b / 0.10);
}

html.dark .lo-credit-tile--hi {
    border-color: rgb(from var(--color-primary-400) r g b / 0.40);
    background-color: rgb(from var(--color-primary-400) r g b / 0.10);
}

/* §112.3 ─── lo-ov-dot — the Overview's needsAction traffic light (mockup §1.1).
   Red blocks, amber waits, green is clear. Same dot in light and dark: the saturated
   semantic tokens read on both surfaces. */
.lo-ov-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 9999px;
    flex-shrink: 0;
}

.lo-ov-dot--red {
    background-color: var(--color-error);
}

.lo-ov-dot--amber {
    background-color: var(--color-warning);
}

.lo-ov-dot--green {
    background-color: var(--color-success);
}

/* The factor card's legal text — the bureau's verbatim reason code, set apart as a quote. */
.lo-credit-legal {
    font-style: italic;
}

/* §113 ─── av-cq-options — Choice question options editor (campaign questionnaire). */
.av-cq-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    background: var(--color-gray-50);
}

.av-cq-options__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.av-cq-options__row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.av-cq-options__label {
    flex: 1 1 auto;
}

.av-cq-options__points {
    flex: 0 0 96px;
    width: 96px;
}

html.dark .av-cq-options {
    border-color: var(--color-dark-500);
    background: var(--color-dark-800);
}

/* §114 ─── av-tpl-card — selectable template card (campaign template picker). */
.av-tpl-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.av-tpl-card:hover {
    border-color: var(--color-gray-300);
    background: var(--color-gray-50);
}

.av-tpl-card--selected {
    border-color: var(--color-primary-500);
    background: rgb(from var(--color-primary-500) r g b / 0.06);
    box-shadow: 0 0 0 1px var(--color-primary-500);
}

.av-tpl-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.av-tpl-card__check {
    margin-inline-start: auto;
    color: var(--color-primary-600);
}

html.dark .av-tpl-card {
    border-color: var(--color-dark-500);
    background: var(--color-dark-800);
}

html.dark .av-tpl-card:hover {
    border-color: var(--color-dark-400);
    background: var(--color-dark-700);
}

html.dark .av-tpl-card--selected {
    border-color: var(--color-primary-400);
    background: rgb(from var(--color-primary-400) r g b / 0.16);
    box-shadow: 0 0 0 1px var(--color-primary-400);
}

/* §115 ─── av-wiz__addch — "add a new channel" row in the campaign wizard channels step. */
.av-wiz__addch {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--color-gray-200);
}

.av-wiz__addch .mud-input-control {
    flex: 1 1 auto;
}

/* The select reserves helper-text space below the box; drop it so the box and the button align. */
.av-wiz__addch .mud-input-control .mud-input-helper-text {
    display: none;
}

html.dark .av-wiz__addch {
    border-top-color: var(--color-dark-500);
}

/* ── §70 — av-tenant-steps — create/edit tenant horizontal step rail ─────────
   Horizontal numbered step-nav (eKYC style) + single current-step body panel.
   Typography stays on Typo/ambient; component CSS sets only color/layout/box-shadow. */
.av-tenant-steps {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin: 0;
    padding: 20px 26px;
}
/* node on the left, title + subtitle stacked on the right */
.av-tenant-steps__item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-align: left;
}
.av-tenant-steps__item:disabled { cursor: default; }
.av-tenant-steps__node {
    width: 34px;
    height: 34px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-gray-200);
    color: var(--color-gray-500);
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    transition: background 0.2s, box-shadow 0.2s, color 0.2s;
}
/* current — filled + gap ring + soft primary halo */
.av-tenant-steps__item--current .av-tenant-steps__node {
    background: var(--color-primary-600);
    color: var(--color-white);
    box-shadow: 0 0 0 3px var(--color-white), 0 0 0 6px rgb(from var(--color-primary-500) r g b / 0.30);
}
/* reached (done) — filled, no halo */
.av-tenant-steps__item--done .av-tenant-steps__node {
    background: var(--color-primary-600);
    color: var(--color-white);
}
.av-tenant-steps__item--error .av-tenant-steps__node {
    background: var(--color-error);
    color: var(--color-white);
    box-shadow: 0 0 0 3px var(--color-white), 0 0 0 6px rgb(from var(--color-error) r g b / 0.22);
}
.av-tenant-steps__text { display: flex; flex-direction: column; min-width: 0; }
.av-tenant-steps__title { color: var(--color-gray-500); white-space: nowrap; line-height: 1.25; }
.av-tenant-steps__item--current .av-tenant-steps__title,
.av-tenant-steps__item--done .av-tenant-steps__title { color: var(--color-gray-900); }
.av-tenant-steps__item--error .av-tenant-steps__title { color: var(--color-error); }
.av-tenant-steps__sub { color: var(--color-gray-400); white-space: nowrap; line-height: 1.25; }
/* connector line between nodes (fills the gap) */
.av-tenant-steps__line {
    flex: 1;
    height: 3px;
    min-width: 24px;
    margin: 16px 16px 0;
    border-radius: 999px;
    background: var(--color-gray-200);
}
.av-tenant-steps__line--on { background: var(--color-primary-600); }

.av-tenant-step-body__head { display: flex; align-items: flex-start; gap: 12px; }
.av-tenant-step-body__icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgb(from var(--color-primary-500) r g b / 0.12);
    color: var(--color-primary-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* dark mode */
html.dark .av-tenant-steps__node { background: var(--color-dark-600); color: var(--color-dark-300); }
html.dark .av-tenant-steps__item--current .av-tenant-steps__node { box-shadow: 0 0 0 3px var(--color-dark-800), 0 0 0 6px rgb(from var(--color-primary-500) r g b / 0.40); }
html.dark .av-tenant-steps__title { color: var(--color-dark-300); }
html.dark .av-tenant-steps__item--current .av-tenant-steps__title,
html.dark .av-tenant-steps__item--done .av-tenant-steps__title { color: var(--color-dark-50); }
html.dark .av-tenant-steps__sub { color: var(--color-dark-400); }
html.dark .av-tenant-steps__line { background: var(--color-dark-500); }
html.dark .av-tenant-steps__line--on { background: var(--color-primary-500); }

/* group node error-count badge */
.av-tenant-steps__node-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 9999px;
    background: var(--color-error);
    color: var(--color-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* §70.1 — group sub-tabs: use the doctrinal <AvTabsWithIcon> underline skin (§15.1).
   In the wizard the tab count badge only ever shows an error count, so paint it with the
   error color to match the rail node's error badge (av-tenant-steps__node-badge). */
.av-tenant-tabs-bleed .av-tabs-with-icon__tab-count,
.av-tenant-tabs-bleed .av-tabs-with-icon .mud-tab.mud-tab-active .av-tabs-with-icon__tab-count {
    background: var(--color-error);
    color: var(--color-white);
}
html.dark .av-tenant-tabs-bleed .av-tabs-with-icon__tab-count,
html.dark .av-tenant-tabs-bleed .av-tabs-with-icon .mud-tab.mud-tab-active .av-tabs-with-icon__tab-count {
    background: var(--color-error);
    color: var(--color-white);
}

/* §70.2 — sections status bar (per-subtab completion of the current group) */
.av-tenant-sections {
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 16px 24px;
    flex-wrap: wrap;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg) !important;
    margin: 20px 0;
}
html.dark .av-tenant-sections {
    background-color: var(--color-dark-800);
    border-color: var(--color-dark-600);
}
.av-tenant-sections__lead { flex: 0 0 220px; min-width: 200px; }
.av-tenant-sections__lead-title { color: var(--color-gray-900); }
.av-tenant-sections__lead-desc { color: var(--color-gray-500); }
.av-tenant-sections__items {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 16px;
}
.av-tenant-sections__item { display: flex; align-items: center; gap: 10px; min-width: 0; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.av-tenant-sections__mk {
    width: 26px; height: 26px; border-radius: 9999px;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.av-tenant-sections__mk .mud-icon-root { width: 15px; height: 15px; }
.av-tenant-sections__mk--ok { background: rgb(from var(--color-success) r g b / 0.12); color: var(--color-success); }
.av-tenant-sections__mk--neutral { background: var(--color-gray-150); color: var(--color-gray-400); }
.av-tenant-sections__mk--err { background: rgb(from var(--color-error) r g b / 0.12); color: var(--color-error); }
.av-tenant-sections__txt { min-width: 0; overflow: hidden; }
.av-tenant-sections__nm { color: var(--color-gray-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.av-tenant-sections__st { color: var(--color-gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.dark .av-tenant-sections__lead-title, html.dark .av-tenant-sections__nm { color: var(--color-dark-50); }
html.dark .av-tenant-sections__lead-desc, html.dark .av-tenant-sections__st { color: var(--color-dark-300); }
html.dark .av-tenant-sections__mk--neutral { background: var(--color-dark-600); }

/* §70.3 — footer status (left of the action buttons) */
.av-tenant-foot-status { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; }
.av-tenant-foot-status__mk {
    width: 32px; height: 32px; border-radius: 9999px;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.av-tenant-foot-status__mk--ok { background: rgb(from var(--color-success) r g b / 0.12); color: var(--color-success); }
.av-tenant-foot-status__mk--warn { background: rgb(from var(--color-warning) r g b / 0.14); color: var(--color-warning); }
.av-tenant-foot-status__mk--neutral { background: var(--color-gray-150); color: var(--color-gray-500); }
.av-tenant-foot-status__title--ok { color: var(--color-success); }
.av-tenant-foot-status__title--warn { color: var(--color-warning); }
.av-tenant-foot-status__title--neutral { color: var(--color-gray-600); }
.av-tenant-foot-status__desc { color: var(--color-gray-500); }
html.dark .av-tenant-foot-status__mk--neutral { background: var(--color-dark-600); color: var(--color-dark-300); }
html.dark .av-tenant-foot-status__title--neutral { color: var(--color-dark-200); }
html.dark .av-tenant-foot-status__desc { color: var(--color-dark-300); }

/* §70.4 — two-column step body (main + aside) */
.av-tenant-two-col { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
@media (min-width: 1000px) { .av-tenant-two-col { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }

/* §70.5 — tenant wizard: form sections read as clean cards (reference look). Address/manager cards
   now use av-tenant-fcard, so this only cards the remaining field steps + summary sections. */
.av-tenant-step-body .av-form-sections { max-width: none; }
.av-tenant-step-body .av-form-section {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: 14px;
    padding: 20px 22px;
    gap: 14px;
}
html.dark .av-tenant-step-body .av-form-section {
    background: var(--color-dark-800);
    border-color: var(--color-dark-600);
}
/* inner table/tree cards already have their own chrome → drop it to avoid a card-in-card */
.av-tenant-step-body .av-form-section .av-table-card,
.av-tenant-step-body .av-form-section .av-permission-tree--page {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
/* a section that only holds a table-card fills the card edge-to-edge; the table-card's
   own toolbar/cell padding provides the inset, so the table header/rows span full width. */
.av-tenant-step-body .av-form-section:has(> .av-table-card) {
    padding-top: 0;
    padding-right: 0;
    padding-left: 0;
    overflow: hidden;
}
/* Table row-action icon button: 28x28 button with an 18px icon. */
.av-table-action-btn.mud-icon-button { width: 28px !important; height: 28px !important; }
.av-table-action-btn.mud-icon-button .mud-icon-root {
    width: 18px !important;
    height: 18px !important;
    font-size: 18px !important;
}
/* Available services: every row keeps its gray-200 bottom divider, last row
   included (overrides the global last-row border removal for this table). */
.av-tenant-services-table .mud-table-body .mud-table-row .mud-table-cell {
    border-bottom: 1px solid var(--color-gray-200) !important;
}
html.dark .av-tenant-services-table .mud-table-body .mud-table-row .mud-table-cell {
    border-bottom-color: var(--color-dark-500) !important;
}
/* NAME column takes 70% so the trailing CREATION DATE column reads at the right edge. */
.av-tenant-services-table .av-col-name-wide { width: 70%; }

/* §70.6 — wizard card (icon + title + description header, like the reference) */
.av-tenant-fcard {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: 14px;
    padding: 20px 22px 22px;
}
.av-tenant-fcard__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.av-tenant-fcard__icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgb(from var(--color-primary-500) r g b / 0.12);
    color: var(--color-primary-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.av-tenant-fcard__title { color: var(--color-gray-900); }
.av-tenant-fcard__desc { color: var(--color-gray-500); }
.av-tenant-fcard__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px 20px;
}
.av-tenant-fcard__grid > .av-tenant-fcard__full { grid-column: 1 / -1; }
@media (max-width: 560px) { .av-tenant-fcard__grid { grid-template-columns: minmax(0, 1fr); } }

/* fcard body split into labelled subsections (Identity / Classification / Contact / Regional). */
.av-tenant-fcard__body { display: flex; flex-direction: column; gap: 20px; }
.av-tenant-fcard__sec { display: flex; flex-direction: column; gap: 12px; }
.av-tenant-fcard__sec--sep { padding-top: 20px; border-top: 1px solid var(--color-gray-100); }
html.dark .av-tenant-fcard__sec--sep { border-top-color: var(--color-dark-600); }
.av-tenant-fcard__sec-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
/* "Set at creation" lock chip beside a subsection label. */
.av-tenant-fcard__lock {
    display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px;
    background: var(--color-gray-100); border: 1px solid var(--color-gray-200); color: var(--color-gray-600);
}
.av-tenant-fcard__lock .mud-icon-root { width: 12px !important; height: 12px !important; font-size: 12px !important; }
html.dark .av-tenant-fcard__lock { background: var(--color-dark-600); border-color: var(--color-dark-500); color: var(--color-dark-200); }
html.dark .av-tenant-fcard { background: var(--color-dark-800); border-color: var(--color-dark-600); }
html.dark .av-tenant-fcard__title { color: var(--color-dark-50); }
html.dark .av-tenant-fcard__desc { color: var(--color-dark-300); }

/* §70.7 — external integrations browser (search + category tabs + grouped list, reference look) */
.av-int-catalog__toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 12px 0 8px;
}
.av-int-catalog__group {
    display: block;
    color: var(--color-gray-500);
    margin: 18px 0 8px;
}
.av-int-catalog__list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-white);
}
.av-int-row {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    text-align: left;
    padding: 14px 16px;
    border: 0;
    border-bottom: 1px solid var(--color-gray-100);
    background: none;
    cursor: pointer;
    transition: background 0.12s;
}
.av-int-row:last-child { border-bottom: 0; }
.av-int-row:hover:not(:disabled) { background: var(--color-gray-50); }
.av-int-row:disabled { cursor: default; opacity: 0.7; }
.av-int-row__icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgb(from var(--color-primary-500) r g b / 0.10);
    color: var(--color-primary-600);
}
.av-int-row__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.av-int-row__name { color: var(--color-gray-900); }
.av-int-row__desc { color: var(--color-gray-500); }
.av-int-row__scope {
    flex-shrink: 0;
    padding: 3px 10px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
}
.av-int-row__scope--tenant { background: rgb(from var(--color-success) r g b / 0.14); color: var(--color-success); }
.av-int-row__scope--global { background: var(--color-gray-100); color: var(--color-gray-600); }
.av-int-row__chevron { color: var(--color-gray-400); flex-shrink: 0; }
.av-int-catalog__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px 0;
    color: var(--color-gray-500);
}
.av-int-catalog__empty-icon { color: var(--color-gray-300); width: 40px; height: 40px; }
html.dark .av-int-catalog__list { background: var(--color-dark-800); border-color: var(--color-dark-600); }
html.dark .av-int-row { border-bottom-color: var(--color-dark-700); }
html.dark .av-int-row:hover:not(:disabled) { background: var(--color-dark-700); }
html.dark .av-int-row__name { color: var(--color-dark-50); }
html.dark .av-int-row__desc { color: var(--color-dark-300); }
html.dark .av-int-row__scope--global { background: var(--color-dark-700); color: var(--color-dark-200); }
html.dark .av-int-catalog__group { color: var(--color-dark-300); }
/* Inside the tenant wizard the integrations panel fills the full card width. */
.av-tenant-step-body .av-integrations { max-width: none; }
/* Allowed credit providers as its own bordered card below the catalog. */
.av-integrations__allowed-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: 20px 22px;
    margin-top: 16px;
}
html.dark .av-integrations__allowed-card {
    background-color: var(--color-dark-800);
    border-color: var(--color-dark-600);
}
/* Category tabs span the full width, evenly distributed. */
.av-int-catalog__tabs .av-tabs-with-icon.mud-tabs { width: 100%; }
.av-int-catalog__tabs .av-tabs-with-icon .mud-tabs-tabbar-wrapper { width: 100%; display: flex; }
.av-int-catalog__tabs .av-tabs-with-icon .mud-tab { flex: 1 1 0; justify-content: center; }

/* §70.8 — wizard footer (Cancel/Continue) reads as a standalone theme-aware card, like §70.2 */
.av-page-card__actions.av-tenant-footbar {
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg) !important;
    margin-top: 20px;
}
html.dark .av-page-card__actions.av-tenant-footbar {
    background-color: var(--color-dark-800);
    border-color: var(--color-dark-600);
}

/* §70.9 — wizard tabs: 1px underline that bleeds to the full card width.
   The -16px inline margin cancels the MudCardContent padding; the padding on
   the tabbar wrapper keeps the tabs aligned with the content while the border
   still spans edge to edge (padding sits inside the border box). */
.av-tenant-tabs-bleed { margin-inline: -16px; }
.av-tenant-tabs-bleed .av-tabs-with-icon .mud-tabs-tabbar-wrapper {
    border-bottom-width: 1px;
    padding-inline: 16px;
}
.av-tenant-tabs-bleed .av-tabs-with-icon .mud-tab {
    border-bottom-width: 1px;
    margin-bottom: -1px !important;
}

/* §70.10 — Logo step: Brand identity (wide) + Tenant branding (narrow) side by side.
   Two columns only from 1600px up (WI #1599). The wizard's step rail takes a fixed 320px
   (av-tenant-outer), so the narrow column is a third of what is left: on a laptop it collapsed to
   ~286px and the swatch select was unreadable. 1600px keeps every common laptop width (1366 / 1440 /
   1512 / 1536) on the stacked layout and leaves the side-by-side design for wide desktops. */
.av-tenant-logo-cols { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 1600px) {
    .av-tenant-logo-cols { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
}

/* §70.11 — wizard input adornment icons at av-size-6 (24px). */
.av-tenant-step-body .mud-input-adornment .mud-icon-root {
    width: 24px !important;
    height: 24px !important;
}

/* §70.12 — experimental: vertical step rail as a standalone panel to the RIGHT
   of the card (outside it). Outer grid: card (main) | rail (aside). */
.av-tenant-outer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    grid-template-rows: auto auto auto;
    column-gap: 20px;
    row-gap: 20px;
    align-items: start;
}
.av-tenant-outer__main { grid-column: 1; }
/* Sections bar + footer (+ allowed-providers card) sit under the card, matching its column width. */
.av-tenant-outer > .av-tenant-sections { grid-column: 1; margin: 0; }
.av-tenant-outer > .av-page-card__actions { grid-column: 1; margin: 0; }
.av-tenant-outer > .av-integrations__allowed-card { grid-column: 1; margin-top: 0; }
.av-tenant-steps--aside {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: start;
}

/* Vertical variant of the stepper — items stacked, connector runs downward.
   Items are forced full-width (they are <button>s that otherwise shrink to
   their text and center, which staircases the nodes); the connector is a thin
   bar under the node center (34px node → center 17px). */
.av-tenant-steps--vertical {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0;
}
.av-tenant-steps--vertical .av-tenant-steps__item {
    flex: 0 0 auto !important;
    width: 100% !important;
    align-self: stretch !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.av-tenant-steps--vertical .av-tenant-steps__line {
    flex: 0 0 auto !important;
    align-self: flex-start !important;
    width: 2px !important;
    height: 22px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 4px 0 4px 16px !important;
}

@media (max-width: 960px) {
    .av-tenant-outer { grid-template-columns: 1fr; }
    .av-tenant-steps--aside { grid-column: 1; }
}

/* §70.13 — stacked step body (cards full-width, one under the other). */
.av-tenant-stack { display: flex; flex-direction: column; gap: 20px; }

/* §70.14 — Review step: one bordered row per step (name + summary · Edit · status chip). */
.av-tenant-review { display: flex; flex-direction: column; gap: 12px; }
.av-tenant-review__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
}
html.dark .av-tenant-review__row { background-color: var(--color-dark-800); border-color: var(--color-dark-600); }
.av-tenant-review__info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.av-tenant-review__name { color: var(--color-gray-900); }
.av-tenant-review__sum { color: var(--color-gray-500); }
html.dark .av-tenant-review__name { color: var(--color-dark-50); }
html.dark .av-tenant-review__sum { color: var(--color-dark-300); }
.av-tenant-review__actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.av-tenant-review__edit { min-width: 0 !important; padding: 4px 8px !important; color: var(--color-primary-600) !important; font-size: 12px !important; text-transform: capitalize !important; }
.av-tenant-review__chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: 9999px;
}
.av-tenant-review__chip .mud-icon-root { width: 15px; height: 15px; }
.av-tenant-review__chip--ok { background: rgb(from var(--color-success) r g b / 0.12); color: var(--color-success); }
.av-tenant-review__chip--warn { background: rgb(from var(--color-warning) r g b / 0.14); color: var(--color-warning); }
@media (max-width: 640px) {
    .av-tenant-review__row { flex-direction: column; align-items: flex-start; gap: 10px; }
    .av-tenant-review__actions { width: 100%; justify-content: space-between; }
}

/* §70.15 — AddressDisplay card (header pin+chip · postal block + county card · amber verify bar). */
.av-address-card__head {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px;
    border-bottom: 1px solid var(--color-gray-100);
}
.av-address-card__icon {
    width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgb(from var(--color-primary-500) r g b / 0.12); color: var(--color-primary-600);
}
.av-address-card__icon .mud-icon-root { width: 18px; height: 18px; }
.av-address-card__head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.av-address-card__title { color: var(--color-gray-900); }
.av-address-card__subtitle { color: var(--color-gray-500) !important; }

.av-address-card__chip {
    display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
    padding: 4px 9px; border-radius: 6px;
}
.av-address-card__chip .mud-icon-root { width: 12px; height: 12px; }
.av-address-card__chip--ok { background: rgb(from var(--color-success) r g b / 0.12); color: var(--color-success); border: 1px solid rgb(from var(--color-success) r g b / 0.30); }
.av-address-card__chip--info { background: rgb(from var(--color-info) r g b / 0.12); color: var(--color-info); border: 1px solid rgb(from var(--color-info) r g b / 0.30); }
.av-address-card__chip--warn { background: rgb(from var(--color-warning) r g b / 0.14); color: var(--color-warning); border: 1px solid rgb(from var(--color-warning) r g b / 0.30); }

.av-address-card__btn.mud-icon-button {
    width: 30px; height: 30px; padding: 6px; border-radius: 7px; flex-shrink: 0;
    border: 1px solid var(--color-gray-200); background: var(--color-white); color: var(--color-gray-600);
}
.av-address-card__btn.mud-icon-button:hover { background: var(--color-gray-50); color: var(--color-gray-900); }
.av-address-card__btn.mud-icon-button .mud-icon-root { width: 15px; height: 15px; }

.av-address-card__body { padding: 24px 16px; display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.av-address-card__lines { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 1px; font-style: normal; }
.av-address-card__street { color: var(--color-gray-900); font-size: 14px !important; }
.av-address-card__line { color: var(--color-gray-600); font-size: var(--text-xs-plus) !important; }

.av-address-card__county {
    flex-shrink: 0; min-width: 148px;
    background: rgb(from var(--color-primary-500) r g b / 0.10);
    border: 1px solid rgb(from var(--color-primary-500) r g b / 0.22);
    border-radius: 9px; padding: 10px 14px;
    display: flex; flex-direction: column; gap: 2px;
}
.av-address-card__county-label { display: inline-flex; align-items: center; gap: 5px; color: var(--color-primary-600); }
.av-address-card__county-label .mud-icon-root { width: 13px; height: 13px; }
.av-address-card__county-value { color: var(--color-gray-900); }

.av-address-card__verify.mud-button-root {
    flex-shrink: 0; height: 30px; min-height: 30px; padding: 0 11px; border-radius: 7px;
    background: rgb(from var(--color-warning) r g b / 0.10) !important; color: var(--color-warning) !important;
    border: 1px solid rgb(from var(--color-warning) r g b / 0.4) !important;
    font-size: 12.5px !important; text-transform: capitalize !important;
}
.av-address-card__verify.mud-button-root:hover { background: rgb(from var(--color-warning) r g b / 0.18) !important; }
.av-address-card__verify .mud-icon-root { width: 14px; height: 14px; }
.av-address-card__helper { padding: 0 16px 14px; color: var(--color-gray-500); }

/* Empty state — same header, centered "add address" body. */
.av-address-card__req { color: var(--color-error); }
.av-address-card__empty {
    display: flex; flex-direction: column; align-items: center; gap: 11px;
    padding: 26px 16px; text-align: center;
}
.av-address-card__empty-blob {
    width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--color-gray-150); color: var(--color-gray-400);
}
.av-address-card__empty-blob .mud-icon-root { width: 19px; height: 19px; }
.av-address-card__empty-msg { color: var(--color-gray-500); }

/* Validation error variant (after a save attempt) — 1px red border + red icons. */
.av-address-card--error { border-color: rgb(from var(--color-error) r g b / 0.5) !important; box-shadow: inset 0 0 0 1px rgb(from var(--color-error) r g b / 0.5); }
.av-address-card--error .av-address-card__head { border-bottom-color: rgb(from var(--color-error) r g b / 0.25); }
.av-address-card--error .av-address-card__icon,
.av-address-card--error .av-address-card__empty-blob { background: rgb(from var(--color-error) r g b / 0.10); color: var(--color-error); }

/* Wrapper keeps the card + its error message as one block, so both move together. */
.av-address-card__wrap { display: flex; flex-direction: column; }

/* Error message rendered below the card, like a form-field message. */
.av-address-card__error { display: flex; align-items: center; gap: 6px; margin: 8px 2px 0; color: var(--color-error); }
.av-address-card__error .mud-icon-root { width: 15px; height: 15px; flex-shrink: 0; }
.av-address-card__error .mud-typography { color: var(--color-error); }
.av-address-card__error-icon { color: var(--color-error); }

html.dark .av-address-card__empty-blob { background: var(--color-dark-600); color: var(--color-dark-300); }
html.dark .av-address-card__head { border-color: var(--color-dark-600); }
html.dark .av-address-card__title,
html.dark .av-address-card__street,
html.dark .av-address-card__county-value { color: var(--color-dark-50); }
html.dark .av-address-card__line,
html.dark .av-address-card__subtitle,
html.dark .av-address-card__helper { color: var(--color-dark-300); }
html.dark .av-address-card__btn.mud-icon-button { background: var(--color-dark-700); border-color: var(--color-dark-500); color: var(--color-dark-200); }
html.dark .av-address-card__btn.mud-icon-button:hover { background: var(--color-dark-600); color: var(--color-dark-50); }
html.dark .av-address-card__verify.mud-button-root { background: var(--color-dark-800) !important; }

@media (max-width: 640px) {
    .av-address-card__head { flex-wrap: wrap; }
    .av-address-card__county { min-width: 0; width: 100%; }
}

/* §120 ─── Support screenshot (WI #1552): the cropper's redaction step and the attach field
   used by both support dialogs. */

/* §120.1 — Step indicator. Typography comes from Typo.overline; only colour lives here. */
.av-image-cropper__steps {
    display: flex;
    gap: 16px;
    margin-top: 8px;
}

.av-image-cropper__step {
    color: var(--color-gray-500);
}

.av-image-cropper__step--active {
    color: var(--color-primary-600);
}

html.dark .av-image-cropper__step {
    color: var(--color-dark-300);
}

html.dark .av-image-cropper__step--active {
    color: var(--color-primary-400);
}

/* §120.2 — The crop stage stays mounted while redacting so Cropper.js keeps its selection;
   hiding it is what lets "Back" land on the same adjustment instead of a reset one. */
.av-image-cropper__stage--hidden {
    display: none;
}

/* §120.3 — Redaction canvas. touch-action:none is load-bearing: without it a drag on a
   touch screen scrolls the dialog instead of drawing the rectangle. */
.av-image-cropper__redact-stage {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 60vh;
    overflow: auto;
    padding: 8px;
    border-radius: var(--radius-lg);
    background: var(--color-gray-150);
}

html.dark .av-image-cropper__redact-stage {
    background: var(--color-dark-700);
}

.av-image-cropper__redact-canvas {
    max-width: 100%;
    height: auto;
    cursor: crosshair;
    touch-action: none;
    border-radius: var(--radius-md);
}

/* §120.4 — Attach field: empty state. */
.av-screenshot-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.av-screenshot-field__dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px;
    text-align: center;
    color: var(--color-gray-500);
    background: var(--color-gray-150);
    border: 1px dashed var(--color-gray-300);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;
}

.av-screenshot-field__dropzone:hover,
.av-screenshot-field__dropzone:focus-visible {
    border-color: var(--color-primary-600);
    background: rgb(from var(--color-primary-500) r g b / 0.05);
}

html.dark .av-screenshot-field__dropzone {
    color: var(--color-dark-300);
    background: var(--color-dark-700);
    border-color: var(--color-dark-500);
}

/* §120.5 — Attach field: filled state. */
.av-screenshot-field__preview {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
}

html.dark .av-screenshot-field__preview {
    border-color: var(--color-dark-500);
}

.av-screenshot-field__thumb {
    max-width: 160px;
    max-height: 100px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-gray-200);
}

html.dark .av-screenshot-field__thumb {
    border-color: var(--color-dark-500);
}

.av-screenshot-field__meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
}

.av-screenshot-field__actions {
    display: flex;
    gap: 4px;
}

/* §120.6 — Capture mode. The dialog steps aside so the user can shoot the screen BEHIND it:
   moving it would not be enough, because the backdrop keeps covering and blocking that screen.
   The class is toggled on <body> from avalme-support-capture.js.

   EVERYTHING here hangs off that body class alone. It used to also require a modifier on the
   dialog itself, which never arrived: MudDialog reads its Class when the dialog is OPENED and
   does not react to it changing afterwards, so the backdrop disappeared while the dialog stayed
   exactly where it was. Only one dialog can be open in capture mode, so the body class is
   discriminating enough on its own. */
body.av-capturing .mud-overlay {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* The container stops swallowing clicks so the page underneath stays usable; the collapsed
   pill puts them back for itself. */
body.av-capturing .mud-dialog-container {
    pointer-events: none;
}

body.av-capturing .mud-dialog {
    pointer-events: auto;
    position: fixed;
    right: 16px;
    bottom: 16px;
    top: auto;
    left: auto;
    width: auto;
    min-width: 0;
    max-width: calc(100% - 32px);
    max-height: none;
    margin: 0;
}

/* §120.7 — Collapsing the dialog in capture mode. The form is HIDDEN, never unmounted: the
   paste listener lives in the screenshot field, and the natural gesture is to capture and hit
   Ctrl+V straight away — which would land nowhere if the field had been torn down. */
.av-form-dialog__capture-bar {
    display: none;
}

body.av-capturing .av-form-dialog__capture-hide {
    display: none !important;
}

body.av-capturing .av-form-dialog__capture-bar {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* The header keeps the dialog identifiable while collapsed, but its own padding would make the
   pill taller than the single row it should be. */
body.av-capturing .mud-dialog-title {
    padding-bottom: 8px;
}

/* The body has nothing left to show once the form is hidden. */
body.av-capturing .mud-dialog-content {
    padding-top: 0;
    padding-bottom: 0;
}

/* §116 ─── av-ff — campaign form-fields builder (toolbar + draggable, uniform rows). */
.av-ff-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.av-ff-toolbar__label {
    color: var(--color-gray-500);
    margin-right: auto;
}

html.dark .av-ff-toolbar__label {
    color: var(--color-dark-300);
}

.av-ff-toolbar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Primary Save — mirrors av-table-card__btn-secondary height so the trio aligns. */
.av-ff-btn-primary.mud-button-root {
    background: var(--color-primary-600);
    color: var(--color-white);
    text-transform: none;
    letter-spacing: 0;
    border-radius: var(--radius-md);
    height: 32px;
    min-width: 0;
    padding: 0 14px;
    box-shadow: none;
}

.av-ff-btn-primary.mud-button-root .mud-button-label {
    font-weight: 500;
    font-size: var(--text-xs);
}

.av-ff-btn-primary.mud-button-root .mud-icon-root {
    width: 16px;
    height: 16px;
}

.av-ff-btn-primary.mud-button-root:hover {
    background: var(--color-primary-700);
    box-shadow: none;
}

.av-ff-btn-primary.mud-button-root.mud-button-disabled,
.av-ff-btn-primary.mud-button-root[disabled] {
    background: var(--color-gray-200);
    color: var(--color-gray-400);
    opacity: 1;
    pointer-events: none;
}

html.dark .av-ff-btn-primary.mud-button-root.mud-button-disabled,
html.dark .av-ff-btn-primary.mud-button-root[disabled] {
    background: var(--color-dark-600);
    color: var(--color-dark-300);
}

.av-ff-card {
    padding: 4px 16px;
}

/* Row: grip · input (grows) · binding · required slot · ops — fixed slots keep every row aligned. */
.av-ff-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-gray-100);
    border-top: 2px solid transparent;
}

.av-ff-row:last-child {
    border-bottom: none;
}

html.dark .av-ff-row {
    border-bottom-color: var(--color-dark-600);
}

.av-ff-row--dragover {
    border-top-color: var(--color-primary-500);
}

.av-ff-row__handle {
    display: inline-flex;
    align-items: center;
    cursor: grab;
    color: var(--color-gray-400);
    flex: 0 0 auto;
}

.av-ff-row__handle:active {
    cursor: grabbing;
}

.av-ff-row__handle .mud-icon-root {
    width: 18px;
    height: 18px;
}

html.dark .av-ff-row__handle {
    color: var(--color-dark-300);
}

.av-ff-row__input {
    flex: 1 1 auto;
    min-width: 0;
}

.av-ff-row__binding {
    flex: 0 0 110px;
    justify-content: flex-start;
}

.av-ff-row__req {
    flex: 0 0 170px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.av-ff-row__ops {
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* §117 ─── av-camp-member — campaign membership cards (lead attribution, enterprise). */
.av-camp-list { display: flex; flex-direction: column; gap: 12px; }
.av-camp-list__head { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.av-camp-list__head-icon { color: var(--color-gray-500); }
html.dark .av-camp-list__head-icon { color: var(--color-dark-300); }

.av-camp-member {
    position: relative;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    background: var(--surface-1);
    padding: 16px 18px;
    overflow: hidden;
    transition: box-shadow .15s ease, border-color .15s ease;
}
html.dark .av-camp-member { border-color: var(--color-dark-600); background: var(--color-dark-700); }
.av-camp-member:hover { box-shadow: var(--shadow-md); border-color: var(--color-gray-300); }
html.dark .av-camp-member:hover { border-color: var(--color-dark-500); }
.av-camp-member--primary { border-color: var(--color-primary-200); }
html.dark .av-camp-member--primary { border-color: var(--color-primary-400); }
.av-camp-member--primary::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--color-primary-500);
}

.av-camp-member__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.av-camp-member__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--radius-md); flex-shrink: 0;
    background: rgb(from var(--color-primary-500) r g b / 0.10); color: var(--color-primary-600);
}
html.dark .av-camp-member__icon {
    background: rgb(from var(--color-primary-400) r g b / 0.16); color: var(--color-primary-300);
}
.av-camp-member__name { color: var(--color-gray-900); margin: 0; }
html.dark .av-camp-member__name { color: var(--color-dark-50); }

.av-camp-member__score {
    margin-left: auto; display: flex; flex-direction: column; align-items: flex-end;
    line-height: 1.05; text-align: right;
}
.av-camp-member__score-lbl { color: var(--color-gray-400); }
html.dark .av-camp-member__score-lbl { color: var(--color-dark-300); }
.av-camp-member__score-val--good { color: var(--color-success); }
.av-camp-member__score-val--mid { color: var(--color-warning); }
.av-camp-member__score-val--low { color: var(--color-error); }

.av-camp-member__stats {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--color-gray-100);
}
html.dark .av-camp-member__stats { border-top-color: var(--color-dark-600); }
.av-camp-member__stat { display: flex; flex-direction: column; gap: 2px; padding: 0 16px; }
.av-camp-member__stat:first-child { padding-left: 0; }
.av-camp-member__stat + .av-camp-member__stat { border-left: 1px solid var(--color-gray-100); }
html.dark .av-camp-member__stat + .av-camp-member__stat { border-left-color: var(--color-dark-600); }
.av-camp-member__stat-lbl { color: var(--color-gray-400); }
html.dark .av-camp-member__stat-lbl { color: var(--color-dark-300); }
.av-camp-member__stat-val { color: var(--color-gray-800); }
html.dark .av-camp-member__stat-val { color: var(--color-dark-100); }

.av-camp-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; padding: 40px 16px; text-align: center;
}
.av-camp-empty__icon { color: var(--color-gray-300); }
html.dark .av-camp-empty__icon { color: var(--color-dark-400); }

@media (max-width: 599px) {
    .av-camp-member__stats { grid-template-columns: 1fr; }
    .av-camp-member__stat { padding: 0; }
    .av-camp-member__stat + .av-camp-member__stat {
        border-left: 0; border-top: 1px solid var(--color-gray-100); margin-top: 10px; padding-top: 10px;
    }
    html.dark .av-camp-member__stat + .av-camp-member__stat { border-top-color: var(--color-dark-600); }
}

/* §118 ─── av-camp-timeline — submission/engagement history inside a campaign card. */
.av-camp-timeline {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--color-gray-100);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
html.dark .av-camp-timeline { border-top-color: var(--color-dark-600); }
.av-camp-timeline__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.av-camp-timeline__dot {
    width: 8px; height: 8px; border-radius: 9999px; flex-shrink: 0;
    background: var(--color-primary-400);
}
.av-camp-timeline__date { color: var(--color-gray-700); min-width: 96px; }
html.dark .av-camp-timeline__date { color: var(--color-dark-100); }
.av-camp-timeline__score { color: var(--color-gray-400); margin-left: auto; }
html.dark .av-camp-timeline__score { color: var(--color-dark-300); }

/* §116.1 ─── av-ff-skrow — form-fields builder loading skeleton (matches av-ff-row layout). */
.av-ff-skrow .mud-skeleton { border-radius: var(--radius-md); }
.av-ff-skrow .mud-skeleton.mud-skeleton-circle { border-radius: 9999px; }

/* §119 ─── av-camp2 — Campaigns tab (enterprise: KPI strip, gauge, timeline, sparkline, answers). */
.av-camp2 { display: flex; flex-direction: column; gap: 16px; }
.av-camp2__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.av-camp2__title { color: var(--color-gray-900); margin: 0; }
html.dark .av-camp2__title { color: var(--color-dark-50); }
.av-camp2__muted { color: var(--color-gray-400); }
html.dark .av-camp2__muted { color: var(--color-dark-300); }
.av-camp2__strong { color: var(--color-gray-800); }
html.dark .av-camp2__strong { color: var(--color-dark-100); }

.av-camp2__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 899px) { .av-camp2__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 519px) { .av-camp2__kpis { grid-template-columns: 1fr; } }
.av-camp2-kpi {
    display: flex; align-items: center; gap: 12px;
    border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg);
    background: var(--surface-1); padding: 14px 16px;
}
html.dark .av-camp2-kpi { border-color: var(--color-dark-600); background: var(--color-dark-700); }
.av-camp2-kpi__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: var(--radius-md); flex-shrink: 0;
}
.av-camp2-kpi__icon .mud-icon-root { width: 20px; height: 20px; }
.av-camp2-kpi__icon--primary { background: rgb(from var(--color-primary-500) r g b / 0.12); color: var(--color-primary-600); }
.av-camp2-kpi__icon--success { background: rgb(from var(--color-success) r g b / 0.12); color: var(--color-success); }
.av-camp2-kpi__icon--secondary { background: rgb(from var(--color-secondary) r g b / 0.12); color: var(--color-secondary); }
.av-camp2-kpi__icon--warning { background: rgb(from var(--color-warning) r g b / 0.12); color: var(--color-warning); }
.av-camp2-kpi__text { min-width: 0; }
.av-camp2-kpi__val { color: var(--color-gray-900); margin: 0; line-height: 1.1; }
html.dark .av-camp2-kpi__val { color: var(--color-dark-50); }
.av-camp2-kpi__lbl { color: var(--color-gray-700); margin: 0; }
html.dark .av-camp2-kpi__lbl { color: var(--color-dark-100); }
.av-camp2-kpi__sub { color: var(--color-gray-400); }
html.dark .av-camp2-kpi__sub { color: var(--color-dark-300); }

.av-camp2__sort { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }

.av-camp2-card {
    position: relative; border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg);
    background: var(--surface-1); overflow: hidden;
}
html.dark .av-camp2-card { border-color: var(--color-dark-600); background: var(--color-dark-700); }
.av-camp2-card--primary { border-color: var(--color-primary-200); }
html.dark .av-camp2-card--primary { border-color: var(--color-primary-400); }
.av-camp2-card--primary::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--color-primary-500); }

.av-camp2-card__top { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 16px 18px; }
.av-camp2-card__id { display: flex; align-items: flex-start; gap: 12px; flex: 1 1 240px; min-width: 0; }
.av-camp2-card__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: var(--radius-md); flex-shrink: 0;
    background: rgb(from var(--color-primary-500) r g b / 0.10); color: var(--color-primary-600);
}
html.dark .av-camp2-card__icon { background: rgb(from var(--color-primary-400) r g b / 0.16); color: var(--color-primary-300); }
.av-camp2-card__icon .mud-icon-root { width: 18px; height: 18px; }
.av-camp2-card__name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.av-camp2-card__name { color: var(--color-gray-900); margin: 0; }
html.dark .av-camp2-card__name { color: var(--color-dark-50); }
.av-camp2-card__touches { display: flex; gap: 24px; margin-top: 8px; }

.av-camp2-card__metrics { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.av-camp2-card__metric { display: flex; flex-direction: column; gap: 3px; }
.av-camp2-card__reeng { color: var(--color-primary-600); margin: 0; }
html.dark .av-camp2-card__reeng { color: var(--color-primary-300); }
.av-camp2-card__metric .mud-typography-h6 { margin: 0; }

.av-camp2-gauge { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.av-camp2-gauge__val { position: absolute; color: var(--color-gray-900); margin: 0; }
html.dark .av-camp2-gauge__val { color: var(--color-dark-50); }

.av-camp2-card__actions { margin-left: auto; }

.av-camp2-card__body {
    display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 20px;
    padding: 16px 18px 18px; border-top: 1px solid var(--color-gray-100);
}
html.dark .av-camp2-card__body { border-top-color: var(--color-dark-600); }
@media (max-width: 899px) { .av-camp2-card__body { grid-template-columns: 1fr; } }

.av-camp2-tl { display: flex; flex-direction: column; gap: 12px; }
.av-camp2-tl__row { display: flex; gap: 10px; }
.av-camp2-tl__dot { width: 9px; height: 9px; border-radius: 9999px; background: var(--color-info); margin-top: 6px; flex-shrink: 0; }
.av-camp2-tl__dot--reeng { background: var(--color-warning); }
.av-camp2-tl__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.av-camp2-tl__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.av-camp2-card__progress, .av-camp2-card__answers {
    display: flex; flex-direction: column; gap: 8px;
    border: 1px solid var(--color-gray-150); border-radius: var(--radius-md); padding: 12px;
}
html.dark .av-camp2-card__progress, html.dark .av-camp2-card__answers { border-color: var(--color-dark-600); }
.av-camp2-spark { width: 100%; height: auto; display: block; }
.av-camp2-spark__base { stroke: var(--color-gray-150); stroke-width: 1; }
html.dark .av-camp2-spark__base { stroke: var(--color-dark-500); }
.av-camp2-spark__line { fill: none; stroke: var(--color-primary-500); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.av-camp2-spark__area { fill: rgb(from var(--color-primary-500) r g b / 0.10); stroke: none; }
.av-camp2-spark__dot { fill: var(--color-primary-600); stroke: var(--surface-1); stroke-width: 1.5; }
html.dark .av-camp2-spark__dot { fill: var(--color-primary-300); stroke: var(--color-dark-700); }
.av-camp2-spark__val { fill: var(--color-gray-700); font-size: 11px; font-weight: 600; }
html.dark .av-camp2-spark__val { fill: var(--color-dark-100); }
.av-camp2-spark__ax { fill: var(--color-gray-400); font-size: 10px; }
html.dark .av-camp2-spark__ax { fill: var(--color-dark-300); }
.av-camp2-ans__head { display: flex; align-items: center; gap: 6px; }
.av-camp2-ans__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* §121 ─── av-icon-btn — generic compact icon-button. Base = neutral chrome (transparent, gray,
   hover tint, square-rounded, dark). Size lives in a modifier (--sm = 28×28 box + 18px icon), like
   av-btn/av-btn--sm. Icon-family agnostic (only geometry). Add --round for a circular chip. Stacks
   `.mud-icon-button` to beat both the §2.5 generic .mud-button-root rule and Mud's own sizing. */
.av-icon-btn.mud-icon-button {
    padding: 0 !important;
    flex-shrink: 0;
    border: 0;
    border-radius: var(--radius-md) !important;
    color: var(--color-gray-600) !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: background-color 120ms ease, color 120ms ease;
}
.av-icon-btn.mud-icon-button:hover {
    background: var(--color-gray-100) !important;
    color: var(--color-gray-800) !important;
}
/* Small size: 28×28 box, 18px icon. */
.av-icon-btn--sm.mud-icon-button {
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
}
.av-icon-btn--sm.mud-icon-button .mud-icon-root {
    width: 18px !important;
    height: 18px !important;
    font-size: 18px !important;
}
/* Circular chip variant. */
.av-icon-btn--round.mud-icon-button { border-radius: 9999px !important; }

/* Danger intent: red on hover (rest stays neutral). Placed after the base hover to win on source order. */
.av-icon-btn--danger.mud-icon-button:hover {
    background: rgb(from var(--color-error) r g b / 0.10) !important;
    color: var(--color-error) !important;
}

html.dark .av-icon-btn.mud-icon-button { color: var(--color-dark-200) !important; }
html.dark .av-icon-btn.mud-icon-button:hover {
    background: var(--color-dark-600) !important;
    color: var(--color-dark-50) !important;
}
html.dark .av-icon-btn--danger.mud-icon-button:hover {
    background: rgb(from var(--color-error-lighter) r g b / 0.16) !important;
    color: var(--color-error-lighter) !important;
}

/* ============================================================================
 * §122 ─── Family Profile V2 — redesigned tab (header KPIs, 3-col row, collections)
 * ============================================================================
 * Layout + color only; text sizing comes from the markup's Typo (scale doctrine).
 * ============================================================================ */

/* Header: lead block (avatar + title + subtitle + members) on the left, 3 KPIs on the right. */
.av-family-v2-header__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}
.av-family-v2-header__lead {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 320px;
    min-width: 0;
    border-radius: var(--radius-lg);
}
.av-family-v2-header__lead--link { cursor: pointer; padding: 6px; margin: -6px; transition: background 0.12s ease; }
.av-family-v2-header__lead--link:hover { background: var(--color-gray-50); }
html.dark .av-family-v2-header__lead--link:hover { background: var(--color-dark-700); }
.av-family-v2-header__lead--link:hover .av-table-card__title-text.mud-typography { color: var(--color-primary-600); }
html.dark .av-family-v2-header__lead--link:hover .av-table-card__title-text.mud-typography { color: var(--color-primary-400); }

.av-family-v2-header__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.av-family-v2-header__title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.av-family-v2-header__chip.mud-typography {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 9999px;
    background: rgb(from var(--color-primary-500) r g b / 0.12);
    color: var(--color-primary-700);
}
html.dark .av-family-v2-header__chip.mud-typography {
    background: rgb(from var(--color-primary-400) r g b / 0.18);
    color: var(--color-primary-300);
}
.av-family-v2-header__subtitle.mud-typography { color: var(--color-gray-500); }
html.dark .av-family-v2-header__subtitle.mud-typography { color: var(--color-dark-300); }

.av-family-v2-header__member-line {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-gray-600);
}
html.dark .av-family-v2-header__member-line { color: var(--color-dark-200); }
.av-family-v2-header__member-line .mud-icon-root { width: 16px; height: 16px; }
.av-family-v2-header__member-line .mud-typography { color: inherit; }

.av-family-v2-header__kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, 1fr));
    gap: 12px;
    flex: 0 1 auto;
}

/* 3-column row: Members (widest) · Pets · Hobbies. Collapses to one column when narrow. */
.av-family-v2-row3 {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
.av-family-v2-row3 > .av-family-v2-members { overflow-x: auto; }
@media (max-width: 1100px) {
    .av-family-v2-row3 { grid-template-columns: 1fr; }
    .av-family-v2-header__kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); flex: 1 1 100%; }
}

/* Pets / Hobbies collection cards. */
.av-family-v2-collection {
    display: flex;
    flex-direction: column;
}
.av-family-v2-collection__head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-gray-100);
}
html.dark .av-family-v2-collection__head { border-bottom-color: var(--color-dark-600); }
.av-family-v2-collection__head-spacer { flex: 1; }
.av-family-v2-collection__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
}
.av-family-v2-collection__empty { padding: 8px 0; }

.av-family-v2-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-gray-150);
    transition: background 120ms ease;
}
html.dark .av-family-v2-item { border-color: var(--color-dark-600); }
.av-family-v2-item:hover { background: var(--color-gray-50); }
html.dark .av-family-v2-item:hover { background: rgb(from var(--color-dark-700) r g b / 0.5); }
.av-family-v2-item__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgb(from var(--color-primary-500) r g b / 0.12);
    color: var(--color-primary-600);
}
html.dark .av-family-v2-item__icon { color: var(--color-primary-300); }
.av-family-v2-item__icon .mud-icon-root { width: 20px; height: 20px; }
.av-family-v2-item__info { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.av-family-v2-item__name.mud-typography { color: var(--color-gray-900); }
html.dark .av-family-v2-item__name.mud-typography { color: var(--color-dark-50); }
.av-family-v2-item__meta.mud-typography { color: var(--color-gray-500); }
html.dark .av-family-v2-item__meta.mud-typography { color: var(--color-dark-300); }
/* Note callout — soft tinted card with a left accent, set apart from the meta line. */
.av-family-v2-item__note.mud-typography {
    margin-top: 6px;
    padding: 6px 10px;
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-primary-300);
    background: var(--color-gray-100);
    color: var(--color-gray-600);
}
html.dark .av-family-v2-item__note.mud-typography {
    border-left-color: var(--color-primary-400);
    background: rgb(from var(--color-dark-700) r g b / 0.6);
    color: var(--color-dark-200);
}
.av-family-v2-item__owner.mud-typography { color: var(--color-primary-600); }
html.dark .av-family-v2-item__owner.mud-typography { color: var(--color-primary-400); }
.av-family-v2-item__actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }

/* ============================================================
   Transfer decision — initiator note
   ============================================================ */
.av-transfer-note {
  border: 1px solid var(--color-gray-200);
  border-left: 3px solid var(--color-primary-400);
  border-radius: 8px;
  background: var(--color-gray-100);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.av-transfer-note__label {
  color: var(--color-gray-500);
}

.av-transfer-note__text {
  color: var(--color-gray-800);
  white-space: pre-wrap;
  word-break: break-word;
}

html.dark .av-transfer-note {
  border-color: var(--color-dark-600);
  border-left-color: var(--color-primary-400);
  background: var(--color-dark-700);
}

html.dark .av-transfer-note__label {
  color: var(--color-dark-300);
}

html.dark .av-transfer-note__text {
  color: var(--color-dark-50);
}

/* Pet/hobby attribute chips (therapy / age / gender / color / skill / frequency / owner-share) */
.av-family-v2-item__attrs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.av-family-v2-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 10px;
    background: var(--color-gray-100);
    border: 1px solid var(--color-gray-200);
    color: var(--color-gray-600);
}
html.dark .av-family-v2-chip {
    background: var(--color-dark-700);
    border-color: var(--color-dark-500);
    color: var(--color-dark-200);
}
.av-family-v2-chip .mud-typography { color: inherit; }
.av-family-v2-chip .mud-icon-root { width: 12px; height: 12px; }
.av-family-v2-chip--special {
    background: rgb(from var(--color-success) r g b / 0.10);
    border-color: rgb(from var(--color-success) r g b / 0.25);
    color: var(--color-success-darker);
}
html.dark .av-family-v2-chip--special {
    background: rgb(from var(--color-success) r g b / 0.15);
    border-color: rgb(from var(--color-success) r g b / 0.30);
    color: var(--color-success-lighter);
}
.av-family-v2-chip--share {
    background: rgb(from var(--color-primary-500) r g b / 0.08);
    border-color: rgb(from var(--color-primary-500) r g b / 0.20);
    color: var(--color-primary-700);
}
html.dark .av-family-v2-chip--share {
    background: rgb(from var(--color-primary-400) r g b / 0.15);
    border-color: rgb(from var(--color-primary-400) r g b / 0.25);
    color: var(--color-primary-300);
}

/* §123 ─── av-fam2 — Family tab redesign (members grouped by generation, contact cell, pets/hobbies/notes).
   Layout/color/spacing only; every text size/weight comes from the Typo.* scale on the markup. */
.av-fam2 { display: flex; flex-direction: column; overflow: hidden; }
.av-fam2__head { display: flex; align-items: center; gap: 11px; padding: 16px 20px; border-bottom: 1px solid var(--color-gray-100); }
html.dark .av-fam2__head { border-bottom-color: var(--color-dark-600); }
.av-fam2__head-spacer { flex: 1; }
.av-fam2__count { font-size: var(--text-sm); display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 10px; background: var(--color-gray-100); border: 1px solid var(--color-gray-200); color: var(--color-gray-600); }
html.dark .av-fam2__count { background: var(--color-dark-700); border-color: var(--color-dark-500); color: var(--color-dark-200); }
.av-fam2__anchor-note.mud-typography { padding: 11px 20px; border-bottom: 1px solid var(--color-gray-100); background: var(--color-gray-50); color: var(--color-gray-600); }
html.dark .av-fam2__anchor-note.mud-typography { border-bottom-color: var(--color-dark-600); background: var(--color-dark-700); color: var(--color-dark-200); }
.av-fam2__body { display: flex; flex-direction: column; }

/* generation band header */
.av-fam2__gen { display: flex; align-items: center; gap: 9px; padding: 11px 20px 9px; background: var(--color-gray-50); border-bottom: 1px solid var(--color-gray-100); }
html.dark .av-fam2__gen { background: var(--color-dark-700); border-bottom-color: var(--color-dark-600); }
.av-fam2__gen .mud-typography { color: var(--color-gray-500); }
html.dark .av-fam2__gen .mud-typography { color: var(--color-dark-300); }
.av-fam2__gen-ct.mud-typography { color: var(--color-gray-400); }
.av-fam2__gen-line { flex: 1; height: 1px; background: var(--color-gray-200); }
html.dark .av-fam2__gen-line { background: var(--color-dark-500); }

/* member row */
.av-fam2__row { display: grid; grid-template-columns: 34px minmax(0, 1.15fr) minmax(0, 1.1fr) minmax(0, 1.25fr) 48px; align-items: center; gap: 14px; padding: 12px 20px; border-bottom: 1px solid var(--color-gray-100); }
html.dark .av-fam2__row { border-bottom-color: var(--color-dark-600); }
.av-fam2__row:hover { background: var(--color-gray-50); }
html.dark .av-fam2__row:hover { background: var(--color-dark-700); }
.av-fam2__row--anchor { background: rgb(from var(--color-primary-500) r g b / 0.08); }
html.dark .av-fam2__row--anchor { background: rgb(from var(--color-primary-400) r g b / 0.14); }
.av-fam2__row--anchor:hover { background: rgb(from var(--color-primary-500) r g b / 0.12); }

/* couple pairing: partners in adjacent rows joined by a pink spine on the left */
.av-fam2__row--pair-top, .av-fam2__row--pair-bottom { position: relative; }
.av-fam2__row--pair-top::after, .av-fam2__row--pair-bottom::after { content: ""; position: absolute; left: 8px; width: 3px; background: rgb(from var(--color-secondary) r g b / 0.35); border-radius: 2px; }
.av-fam2__row--pair-top::after { top: 50%; bottom: -1px; }
.av-fam2__row--pair-bottom::after { top: 0; bottom: 50%; }

/* "in a relationship" heart */
.av-fam2__heart.mud-icon-root { width: 14px; height: 14px; font-size: 14px; color: var(--color-secondary); flex-shrink: 0; }
.av-fam2__head-star.mud-icon-root { width: 14px; height: 14px; font-size: 14px; color: var(--color-warning); flex-shrink: 0; }

/* avatar */
.av-fam2__avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; }
.av-fam2__avatar--img { object-fit: cover; }
.av-fam2__avatar--self { background: var(--color-primary-600); color: var(--color-white); }
.av-fam2__avatar--a { background: rgb(from var(--color-primary-500) r g b / 0.16); color: var(--color-primary-700); }
.av-fam2__avatar--b { background: rgb(from var(--color-success) r g b / 0.16); color: var(--color-success-darker); }
.av-fam2__avatar--c { background: rgb(from var(--color-warning) r g b / 0.18); color: var(--color-warning-darker); }
.av-fam2__avatar--d { background: rgb(from var(--color-error) r g b / 0.14); color: var(--color-error-darker); }
.av-fam2__avatar--e { background: rgb(from var(--color-info) r g b / 0.16); color: var(--color-info-darker); }
html.dark .av-fam2__avatar--a, html.dark .av-fam2__avatar--b, html.dark .av-fam2__avatar--c,
html.dark .av-fam2__avatar--d, html.dark .av-fam2__avatar--e { color: var(--color-dark-50); }

/* name + age */
.av-fam2__who { min-width: 0; }
.av-fam2__name-row { display: flex; align-items: center; gap: 7px; min-width: 0; }
.av-fam2__name.mud-typography { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av-fam2__sub.mud-typography { color: var(--color-gray-400); }
html.dark .av-fam2__sub.mud-typography { color: var(--color-dark-300); }
.av-fam2__self-chip.mud-typography { display: inline-flex; align-items: center; padding: 3px 7px; border-radius: 9px; background: var(--color-primary-600); color: var(--color-white); flex-shrink: 0; }

/* relationship pills */
.av-fam2__rel { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.av-fam2__pill.mud-typography { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 11px; background: rgb(from var(--color-primary-500) r g b / 0.1); border: 1px solid rgb(from var(--color-primary-500) r g b / 0.2); color: var(--color-primary-700); }
html.dark .av-fam2__pill.mud-typography { color: var(--color-primary-300); }
.av-fam2__pill--plain.mud-typography { background: var(--color-gray-100); border-color: var(--color-gray-200); color: var(--color-gray-600); }
html.dark .av-fam2__pill--plain.mud-typography { background: var(--color-dark-700); border-color: var(--color-dark-500); color: var(--color-dark-200); }
.av-fam2__pill--marriage.mud-typography { background: rgb(from var(--color-secondary) r g b / 0.1); border-color: rgb(from var(--color-secondary) r g b / 0.25); color: var(--color-secondary); }
.av-fam2__pill--review.mud-typography { background: rgb(from var(--color-warning) r g b / 0.14); border-color: rgb(from var(--color-warning) r g b / 0.3); color: var(--color-warning-darker); }
.av-fam2__more { all: unset; cursor: pointer; padding: 0px 7px; border-radius: 10px; border: 1px solid var(--color-gray-200); color: var(--color-gray-500); }
html.dark .av-fam2__more { border-color: var(--color-dark-500); color: var(--color-dark-300); }
.av-fam2__more:hover { background: var(--color-gray-100); color: var(--color-gray-800); }
html.dark .av-fam2__more:hover { background: var(--color-dark-600); color: var(--color-dark-50); }
.av-fam2__more[aria-expanded="true"] { background: var(--color-primary-600); border-color: var(--color-primary-600); color: var(--color-white); }
html.dark .av-fam2__more[aria-expanded="true"] { background: var(--color-primary-500); border-color: var(--color-primary-500); }
.av-fam2__more[aria-expanded="true"] .mud-typography { color: var(--color-white); }

/* contact cell */
.av-fam2__contact { min-width: 0; }
.av-fam2__cline { display: flex; align-items: center; gap: 7px; min-width: 0; }
.av-fam2__cline + .av-fam2__cline { margin-top: 2px; }
.av-fam2__email { font-size: var(--text-xs-plus); color: var(--color-primary-600); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.dark .av-fam2__email { color: var(--color-primary-400); }
.av-fam2__email:hover { text-decoration: underline; }
.av-fam2__go { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0; text-decoration: none; }
.av-fam2__go .mud-icon-root { width: 13px; height: 13px; }
.av-fam2__go--call { background: rgb(from var(--color-success) r g b / 0.14); color: var(--color-success-darker); }
.av-fam2__go--mail { background: rgb(from var(--color-primary-500) r g b / 0.1); color: var(--color-primary-700); }
html.dark .av-fam2__go--call { color: var(--color-success-lighter); }
html.dark .av-fam2__go--mail { color: var(--color-primary-300); }
.av-fam2__go:hover { filter: brightness(0.95); }

/* row actions */
.av-fam2__rowacts { display: flex; justify-content: flex-end; }

/* expanded relationships */
.av-fam2__relx { padding: 2px 20px 12px 68px; background: var(--color-gray-50); border-bottom: 1px solid var(--color-gray-100); }
html.dark .av-fam2__relx { background: var(--color-dark-700); border-bottom-color: var(--color-dark-600); }
.av-fam2__relx-item { display: flex; align-items: center; gap: 9px; padding: 3px 0; color: var(--color-gray-600); }
.av-fam2__relx-item .mud-typography { text-transform: capitalize; }
html.dark .av-fam2__relx-item { color: var(--color-dark-200); }
.av-fam2__relx-item .mud-icon-root { width: 14px; height: 14px; color: var(--color-gray-400); flex-shrink: 0; }
.av-fam2__empty.mud-typography { padding: 16px 20px; }

/* legend */
.av-fam2__legend { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 20px; border-top: 1px solid var(--color-gray-100); }
html.dark .av-fam2__legend { border-top-color: var(--color-dark-600); }
.av-fam2__legend-item { display: inline-flex; align-items: center; gap: 6px; }
.av-fam2__legend-item .mud-typography { color: var(--color-gray-500); }
html.dark .av-fam2__legend-item .mud-typography { color: var(--color-dark-300); }
.av-fam2__legend-dot { width: 11px; height: 11px; border-radius: 3px; border: 1px solid; flex-shrink: 0; }
.av-fam2__legend-dot--blood { background: rgb(from var(--color-primary-500) r g b / 0.15); border-color: rgb(from var(--color-primary-500) r g b / 0.3); }
.av-fam2__legend-dot--extended { background: var(--color-gray-100); border-color: var(--color-gray-300); }
html.dark .av-fam2__legend-dot--extended { background: var(--color-dark-700); border-color: var(--color-dark-500); }
.av-fam2__legend-dot--marriage { background: rgb(from var(--color-secondary) r g b / 0.15); border-color: rgb(from var(--color-secondary) r g b / 0.3); }
.av-fam2__legend-dot--review { background: rgb(from var(--color-warning) r g b / 0.18); border-color: rgb(from var(--color-warning) r g b / 0.35); }
.av-fam2__legend-spine { width: 3px; height: 12px; border-radius: 2px; background: rgb(from var(--color-secondary) r g b / 0.4); flex-shrink: 0; }

/* responsive: collapse to name + actions on narrow widths */
@media (max-width: 720px) {
    .av-fam2__row { grid-template-columns: 34px minmax(0, 1fr) 48px; }
    .av-fam2__rel, .av-fam2__contact { grid-column: 2; }
    .av-fam2__relx { padding-left: 20px; }
}

/* 2-column family layout: members wide on the left, collections stacked on the right */
.av-fam2-grid { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(320px, 1fr); gap: 18px; align-items: start; }
.av-fam2-grid__main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.av-fam2-grid__side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
@media (max-width: 1180px) { .av-fam2-grid { grid-template-columns: 1fr; } }

/* Family start doors: nothing recorded yet (Family / Pets / Hobbies), buttons centered */
.av-fam2-start {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    padding: 20px;
}

.av-fam2-start__door.av-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 20px;
    border: 1px dashed var(--color-gray-300);
    transition: border-color 150ms ease, background-color 150ms ease;
}

html.dark .av-fam2-start__door.av-card {
    border-color: var(--color-dark-500);
}

.av-fam2-start__door.av-card:hover {
    border-style: solid;
    border-color: var(--color-primary-500);
}

.av-fam2-start__icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: rgb(from var(--color-primary-500) r g b / 0.10);
    margin-bottom: 4px;
}

html.dark .av-fam2-start__icon {
    background: rgb(from var(--color-primary-400) r g b / 0.15);
}

.av-fam2-start__icon .mud-icon-root {
    width: 21px;
    height: 21px;
    color: var(--color-primary-600);
}

html.dark .av-fam2-start__icon .mud-icon-root {
    color: var(--color-primary-400);
}

.av-fam2-start__desc.mud-typography {
    flex: 1 1 auto;
    color: var(--color-gray-600);
}

html.dark .av-fam2-start__desc.mud-typography {
    color: var(--color-dark-200);
}

.av-fam2-start__action.mud-button-root {
    align-self: center;
    margin-top: 8px;
}

/* §124 ─── av-crm-picker — "Select from Contact Manager" action card:
   icon tile + title + subtitle + chevron, tinted with the brand primary. */
.av-crm-picker {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    border-radius: var(--radius-lg);
    border: 1px solid rgb(from var(--color-primary-500) r g b / 0.30);
    background: rgb(from var(--color-primary-500) r g b / 0.08);
    cursor: pointer;
    text-align: start;
    transition: background-color 150ms ease, border-color 150ms ease;
}

.av-crm-picker:hover {
    background: rgb(from var(--color-primary-500) r g b / 0.14);
    border-color: rgb(from var(--color-primary-500) r g b / 0.45);
}

.av-crm-picker:focus-visible {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
}

.av-crm-picker__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--color-white);
    color: var(--color-primary-600);
    border: 1px solid rgb(from var(--color-primary-500) r g b / 0.20);
}

.av-crm-picker__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

.av-crm-picker__title.mud-typography {
    color: var(--color-primary-700);
}

.av-crm-picker__sub.mud-typography {
    color: var(--color-gray-500);
}

.av-crm-picker__chevron {
    margin-inline-start: auto;
    flex-shrink: 0;
    color: var(--color-primary-500);
}

html.dark .av-crm-picker {
    background: rgb(from var(--color-primary-400) r g b / 0.14);
    border-color: rgb(from var(--color-primary-400) r g b / 0.35);
}

html.dark .av-crm-picker:hover {
    background: rgb(from var(--color-primary-400) r g b / 0.22);
    border-color: rgb(from var(--color-primary-400) r g b / 0.50);
}

html.dark .av-crm-picker__icon {
    background: var(--color-dark-700);
    color: var(--color-primary-400);
    border-color: rgb(from var(--color-primary-400) r g b / 0.30);
}

html.dark .av-crm-picker__title.mud-typography {
    color: var(--color-primary-300);
}

html.dark .av-crm-picker__sub.mud-typography {
    color: var(--color-dark-300);
}

html.dark .av-crm-picker__chevron {
    color: var(--color-primary-400);
}

/* §125 ─── av-alert-compact — tight alert (10px) with a small, vertically
   centered icon. Compose with av-alert-soft; the message inherits the
   severity color (no MudText wrapper inside). */
.av-alert-compact.mud-alert {
    padding: 10px !important;
    align-items: center;
}

@media (min-width: 640px) {
    .av-alert-compact.mud-alert {
        padding: 10px !important;
    }
}

.av-alert-compact.mud-alert .mud-alert-icon {
    align-self: center;
}

.av-alert-compact.mud-alert .mud-alert-icon .mud-icon-root,
.av-alert-compact.mud-alert .mud-alert-icon svg {
    width: 18px !important;
    height: 18px !important;
    font-size: 18px !important;
}

.av-alert-compact.mud-alert .mud-alert-message {
    font-size: var(--text-xs-plus) !important;
    line-height: 1.4 !important;
}

/* §126 ─── av-crm-contact — searchable contact list in the Select-CRM-Contact
   dialog: rounded frame, hoverable rows (avatar tile + name/badges + meta +
   chevron). */
.av-crm-contact-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    max-height: 380px;
    overflow-y: auto;
}

html.dark .av-crm-contact-list {
    border-color: var(--color-dark-600);
}

.av-crm-contact-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--color-gray-100);
    cursor: pointer;
    text-align: start;
    transition: background-color 150ms ease;
}

.av-crm-contact-row:last-child {
    border-bottom: 0;
}

.av-crm-contact-row:hover {
    background: var(--color-gray-100);
}

.av-crm-contact-row:focus-visible {
    outline: 2px solid var(--color-primary-500);
    outline-offset: -2px;
}

html.dark .av-crm-contact-row {
    border-bottom-color: var(--color-dark-600);
}

html.dark .av-crm-contact-row:hover {
    background: var(--color-dark-600);
}

.av-crm-contact-row__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--color-primary-600);
    color: var(--color-white);
}

.av-crm-contact-row__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.av-crm-contact-row__name-line {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.av-crm-contact-row__name.mud-typography {
    color: var(--color-gray-900);
}

html.dark .av-crm-contact-row__name.mud-typography {
    color: var(--color-dark-50);
}

.av-crm-contact-row__meta.mud-typography {
    color: var(--color-gray-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

html.dark .av-crm-contact-row__meta.mud-typography {
    color: var(--color-dark-300);
}

.av-crm-contact-row__chevron {
    margin-inline-start: auto;
    flex-shrink: 0;
    color: var(--color-gray-400);
}

html.dark .av-crm-contact-row__chevron {
    color: var(--color-dark-300);
}

/* Tighter padding for badges inside the contact row; typography stays the canonical .av-badge spec
   (font-size/line-height belong to the primitive, not to a component override — §Typography). */
.av-crm-contact-row__name-line .av-badge {
    padding: 1px 7px;
}

/* §127 ─── av-save-contact — "Also save as a contact" checkbox card shown when the
   entered email isn't in the Contact Manager: check + title/subtitle + bookmark. */
.av-save-contact {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border-radius: var(--radius-lg);
    border: 1px solid rgb(from var(--color-primary-500) r g b / 0.30);
    background: rgb(from var(--color-primary-500) r g b / 0.08);
    cursor: pointer;
}

.av-save-contact__text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1 1 auto;
}

.av-save-contact__title.mud-typography {
    color: var(--color-primary-700);
}

.av-save-contact__sub.mud-typography {
    color: var(--color-gray-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.av-save-contact__icon {
    color: var(--color-primary-500);
    flex-shrink: 0;
}

html.dark .av-save-contact {
    background: rgb(from var(--color-primary-400) r g b / 0.14);
    border-color: rgb(from var(--color-primary-400) r g b / 0.35);
}

html.dark .av-save-contact__title.mud-typography {
    color: var(--color-primary-300);
}

html.dark .av-save-contact__sub.mud-typography {
    color: var(--color-dark-300);
}

html.dark .av-save-contact__icon {
    color: var(--color-primary-400);
}

/* §128 ─── av-alert-actions — inline action links inside a soft alert
   (primary action · muted dismiss), sized to match the alert body. */
.av-alert-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.av-alert-actions__primary {
    color: var(--color-primary-600) !important;
    cursor: pointer;
}

.av-alert-actions__primary:hover {
    text-decoration: underline;
}

.av-alert-actions__muted {
    color: var(--color-gray-500) !important;
    cursor: pointer;
}

.av-alert-actions__muted:hover {
    text-decoration: underline;
}

.av-alert-actions__sep {
    color: var(--color-gray-400);
}

html.dark .av-alert-actions__primary {
    color: var(--color-primary-400) !important;
}

html.dark .av-alert-actions__muted {
    color: var(--color-dark-300) !important;
}

html.dark .av-alert-actions__sep {
    color: var(--color-dark-400);
}

/* ============================================================================
 * §129 ─── Add User: email loading spinner + numbered stepper nav
 * ============================================================================
 *
 * Two opt-in pieces used by the Add User wizard:
 *  1. `.av-input-loading` spins the field's end-adornment icon (the ArrowPath
 *     shown while the live email availability check runs).
 *  2. `.av-stepper--numbered` restyles the MudStepper header circles: outlined
 *     for upcoming, filled-primary for the current, soft-primary for done.
 *     State is read from the icon content — a number renders as `.mud-typography`,
 *     a done step renders a check icon instead — so it needs no completed class.
 * ============================================================================ */

/* Email field: in-field status chip (spinner / icon + label), like the wizard prototype. */
.av-email-field {
    position: relative;
}

/* Keep typed text clear of the chip. */
.av-email-field .mud-input-input {
    padding-right: 104px;
}

/* Chip centered on the input box: the dense outlined-with-label control carries an
   8px top / 4px bottom margin, so span between them (helper text, if any, sits below). */
.av-email-status {
    position: absolute;
    right: 14px;
    top: 8px;
    bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    pointer-events: none;
}

.av-email-status__spinner {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--color-gray-200);
    border-top-color: var(--color-primary-600);
    animation: av-spinner-spin 0.7s linear infinite;
}

html.dark .av-email-status__spinner {
    border-color: var(--color-dark-500);
    border-top-color: var(--color-primary-400);
}

.av-email-status--checking .av-email-status__text {
    color: var(--color-gray-500);
}

.av-email-status--available .av-email-status__text,
.av-email-status--available .av-email-status__icon.mud-icon-root {
    color: var(--color-success);
}

.av-email-status--taken .av-email-status__text,
.av-email-status--taken .av-email-status__icon.mud-icon-root {
    color: var(--color-error);
}

/* Upcoming: numbered and not current → outlined. */
.mud-stepper.av-stepper--numbered .mud-stepper-nav .mud-step:not(.active) .mud-step-label-icon:has(.mud-typography) {
    background-color: var(--surface-1) !important;
    color: var(--color-gray-500) !important;
    border: 1.5px solid var(--color-gray-300);
}

/* Current: numbered and active → filled primary. */
.mud-stepper.av-stepper--numbered .mud-stepper-nav .mud-step.active .mud-step-label-icon {
    background-color: var(--color-primary-600) !important;
    color: var(--color-white) !important;
    border: 1.5px solid transparent;
}

/* Done: renders a check (no number) → soft primary. :not(.active) so a completed step you
   navigate back to still reads as the current step (filled), not as a done one. */
.mud-stepper.av-stepper--numbered .mud-stepper-nav .mud-step:not(.active) .mud-step-label-icon:not(:has(.mud-typography)) {
    background-color: rgb(from var(--color-primary-600) r g b / 0.14) !important;
    color: var(--color-primary-700) !important;
    border: 1.5px solid transparent;
}

/* Connector: thin neutral line. */
.mud-stepper.av-stepper--numbered .mud-stepper-nav-connector .mud-stepper-nav-connector-line {
    background-color: var(--color-gray-200);
}

html.dark .mud-stepper.av-stepper--numbered .mud-stepper-nav .mud-step:not(.active) .mud-step-label-icon:has(.mud-typography) {
    background-color: var(--surface-2) !important;
    color: var(--color-dark-300) !important;
    border-color: var(--color-dark-500);
}

html.dark .mud-stepper.av-stepper--numbered .mud-stepper-nav .mud-step.active .mud-step-label-icon {
    background-color: var(--color-primary-500) !important;
    color: var(--color-white) !important;
}

html.dark .mud-stepper.av-stepper--numbered .mud-stepper-nav .mud-step:not(.active) .mud-step-label-icon:not(:has(.mud-typography)) {
    background-color: rgb(from var(--color-primary-400) r g b / 0.18) !important;
    color: var(--color-primary-200) !important;
}

html.dark .mud-stepper.av-stepper--numbered .mud-stepper-nav-connector .mud-stepper-nav-connector-line {
    background-color: var(--color-dark-500);
}

/* Check/status icon size inside the step circle. */
.mud-stepper.av-stepper--numbered .mud-stepper-nav .mud-step .mud-step-label-icon .mud-icon-root {
    width: 18px;
    height: 18px;
    font-size: 18px;
}

/* No hover / active / focus (mouse or keyboard) background tint on the steps or their button. */
.mud-stepper.av-stepper--numbered .mud-stepper-nav .mud-step:hover,
.mud-stepper.av-stepper--numbered .mud-stepper-nav .mud-step:focus,
.mud-stepper.av-stepper--numbered .mud-stepper-nav .mud-step:focus-visible,
.mud-stepper.av-stepper--numbered .mud-stepper-nav .mud-step:focus-within,
.mud-stepper.av-stepper--numbered .mud-stepper-nav .mud-step:active,
.mud-stepper.av-stepper--numbered .mud-stepper-nav .mud-step.mud-clickable:hover,
.mud-stepper.av-stepper--numbered .mud-stepper-nav .mud-step.mud-clickable:focus,
.mud-stepper.av-stepper--numbered .mud-stepper-nav .mud-step.mud-clickable:focus-visible,
.mud-stepper.av-stepper--numbered .mud-stepper-nav .mud-step.mud-clickable:focus-within,
.mud-stepper.av-stepper--numbered .mud-stepper-nav .mud-step.mud-clickable:active,
.mud-stepper.av-stepper--numbered .mud-stepper-step-button,
.mud-stepper.av-stepper--numbered .mud-stepper-step-button:hover,
.mud-stepper.av-stepper--numbered .mud-stepper-step-button:focus,
.mud-stepper.av-stepper--numbered .mud-stepper-step-button:focus-visible,
.mud-stepper.av-stepper--numbered .mud-stepper-step-button:active {
    background-color: transparent !important;
}

/* Kill the click ripple (the coloured circle that expands on click). */
.mud-stepper.av-stepper--numbered .mud-stepper-nav .mud-step .mud-ripple-effect,
.mud-stepper.av-stepper--numbered .mud-stepper-step-button .mud-ripple-effect {
    display: none !important;
}

/* Error step: MudStep adds .mud-error to the icon but also .mud-primary (its Color), whose
   !important bg wins — so target .mud-step-label-icon.mud-error with higher specificity to
   turn the circle, its inner icon and the step label error red. */
.mud-stepper.av-stepper--numbered .mud-stepper-nav .mud-step .mud-step-label-icon.mud-error {
    background-color: rgb(from var(--color-error) r g b / 0.14) !important;
    color: var(--color-error) !important;
    border: 1.5px solid var(--color-error) !important;
}

.mud-stepper.av-stepper--numbered .mud-stepper-nav .mud-step .mud-step-label-icon.mud-error .mud-icon-root {
    color: var(--color-error) !important;
}

.mud-stepper.av-stepper--numbered .mud-stepper-nav .mud-step:has(.mud-step-label-icon.mud-error) .mud-step-label-content,
.mud-stepper.av-stepper--numbered .mud-stepper-nav .mud-step:has(.mud-step-label-icon.mud-error) .mud-step-label-content-title {
    color: var(--color-error) !important;
}

/* Add User aside — identity card (avatar + name + labelled rows), matching the wizard prototype. */
.av-crm-form-aside-card--plain {
    background: var(--surface-1);
    border-color: var(--color-gray-200);
}

html.dark .av-crm-form-aside-card--plain {
    background: var(--color-dark-700);
    border-color: var(--color-dark-500);
}

.av-crm-form-aside-identity {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 12px;
}

.av-crm-form-aside-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgb(from var(--color-primary-600) r g b / 0.12);
    color: var(--color-primary-700);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

html.dark .av-crm-form-aside-avatar {
    background: rgb(from var(--color-primary-400) r g b / 0.18);
    color: var(--color-primary-200);
}

.av-crm-form-aside-identity__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.av-crm-form-aside-identity__name {
    color: var(--color-gray-900);
}

html.dark .av-crm-form-aside-identity__name {
    color: var(--color-dark-50);
}

.av-crm-form-aside-rows {
    border-top: 1px solid var(--color-gray-200);
}

html.dark .av-crm-form-aside-rows {
    border-top-color: var(--color-dark-500);
}

.av-crm-form-aside-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
}

.av-crm-form-aside-row + .av-crm-form-aside-row {
    border-top: 1px solid var(--color-gray-100);
}

html.dark .av-crm-form-aside-row + .av-crm-form-aside-row {
    border-top-color: var(--color-dark-600);
}

.av-crm-form-aside-row__v {
    text-align: right;
    word-break: break-word;
    min-width: 0;
}

/* The 880px readability cap on the shared .av-form-sections leaves a gap before the
   aside here — let the cards fill their grid column instead. */
.av-crm-form-step .av-form-sections {
    max-width: none;
}

/* Tip card — soft surface, distinct from the white identity card. */
.av-crm-form-aside-card--tip {
    background: var(--surface-2);
    border-color: var(--color-gray-200);
}

html.dark .av-crm-form-aside-card--tip {
    background: var(--color-dark-600);
    border-color: var(--color-dark-500);
}

/* Review step — full width (no aside), Profile | Account two-up with Edit links. */
.av-crm-form-step--review {
    grid-template-columns: minmax(0, 1fr);
}

.av-review-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

@media (max-width: 760px) {
    .av-review-cols {
        grid-template-columns: minmax(0, 1fr);
    }
}

.av-review-fields {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Each review field: label left, value right, with a divider on top of every row
   (so the first field — Full name / Email — also starts with a divider line). */
.av-review-fields > .av-info-field {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid var(--color-gray-150);
}

html.dark .av-review-fields > .av-info-field {
    border-top-color: var(--color-dark-600);
}

.av-review-edit {
    margin-left: auto;
}

.av-review-roles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Roles body carries the same top divider the other review cards get from
   their first .av-info-field, so the header/content split reads identically. */
.av-review-roles-body {
    padding-top: 10px;
    border-top: 1px solid var(--color-gray-150);
}

html.dark .av-review-roles-body {
    border-top-color: var(--color-dark-600);
}

/* ============================================================================
 * §130 ─── av-roles-picker — Roles lookup dialog (form-dialog hosting a datatable):
 *          selected-role chips + the roles table inside the scrolling body.
 * ==========================================================================*/

/* Selected roles above the table: chips wrap onto as many rows as needed. */
.av-roles-picker__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Match the checkbox datatables (EditAccessStep): every row keeps its full-width
   bottom divider, last row included (overrides the global last-row removal). */
.av-roles-picker__table .mud-table-body .mud-table-row .mud-table-cell {
    border-bottom: 1px solid var(--color-gray-200) !important;
}

html.dark .av-roles-picker__table .mud-table-body .mud-table-row .mud-table-cell {
    border-bottom-color: var(--color-dark-500) !important;
}

/* §131 ─── ll-* — indicador informativo de límite de préstamo en Mortgage Loan Details
   (WI #1628/#1699). Medidor horizontal con el límite como MARCA FIJA al 80 % del ancho: el
   monto se posiciona contra ella, así que "cuánto me queda" y "cuánto me paso" se leen sin
   interpretar números. Es el patrón de los POS hipotecarios (badge junto al monto, no junto
   al precio).

   Cero hex: todo sale de tokens, y cada regla tiene su variante dark. Los colores de banda
   son los mismos que usan los chips av-chip--success/warning/danger, para que el chip y la
   barra no puedan contradecirse. */
.ll-block {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
    padding: 12px 14px;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    background: var(--color-gray-50);
}

html.dark .ll-block {
    border-color: var(--color-dark-600);
    background: var(--color-dark-750);
}

.ll-block__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.ll-block__context {
    font-size: 12px;
    color: var(--color-gray-600);
}

html.dark .ll-block__context {
    color: var(--color-dark-200);
}

.ll-meter {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ll-meter__track {
    position: relative;
    height: 8px;
    border-radius: 9999px;
    background: var(--color-gray-200);
    overflow: visible;
}

html.dark .ll-meter__track {
    background: var(--color-dark-600);
}

.ll-meter__fill {
    height: 100%;
    border-radius: 9999px;
    /* La transición es lo que convierte el indicador en herramienta de negociación: al mover
       la entrada, la barra se desplaza en vez de saltar. */
    transition: width 320ms ease-out;
    background: var(--color-gray-400);
}

.ll-meter--under .ll-meter__fill {
    background: var(--color-success);
}

.ll-meter--near .ll-meter__fill {
    background: var(--color-warning);
}

.ll-meter--over .ll-meter__fill {
    background: var(--color-error);
}

/* Marca del límite: vertical, por encima de la barra y del relleno. */
.ll-meter__mark {
    position: absolute;
    top: -3px;
    width: 2px;
    height: 14px;
    border-radius: 1px;
    background: var(--color-gray-700);
}

html.dark .ll-meter__mark {
    background: var(--color-dark-100);
}

.ll-meter__legend {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--color-gray-600);
}

html.dark .ll-meter__legend {
    color: var(--color-dark-200);
}

.ll-manual {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.ll-manual__field {
    max-width: 200px;
}

.ll-manual__official {
    font-size: 12px;
    color: var(--color-gray-600);
}

html.dark .ll-manual__official {
    color: var(--color-dark-200);
}

.ll-manual__warn {
    font-size: 12px;
    color: var(--color-warning);
}

/* Contexto de mediana, bajo el Purchase Price. Deliberadamente NEUTRO: la mediana no es un
   techo del préstamo y pintarla de verde o rojo sugeriría que sí. */
.ll-median {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 11px;
    color: var(--color-gray-600);
}

html.dark .ll-median {
    color: var(--color-dark-200);
}

.ll-median__dev {
    font-weight: 500;
}

.ll-median__icon.mud-icon-root {
    font-size: 14px;
    color: var(--color-gray-500);
}

html.dark .ll-median__icon.mud-icon-root {
    color: var(--color-dark-300);
}

/* §132 ─── av-account-panel — Edit User Account card (grouped current email +
 *   account identifier, change-email section, linked-contact panel). Layout /
 *   color only; typography stays on Typo.* per the scale. */
.av-account-panel {
    display: flex;
    flex-direction: column;
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-150);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

html.dark .av-account-panel {
    background: var(--color-dark-700);
    border-color: var(--color-dark-500);
}

.av-account-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
}

.av-account-row + .av-account-row {
    border-top: 1px solid var(--color-gray-150);
}

html.dark .av-account-row + .av-account-row {
    border-top-color: var(--color-dark-500);
}

.av-account-row__main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.av-account-row__value-line {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.av-account-row__label.mud-typography {
    color: var(--color-gray-500);
}

.av-account-row__value.mud-typography {
    color: var(--color-gray-900);
    word-break: break-word;
}

.av-account-row__hint.mud-typography {
    color: var(--color-gray-500);
}

html.dark .av-account-row__label.mud-typography,
html.dark .av-account-row__hint.mud-typography {
    color: var(--color-dark-300);
}

html.dark .av-account-row__value.mud-typography {
    color: var(--color-dark-50);
}

/* Change-email section (plain, no panel) */
.av-account-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.av-account-section__field {
    margin-top: 8px;
}

.av-account-section__title.mud-typography {
    color: var(--color-gray-900);
}

.av-account-section__desc.mud-typography {
    color: var(--color-gray-500);
}

html.dark .av-account-section__title.mud-typography {
    color: var(--color-dark-50);
}

html.dark .av-account-section__desc.mud-typography {
    color: var(--color-dark-300);
}

/* Linked-to-a-contact panel (read-only state when the user already has a contact) */
.av-account-linked {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--color-gray-150);
    border-radius: var(--radius-lg);
}

html.dark .av-account-linked {
    border-color: var(--color-dark-500);
}

.av-account-linked__icon {
    color: var(--color-success);
    flex-shrink: 0;
}

.av-account-linked__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.av-account-linked__link.mud-button-root {
    flex-shrink: 0;
    color: var(--color-primary-600);
    background: transparent;
    text-transform: none;
}

.av-account-linked__link.mud-button-root:hover {
    background: rgb(from var(--color-primary-500) r g b / 0.08);
}

html.dark .av-account-linked__link.mud-button-root {
    color: var(--color-primary-400);
}

.av-account-linked__title.mud-typography {
    color: var(--color-gray-900);
}

.av-account-linked__sub.mud-typography {
    color: var(--color-gray-500);
}

html.dark .av-account-linked__title.mud-typography {
    color: var(--color-dark-50);
}

html.dark .av-account-linked__sub.mud-typography {
    color: var(--color-dark-300);
}

/* §133 ─── av-presence-dot — WI #1700. "Is this teammate connected right now?", next to their
   name. GLOBAL and not scoped on purpose: the same answer is painted in the assignee picker
   (AddTaskDrawer) and in the detail panel (TaskDetailDrawer), and a scoped copy in each would be
   two things to keep in step. Absence of the dot means "we were not told" — the caller renders
   nothing at all when it lacks TaskManager.GetTeammatesOnline, so "offline" is never implied. */
.av-presence-dot {
    display: inline-block;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    margin-inline-end: 6px;
    vertical-align: middle;
}

.av-presence-dot--online {
    background-color: var(--color-success);
    box-shadow: 0 0 0 2px rgb(from var(--color-success) r g b / 0.20);
}

.av-presence-dot--offline {
    background-color: var(--color-gray-300);
}

html.dark .av-presence-dot--offline {
    background-color: var(--color-dark-400);
}

/* ═══════════════════════════════════════════════════════════════════
   Language Translation Disclosure (WI #1582)
   FHFA's "Notice to Borrowers about Language", collapsed under the
   1003's language question on both the borrower and the LO screen.
   ═══════════════════════════════════════════════════════════════════ */

.av-language-disclosure {
    background-color: transparent;
}

/* The three HUD steps are a real <ol>, so the numerals never enter the
   resx. MudBlazor's reset strips list padding, which would leave the
   numbers sitting outside the panel; `padding-inline-start` (not
   `padding-left`) keeps them on the correct side in ar-SA. */
.av-language-disclosure__steps {
    margin: 0;
    padding-inline-start: 24px;
    list-style: decimal;
}

.av-language-disclosure__steps > li {
    margin-bottom: 4px;
}

/* ============================================================================
 * §131 ─── av-savedviews — cluster de vistas guardadas (selector + acciones)
 * ============================================================================
 * Vive en la cabecera de Loan Pipeline, a la derecha del titulo. El componente
 * es anterior al pase Tailux y traia el outline duro de Mud en el select y un
 * MudButtonGroup cuyo borde se pinta con currentColor (de ahi el contorno casi
 * negro). Acá solo queda lo que el design system no cubre:
 *
 * - La altura. `av-input--soft` (§52) aporta fondo y radio pero no altura; Mud
 *   Margin.Dense ronda 40 px y `av-btn` mide 36. Igualar las dos es lo que hace
 *   que el cluster se lea como una sola fila.
 * - El punto de cambios sin guardar sobre el boton.
 * Todo lo demas (fondo, borde, radio, hover, dark) lo ponen av-input--soft y
 * av-btn--outline / av-btn-soft-warning.
 * ============================================================================ */

.av-savedviews__select .mud-input.mud-input-outlined {
    min-height: 36px;
}

.av-savedviews__select .mud-input-input {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 13px !important;
}

/* El adorno de inicio (bookmark) queda a la escala de los StartIcon de av-btn. */
.av-savedviews__select .mud-input-adornment .mud-icon-root {
    width: 18px;
    height: 18px;
    font-size: 18px;
}

.av-savedviews__select {
    min-width: 200px;
}

/* Estrella que marca la vista predeterminada dentro del desplegable. Solo
   indicador — la accion de ponerla vive en el menu. */
.av-savedviews__star.mud-icon-root {
    width: 14px;
    height: 14px;
    font-size: 14px;
}

/* Punto de cambios sin guardar. El color lo da av-btn-soft-warning via
   currentColor, asi que no se declara un amarillo propio. */
.av-savedviews__dot {
    width: 6px;
    height: 6px;
    margin-inline-start: 6px;
    border-radius: 9999px;
    background: currentColor;
    flex-shrink: 0;
}

/* §134 ─── av-cat — Contact Category cards (Settings → Category Types).
   Layout + color only; all text metrics come from Typo.* on the markup. */
.av-cat {
    background: var(--color-white);
    padding: 25px;
    border-radius: 4px;
}

html.dark .av-cat {
    background: var(--color-dark-700);
}

/* Pipeline Stages sub-tabs (Lead Status / Opportunity Stages) render inside the
   page card via MudTabs; the card is the surface, so the inner av-cat stays
   transparent to avoid a card-in-card. */
.av-page-card .av-cat,
html.dark .av-page-card .av-cat {
    background: transparent;
    padding: 0;
    border-radius: 0;
}

/* Separate the pager from the table inside the settings cards. */
.av-cat .av-pagination {
    margin-top: 15px;
}

/* Status cell: keep the toggle centered/aligned across rows regardless of the
   optional DEFAULT badge, which floats to the right without shifting the switch. */
.av-status-cell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.av-status-cell__badge {
    position: absolute;
    left: 100%;
    margin-left: 8px;
}

.av-cat-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.av-cat-toolbar__search {
    flex: 0 1 320px;
    min-width: 200px;
    margin-left: auto;
}

.av-cat .av-tabs-with-icon__tab-count {
    margin-left: 10px;
}

.av-cat-loading {
    display: flex;
    justify-content: center;
    padding: 40px 0;
}

.av-cat-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: stretch;
}

@media (min-width: 760px) {
    .av-cat-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.av-cat-card.mud-paper {
    padding: 18px;
    display: flex;
    flex-direction: column;
}

.av-cat-card__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.av-cat-card__id {
    min-width: 0;
    flex: 1;
}

.av-cat-card__name {
    color: var(--color-gray-900);
}

html.dark .av-cat-card__name {
    color: var(--color-dark-50);
}

.av-cat-card__eyebrow {
    color: var(--color-gray-500);
}

html.dark .av-cat-card__eyebrow {
    color: var(--color-dark-300);
}

.av-cat-ico {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
}

.av-cat-ico .mud-icon-root,
.av-cat-ico svg {
    width: 20px;
    height: 20px;
}

.av-cat-ico--teal {
    background: color-mix(in srgb, var(--color-success) 14%, var(--color-white));
    color: var(--color-success);
}

.av-cat-ico--amber {
    background: color-mix(in srgb, var(--color-warning) 16%, var(--color-white));
    color: var(--color-warning);
}

.av-cat-ico--purple {
    background: color-mix(in srgb, var(--color-secondary) 15%, var(--color-white));
    color: var(--color-secondary);
}

.av-cat-ico--blue {
    background: color-mix(in srgb, var(--color-primary) 13%, var(--color-white));
    color: var(--color-primary);
}

.av-cat-ico--neutral {
    background: var(--color-gray-150);
    color: var(--color-gray-500);
}

html.dark .av-cat-ico--teal {
    background: color-mix(in srgb, var(--color-success) 24%, var(--color-dark-700));
}

html.dark .av-cat-ico--amber {
    background: color-mix(in srgb, var(--color-warning) 24%, var(--color-dark-700));
}

html.dark .av-cat-ico--purple {
    background: color-mix(in srgb, var(--color-secondary) 26%, var(--color-dark-700));
    color: var(--color-secondary);
}

html.dark .av-cat-ico--blue {
    background: color-mix(in srgb, var(--color-primary) 24%, var(--color-dark-700));
}

html.dark .av-cat-ico--neutral {
    background: var(--color-dark-600);
    color: var(--color-dark-300);
}

.av-cat-card__del.mud-icon-button {
    margin-left: auto;
    color: var(--color-gray-400);
}

.av-cat-card__del.mud-icon-button:hover {
    color: var(--color-error);
}

/* Card action icons (Manage relationships / Delete) follow the 18px icon rule. */
.av-cat-card__head .row-actions .mud-icon-root,
.av-cat-card__head .row-actions svg {
    width: 18px;
    height: 18px;
    font-size: 18px;
}

.av-cat-card__desc {
    color: var(--color-gray-600);
    margin-top: 12px;
}

html.dark .av-cat-card__desc {
    color: var(--color-dark-200);
}

.av-cat-card__divider {
    height: 1px;
    background: var(--color-gray-100);
    margin: 16px 0 14px;
    margin-top: auto;
}

html.dark .av-cat-card__divider {
    background: var(--color-dark-600);
}

.av-cat-card__foot {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.av-cat-tag--dot::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
    margin-right: 2px;
    flex: 0 0 auto;
}

.av-cat-tag--lock .mud-icon-root,
.av-cat-tag--lock svg {
    width: 13px;
    height: 13px;
}

/* §135 ─── av-ptype — Partner & Vendor Types table (Settings → Partner Types).
   Layout + color only; text metrics via Typo.* (avatar initial is the allowed
   avatar exception). */
.av-ptype-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.av-ptype-head__actions {
    flex: 0 0 auto;
    margin-left: auto;
}

.av-ptype-summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-gray-500);
}

.av-ptype-summary .mud-icon-root,
.av-ptype-summary svg {
    width: 15px;
    height: 15px;
}

html.dark .av-ptype-summary {
    color: var(--color-dark-300);
}

.av-ptype-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* §136 ─── loan-content-surface — content area paper of the 1003 LoanLayout.
   Transparent, elevation-0 paper so each tab's content sits on the shell background.
   Replaces an inline Style="background: transparent;" on the MudPaper. */
.loan-content-surface.mud-paper {
    background: transparent;
}

/* §135 ─── av-tz-picker — AvTimeZoneAutocomplete popover (grouped zones + "Show more").
   Scoped to .av-tz-picker-popover; other av-popover consumers are untouched. */

/* Mud scrolls the inner .mud-list, which inherits the popover's MaxHeight; the §36 vertical
   padding would push the list's last 8px (the "Show more" button) under overflow:hidden. */
.av-popover.av-tz-picker-popover.mud-popover {
    padding-block: 0 !important;
}

/* Region header rows are disabled list items: keep them legible and pinned while scrolling. */
.av-tz-picker-popover .mud-list-item.mud-list-item-disabled:has(.av-tz-picker__group) {
    opacity: 1;
    cursor: default;
    position: sticky;
    top: 0;
    z-index: 1;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    background-color: var(--color-gray-100);
    border-block: 1px solid var(--color-gray-200);
}

html.dark .av-tz-picker-popover .mud-list-item.mud-list-item-disabled:has(.av-tz-picker__group) {
    background-color: var(--color-dark-800);
    border-block-color: var(--color-dark-500);
}

.av-tz-picker__group {
    color: var(--color-gray-600);
}

html.dark .av-tz-picker__group {
    color: var(--color-dark-200);
}

.av-tz-picker-popover .mud-autocomplete-after-items {
    padding: 4px 8px;
    border-top: 1px solid var(--color-gray-200);
}

html.dark .av-tz-picker-popover .mud-autocomplete-after-items {
    border-top-color: var(--color-dark-500);
}

/* §137 ─── av-td — Transfer decision dialog (Approve / Reassign / Decline).
   Composes on the av-form-dialog frame (sticky header/body/footer + size). Re-skins only:
   white header with an icon chip + stacked title/subtitle, a gray parties card (FROM → TO),
   a soft collaborator banner, the initiator note, and the reassign picker.
   Layout + color only — text metrics come from Typo.* on the markup. */

/* Header — white, icon chip + stacked title/subtitle grouped left, close right. */
.av-td.mud-dialog .mud-dialog-title {
    align-items: flex-start;
    background: var(--color-white) !important;
    border-bottom: 1px solid var(--color-gray-100);
}
html.dark .av-td.mud-dialog .mud-dialog-title {
    background: var(--color-dark-700) !important;
    border-bottom-color: var(--color-dark-600);
}
.av-td__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}
.av-td__head-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgb(from var(--color-primary-500) r g b / 0.12);
    color: var(--color-primary-600);
}
.av-td__head-icon .mud-icon-root,
.av-td__head-icon svg { width: 18px; height: 18px; }
html.dark .av-td__head-icon {
    background: rgb(from var(--color-primary-400) r g b / 0.18);
    color: var(--color-primary-400);
}
.av-td__head-text { min-width: 0; display: flex; flex-direction: column; }
.av-td__subtitle { color: var(--color-gray-500); }
html.dark .av-td__subtitle { color: var(--color-dark-300); }

/* Body — own 16px padding + scroll region. */
.av-td.mud-dialog .mud-dialog-content {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px !important;
}
.av-td__body { display: flex; flex-direction: column; gap: 16px; }

/* Parties card (contact + FROM → TO). */
.av-td__card {
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
html.dark .av-td__card { background: var(--color-dark-700); border-color: var(--color-dark-500); }
.av-td__contact { display: flex; align-items: center; gap: 8px; }
.av-td__parties { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.av-td__party {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    flex: 1 1 0;
    min-width: 0;
}
.av-td__party-name { color: var(--color-gray-900); }
html.dark .av-td__party-name { color: var(--color-dark-50); }
.av-td__party-label { color: var(--color-gray-500); }
html.dark .av-td__party-label { color: var(--color-dark-300); }
.av-td__party-strike { color: var(--color-gray-400); text-decoration: line-through; }
html.dark .av-td__party-strike { color: var(--color-dark-400); }

/* Arrow chip between parties. */
.av-td__arrow {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    align-self: center;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--color-white);
    color: var(--color-primary-600);
    border: 1px solid var(--color-gray-200);
}
.av-td__arrow .mud-icon-root, .av-td__arrow svg { width: 16px; height: 16px; }
html.dark .av-td__arrow {
    background: var(--color-dark-700);
    border-color: var(--color-dark-500);
    color: var(--color-primary-400);
}

/* Avatars (initials). */
.av-td-avatar {
    flex: 0 0 auto;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--color-gray-300);
    color: var(--color-gray-700);
}
html.dark .av-td-avatar { background: var(--color-dark-500); color: var(--color-dark-100); }
.av-td-avatar--md { width: 44px; height: 44px; }
.av-td-avatar--sm { width: 30px; height: 30px; }
.av-td-avatar--square { border-radius: 8px; width: 28px; height: 28px; }
.av-td-avatar--active {
    background: rgb(from var(--color-primary-500) r g b / 0.14);
    color: var(--color-primary-700);
    box-shadow: 0 0 0 2px var(--color-primary-500);
}
html.dark .av-td-avatar--active {
    background: rgb(from var(--color-primary-400) r g b / 0.2);
    color: var(--color-primary-200);
    box-shadow: 0 0 0 2px var(--color-primary-400);
}

/* Collaborator banner (soft success). */
/* Same soft-info box as the 1003 wizard's fc-wizard-info: info tint + border, everything inherits. */
.av-td__banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgb(from var(--color-info) r g b / 0.10);
    border: 1px solid rgb(from var(--color-info) r g b / 0.22);
    color: var(--color-info-darker);
}
html.dark .av-td__banner { color: var(--color-info-lighter); }
.av-td__banner-icon { flex: 0 0 auto; color: inherit; }
.av-td__banner-icon .mud-icon-root, .av-td__banner-icon svg { width: 20px; height: 20px; }
.av-td__banner-title { color: inherit; }
.av-td__banner-body { color: inherit; }

/* Initiator note. */
.av-td__note { display: flex; flex-direction: column; gap: 6px; }
.av-td__note-label { color: var(--color-gray-500); }
html.dark .av-td__note-label { color: var(--color-dark-300); }
.av-td__note-row { display: flex; align-items: center; gap: 8px; }
/* Chat-bubble shape: rounded on three corners, tucked at the top-left toward the avatar. */
.av-td__note-bubble {
    flex: 0 1 auto;
    padding: 8px 14px;
    border-radius: 4px 16px 16px 16px;
    background: var(--color-gray-150);
    color: var(--color-gray-700);
}
html.dark .av-td__note-bubble { background: var(--color-dark-600); color: var(--color-dark-100); }

/* "Give it to someone else instead" link. */
.av-td__link.mud-button-root {
    align-self: flex-start;
    padding: 4px 8px;
    min-width: 0;
    height: auto;
    background: transparent !important;
    color: var(--color-primary-600);
    text-transform: inherit;
}
.av-td__link.mud-button-root:hover { background: transparent !important; text-decoration: underline; }
html.dark .av-td__link.mud-button-root { color: var(--color-primary-400); }
.av-td__link .mud-icon-root, .av-td__link svg { width: 16px; height: 16px; }

/* Reassign picker section (bordered, primary). */
.av-td__reassign {
    border: 1px solid var(--color-primary-500);
    border-radius: var(--radius-lg);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
html.dark .av-td__reassign { border-color: var(--color-primary-400); }
.av-td__reassign-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.av-td__reassign-title { color: var(--color-gray-800); }
html.dark .av-td__reassign-title { color: var(--color-dark-100); }
.av-td__reassign-hint { color: var(--color-primary-600); }
html.dark .av-td__reassign-hint { color: var(--color-primary-400); }
.av-td__undo.mud-button-root {
    padding: 2px 6px;
    min-width: 0;
    height: auto;
    background: transparent !important;
    color: var(--color-primary-600);
    text-transform: inherit;
}
html.dark .av-td__undo.mud-button-root { color: var(--color-primary-400); }

/* §101 ─── av-login — Secure Access wizard (Login by email). Restyle-only skin:
   layout + color via tokens, typography via Typo.*. No flow/text change. Replaces
   the page's former inline styles and <style> block. ──────────────────────────── */

/* Avalme brand primary for this screen: the root carries data-theme-brand="avalme",
   so --color-primary-* is the Avalme Blue ramp. MudBlazor Color.Primary reads the Mud
   palette (violet in the account theme), so remap it to the token here. */
.av-login {
    --mud-palette-primary: var(--color-primary-500);
    --mud-palette-primary-darken: var(--color-primary-700);
    --mud-palette-primary-lighten: var(--color-primary-400);
    --mud-palette-primary-hover: rgb(from var(--color-primary-500) r g b / 0.1);
    --mud-palette-primary-text: var(--color-white);
}

/* Header typography — exact design spec (Figma). Raw px/HEX by request; the login
   root carries data-theme-brand="avalme", so --font-display resolves to Montserrat. */
.av-login .av-login-title {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    font-size: 20px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    color: #3D3D3D !important;
}
html.dark .av-login .av-login-title { color: var(--color-dark-50) !important; }

.av-login .av-login-subtitle {
    font-family: var(--font-sans) !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    color: #8899AE !important;
}

/* Button labels in this screen may wrap to two lines (method toggle). */
.av-login .mud-button-label { flex-wrap: wrap; }

/* The legacy avalme.css / avalme-legacy.css paint EVERY filled-primary MudButton with a
   violet gradient via !important (9 props). Scope-override just the color + shadow to
   Avalme Blue here (3-class selector beats the legacy 2-class one); the legacy radius /
   uppercase / padding stay, matching the mockup. */
.av-login .mud-button-filled.mud-button-filled-primary {
    background: var(--color-primary-500) !important;
    box-shadow: none !important;
}
.av-login .mud-button-filled.mud-button-filled-primary:hover {
    background: var(--color-primary-600) !important;
    box-shadow: none !important;
}

/* ── Method toggle (Email / Phone segmented control) — design spec ── */
/* Drop the mb-6 gap under the toggle's grid item. */
.av-login .mud-grid-item:has(> .av-login-toggle) {
    margin-bottom: 0 !important;
}
.av-login-toggle {
    background-color: #F1F5F9;
    border-radius: var(--radius-lg);   /* 8px */
    padding: 0 !important;
}
html.dark .av-login-toggle { background-color: var(--color-dark-700); }
/* Exact 6px gap between the two buttons (MudGrid Spacing gives 8px). */
.av-login-toggle .mud-grid {
    margin: 0 !important;
    gap: 6px;
    flex-wrap: nowrap;
}
.av-login-toggle .mud-grid > .mud-grid-item {
    padding: 0 !important;
    flex: 1 1 0;
    max-width: none;
}

/* Active method button ("Acceso por correo", selected) — design spec. 4-class
   selector beats the legacy .mud-button-filled-primary override. */
.av-login .av-login-toggle__btn--active.mud-button-filled.mud-button-filled-primary {
    background: #0061FD !important;
    box-shadow: 0px 4px 14px 0px #0061FE29 !important;
    border-radius: 9px !important;
    padding: 8px 11px !important;
}

/* The "I already have a code" text link is sentence-case in the mockup, not the
   uppercase the button chrome forces. (Filled SEND + outlined GOOGLE stay uppercase.) */
.av-login .mud-button-text { text-transform: none !important; }

/* "¿Ya tiene un código?" (muted) + "Ingresarlo" (link) on one line — not a button:
   no button padding or hover fill, underline on hover. */
.av-login-code-link {
    gap: 4px;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* OTP segmented input (OtpCodeInput) — N separate boxes, centered digits. */
.av-otp {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}
.av-otp__box {
    width: 48px;
    height: 56px;
    text-align: center;
    font-family: var(--font-sans);
    font-size: 20px;
    font-weight: 600;
    color: var(--color-gray-800);
    background: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: 8px;
    outline: none;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.av-otp__box:focus {
    border-color: var(--color-primary-600);
    box-shadow: 0 0 0 3px rgb(from var(--color-primary-600) r g b / 0.15);
}
html.dark .av-otp__box {
    background: var(--color-dark-700);
    color: var(--color-dark-50);
    border-color: var(--color-dark-400);
}
/* Login: resting border matches the email field. */
.av-login .av-otp__box { border-color: #8899AE; }

/* Location chooser (step 3) — each location is a selectable card: icon tile + name/url/role
   chip, blue outline + chevron on hover. Scroll kept for long lists. */
.av-loc-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 400px;
    overflow: hidden auto;
    padding: 2px;
}
.av-loc-card {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    text-align: left;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: 12px;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
html.dark .av-loc-card {
    background: var(--color-dark-700);
    border-color: var(--color-dark-500);
}
.av-loc-card:hover:not(.av-loc-card--disabled) {
    background: rgb(from #0061FD r g b / 0.06);
    border-color: #0061FD;
}
.av-loc-card--disabled {
    cursor: not-allowed;
    opacity: 0.7;
}
/* Icon tile — soft blue by default, solid blue with white glyph on hover/active. */
.av-loc-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgb(from #0061FD r g b / 0.10);
    transition: background-color .15s ease;
}
.av-loc-card__icon .mud-icon-root {
    width: 22px;
    height: 22px;
    color: #0061FD;
    transition: color .15s ease;
}
.av-loc-card:hover:not(.av-loc-card--disabled) .av-loc-card__icon { background: #0061FD; }
.av-loc-card:hover:not(.av-loc-card--disabled) .av-loc-card__icon .mud-icon-root { color: var(--color-white); }
.av-loc-card__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}
.av-loc-card__name {
    font-family: var(--font-sans) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    color: var(--color-gray-900) !important;
}
html.dark .av-loc-card__name { color: var(--color-dark-50) !important; }
.av-loc-card__url {
    font-family: var(--font-sans) !important;
    font-weight: 400 !important;
    font-size: 11px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    color: #8899AE !important;
}
.av-loc-card__chip {
    align-self: flex-start;
    margin-top: 4px;
    padding: 2px 10px;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    color: #0061FD;
    background: rgb(from #0061FD r g b / 0.10);
    border-radius: 9999px;
}
/* Chevron reveals on hover. */
.av-loc-card__chevron {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: #0061FD;
    opacity: 0;
    transition: opacity .15s ease;
}
.av-loc-card:hover:not(.av-loc-card--disabled) .av-loc-card__chevron { opacity: 1; }

/* Location tooltip — white card with job info: gray label + bold value. */
.mud-tooltip.av-loc-tooltip {
    border: 1px solid var(--color-gray-200);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgb(from var(--color-gray-900) r g b / 0.12);
    padding: 12px 14px;
    max-width: 260px;
}
html.dark .mud-tooltip.av-loc-tooltip { border-color: var(--color-dark-500); }
.av-loc-tooltip__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}
.av-loc-tooltip__label {
    font-family: var(--font-sans) !important;
    font-size: 11px !important;
    color: #8899AE !important;
    margin-top: 8px;
}
.av-loc-tooltip__body .av-loc-tooltip__label:first-child { margin-top: 0; }
.av-loc-tooltip__value {
    font-family: var(--font-sans) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    color: var(--color-gray-900) !important;
}
html.dark .av-loc-tooltip__value { color: var(--color-dark-50) !important; }

/* "Code resent" info dialog (after Resend): white body with title + message, gray
   footer band with the Accept button right-aligned. */
.av-resent-dialog.mud-dialog {
    border-radius: 12px;
    overflow: hidden;
    background: var(--color-gray-100) !important;
}
html.dark .av-resent-dialog.mud-dialog {
    background: var(--color-dark-600) !important;
}
/* Title + body are one white block; the gray dialog background shows as a band
   between them and the (white) actions row — identical to the authenticator. */
.av-resent-dialog .mud-dialog-title,
.av-resent-dialog .mud-dialog-content {
    background: var(--color-white);
}
html.dark .av-resent-dialog .mud-dialog-title,
html.dark .av-resent-dialog .mud-dialog-content {
    background: var(--color-dark-700);
}
.av-resent-dialog .mud-dialog-title {
    padding-bottom: 4px;
}
.av-resent-dialog .mud-dialog-content {
    padding: 0 24px 24px;
}
.av-resent-dialog__title {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
    color: var(--color-gray-900) !important;
}
html.dark .av-resent-dialog__title { color: var(--color-dark-50) !important; }
.av-resent-dialog__msg {
    font-family: var(--font-sans) !important;
    font-size: 13px !important;
    color: #8899AE !important;
    margin-top: 6px;
}
.av-resent-dialog .mud-dialog-actions {
    background: var(--color-white);
    padding: 16px 24px;
    margin-top: 16px; /* reveals the gray dialog background as a separator band */
    justify-content: flex-end;
}
html.dark .av-resent-dialog .mud-dialog-actions { background: var(--color-dark-700); }

/* Accept button — solid Avalme Blue, no uppercase (scoped to the actions bar so it
   wins over Mud's default button chrome). */
.av-resent-dialog .mud-dialog-actions .mud-button-root {
    background-color: #0061FD !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 8px 22px !important;
    box-shadow: none !important;
}
.av-resent-dialog .mud-dialog-actions .mud-button-root:hover {
    background-color: #0052d6 !important;
}
.av-resent-dialog .mud-dialog-actions .mud-button-root .mud-button-label {
    color: #FFFFFF !important;
    text-transform: none !important;
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}
/* "¿Ya tienes un código?" question — Montserrat SemiBold 14, per design spec. */
.av-login-code-link__question {
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
}
.av-login-code-link .mud-button-root {
    min-width: 0;
    padding: 0 4px;
    background: transparent !important;
    box-shadow: none !important;
    font-weight: 500;
}
.av-login-code-link .mud-button-root:hover {
    background: transparent !important;
    text-decoration: underline;
}

/* Outlined secondary CTA (e.g. "Back to email entry") — Avalme Blue outline, submit height. */
.av-login .av-login-outline-btn.mud-button-outlined {
    border: 1px solid #0061FD !important;
    border-radius: 8px !important;
    height: 43px !important;
    min-height: 43px !important;
}
.av-login .av-login-outline-btn .mud-button-label {
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    letter-spacing: 0 !important;
    color: #0061FD !important;
}
.av-login .av-login-outline-btn .mud-icon-root { color: #0061FD !important; }

/* Resend — dark, no chrome; the countdown reads as a muted disabled state. */
.av-login .av-login-resend-btn.mud-button-text {
    background: transparent !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
.av-login .av-login-resend-btn .mud-button-label {
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    letter-spacing: 0 !important;
    color: var(--color-gray-900) !important;
}
html.dark .av-login .av-login-resend-btn .mud-button-label { color: var(--color-dark-50) !important; }

/* "Sign in with Google": MudBlazor outlined shape, in Avalme Blue. */
.av-login .av-login-google-btn.mud-button-outlined {
    color: #0061FD;
    border: 1px solid #0061FD;
}
/* Google button label — Montserrat SemiBold 14, centered, blue on white bg. */
.av-login .av-login-google-btn .mud-button-label {
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    color: #0061FD !important;
}

/* Two-line method label (channel on line 1, step descriptor on line 2). Sits
   inside a MudButton label, so its sizing is the §Typography "Buttons" exception. */
.av-login-method-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-transform: none;
}
/* Line 1: channel ("Acceso por correo") — Montserrat SemiBold 14. */
.av-login-method-title {
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
}
/* Line 2: step descriptor ("Verificación por pasos") — Inter Regular 12. */
.av-login-method-sub {
    display: block;
    font-family: var(--font-sans) !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
}
/* Toggle icons — glyph metrics per design. Mail: 24px box → glyph 20×16, stroke
   1.5 (Heroicons default). Phone: 20px box → glyph ~16.6², stroke 2. */
.av-login-method-icon--mail { font-size: 24px !important; }
.av-login-method-icon--phone { font-size: 20px !important; }
.av-login-method-icon--phone path { stroke-width: 2; }

/* Primary submit CTA ("Enviar código de verificación") — design spec. */
.av-login .av-login-submit-btn.mud-button-filled.mud-button-filled-primary {
    background: #0061FD !important;
    box-shadow: 0px 4px 14px 0px #0061FE29 !important;
    border-radius: 8px !important;
    padding: 8px !important;
    height: 43px !important;
    min-height: 43px !important;
}
/* Submit CTA label — Montserrat SemiBold 14, white, centered. */
.av-login .av-login-submit-btn .mud-button-label {
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    color: #FFFFFF !important;
}

/* Cooldown state: disabled gray button with the clock + "Resend code in M:SS" in muted gray. */
.av-login .av-login-submit-btn--cooldown.mud-button-filled.mud-button-filled-primary {
    background: var(--color-gray-200) !important;
    box-shadow: none !important;
}
html.dark .av-login .av-login-submit-btn--cooldown.mud-button-filled.mud-button-filled-primary {
    background: var(--color-dark-600) !important;
}
.av-login .av-login-submit-btn--cooldown .mud-button-label,
.av-login .av-login-submit-btn--cooldown .mud-icon-root,
.av-login .av-login-submit-btn--cooldown .mud-typography {
    color: var(--color-gray-500) !important;
}
html.dark .av-login .av-login-submit-btn--cooldown .mud-button-label,
html.dark .av-login .av-login-submit-btn--cooldown .mud-icon-root,
html.dark .av-login .av-login-submit-btn--cooldown .mud-typography {
    color: var(--color-dark-300) !important;
}

/* Text inputs (email / password) — resting outline per design: 1px #8899AE,
   radius 8px. Focus color still handled by the form-input bridge. */
.av-login .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-width: 1px !important;
    border-color: #8899AE !important;
    border-radius: 8px !important;
}
/* Typed text (and placeholder) inside the input — design spec. */
.av-login .mud-input.mud-input-outlined input,
.av-login .mud-input.mud-input-outlined .mud-input-slot {
    font-family: var(--font-sans) !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    color: #8899AE !important;
    /* readonly/disabled inputs (e.g. the locked email) keep the defined color:
       webkit paints their text via -webkit-text-fill-color, which overrides `color`. */
    -webkit-text-fill-color: #8899AE !important;
}

/* Phone input (PhoneInputIntl) border parity with the email field — ONLY inside the
   login. The av-phone-input state machine otherwise paints the resting border gray and
   turns it blue (primary-600) on focus; the email field keeps #8899AE in every state,
   so the phone must too. Covers idle AND focus (only error is left to its own rule).
   Type/color come from the shared §101a slot rules; padding-left is left to
   intl-tel-input's measured inline value. */
.av-login .av-phone-input .mud-input.mud-input-outlined:not(.mud-input-error) .mud-input-outlined-border {
    border-color: #8899AE !important;
    border-width: 1px !important;
    border-radius: 8px !important;
}
/* Label at the SAME size as the email field: the shared av-phone-input rule shrinks
   it with scale(0.75); here it mirrors the §101a static floating label (12px, no
   scale, surface-colored notch at top-left — matches the card in light & dark). */
.av-login .av-phone-input.mud-input-control .mud-input-label-outlined {
    font-size: 12px !important;
    transform: none !important;
    top: -8px !important;
    left: 8px !important;
    background: var(--mud-palette-surface) !important;
    padding: 0 8px !important;
    color: #8899AE !important;
}
/* Country selector (flag text, dial code, arrow) in the same color as the input. */
.av-login .av-phone-input .iti {
    --iti-icon-color: #8899AE;
    --iti-dialcode-color: #8899AE;
}
.av-login .av-phone-input .iti__selected-country,
.av-login .av-phone-input .iti__selected-dial-code {
    color: #8899AE !important;
}

/* ── Info box (accent-left panel above the input) ── */
.av-login-infobox {
    background: #F6F8FA;
    border-radius: 8px;
    padding: 20px;
}
html.dark .av-login-infobox {
    background: var(--color-dark-500);
}
.av-login-infobox__title {
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    margin-bottom: 8px;
    color: #0061FD;
}
html.dark .av-login-infobox__title { color: var(--color-dark-100); }
/* Info-box description ("To begin, please enter your email…") — design spec. */
.av-login .av-login-infobox .mud-text-secondary {
    font-family: var(--font-sans) !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    color: #8899AE !important;
}

/* Info-box tone variants (error / success) — additive on .av-login-infobox.
   Error keeps the standard band background; only the title turns red (#E11D48). */
.av-login-infobox--error .av-login-infobox__title { color: #E11D48; }
html.dark .av-login-infobox--error .av-login-infobox__title { color: #E11D48; }

/* Error CTA — same shape/label as the submit button, red (#E11D48) fill. */
.av-login .av-login-error-btn.mud-button-filled {
    background: #E11D48 !important;
    box-shadow: 0px 4px 14px 0px rgb(from #E11D48 r g b / 0.16) !important;
    border-radius: 8px !important;
    padding: 8px !important;
    height: 43px !important;
    min-height: 43px !important;
}
.av-login .av-login-error-btn.mud-button-filled:hover { background: #BE123C !important; }

/* Footer bar (full-bleed to the account card edges, like the stepper): matches the account card
   surface (white in light, dark card in dark) with the same gray separation band on top, right-
   aligned CTA. Used by the Google-callback error page. */
.av-login-footer-bar {
    margin: 1.5rem -2rem -2rem;
    padding: 1.25rem 1.5rem;
    background: var(--mud-palette-surface);
    border-top: 16px solid var(--av-brand-soft-background, #F6F8FA);
    border-radius: 0 0 16px 16px;
    display: flex;
    justify-content: flex-end;
}
html.dark .av-login-footer-bar { border-top-color: var(--color-dark-600); }
.av-login .av-login-footer-bar__btn.mud-button-filled {
    width: auto;
    padding-left: 28px !important;
    padding-right: 28px !important;
}

/* Success keeps the standard band background; only the title stays green. */
.av-login-infobox--success .av-login-infobox__title { color: var(--color-success); }
html.dark .av-login-infobox--success .av-login-infobox__title { color: var(--color-success-lighter); }

/* ── Stepper (Email · Verify · Location · Access) ── */
/* Footer: full-bleed to the account card edges (the -2rem cancels the card's pa-8),
   white steps with a #F6F8FA separation band on top (border-top acts as the band),
   bottom corners matching the card's 16px radius. Direct child of .av-login (a div),
   so no MudGrid gutter interferes with the bleed. */
.av-login-stepper-card {
    margin: 1.5rem -2rem -2rem;
    background: var(--mud-palette-surface);
    border-top: 16px solid var(--av-brand-soft-background, #F6F8FA);
    border-radius: 0 0 16px 16px;
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
    padding: 1.25rem 1.5rem;
}
html.dark .av-login-stepper-card { border-top-color: var(--color-dark-600); }
.av-login-stepper { position: relative; }
.av-login-stepper__line {
    position: absolute;
    top: 50%;
    left: 10%;
    right: 10%;
    height: 1px;
    background: #8899AE;
    transform: translateY(-8px);
    z-index: 0;
}
html.dark .av-login-stepper__line { background: var(--color-dark-500); }
.av-login-step { z-index: 1; }

.av-login-step__avatar { transition: background-color .3s ease, color .3s ease, box-shadow .3s ease; }
.av-login-step__avatar--active {
    background: #0061FD;
    color: var(--color-white);
    box-shadow: var(--shadow-md);
}
.av-login-step__avatar--done {
    background: #0061FD;
    color: var(--color-white);
}
/* Step number (1–4) shown until the step is completed. Idle = #8899AE. */
.av-login-step__num {
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    color: #8899AE !important;
}
/* On the blue circle (active / completed) the number OR check is white. */
.av-login-step__avatar--active .av-login-step__num,
.av-login-step__avatar--done .av-login-step__num,
.av-login-step__avatar--active .mud-icon-root,
.av-login-step__avatar--done .mud-icon-root {
    color: #FFFFFF !important;
}
.av-login-step__avatar--idle {
    background: #FFFFFF;
    color: #8899AE;
    border: 1px solid #8899AE;
}
html.dark .av-login-step__avatar--idle {
    background: var(--color-dark-600);
    color: var(--color-dark-300);
}

/* Step labels (Correo · Verificar · Ubicación · Acceso) — design spec. */
.av-login [class*="av-login-step__label"] {
    font-family: var(--font-sans) !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
}
.av-login-step__label--active { color: var(--color-primary-600); }
.av-login-step__label--done { color: var(--color-gray-500); }
.av-login-step__label--idle { color: #8899AE; }
html.dark .av-login-step__label--active { color: var(--color-primary-400); }
html.dark .av-login-step__label--done { color: var(--color-dark-200); }
html.dark .av-login-step__label--idle { color: var(--color-dark-300); }

/* §101a ─── av-login form controls — floating-label outlined (screen spec). Raw px/HEX by
   request; scoped to .av-login so the library's default (label-on-top) stays untouched. The
   label is a static floating label with a white notch (not Mud's scaled legend). */

/* Border: 1px #8899AE, radius 8 */
.av-login .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: #8899AE !important;
    border-width: 1px !important;
    border-radius: 8px !important;
}

/* Typed text + pad-x 16 + heights: input 56, select 44, textarea 84 */
.av-login .mud-input.mud-input-outlined .mud-input-slot {
    font-family: var(--font-sans) !important;
    font-size: 16px !important;
    padding-right: 16px !important;
}
/* padding-left only for non-phone inputs: the intl-tel-input field (.iti__tel-input)
   computes its own left padding inline from the flag/dial width, so forcing 16px here
   would hide the number behind the flag. */
.av-login .mud-input.mud-input-outlined .mud-input-slot:not(.iti__tel-input) {
    padding-left: 16px !important;
}
.av-login .mud-input.mud-input-outlined input.mud-input-slot {
    height: 56px !important;
    box-sizing: border-box;
}
.av-login .mud-select .mud-input.mud-input-outlined input.mud-input-slot {
    height: 44px !important;
}
.av-login .mud-input.mud-input-outlined textarea.mud-input-slot {
    min-height: 84px !important;
    box-sizing: border-box;
}

/* Placeholder: Inter 16 #8899AE */
.av-login .mud-input.mud-input-outlined .mud-input-slot::placeholder {
    font-family: var(--font-sans) !important;
    font-size: 16px !important;
    color: #8899AE !important;
    opacity: 1;
}

/* Floating label: Inter 12 #8899AE, static at top -8 / left 8 with a notch that matches the
   card surface (white in light, dark surface in dark — the inputs sit on the account MudPaper).
   Padding-x 8 over the 1px border. Mud scales the shrunk label (scale .75) which would make
   12px render ~9px, so the transform is neutralised here. */
.av-login .mud-input-label.mud-input-outlined-label,
.av-login .mud-input-label-outlined {
    font-family: var(--font-sans) !important;
    font-size: 12px !important;
    color: #8899AE !important;
    transform: none !important;
    top: -8px !important;
    left: 8px !important;
    background: var(--mud-palette-surface) !important;
    padding: 0 8px !important;
}

/* §138 ─── av-fam-easy — guided "add family member" dialog (intent cards + sentence builder,
   create-in-search, second-parent radios, origin chips). Layout/color only; typography via Typo.* */
.av-fam-easy__title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.av-fam-easy__back {
    margin-left: -6px;
}

/* Intent cards grid (step 1) */
.av-fam-easy__intent-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 12px;
}
.av-fam-easy__intent-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    text-align: left;
    cursor: pointer;
    padding: 16px;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    background: var(--surface-1);
    transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}
.av-fam-easy__intent-card:hover {
    border-color: var(--color-gray-400);
    box-shadow: var(--shadow-sm);
}
.av-fam-easy__intent-icon {
    width: 22px;
    height: 22px;
    color: var(--color-gray-600);
    margin-bottom: 4px;
}
.av-fam-easy__intent-sub {
    color: var(--color-gray-500);
}

/* Sentence row (step 2) */
.av-fam-easy__sentence {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    margin-bottom: 4px;
    overflow: hidden;
}
/* Keep the sentence on one line: the name truncates, the words/select/locked chip never shrink */
.av-fam-easy__sentence-name {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.av-fam-easy__sentence-word,
.av-fam-easy__role-select,
.av-fam-easy__locked {
    flex-shrink: 0;
}
/* Locked "de {person}" chip with lock icon */
.av-fam-easy__locked {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 9999px;
    background: var(--surface-1);
    border: 1px solid var(--color-gray-300);
    color: var(--color-gray-900);
}
.av-fam-easy__locked .mud-typography {
    margin: 0;
    color: inherit;
}
.av-fam-easy__locked-icon {
    width: 14px;
    height: 14px;
    color: var(--color-gray-500);
}
/* "nuevo" badge on a new person */
.av-fam-easy__new-badge {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 2px 10px;
    border-radius: 9999px;
    background: var(--color-primary-600);
    color: var(--color-white);
}
/* Numbered step eyebrow */
.av-fam-easy__step {
    color: var(--color-gray-500);
    margin-bottom: 2px;
}
.av-fam-easy__sentence-name,
.av-fam-easy__sentence-role {
    color: var(--color-gray-900);
}
.av-fam-easy__sentence-word {
    color: var(--color-gray-500);
}
.av-fam-easy__role-select {
    min-width: 160px;
}

/* Create-in-search */
.av-fam-easy__create {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 16px;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
}
.av-fam-easy__create-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.av-fam-easy__create-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}
/* Round "+" chip — full-radius, soft-blue alert tint + dotted border, centered glyph. */
.av-fam-easy__create-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    background: rgb(from var(--color-primary-500) r g b / 0.12);
    border: 1.5px dotted var(--color-primary-500);
    color: var(--color-primary-600);
    transition: background 150ms ease, border-color 150ms ease;
}
.av-fam-easy__create-icon .mud-icon-root {
    width: 20px;
    height: 20px;
}
.av-fam-easy-pop .mud-list-item:hover .av-fam-easy__create-icon {
    background: rgb(from var(--color-primary-500) r g b / 0.2);
}
html.dark .av-fam-easy__create-icon {
    background: rgb(from var(--color-primary-400) r g b / 0.16);
    border-color: var(--color-primary-400);
    color: var(--color-primary-300);
}
html.dark .av-fam-easy-pop .mud-list-item:hover .av-fam-easy__create-icon {
    background: rgb(from var(--color-primary-400) r g b / 0.24);
}
.av-fam-easy__create-title {
    color: var(--color-gray-800);
}
.av-fam-easy__list-header {
    color: var(--color-gray-500);
}
/* "Add a new person" is the first popover row — a neutral highlight so it reads as the primary action */
.av-fam-easy-pop .mud-list-item:first-child {
    background: var(--color-gray-100);
}
html.dark .av-fam-easy-pop .mud-list-item:first-child {
    background: var(--color-dark-600);
}
/* The global input/list bridge forces gray-800 on .mud-list-item .mud-typography (which is what the
   title should be); only the muted header/hint need to be re-asserted to gray-500. */
.av-fam-easy-pop .mud-list-item .av-fam-easy__list-header,
.av-fam-easy-pop .mud-list-item .mud-text-secondary {
    color: var(--color-gray-500) !important;
}
html.dark .av-fam-easy-pop .mud-list-item .av-fam-easy__list-header,
html.dark .av-fam-easy-pop .mud-list-item .mud-text-secondary {
    color: var(--color-dark-300) !important;
}

/* Section wrapper */
.av-fam-easy__section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Second-parent radio cards */
.av-fam-easy__radio {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    text-align: left;
    cursor: pointer;
    width: 100%;
    min-height: 56px;
    padding: 10px 16px;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    background: var(--surface-1);
    transition: border-color 150ms ease, background-color 150ms ease;
}
.av-fam-easy__radio:hover {
    border-color: var(--color-gray-400);
}
.av-fam-easy__radio.is-selected {
    border-color: var(--color-primary-600);
}
.av-fam-easy__radio-dot {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 9999px;
    border: 2px solid var(--color-gray-400);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
/* Radio label block — consistent alignment, no stray Mud typography margins */
.av-fam-easy__radio-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.av-fam-easy__radio-text .mud-typography {
    margin: 0;
}
.av-fam-easy__radio-title {
    color: var(--color-gray-900);
}
.av-fam-easy__radio-meta {
    color: var(--color-gray-500);
}
.av-fam-easy__radio.is-selected .av-fam-easy__radio-dot {
    border-color: var(--color-primary-600);
    box-shadow: inset 0 0 0 4px var(--color-primary-600);
}

/* Origin chips */
.av-fam-easy__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
/* Origin chips — same language as av-chip-outlined: transparent, gray border, no fill; selected =
   primary border + primary text (no background tint). */
.av-fam-easy__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 8px 16px;
    border: 1px solid var(--color-gray-300);
    border-radius: 9999px;
    background: transparent;
    color: var(--color-gray-800);
    transition: border-color 150ms ease, color 150ms ease;
}
/* Inner MudText inherits the chip's color/size and drops its default margin */
.av-fam-easy__chip .mud-typography {
    margin: 0;
    color: inherit;
}
.av-fam-easy__chip:hover {
    border-color: var(--color-gray-800);
}
.av-fam-easy__chip.is-selected {
    border-color: var(--color-primary-600);
    color: var(--color-primary-700);
}

/* Summary */
.av-fam-easy__summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: var(--radius-lg);
    background: rgb(from var(--color-info) r g b / 0.10);
    border: 1px solid rgb(from var(--color-info) r g b / 0.30);
    color: var(--color-gray-700);
}
.av-fam-easy__summary .mud-icon-root {
    color: var(--color-info);
    flex-shrink: 0;
}

/* Dark mode */
html.dark .av-fam-easy__intent-card,
html.dark .av-fam-easy__create,
html.dark .av-fam-easy__radio {
    border-color: var(--color-dark-500);
    background: var(--color-dark-700);
}
html.dark .av-fam-easy__intent-sub,
html.dark .av-fam-easy__sentence-word {
    color: var(--color-dark-300);
}
html.dark .av-fam-easy__sentence {
    background: var(--color-dark-700);
    border-color: var(--color-dark-500);
}
html.dark .av-fam-easy__sentence-name,
html.dark .av-fam-easy__sentence-role {
    color: var(--color-dark-50);
}
html.dark .av-fam-easy__chip {
    border-color: var(--color-dark-400);
    color: var(--color-dark-200);
}
html.dark .av-fam-easy__locked {
    background: var(--color-dark-600);
    border-color: var(--color-dark-400);
    color: var(--color-dark-50);
}
html.dark .av-fam-easy__radio-title {
    color: var(--color-dark-50);
}
html.dark .av-fam-easy__radio-meta,
html.dark .av-fam-easy__step {
    color: var(--color-dark-300);
}

/* Single column on narrow viewports */
@media (max-width: 480px) {
    .av-fam-easy__intent-grid {
        grid-template-columns: 1fr;
    }
}

/* §135b ─── av-fam-easy redesign: relationship card + parent rows + bond segmented control */
.av-fam-easy__subtitle {
    color: var(--color-gray-500);
    margin-top: 2px;
}
html.dark .av-fam-easy__subtitle {
    color: var(--color-dark-300);
}

/* Relationship card: person · role→ · locked */
.av-fam-easy__rel-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 12px;
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
}
html.dark .av-fam-easy__rel-card {
    background: var(--color-dark-700);
    border-color: var(--color-dark-500);
}
.av-fam-easy__party {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
}
.av-fam-easy__avatar-wrap {
    position: relative;
}
.av-fam-easy__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 9999px;
    background: rgb(from var(--color-primary-500) r g b / 0.12);
    color: var(--color-primary-700);
    font-weight: 600;
}
.av-fam-easy__avatar--locked {
    background: var(--color-gray-200);
    color: var(--color-gray-700);
}
.av-fam-easy__avatar--sm {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}
html.dark .av-fam-easy__avatar {
    background: rgb(from var(--color-primary-400) r g b / 0.20);
    color: var(--color-primary-200);
}
html.dark .av-fam-easy__avatar--locked {
    background: var(--color-dark-500);
    color: var(--color-dark-100);
}
.av-fam-easy__party-name {
    color: var(--color-gray-900);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html.dark .av-fam-easy__party-name {
    color: var(--color-dark-50);
}
.av-fam-easy__change.mud-button-root {
    color: var(--color-primary-600);
    min-width: 0;
    padding: 2px 10px;
    border: 1px solid var(--color-primary-300);
    border-radius: 9999px;
    background: rgb(from var(--color-primary-500) r g b / 0.08);
    transition: background 120ms ease, border-color 120ms ease;
}
.av-fam-easy__change.mud-button-root:hover {
    background: rgb(from var(--color-primary-500) r g b / 0.16);
    border-color: var(--color-primary-400);
}
html.dark .av-fam-easy__change.mud-button-root {
    color: var(--color-primary-300);
    border-color: var(--color-primary-400);
    background: rgb(from var(--color-primary-400) r g b / 0.16);
}
.av-fam-easy__this-profile {
    color: var(--color-warning);
}

/* Middle connector: role dropdown + dashed arrow */
.av-fam-easy__connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding-top: 4px;
}
.av-fam-easy__arrow {
    position: relative;
    width: 72px;
    height: 0;
    border-top: 2px dashed var(--color-gray-300);
}
.av-fam-easy__arrow::after {
    content: "";
    position: absolute;
    right: -1px;
    top: 50%;
    transform: translateY(-50%);
    border-left: 6px solid var(--color-gray-300);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
}
html.dark .av-fam-easy__arrow,
html.dark .av-fam-easy__arrow::after {
    border-top-color: var(--color-dark-400);
}

/* "X will be added as ..." */
.av-fam-easy__added-as {
    text-align: center;
    color: var(--color-gray-500);
}
html.dark .av-fam-easy__added-as {
    color: var(--color-dark-300);
}

/* Section titles */
.av-fam-easy__section-title {
    color: var(--color-gray-900);
}
html.dark .av-fam-easy__section-title {
    color: var(--color-dark-50);
}
.av-fam-easy__optional {
    color: var(--color-gray-500);
    margin-left: 6px;
}

/* Parent rows: avatar/icon + text + radio on the right */
.av-fam-easy__parent-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.av-fam-easy__parent-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    cursor: pointer;
    padding: 10px 14px;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    background: var(--surface-1);
    transition: border-color 150ms ease, background-color 150ms ease;
}
.av-fam-easy__parent-row:hover {
    border-color: var(--color-gray-400);
}
.av-fam-easy__parent-row.is-selected {
    border-color: var(--color-primary-600);
    background: rgb(from var(--color-primary-500) r g b / 0.06);
}
html.dark .av-fam-easy__parent-row {
    border-color: var(--color-dark-500);
    background: var(--color-dark-700);
}
html.dark .av-fam-easy__parent-row.is-selected {
    background: rgb(from var(--color-primary-400) r g b / 0.14);
}
.av-fam-easy__party-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    background: var(--color-gray-150);
    color: var(--color-gray-600);
    flex-shrink: 0;
}
html.dark .av-fam-easy__party-icon {
    background: var(--color-dark-500);
    color: var(--color-dark-200);
}
.av-fam-easy__parent-text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}
.av-fam-easy__parent-text .mud-typography {
    margin: 0;
}
.av-fam-easy__parent-name {
    color: var(--color-gray-900);
}
.av-fam-easy__parent-meta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-gray-500);
}
/* Heart marking the spouse/partner relationship in the "other parent" row. */
.av-fam-easy__partner-heart.mud-icon-root {
    width: 13px;
    height: 13px;
    color: var(--color-error);
    flex-shrink: 0;
}
html.dark .av-fam-easy__partner-heart.mud-icon-root {
    color: var(--color-error-lighter);
}
html.dark .av-fam-easy__parent-name {
    color: var(--color-dark-50);
}
html.dark .av-fam-easy__parent-meta {
    color: var(--color-dark-300);
}
.av-fam-easy__parent-row .av-fam-easy__radio-dot {
    margin-left: auto;
}
.av-fam-easy__parent-row.is-selected .av-fam-easy__radio-dot {
    border-color: var(--color-primary-600);
    box-shadow: inset 0 0 0 4px var(--color-primary-600);
}

/* Type of bond — segmented pill (fc-view-toggle language): gray track, active = white chip + primary text */
.av-fam-easy__bond {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    padding: 4px;
    background: var(--color-gray-150);
    border-radius: 10px;
}
html.dark .av-fam-easy__bond {
    background: var(--color-dark-700);
}
.av-fam-easy__bond-item {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--color-gray-600);
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.av-fam-easy__bond-item .mud-typography {
    margin: 0;
    color: inherit;
}
.av-fam-easy__bond-item:hover {
    color: var(--color-gray-900);
}
.av-fam-easy__bond-item.is-active {
    background: var(--color-white);
    color: var(--color-primary-600);
    border-color: var(--color-gray-200);
    box-shadow: 0 1px 2px rgb(from var(--color-gray-900) r g b / 0.06);
}
html.dark .av-fam-easy__bond-item {
    color: var(--color-dark-200);
}
html.dark .av-fam-easy__bond-item:hover {
    color: var(--color-dark-50);
}
html.dark .av-fam-easy__bond-item.is-active {
    background: var(--color-dark-500);
    color: var(--color-primary-300);
    border-color: var(--color-dark-400);
}

/* Create-new actions row */
.av-fam-easy__create-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* §135c ─── empty subject avatar with "+" (opens the search/create picker) */
.av-fam-easy__avatar-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 9999px;
    border: 1px dashed var(--color-gray-400);
    background: var(--color-gray-100);
    color: var(--color-gray-500);
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}
.av-fam-easy__avatar-add:hover {
    border-color: var(--color-primary-500);
    color: var(--color-primary-600);
    background: rgb(from var(--color-primary-500) r g b / 0.06);
}
.av-fam-easy__avatar-add .mud-icon-root {
    width: 22px;
    height: 22px;
}
.av-fam-easy__party-placeholder {
    color: var(--color-gray-500);
}
html.dark .av-fam-easy__avatar-add {
    border-color: var(--color-dark-400);
    background: var(--color-dark-600);
    color: var(--color-dark-300);
}
html.dark .av-fam-easy__party-placeholder {
    color: var(--color-dark-300);
}


/* §139 ─── WI #1875 — 1003 Form foundations: AvFormGroup, card stacks, LoTableTotals and the
   Borrower Information rail. No font rules: typography comes from the Typo on each MudText. */

/* AvFormGroup — level-2 group inside a card; same look as Property Details' pd-group. */
.av-info-section__header + .av-form-group {
  margin-top: 20px;
}

.av-form-group + .av-form-group {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--mud-palette-lines-default);
}

.av-form-group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 14px;
  min-height: 28px;
}

.av-form-group__title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--mud-palette-text-secondary);
}

.av-form-group__title .mud-typography {
  margin: 0;
  color: inherit;
}

.av-form-group__icon.mud-icon-root {
  width: 15px;
  height: 15px;
  opacity: 0.8;
}

.av-form-group__note.mud-typography {
  margin: 0;
  color: var(--mud-palette-text-secondary);
}

/* A control in the head (ADU checkbox) must not bring Mud's own margin. */
.av-form-group__head .mud-input-control {
  margin: 0;
}

/* Vertical card stack: no 50/50 pairs, so no gap under the shorter card. */
.lo-section-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

@media (min-width: 1200px) {
  .lo-section-stack {
    gap: 24px;
  }
}

/* LoTableTotals — footer of the list views. auto-fill keeps a lone tile at column width. */
.lo-table-totals {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

/* BorrowerSummaryRail — label → value rows; an empty required row is red. */
.lo-summary-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 -8px;
}

.lo-summary-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.lo-summary-row:hover,
.lo-summary-row:focus-visible {
  background: var(--color-gray-100);
  outline: none;
}

html.dark .lo-summary-row:hover,
html.dark .lo-summary-row:focus-visible {
  background: var(--color-dark-600);
}

.lo-summary-row__label.mud-typography {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  color: var(--color-gray-500);
}

.lo-summary-row__value.mud-typography {
  margin: 0;
  overflow-wrap: anywhere;
  text-align: right;
  color: var(--color-gray-800);
}

html.dark .lo-summary-row__label.mud-typography {
  color: var(--color-dark-300);
}

html.dark .lo-summary-row__value.mud-typography {
  color: var(--color-dark-100);
}

.lo-summary-row--empty .lo-summary-row__value.mud-typography {
  color: var(--color-gray-400);
}

.lo-summary-row--missing .lo-summary-row__label.mud-typography,
.lo-summary-row--missing .lo-summary-row__value.mud-typography {
  color: var(--color-error);
}

html.dark .lo-summary-row--missing .lo-summary-row__label.mud-typography,
html.dark .lo-summary-row--missing .lo-summary-row__value.mud-typography {
  color: var(--color-error-lighter);
}

.lo-summary-group--active .av-form-group__title {
  color: var(--color-primary-600);
}

html.dark .lo-summary-group--active .av-form-group__title {
  color: var(--color-primary-400);
}

/* §141 ─── av-cc — Contact Communication Channels dialog (base channels + messaging apps with
   per-channel consent). Card layout, segmented consent control, WhatsApp account/another toggle,
   add-channel chips. Typography stays on the MudText/Typo inside; classes carry layout/color only. */
.av-cc {
  gap: 14px;
}

/* Title bar: name + "N of M granted" badge */
.av-cc__titlebar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.av-cc__badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 9999px;
  background: rgb(from var(--color-success) r g b / 0.12);
  color: var(--color-success-darker);
}

html.dark .av-cc__badge {
  background: rgb(from var(--color-success) r g b / 0.20);
  color: var(--color-success-lighter);
}

.av-cc__section-title {
  color: var(--color-gray-500);
  margin-top: 4px;
}

html.dark .av-cc__section-title {
  color: var(--color-dark-300);
}

/* Channel card */
.av-cc-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--color-gray-200);
  border-radius: 14px;
  background: var(--color-white);
}

html.dark .av-cc-card {
  border-color: var(--color-dark-500);
  background: var(--color-dark-700);
}

.av-cc-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.av-cc-ch-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: rgb(from var(--color-primary-500) r g b / 0.12);
  color: var(--color-primary-600);
}

html.dark .av-cc-ch-icon {
  background: rgb(from var(--color-primary-400) r g b / 0.20);
  color: var(--color-primary-300);
}

/* Per-app tile colors (WhatsApp green, Telegram teal, Messenger magenta). */
.av-cc-ch-icon--success {
  background: rgb(from var(--color-success) r g b / 0.14);
  color: var(--color-success);
}

.av-cc-ch-icon--info {
  background: rgb(from var(--color-info) r g b / 0.14);
  color: var(--color-info);
}

.av-cc-ch-icon--secondary {
  background: rgb(from var(--color-secondary) r g b / 0.14);
  color: var(--color-secondary);
}

.av-cc-ch-icon .mud-icon-root,
.av-cc-ch-icon svg {
  width: 20px;
  height: 20px;
}

.av-cc-ch-meta {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.av-cc-ch-name {
  color: var(--color-gray-800);
}

html.dark .av-cc-ch-name {
  color: var(--color-dark-50);
}

.av-cc-card__trash.mud-icon-button-root {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-gray-200);
  border-radius: 12px;
  background: var(--color-white);
  color: var(--color-error);
}

.av-cc-card__trash.mud-icon-button-root:hover {
  background: rgb(from var(--color-error) r g b / 0.10);
  border-color: rgb(from var(--color-error) r g b / 0.30);
  color: var(--color-error);
}

html.dark .av-cc-card__trash.mud-icon-button-root {
  border-color: var(--color-dark-500);
  background: var(--color-dark-700);
}

.av-cc-card__trash .mud-icon-root,
.av-cc-card__trash svg {
  width: 18px;
  height: 18px;
}

.av-cc-card__body {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Segmented consent control */
/* Segmented consent control: a gray track holding the three options; the active one is
   tinted by its state (amber / green / red) with a matching dot. */
.av-cc-seg {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 11px;
  background: var(--color-gray-100);
  flex-shrink: 0;
}

html.dark .av-cc-seg {
  background: var(--color-dark-700);
}

.av-cc-seg__opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--color-gray-500);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

.av-cc-seg__opt .mud-typography {
  color: inherit;
}

.av-cc-seg__opt:hover {
  color: var(--color-gray-700);
}

html.dark .av-cc-seg__opt {
  color: var(--color-dark-300);
}

html.dark .av-cc-seg__opt:hover {
  color: var(--color-dark-100);
}

/* Consent dot — gray by default, state color when its option is active. */
.av-cc-seg__dot {
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  background: var(--color-gray-400);
  flex-shrink: 0;
}

html.dark .av-cc-seg__dot {
  background: var(--color-dark-400);
}

/* Active option: tinted pill + subtle shadow; label + dot take the state color. */
.av-cc-seg__opt--active {
  box-shadow: 0 1px 2px rgb(from var(--color-gray-900) r g b / 0.12);
}

.av-cc-seg__opt--active.av-cc-seg__opt--pending {
  background: rgb(from var(--color-warning) r g b / 0.18);
  color: var(--color-warning-darker);
}

.av-cc-seg__opt--active.av-cc-seg__opt--pending .av-cc-seg__dot {
  background: var(--color-warning);
}

.av-cc-seg__opt--active.av-cc-seg__opt--granted {
  background: rgb(from var(--color-success) r g b / 0.15);
  color: var(--color-success-darker);
}

.av-cc-seg__opt--active.av-cc-seg__opt--granted .av-cc-seg__dot {
  background: var(--color-success);
}

.av-cc-seg__opt--active.av-cc-seg__opt--revoked {
  background: rgb(from var(--color-error) r g b / 0.14);
  color: var(--color-error-darker);
}

.av-cc-seg__opt--active.av-cc-seg__opt--revoked .av-cc-seg__dot {
  background: var(--color-error);
}

html.dark .av-cc-seg__opt--active.av-cc-seg__opt--pending {
  background: rgb(from var(--color-warning) r g b / 0.26);
  color: var(--color-warning-lighter);
}

html.dark .av-cc-seg__opt--active.av-cc-seg__opt--granted {
  background: rgb(from var(--color-success) r g b / 0.26);
  color: var(--color-success-lighter);
}

html.dark .av-cc-seg__opt--active.av-cc-seg__opt--revoked {
  background: rgb(from var(--color-error) r g b / 0.26);
  color: var(--color-error-lighter);
}

/* WhatsApp account/another-number toggle (two bordered buttons; active = primary) */
.av-cc-toggle {
  display: flex;
  gap: 8px;
}

.av-cc-toggle__opt {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1.5px solid var(--color-gray-300);
  background: var(--color-white);
  color: var(--color-gray-700);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.av-cc-toggle__opt .mud-typography {
  color: inherit;
}

html.dark .av-cc-toggle__opt {
  border-color: var(--color-dark-500);
  background: var(--color-dark-700);
  color: var(--color-dark-200);
}

.av-cc-toggle__opt--active {
  border-color: var(--color-primary-500);
  background: rgb(from var(--color-primary-500) r g b / 0.08);
  color: var(--color-primary-700);
}

html.dark .av-cc-toggle__opt--active {
  border-color: var(--color-primary-400);
  background: rgb(from var(--color-primary-400) r g b / 0.16);
  color: var(--color-primary-200);
}

/* "Use account phone" — selectable list of the contact's phones */
.av-cc-phones {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.av-cc-phone-opt {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-gray-200);
  background: var(--color-white);
  color: var(--color-gray-800);
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.av-cc-phone-opt:hover {
  border-color: var(--color-gray-300);
}

html.dark .av-cc-phone-opt {
  border-color: var(--color-dark-500);
  background: var(--color-dark-700);
  color: var(--color-dark-50);
}

.av-cc-phone-opt--active {
  border-color: var(--color-primary-500);
  background: rgb(from var(--color-primary-500) r g b / 0.06);
}

html.dark .av-cc-phone-opt--active {
  border-color: var(--color-primary-400);
  background: rgb(from var(--color-primary-400) r g b / 0.12);
}

.av-cc-radio {
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  border: 2px solid var(--color-gray-300);
  flex-shrink: 0;
  position: relative;
}

html.dark .av-cc-radio {
  border-color: var(--color-dark-400);
}

.av-cc-phone-opt--active .av-cc-radio {
  border-color: var(--color-primary-500);
}

.av-cc-phone-opt--active .av-cc-radio::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 9999px;
  background: var(--color-primary-500);
}

html.dark .av-cc-phone-opt--active .av-cc-radio {
  border-color: var(--color-primary-400);
}

html.dark .av-cc-phone-opt--active .av-cc-radio::after {
  background: var(--color-primary-400);
}

/* Consent row inside a messaging card (label + segmented) */
.av-cc-consent-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--color-gray-100);
}

html.dark .av-cc-consent-row {
  border-top-color: var(--color-dark-600);
}

.av-cc-consent-row__label {
  color: var(--color-gray-500);
}

html.dark .av-cc-consent-row__label {
  color: var(--color-dark-300);
}

/* Add-channel chips */
.av-cc-add {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px;
  border: 1px dashed var(--color-gray-200);
  border-radius: 14px;
}

html.dark .av-cc-add {
  border-color: var(--color-dark-500);
}

.av-cc-add__label {
  color: var(--color-gray-500);
  margin-right: 4px;
}

html.dark .av-cc-add__label {
  color: var(--color-dark-300);
}

.av-cc-add__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 9999px;
  border: 1px solid var(--color-gray-300);
  background: transparent;
  color: var(--color-gray-700);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.av-cc-add__chip:hover {
  border-color: var(--color-primary-500);
  background: rgb(from var(--color-primary-500) r g b / 0.08);
  color: var(--color-primary-700);
}

html.dark .av-cc-add__chip {
  border-color: var(--color-dark-400);
  color: var(--color-dark-100);
}

html.dark .av-cc-add__chip:hover {
  border-color: var(--color-primary-400);
  background: rgb(from var(--color-primary-400) r g b / 0.16);
  color: var(--color-primary-200);
}

.av-cc-add__chip-icon {
  width: 16px;
  height: 16px;
}

/* "Use account number" suggestion (Edit User WhatsApp): bordered box using the SAME border color
   as our outlined inputs, with the phone shown via the display component. */
.av-use-defined {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 8px 14px;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-gray-800);
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.av-use-defined:hover {
  border-color: var(--color-gray-400);
  background: var(--color-gray-50);
}

html.dark .av-use-defined {
  border-color: var(--color-dark-450);
  background: var(--color-dark-700);
  color: var(--color-dark-50);
}

html.dark .av-use-defined:hover {
  border-color: var(--color-dark-400);
}

.av-use-defined__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-gray-500);
}

/* §140 ─── av-radio-cards-filled--row — the radio cards of §30 laid out side by side (two-way
   choices such as "existing user / new user"), collapsing to a column on narrow screens.
   Layout only: the card skin, checked state and dark mode still come from §30. */
.av-radio-cards-filled--row .mud-radio-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

/* §141 ─── 1003 Templates hub (/settings/1003/templates, WI #1870). Layout only: header, tabs,
   filters and cards reuse the page primitives (§20 av-page-header, §15.1 tabs, av-page-filters,
   av-table-card, av-tenant-fcard). */
.av-templates-hub__panel {
  margin-top: 16px;
}

/* §141.1 — Template folder explorer (Form / Loan Program templates): main card with a path bar,
   folder tiles and template rows, plus a directory tree card on the right. */
.av-tfe-layout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.av-tfe-main {
  flex: 1 1 auto;
  min-width: 0;
}

.av-tfe-tree {
  flex: 0 0 280px;
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 12px 8px;
}

@media (max-width: 959px) {
  .av-tfe-layout {
    flex-direction: column;
  }

  .av-tfe-tree {
    flex-basis: auto;
    width: 100%;
    position: static;
    max-height: none;
  }
}

.av-tfe-path {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-gray-200);
}

html.dark .av-tfe-path {
  border-bottom-color: var(--color-dark-500);
}

.av-tfe-path__icon,
.av-tfe-path__sep {
  color: var(--color-gray-400);
}

.av-tfe-path__current.mud-typography {
  color: var(--color-gray-800);
  padding: 0 4px;
}

.av-tfe-path__link.mud-button-root {
  min-width: 0;
  padding: 2px 8px;
  color: var(--color-primary-600);
}

html.dark .av-tfe-path__icon,
html.dark .av-tfe-path__sep {
  color: var(--color-dark-300);
}

html.dark .av-tfe-path__current.mud-typography {
  color: var(--color-dark-50);
}

html.dark .av-tfe-path__link.mud-button-root {
  color: var(--color-primary-400);
}

.av-tfe-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.av-tfe-eyebrow.mud-typography {
  display: block;
  color: var(--color-gray-500);
  padding: 0 4px;
}

html.dark .av-tfe-eyebrow.mud-typography {
  color: var(--color-dark-300);
}

.av-tfe-folders {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}

.av-tfe-folder {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  text-align: left;
  color: inherit;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.av-tfe-folder:hover,
.av-tfe-folder:focus-visible {
  border-color: var(--color-primary-500);
  background: rgb(from var(--color-primary-500) r g b / 0.05);
  outline: none;
}

html.dark .av-tfe-folder {
  background: var(--color-dark-750);
  border-color: var(--color-dark-500);
}

html.dark .av-tfe-folder:hover,
html.dark .av-tfe-folder:focus-visible {
  border-color: var(--color-primary-400);
  background: rgb(from var(--color-primary-400) r g b / 0.10);
}

.av-tfe-folder__icon,
.av-tfe-item__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.av-tfe-folder__icon {
  background: rgb(from var(--color-warning) r g b / 0.12);
  color: var(--color-warning);
}

.av-tfe-item__icon {
  background: rgb(from var(--color-primary-500) r g b / 0.12);
  color: var(--color-primary-600);
}

html.dark .av-tfe-item__icon {
  color: var(--color-primary-400);
}

.av-tfe-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.av-tfe-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  transition: background-color 120ms ease;
}

.av-tfe-item:hover {
  background: var(--color-gray-50);
}

html.dark .av-tfe-item {
  border-color: var(--color-dark-500);
}

html.dark .av-tfe-item:hover {
  background: var(--color-dark-750);
}

.av-tfe-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}

.av-tfe-name.mud-typography {
  color: var(--color-gray-900);
}

.av-tfe-meta.mud-typography {
  color: var(--color-gray-500);
}

html.dark .av-tfe-name.mud-typography {
  color: var(--color-dark-50);
}

html.dark .av-tfe-meta.mud-typography {
  color: var(--color-dark-300);
}

.av-tfe-item__path {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-gray-500);
}

html.dark .av-tfe-item__path {
  color: var(--color-dark-300);
}

.av-tfe-ellipsis.mud-typography {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* §141.2 — Loading placeholder inside a template section card. */
.av-templates-loading {
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
}

/* §141.3 — Full-page template forms (Add / Edit): stacked av-tenant-fcard cards and a footer
   row with the hint on the left and Cancel / Save on the right. */
.av-template-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.av-template-form__fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.av-template-form__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.av-template-form__hint {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--color-gray-500);
}

.av-template-form__hint .mud-icon-root {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

html.dark .av-template-form__hint {
  color: var(--color-dark-300);
}

.av-template-form__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

@media (max-width: 599.98px) {
  .av-template-form__actions {
    width: 100%;
    flex-direction: column-reverse;
    align-items: stretch;
  }
}

/* §141.4 — Manage Groups dialog (Form / Loan Program templates): group rows with inline rename,
   subgroups indented under their parent, and the inline "new group" block. */
.av-manage-groups__loading {
  display: flex;
  justify-content: center;
  padding: 24px 0;
}

.av-manage-groups__list {
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
}

html.dark .av-manage-groups__list {
  border-color: var(--color-dark-500);
}

.av-manage-groups__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-gray-100);
}

.av-manage-groups__row:last-child {
  border-bottom: 0;
}

.av-manage-groups__row--child {
  padding-left: 36px;
  background: var(--color-gray-50);
}

html.dark .av-manage-groups__row {
  border-bottom-color: var(--color-dark-600);
}

html.dark .av-manage-groups__row--child {
  background: var(--color-dark-750);
}

.av-manage-groups__icon {
  display: inline-flex;
  color: var(--color-primary-600);
  flex-shrink: 0;
}

html.dark .av-manage-groups__icon {
  color: var(--color-primary-400);
}

.av-manage-groups__rename {
  flex: 1 1 auto;
  min-width: 0;
}

.av-manage-groups__add {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
}

html.dark .av-manage-groups__add {
  border-color: var(--color-dark-500);
}

.av-manage-groups__add-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* §141.5 — Footnote under a template table (e.g. the checklist phase hint). */
.av-templates-note.mud-typography {
  display: block;
  margin-top: 8px;
  color: var(--color-gray-500);
}

html.dark .av-templates-note.mud-typography {
  color: var(--color-dark-300);
}

/* §141.6 — Template form dialogs (Checklist / Doc Request): tab panel spacing, the phase dot
   (its color is tenant data, set inline) and the two-pane transfer list. */
.av-template-dialog__panel {
  padding-top: 16px;
}

.av-template-dialog__hint.mud-typography {
  display: block;
  color: var(--color-gray-500);
}

.av-template-dialog__hint-row {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-gray-500);
}

html.dark .av-template-dialog__hint.mud-typography,
html.dark .av-template-dialog__hint-row {
  color: var(--color-dark-300);
}

.av-template-dialog__phase {
  padding: 12px 16px;
}

.av-template-dialog__phase-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--color-gray-100);
}

html.dark .av-template-dialog__phase-head {
  border-bottom-color: var(--color-dark-600);
}

.av-phase-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  flex-shrink: 0;
}

.av-dual-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

@media (max-width: 767.98px) {
  .av-dual-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

.av-dual-list__pane {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  min-width: 0;
}

html.dark .av-dual-list__pane {
  border-color: var(--color-dark-500);
}

.av-dual-list__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.av-dual-list__title.mud-typography {
  color: var(--color-gray-700);
}

html.dark .av-dual-list__title.mud-typography {
  color: var(--color-dark-100);
}

.av-dual-list__scroll {
  max-height: 250px;
  overflow-y: auto;
  outline: none;
}

.av-dual-list__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 60px;
}

@media (max-width: 767.98px) {
  .av-dual-list__actions {
    flex-direction: row;
    justify-content: center;
    padding-top: 0;
  }
}

.av-dual-list__item.mud-list-item {
  border-radius: var(--radius-md);
  cursor: pointer;
}

.av-dual-list__item.mud-list-item:hover {
  background: var(--color-gray-100);
}

.av-dual-list__item--selected.mud-list-item,
.av-dual-list__item--selected.mud-list-item:hover {
  background: rgb(from var(--color-primary-500) r g b / 0.12);
}

.av-dual-list__item--selected-danger.mud-list-item,
.av-dual-list__item--selected-danger.mud-list-item:hover {
  background: rgb(from var(--color-error) r g b / 0.12);
}

html.dark .av-dual-list__item.mud-list-item:hover {
  background: var(--color-dark-600);
}

.av-dual-list__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.av-dual-list__row-text {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.av-dual-list__index.mud-typography {
  min-width: 20px;
  color: var(--color-gray-500);
}

.av-dual-list__required.mud-chip {
  min-width: 70px;
  cursor: pointer;
}

/* §141.7 — Doc Request template dialog: the "add item" grid and the item rows. */
.av-docreq-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.av-docreq-add__full {
  grid-column: 1 / -1;
}

.av-docreq-add__action {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 599.98px) {
  .av-docreq-add {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Bottom actions of the full-page Limit Template form. */
.av-limit-footer {
  margin-top: 20px;
}

.av-docreq-item.mud-list-item {
  padding: 8px;
  border-bottom: 1px solid var(--color-gray-100);
}

.av-docreq-item.mud-list-item:last-child {
  border-bottom: 0;
}

html.dark .av-docreq-item.mud-list-item {
  border-bottom-color: var(--color-dark-600);
}

.av-docreq-item__details.mud-typography {
  padding-left: 28px;
}

/* §141.8 — Limit Templates: filter selects in the filters row and the "applies to" line. */
.av-limit-filters .av-page-filters__left {
  flex-wrap: wrap;
}

.av-limit-filters__select {
  flex: 0 0 160px;
}

.av-limit-applies {
  margin-top: 16px;
}

/* §142 ─── Identity forms migrated in the Tailux batch after WI #1870 (#1918 Roles, #1919 Add
   Client, #1920 Tenant Managers). Layout and colour only. */
.av-role-tree.mud-treeview {
  max-height: 520px;
  overflow-y: auto;
  padding: 8px;
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
}

html.dark .av-role-tree.mud-treeview {
  background: var(--color-dark-750);
  border-color: var(--color-dark-500);
}

.av-role-form__fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.av-role-chip {
  margin-left: 6px;
  vertical-align: middle;
}

/* Read-only manager profile (View Manager). */
.av-manager-view {
  max-width: 880px;
}

/* Change Manager: picker card, profile card and the action row stacked. */
.av-manager-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}