/*
 * BrandSync Component Styles — Membercare.SelfService.Web
 *
 * Uses semantic tokens defined in Variables.css and ConfiguredVariables.css.
 * Customer CSS provides the actual color values — never hardcode hex here.
 *
 * Token layers:
 *   ConfiguredVariables.css  → defines --color-* semantic tokens
 *   This file                → BEM class names consume those tokens
 */

/* ============================================================
   Content width cap (bs-content-container)
   Single source of truth for the max content width used to keep
   page content readable on wide screens. Apply .bs-content-container
   to any top-level flow/page container that should be capped and
   centred (e.g. the dashboard rows, the enrollment flow root).
   Below the cap the container stays full-width; margin-inline:auto
   only centres once the viewport exceeds --bs-content-max-width.
   ============================================================ */

:root {
    --bs-content-max-width: 1280px;
}

.bs-content-container {
    max-width: var(--bs-content-max-width);
    margin-inline: auto;
}

/* ============================================================
   Pill surface utility (.bs-pill)
   Shared rounded "pill" surface: a lightly primary-tinted chip shape used for
   compact, secondary information (e.g. the enrollment subtotal pill and the
   companion chips). Consumers add their own content layout, typography and any
   interactive children on top of this surface.
   WCAG pair: place --color-primary-default / --color-neutrals-pressed text on
   the --color-primary-container background.
   ============================================================ */
.bs-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 4px 12px;
    border: 1px solid var(--color-primary-container-hover);
    border-radius: 100px;
    background: var(--color-primary-container);
}

/* ============================================================
   Shared input element styles (bs-input__*)
   Used by BsInputText, BsInputTextArea, etc.
   Each component owns only its wrapper class (e.g. .bs-input-text).
   ============================================================ */

/* Shared layout wrapper for all input components */
.bs-input {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Component-specific wrappers — add overrides here as needed */
.bs-input-text { }

.bs-input-email { }

.bs-input-cellphone { }

.bs-input-password { }

.bs-input-date { }

.bs-input-number { }

.bs-input-textarea { }

.bs-input-file { }

.bs-input-textarea .bs-input__control {
    resize: vertical;
    min-height: 80px;
}

/* ============================================================
   BsInputFile (bs-input-file)
   Drop zone wrapper for <input type="file">. The native input is
   positioned absolutely over the zone so the whole area is clickable.
   ============================================================ */

.bs-input-file__dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 16px;
    border: 2px dashed var(--color-neutrals-hover);
    border-radius: 4px;
    background-color: var(--color-neutrals-container);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.bs-input-file__dropzone:hover {
    border-color: var(--color-primary-focused);
    background-color: var(--color-primary-container);
}

.bs-input-file__dropzone:has(.bs-input-file__native:focus-visible) {
    border-color: var(--color-primary-focused);
    background-color: var(--color-primary-container);
    outline: 2px solid var(--color-primary-focused);
    outline-offset: 2px;
}

/* WCAG pair: --color-error-default border on --color-neutrals-container background */
.bs-input--error .bs-input-file__dropzone {
    border-color: var(--color-error-default);
    box-shadow: 0 0 0 3px var(--color-error-container);
}

.bs-input-file__dropzone:has(.bs-input-file__native:disabled) {
    background-color: var(--color-neutrals-container-hover);
    border-color: var(--color-neutrals-hover);
    cursor: not-allowed;
}

.bs-input-file__icon {
    font-size: 24px;
    color: var(--color-primary-default);
}

.bs-input-file__prompt {
    font-family: var(--font-family, Roboto, sans-serif);
    font-weight: 400;
    font-size: var(--font-body-md-regular-size, 16px);
    line-height: var(--font-body-md-regular-line-height, 24px);
    color: var(--color-neutrals-hover);
}

.bs-input-file__selected {
    font-family: var(--font-family, Roboto, sans-serif);
    font-weight: 500;
    font-size: var(--font-body-md-regular-size, 16px);
    line-height: var(--font-body-md-regular-line-height, 24px);
    color: var(--color-neutrals-default);
}

.bs-input-file__native {
    opacity: 0;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.bs-input-file__native:disabled {
    cursor: not-allowed;
}

.bs-input__label {
    font-family: var(--font-family, Roboto, sans-serif);
    font-weight: 500;
    font-size: var(--font-caption-lg-size, 16px);
    line-height: var(--font-caption-lg-line-height, 24px);
    color: var(--color-neutrals-default);
}

.bs-input__required,
.bs-checkbox__required {
    color: var(--color-error-default);
    margin-left: 2px;
}

.bs-input__control {
    font-family: var(--font-family, Roboto, sans-serif);
    font-weight: 400;
    font-size: var(--font-body-md-regular-size, 16px);
    line-height: var(--font-body-md-regular-line-height, 24px);
    padding: 8px 12px;
    border: 1px solid var(--color-neutrals-hover);
    border-radius: 4px;
    background-color: var(--color-neutrals-container);
    color: var(--color-neutrals-default);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    width: 100%;
    box-sizing: border-box;
}

.bs-input__control::placeholder {
    font-weight: 400;
    color: var(--color-neutrals-hover);
}

.bs-input__control:focus-visible {
    border-color: var(--color-primary-focused);
    outline: 2px solid var(--color-primary-focused);
    outline-offset: 2px;
}

.bs-input__control:disabled {
    background-color: var(--color-neutrals-container-hover);
    color: var(--color-neutrals-hover);
    border-color: var(--color-neutrals-hover);
    cursor: not-allowed;
}

.bs-input__control[readonly] {
    background-color: color-mix(in srgb, var(--color-neutrals-container-focused) 25%, var(--color-page-background));
    color: var(--color-neutrals-focused);
    border-color: var(--color-neutrals-hover);
}

/* WCAG pair: --color-neutrals-default text on --color-neutrals-container background */
.bs-input--error .bs-input__control {
    border-color: var(--color-error-default);
    box-shadow: 0 0 0 3px var(--color-error-container);
}

.bs-input--error .bs-input__control:focus-visible {
    border-color: var(--color-error-default);
    outline: 2px solid var(--color-error-default);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px var(--color-error-container);
}

.bs-input__feedback {
    font-family: var(--font-family, Roboto, sans-serif);
    font-weight: 400;
    font-size: var(--font-caption-md-size, 14px);
    line-height: var(--font-caption-md-line-height, 20px);
    color: var(--color-neutrals-hover);
}

/* WCAG pair: --color-error-default on --color-neutrals-container background */
.bs-input__feedback--error {
    color: var(--color-error-default);
}

/* ============================================================
   BsCheckBox (bs-checkbox)
   ============================================================ */

.bs-checkbox {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bs-checkbox__field {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bs-checkbox__control {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--color-primary-default);
    cursor: pointer;
    transition: outline 0.15s ease, outline-offset 0.15s ease;
}

.bs-checkbox__control:hover:not(:disabled) {
    outline: 2px solid var(--color-primary-container);
    outline-offset: 2px;
}

.bs-checkbox__control:focus-visible {
    outline: 2px solid var(--color-primary-focused);
    outline-offset: 2px;
}

.bs-checkbox__control:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.bs-checkbox__control:checked:disabled {
    opacity: 0.5;
    accent-color: var(--color-neutrals-hover);
}

.bs-checkbox__label {
    font-family: var(--font-family, Roboto, sans-serif);
    font-weight: 400;
    font-size: var(--font-body-md-regular-size, 16px);
    line-height: var(--font-body-md-regular-line-height, 24px);
    color: var(--color-neutrals-default);
    cursor: pointer;
}

.bs-checkbox:has(.bs-checkbox__control:disabled) .bs-checkbox__label {
    cursor: not-allowed;
}

.bs-checkbox--error .bs-checkbox__control {
    outline: 2px solid var(--color-error-default);
    outline-offset: 2px;
}

.bs-checkbox--error .bs-checkbox__control:focus-visible {
    outline: 2px solid var(--color-error-default);
    outline-offset: 2px;
}

.bs-checkbox__feedback {
    font-family: var(--font-family, Roboto, sans-serif);
    font-weight: 400;
    font-size: var(--font-caption-md-size, 14px);
    line-height: var(--font-caption-md-line-height, 20px);
    color: var(--color-neutrals-hover);
    padding-left: 24px;
}

.bs-checkbox__feedback--error {
    color: var(--color-error-default);
}

/* ============================================================
   BsButton (bs-button)
   ============================================================ */

.bs-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-family: var(--font-family, Roboto, sans-serif);
    font-weight: 500;
    font-size: var(--font-body-md-regular-size, 1rem);
    line-height: var(--font-body-md-regular-line-height, 1.5rem);
    border-radius: 0.375rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
    user-select: none;
    text-decoration: none;
}

.bs-button:disabled,
.bs-button--loading {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Size modifiers */
.bs-button--small {
    padding: 0.5rem;
    font-size: var(--font-body-md-regular-size, 1rem);
    line-height: var(--font-body-md-regular-line-height, 1.5rem);
}

.bs-button--large {
    padding: 0.75rem 1.5rem;
    font-size: var(--font-body-lg-size, 1.125rem);
    line-height: var(--font-body-lg-line-height, 1.75rem);
}

/* Primary */
.bs-button--primary {
    background-color: var(--color-primary-default);
    color: var(--color-neutrals-container);
    border-color: var(--color-primary-default);
}

.bs-button--primary:hover:not(:disabled) {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.bs-button--primary:focus-visible {
    outline: 2px solid var(--color-primary-focused);
    outline-offset: 2px;
}

.bs-button--primary:active:not(:disabled) {
    background-color: var(--color-primary-pressed);
    border-color: var(--color-primary-pressed);
}

/* Neutral */
.bs-button--neutral {
    background-color: var(--color-neutrals-container-hover);
    color: var(--color-neutrals-default);
    border-color: var(--color-neutrals-container-hover);
}

.bs-button--neutral:hover:not(:disabled) {
    background-color: var(--color-neutrals-container-pressed);
    border-color: var(--color-neutrals-container-pressed);
}

.bs-button--neutral:focus-visible {
    outline: 2px solid var(--color-primary-focused);
    outline-offset: 2px;
}

.bs-button--neutral:active:not(:disabled) {
    background-color: var(--color-neutrals-pressed);
    color: var(--color-neutrals-container);
    border-color: var(--color-neutrals-pressed);
}

/* Outlined */
.bs-button--outlined {
    background-color: transparent;
    color: var(--color-primary-default);
    border-color: var(--color-primary-default);
}

.bs-button--outlined:hover:not(:disabled) {
    background-color: var(--color-primary-container);
}

.bs-button--outlined:focus-visible {
    outline: 2px solid var(--color-primary-focused);
    outline-offset: 2px;
}

.bs-button--outlined:active:not(:disabled) {
    background-color: var(--color-primary-container-hover);
}

/* Subtle */
.bs-button--subtle {
    background-color: transparent;
    color: var(--color-primary-default);
    border-color: transparent;
}

.bs-button--subtle:hover:not(:disabled) {
    background-color: var(--color-primary-container);
}

.bs-button--subtle:focus-visible {
    outline: 2px solid var(--color-primary-focused);
    outline-offset: 2px;
}

.bs-button--subtle:active:not(:disabled) {
    background-color: var(--color-primary-container-hover);
}

/* Success */
.bs-button--success {
    background-color: var(--color-success-default);
    color: var(--color-neutrals-container);
    border-color: var(--color-success-default);
}

.bs-button--success:hover:not(:disabled) {
    filter: brightness(0.9);
}

.bs-button--success:active:not(:disabled) {
    filter: brightness(0.8);
}

.bs-button--success:focus-visible {
    outline: 2px solid var(--color-success-default);
    outline-offset: 2px;
}

/* Warning */
.bs-button--warning {
    background-color: var(--color-warning-default);
    color: var(--color-neutrals-container);
    border-color: var(--color-warning-default);
}

.bs-button--warning:hover:not(:disabled) {
    filter: brightness(0.9);
}

.bs-button--warning:active:not(:disabled) {
    filter: brightness(0.8);
}

.bs-button--warning:focus-visible {
    outline: 2px solid var(--color-warning-default);
    outline-offset: 2px;
}

/* Error */
.bs-button--error {
    background-color: var(--color-error-default);
    color: var(--color-neutrals-container);
    border-color: var(--color-error-default);
}

.bs-button--error:hover:not(:disabled) {
    filter: brightness(0.9);
}

.bs-button--error:active:not(:disabled) {
    filter: brightness(0.8);
}

.bs-button--error:focus-visible {
    outline: 2px solid var(--color-error-default);
    outline-offset: 2px;
}

/* Loading spinner */
.bs-button__spinner {
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: bs-button-spin 0.6s linear infinite;
    flex-shrink: 0;
}

@keyframes bs-button-spin {
    to { transform: rotate(360deg); }
}

/* ============================================================
   BsCheckBoxList (bs-checkbox-list)
   ============================================================ */

.bs-checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bs-checkbox-list__label {
    font-family: var(--font-family, Roboto, sans-serif);
    font-weight: 500;
    font-size: var(--font-caption-lg-size, 16px);
    line-height: var(--font-caption-lg-line-height, 24px);
    color: var(--color-neutrals-default);
}

.bs-checkbox-list__items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bs-checkbox-list__items--horizontal {
    flex-direction: row;
    flex-wrap: wrap;
}

.bs-checkbox-list__item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bs-checkbox-list__feedback {
    font-family: var(--font-family, Roboto, sans-serif);
    font-weight: 400;
    font-size: var(--font-caption-md-size, 14px);
    line-height: var(--font-caption-md-line-height, 21px);
    color: var(--color-neutrals-hover);
}

.bs-checkbox-list__feedback--error {
    color: var(--color-error-default);
}

/* Cross-block dependency: targets .bs-checkbox__control from the bs-checkbox block.
   If bs-checkbox element names change, update these selectors accordingly. */
.bs-checkbox-list--error .bs-checkbox__control {
    outline: 2px solid var(--color-error-default);
    outline-offset: 2px;
}

.bs-checkbox-list--error .bs-checkbox__control:focus-visible {
    outline: 2px solid var(--color-error-default);
    outline-offset: 2px;
}

.bs-checkbox-list__item:has(.bs-checkbox__control:disabled) .bs-checkbox__label {
    cursor: not-allowed;
}

/* ============================================================
   BsRadioGroup (bs-radio-group)
   ============================================================ */

.bs-radio-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bs-radio-group__label {
    font-family: var(--font-family, Roboto, sans-serif);
    font-weight: 500;
    font-size: var(--font-caption-lg-size, 16px);
    line-height: var(--font-caption-lg-line-height, 24px);
    color: var(--color-neutrals-default);
}

.bs-radio-group__items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bs-radio-group__items--horizontal {
    flex-direction: row;
    flex-wrap: wrap;
}

.bs-radio-group__item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bs-radio-group__feedback {
    font-family: var(--font-family, Roboto, sans-serif);
    font-weight: 400;
    font-size: var(--font-caption-md-size, 14px);
    line-height: var(--font-caption-md-line-height, 24px);
    color: var(--color-neutrals-hover);
}

.bs-radio-group__feedback--error {
    color: var(--color-error-default);
}

/* Cross-block dependency: targets .bs-radio__control from the bs-radio block.
   If bs-radio element names change, update these selectors accordingly. */
.bs-radio-group--error .bs-radio__control {
    outline: 2px solid var(--color-error-default);
    outline-offset: 2px;
}

.bs-radio-group--error .bs-radio__control:focus-visible {
    outline: 2px solid var(--color-error-default);
    outline-offset: 2px;
}

.bs-radio-group__item:has(.bs-radio__control:disabled) .bs-radio__label {
    cursor: not-allowed;
}

/* ============================================================
   BsRadio (bs-radio)
   Individual radio control — used inside BsRadioGroup.
   ============================================================ */

.bs-radio__control {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--color-primary-default);
    cursor: pointer;
    transition: outline 0.15s ease, outline-offset 0.15s ease;
}

.bs-radio__control:hover:not(:disabled) {
    outline: 2px solid var(--color-primary-container);
    outline-offset: 2px;
}

.bs-radio__control:focus-visible {
    outline: 2px solid var(--color-primary-focused);
    outline-offset: 2px;
}

.bs-radio__control:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.bs-radio__control:checked:disabled {
    opacity: 0.5;
    accent-color: var(--color-neutrals-hover);
}

.bs-radio__label {
    font-family: var(--font-family, Roboto, sans-serif);
    font-weight: 400;
    font-size: var(--font-body-md-regular-size, 16px);
    line-height: var(--font-body-md-regular-line-height, 24px);
    color: var(--color-neutrals-default);
    cursor: pointer;
}

/* ============================================================
   BsSelect (bs-select)
   ============================================================ */

.bs-select { }

.bs-select .bs-select__control {
    font-family: var(--font-family, Roboto, sans-serif);
    font-weight: 400;
    font-size: var(--font-body-md-regular-size, 16px);
    line-height: var(--font-body-md-regular-line-height, 24px);
    border: 1px solid var(--color-neutrals-hover);
    border-radius: 4px;
    background-color: var(--color-neutrals-container);
    color: var(--color-neutrals-default);
    width: 100%;
    box-sizing: border-box;
}

.bs-select .bs-select__control .dxbl-text-edit-input {
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    background-color: transparent;
    padding: 8px 12px;
}

.bs-select .bs-select__control .dxbl-text-edit-input::placeholder {
    color: var(--color-neutrals-hover);
}

.bs-select .bs-select__control.dxbl-disabled {
    background-color: var(--color-neutrals-container-hover);
    border-color: var(--color-neutrals-hover);
    cursor: not-allowed;
}

.bs-select .bs-select__control.dxbl-disabled .dxbl-text-edit-input {
    color: var(--color-neutrals-hover);
    cursor: not-allowed;
}

.bs-select .bs-select__control:focus-within,
.bs-select .bs-select__control.dxbl-focused {
    border-color: var(--color-primary-focused);
    box-shadow: none;
}

.bs-input--error .bs-select__control {
    border-color: var(--color-error-default);
    box-shadow: 0 0 0 3px var(--color-error-container);
}

dxbl-dropdown-dialog.dxbl-edit-dropdown {
    background-color: var(--color-neutrals-container);
    border-color: var(--color-neutrals-container-pressed);
}

.dxbl-list-item.dxbl-list-item-selected {
    background-color: var(--color-primary-default);
    color: #fff;
}

.dxbl-list-item.dxbl-list-item-focused:not(.dxbl-list-item-selected) {
    background-color: var(--color-primary-container);
    color: var(--color-neutrals-default);
}

/* WCAG pair: --color-2-default on --color-2-container. */
dxbl-dropdown-dialog.dxbl-edit-dropdown .dxbl-listbox {
    background-color: var(--color-2-container);
    color: var(--color-2-default);
}

dxbl-dropdown-dialog.dxbl-edit-dropdown .dxbl-list-item {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-body-md-regular-size, 1rem);
    line-height: var(--font-body-md-regular-line-height, 1.5rem);
    color: var(--color-2-default);
    padding: 0.5rem 0.75rem;
}

dxbl-dropdown-dialog.dxbl-edit-dropdown .dxbl-list-item:hover:not(.dxbl-list-item-selected) {
    background-color: var(--color-2-container-hover);
    color: var(--color-2-default);
}

/* ============================================================
   BsMultiSelect (bs-multi-select)
   ============================================================ */

.bs-multi-select { }

.bs-multi-select .bs-multi-select__control {
    font-family: var(--font-family, Roboto, sans-serif);
    font-weight: 400;
    font-size: var(--font-body-md-regular-size, 1rem);
    line-height: var(--font-body-md-regular-line-height, 1.5rem);
    border: 1px solid var(--color-2-hover);
    border-radius: 0.25rem;
    background-color: var(--color-2-container);
    color: var(--color-2-default);
    width: 100%;
    box-sizing: border-box;
}

.bs-multi-select .bs-multi-select__control .dxbl-text-edit-input {
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    background-color: transparent;
    padding: 0.5rem 0.75rem;
}

.bs-multi-select .bs-multi-select__control .dxbl-text-edit-input::placeholder {
    color: var(--color-2-hover);
}

.bs-multi-select .bs-multi-select__control.dxbl-disabled {
    background-color: var(--color-2-container-hover);
    border-color: var(--color-2-hover);
    cursor: not-allowed;
}

.bs-multi-select .bs-multi-select__control.dxbl-disabled .dxbl-text-edit-input {
    color: var(--color-2-hover);
    cursor: not-allowed;
}

.bs-multi-select .bs-multi-select__control:focus-within,
.bs-multi-select .bs-multi-select__control.dxbl-focused {
    border-color: var(--color-1-focused);
    box-shadow: none;
}

.bs-input--error .bs-multi-select__control {
    border-color: var(--color-4-default);
    box-shadow: 0 0 0 0.1875rem var(--color-4-container);
}

/* WCAG pair: --color-4-default on --color-2-container background */
.bs-input--error .bs-multi-select__control:focus-within,
.bs-input--error .bs-multi-select__control.dxbl-focused {
    border-color: var(--color-4-default);
    box-shadow: 0 0 0 0.1875rem var(--color-4-container);
}

/* ============================================================
   Dashboard grid (dashboard-grid*)
   Two-column layout; height equalization comes from the fixed
   height on .dashboard-module, not from grid-auto-rows.
   ============================================================ */

/* Extend the dashboard background through the layout shell's padding */
#page-content-wrapper:has(.dashboard-page) {
    background-color: var(--color-page-background);
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#page-body-container:has(.dashboard-page) {
    padding-top: 0 !important;
}

.dashboard-page {
    background-color: var(--color-page-background);
    min-height: 100%;
    padding: 0 24px;
}

.dashboard-grid {
    display: flex;
    flex-direction: column;
}

.dashboard-row {
    padding: 0;
    margin-left: -24px;
    margin-right: -24px;
}

.dashboard-row--shade-0 {
    background-color: color-mix(in srgb, var(--color-neutrals-container-focused) 20%, var(--color-page-background));
}

.dashboard-row--shade-1 {
    background-color: color-mix(in srgb, var(--color-neutrals-container-focused) 5%, var(--color-page-background));
}

.dashboard-row--shade-2 {
    background-color: color-mix(in srgb, var(--color-neutrals-container-focused) 35%, var(--color-page-background));
}

.dashboard-row--shade-3 {
    background-color: color-mix(in srgb, var(--color-neutrals-container-focused) 5%, var(--color-page-background));
}

.dashboard-row__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding-block: 24px;
    padding-inline: 24px;
    max-width: var(--bs-content-max-width);
    margin-inline: auto;
}

.dashboard-row__full-content {
    max-width: var(--bs-content-max-width);
    margin-inline: auto;
    padding-block: 24px;
    padding-inline: 24px;
}

@media (min-width: 1024px) {
    .dashboard-row__inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ============================================================
   Dashboard list card (dashboard-list-card*)
   Framework-locked shell for list-style dashboard modules.
   Header (icon + title + optional action) is always rendered.
   Body shows skeleton, empty state, or <ul> with items.
   ============================================================ */

.dashboard-list-card {
    background-color: var(--color-neutrals-container);
    border-radius: var(--brand-border-radius, 16px);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    height: var(--dashboard-module-height, 264px);
    overflow: hidden;
}

.dashboard-list-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    gap: 8px;
    background-color: var(--color-primary-container);
    flex-shrink: 0;
}

.dashboard-list-card__heading {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

/* WCAG pair: --color-primary-default text on --color-neutrals-container background */
.dashboard-list-card__action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 16px;
    padding-bottom: 16px;
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-body-md-size, 16px);
    line-height: var(--font-body-md-line-height, 24px);
    font-weight: 500;
}

.dashboard-list-card__action-link {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-primary-default);
    text-decoration: none;
}

.dashboard-list-card__action-link:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

.dashboard-list-card__action-link:active {
    color: var(--color-primary-pressed);
}

.dashboard-list-card__action-link:focus-visible {
    outline: 2px solid var(--color-primary-focused);
    outline-offset: 2px;
    border-radius: 2px;
}

.dashboard-list-card__action-icon {
    font-size: var(--font-caption-md-size, 14px);
}

/* WCAG pair: --color-primary-hover text on --color-neutrals-container background */
.dashboard-list-card__action-count {
    color: var(--color-primary-hover);
    font-weight: 400;
}

.dashboard-list-card__action-separator {
    color: var(--color-neutrals-hover);
}

.dashboard-list-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    color: var(--color-primary-default);
    font-size: 20px;
}

/* WCAG pair: --color-neutrals-default text on --color-primary-container background */
.dashboard-list-card__title {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-h6-size, 20px);
    line-height: var(--font-h6-line-height, 32px);
    font-weight: 600;
    color: var(--color-neutrals-default);
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-list-card__body {
    padding: 16px 24px 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* WCAG pair: --color-neutrals-hover text on --color-neutrals-container background */
.dashboard-list-card__empty {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-body-md-size, 16px);
    line-height: var(--font-body-md-line-height, 24px);
    color: var(--color-neutrals-hover);
    margin: auto;
    text-align: center;
    align-self: center;
}

/* WCAG pair: --color-primary-default on --color-neutrals-container background */
.dashboard-list-card__empty a {
    color: var(--color-primary-default);
    text-decoration: underline;
}

.dashboard-list-card__empty a:hover {
    color: var(--color-primary-hover);
}

.dashboard-list-card__skeleton {
    flex: 1;
    border-radius: 8px;
    background: linear-gradient(
        90deg,
        var(--color-neutrals-container-hover) 25%,
        var(--color-neutrals-container-focused) 50%,
        var(--color-neutrals-container-hover) 75%
    );
    background-size: 200% 100%;
    animation: dashboard-shimmer 1.5s infinite;
}

/* ============================================================
   Dashboard detail card (dashboard-detail-card*)
   Flexible shell for detail-style dashboard modules.
   No enforced header — module controls internal layout.
   CSS token contract only.
   ============================================================ */

/* Shared primary item name style for detail modules (group name, board name, event name, etc.).
   Simple/list modules are excluded — they use a colored header band with a different text treatment. */
.dashboard-detail-module__item-name {
    color: var(--color-primary-default);
}

.dashboard-detail-card {
    background-color: var(--color-neutrals-container);
    border-radius: var(--brand-border-radius, 16px);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    height: var(--dashboard-module-details-height, 288px);
    overflow: hidden;
    padding: 24px;
    transition: box-shadow 0.15s ease;
}

.dashboard-detail-card:hover {
    box-shadow: var(--shadow-card-hover);
}

.dashboard-detail-card.personal-info-module:hover {
    box-shadow: var(--shadow-card);
}

/* Narrower side padding than the default card: leaves more row width for
   the field list. The banner bleed margins in the module's scoped CSS mirror this. */
.dashboard-detail-card.personal-info-module {
    padding-left: 16px;
    padding-right: 16px;
}

.dashboard-detail-card__skeleton {
    flex: 1;
    border-radius: 8px;
    background: linear-gradient(
        90deg,
        var(--color-neutrals-container-hover) 25%,
        var(--color-neutrals-container-focused) 50%,
        var(--color-neutrals-container-hover) 75%
    );
    background-size: 200% 100%;
    animation: dashboard-shimmer 1.5s infinite;
}

@keyframes dashboard-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-list-card__skeleton,
    .dashboard-detail-card__skeleton,
    .skeleton-block,
    .skeleton-line,
    .dashboard-list__skeleton-block,
    .dashboard-list__skeleton-line {
        animation: none;
    }
}

/* ============================================================
   Dashboard layout (dashboard-layout*)
   Sidebar + main content layout for pages with a Sidebar module.
   ============================================================ */

.dashboard-layout {
    display: flex;
    flex-direction: column;
    gap: 24px;
    /* Mirror the content cap: 400px sidebar (≥1440px) + 24px gap + content column */
    max-width: calc(var(--bs-content-max-width) + 400px + 24px);
    margin-inline: auto;
}

.dashboard-layout__sidebar {
    min-width: 0;
}

.dashboard-layout__content {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    min-width: 0;
}

@media (min-width: 1024px) {
    .dashboard-layout {
        flex-direction: row;
        align-items: flex-start;
    }

    .dashboard-layout__sidebar {
        /* Wide enough for the personal info field list (longest labels + phone numbers)
           without wrapping in the common case */
        flex: 0 0 360px;
    }

    .dashboard-layout__content {
        flex: 1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1440px) {
    .dashboard-layout__sidebar {
        flex: 0 0 400px;
    }
}

.dashboard-layout__content-item--full {
    grid-column: 1 / -1;
}

/* ============================================================
   Dashboard summary (dashboard-details*)
   Responsive grid container for detail-module field layouts.
   Consumers define their own field/label/value markup.
   ============================================================ */

.dashboard-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    width: 100%;
    align-content: start;
}

/* ============================================================
   Dashboard list (dashboard-list*)
   Item list for Employment, Education, and similar modules.
   ============================================================ */

.dashboard-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.dashboard-list__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}

.dashboard-list__item:first-child {
    padding-top: 0;
}

.dashboard-list__item-icon,
.dashboard-list__skeleton-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.dashboard-list__item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary-default);
    font-size: 14px;
}

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

/* WCAG pair: --color-neutrals-pressed text on --color-neutrals-container background */
.dashboard-list__item-name {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-body-md-size, 16px);
    line-height: var(--font-body-md-line-height, 24px);
    font-weight: 500;
    color: var(--color-neutrals-pressed);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-list__item-subname {
    font-weight: normal;
    font-size: var(--font-caption-md-size, 0.875rem);
    margin-left: 0.5rem;
}

/* WCAG pair: --color-neutrals-hover text on --color-neutrals-container background */
.dashboard-list__item-description {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-caption-md-size, 14px);
    line-height: var(--font-caption-md-line-height, 20px);
    font-weight: 400;
    color: var(--color-neutrals-hover);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-list__item-description::before {
    content: '\2013\00A0';
}

/* ============================================================
   Fieldset utility (.bs-fieldset / .bs-fieldset__legend)
   A bordered group whose label sits as a legend on the top border; the surface background shows
   through behind the label to cut the border line. Shared by the Interests group and the
   custom-fields group (whose markup comes from the shared BsSelectCustomFields component, so its
   classes are hooked in here rather than by editing that markup). Consumers add their own
   padding/typography.
   ============================================================ */
.bs-fieldset,
.custom-fields-detail-module div.bs-select-custom-fields__group {
    position: relative;
    border: 1px solid var(--color-primary-default);
    border-radius: 8px;
}

/* WCAG pair: --color-primary-default text on --color-neutrals-container (surface) background.
   max-width keeps a long legend inside the box (no horizontal overflow on narrow viewports). */
.bs-fieldset__legend,
.custom-fields-detail-module div.bs-select-custom-fields__group-header {
    position: absolute;
    top: -12px;
    left: 12px;
    z-index: 1;
    max-width: calc(100% - 24px);
    padding: 0 8px;
    background-color: var(--color-neutrals-container);
    color: var(--color-primary-default);
    font-family: var(--font-family, Roboto, sans-serif);
    /* Keep a long legend on one line and inside the box (no horizontal overflow on mobile).
       white-space inherits to a nested title element; text-overflow needs to sit on whichever
       element directly holds the text (the span here; the <h3> for the custom-fields variant). */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Interest module
   The wrapper class is scoped on a div that wraps the whole card (present in every state,
   including loading), so the auto-height + bottom spacing apply to the skeleton too — otherwise
   the loading skeleton sat flush against the card bottom. Mirrors .custom-fields-detail-module. */
.interest-detail-module .dashboard-list-card {
    height: auto;
}

/* Bottom breathing room below the last group / footer (and below the skeleton while loading),
   matching the custom-fields module (the framework body has 0 bottom padding for fixed-height
   list cards). */
.interest-detail-module .dashboard-list-card__body {
    padding-bottom: 24px;
}

/* Groups stack in a single full-width column; padding-top gives the group labels room. The
   interests inside each group flow onto shared rows on wider screens — see .dashboard-list__interests
   below. */
.dashboard-list:has(.dashboard-list__group) {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-top: 1rem;
    overflow: visible;
    min-height: auto;
}

/* Box + legend mechanic come from .bs-fieldset / .bs-fieldset__legend (in the markup); these add
   only the Interests-specific layout and label typography. */
.dashboard-list__group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    list-style: none;
    padding: 1rem 0.75rem 0.75rem;
    min-width: 0;
}

.dashboard-list__group-label {
    font-size: var(--font-body-sm-size, 0.875rem);
    line-height: var(--font-body-sm-line-height, 1.25rem);
    font-weight: 600;
}

/* Interests within a group. Mobile-first: stacked one per row at the base so long names get the
   full width. From 768px up they flow onto shared rows wherever there's room, putting this
   full-width module's horizontal space to use instead of leaving it empty. */
/* Collapsed interest lists clamp by ROWS (max-height + overflow), not by item count, so a wide screen
   — where interests wrap several per row — shows more interests than a narrow one for the same height.
   "Vis mere" lifts the clamp; InterestModule.razor.js reports how many items each clamp hides so the
   expander only appears when something is actually clipped. Base = mobile (column) ≈ 3 rows; the 768px
   rule below switches to wrap and ≈ 2 rows. The Bootstrap info tooltip is portaled to <body>, so this
   overflow clip does not affect it. */
.dashboard-list__interests {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow: hidden;
    /* 3 rows: 3 × 2.75rem interest height + 2 × 0.5rem row gap */
    max-height: calc(3 * 2.75rem + 2 * 0.5rem);
}

/* One interest = the star/name toggle plus its optional info trigger, presented as a single
   hoverable unit. The padding, rounding and hover background live here (not on the toggle) so the
   highlight envelops the info icon too. The 0.5rem gap matches the star-to-name gap inside the
   toggle, so the info icon sits the same distance from the name as the star does. */
.dashboard-list__interest {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    min-width: 0;
    padding-inline: 0.5rem;
    border-radius: 0.5rem;
    transition: background-color 0.15s;
}

@media (min-width: 768px) {
    .dashboard-list__interests {
        flex-direction: row;
        flex-wrap: wrap;
        /* row 8px, column 16px */
        gap: 0.5rem 1rem;
        /* 2 rows where interests pack several per row: 2 × 2.75rem + 1 × 0.5rem row gap */
        max-height: calc(2 * 2.75rem + 0.5rem);
    }

    /* Size to content with no grow, so short interests pack several per row and the leftover space
       stays empty; a long name wraps inside the toggle rather than claiming the whole row. */
    .dashboard-list__interest {
        flex: 0 1 auto;
        max-width: 100%;
    }
}

/* Expander lifts the row clamp to reveal the rest. Placed after the 768px rule so it overrides the
   desktop max-height too (equal specificity → later in source wins). */
.dashboard-list__interests--expanded {
    max-height: none;
    overflow: visible;
}

/* Star + name are the toggle target (min 2.75rem/44px tall for touch). It sizes to its content
   (flex-grow 0) so the info icon sits right after the name rather than being pushed to the far
   right; it can still shrink (min-width 0) so long names wrap instead of overflowing. No border and
   no background — the inline padding and hover highlight live on .dashboard-list__interest so they
   wrap the info icon too. The block padding stays here: it gives wrapped multi-line names breathing
   room from the top/bottom of the hover pill (a single line is unaffected — min-height sets its
   height). align-items:flex-start keeps the star beside the first line of a wrapped name. */
.dashboard-list__interest-toggle {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    flex: 0 1 auto;
    min-width: 0;
    min-height: 2.75rem;
    padding-block: 0.5rem;
    border: none;
    background-color: transparent;
    cursor: pointer;
    text-align: left;
    color: var(--color-neutrals-default);
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-body-md-size, 1rem);
    line-height: var(--font-body-md-line-height, 1.5rem);
}

.dashboard-list__interest-toggle:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Unselected interests show an outlined star in a muted tone; selected ones a filled brand star.
   The outline/fill swap is the far/fas icon in the markup; this sets the matching colour. */
.dashboard-list__interest-star {
    flex-shrink: 0;
    color: var(--color-neutrals-hover);
    line-height: var(--font-body-md-line-height, 1.5rem);
}

.dashboard-list__interest-toggle[aria-pressed="true"] .dashboard-list__interest-star {
    color: var(--color-primary-default);
}

.dashboard-list__interest-name {
    min-width: 0;
    overflow-wrap: break-word;
    hyphens: none;
}

/* The info tooltip trigger (the focusable wrapper from MembersiteTooltip): keeps the 44px-tall tap
   target but hugs the name (no wide centred box) so it sits one 0.5rem gap from the name — the same
   distance the star sits from the name. The inline padding widens the hit area toward the WCAG AAA
   44px target without reintroducing the wide centred box. */
.dashboard-list__interest-info {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding-inline: 0.5rem;
    color: var(--color-primary-default);
    cursor: pointer;
}

/* Both expanders are borderless, brand-coloured text buttons with a 44px tap height. */
.dashboard-list__group-show-more,
.dashboard-list__show-more {
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    border: none;
    background-color: transparent;
    cursor: pointer;
    color: var(--color-primary-default);
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-body-sm-size, 0.875rem);
    line-height: var(--font-body-sm-line-height, 1.25rem);
    font-weight: 600;
}

/* Per-group expander: left-aligned inside the box. */
.dashboard-list__group-show-more {
    display: inline-flex;
    align-self: flex-start;
    padding: 0.25rem 0.5rem;
}

/* Module-level expander: centred under the groups. */
.dashboard-list__show-more {
    display: flex;
    width: fit-content;
    margin: 0.75rem auto 0;
    padding: 0.5rem 0.75rem;
}

/* Shared focus ring for every interactive element in the module. */
.dashboard-list__interest-toggle:focus-visible,
.dashboard-list__interest-info:focus-visible,
.dashboard-list__group-show-more:focus-visible,
.dashboard-list__show-more:focus-visible {
    outline: 2px solid var(--color-primary-focused);
    outline-offset: 2px;
}

/* Rotating chevron shared by both expanders. */
.dashboard-list__show-more-icon {
    transition: transform 0.15s;
}

.dashboard-list__show-more-icon--expanded {
    transform: rotate(180deg);
}

@media (hover: hover) {
    /* Highlight the whole unit (star + name + info icon), but not while it is saving (toggle disabled). */
    .dashboard-list__interest:has(.dashboard-list__interest-toggle:not(:disabled)):hover {
        background-color: var(--color-neutrals-container-hover);
    }

    /* Underline only the label, not the chevron icon. */
    .dashboard-list__group-show-more:hover span,
    .dashboard-list__show-more:hover span {
        text-decoration: underline;
    }
}

/* WCAG pair: --color-primary-default text on --color-primary-container background */
.dashboard-list__badge {
    flex-shrink: 0;
    background-color: var(--color-primary-container);
    color: var(--color-primary-default);
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-caption-md-size, 14px);
    line-height: var(--font-caption-md-line-height, 20px);
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 100px;
    white-space: nowrap;
}

.skeleton-block,
.dashboard-list__skeleton-block {
    border-radius: 8px;
    background: linear-gradient(
        90deg,
        var(--color-neutrals-container-hover) 25%,
        var(--color-neutrals-container-focused) 50%,
        var(--color-neutrals-container-hover) 75%
    );
    background-size: 200% 100%;
    animation: dashboard-shimmer 1.5s infinite;
}

.skeleton-line,
.dashboard-list__skeleton-line {
    height: 16px;
    border-radius: 4px;
    background: linear-gradient(
        90deg,
        var(--color-neutrals-container-hover) 25%,
        var(--color-neutrals-container-focused) 50%,
        var(--color-neutrals-container-hover) 75%
    );
    background-size: 200% 100%;
    animation: dashboard-shimmer 1.5s infinite;
}

.skeleton-line--short,
.dashboard-list__skeleton-line--short {
    width: 55%;
}

@media (max-width: 1023px) {
    .dashboard-list__badge {
        width: 8px;
        height: 8px;
        padding: 0;
        border-radius: 50%;
        font-size: 0;
        line-height: 0;
        background-color: var(--color-primary-default);
    }
}

/* ============================================================
   Event detail module (event-detail-module__)
   Detail-style dashboard module for upcoming event enrollments.
   ============================================================ */

.event-detail-module {
    font-family: var(--font-family, Roboto, sans-serif);
}

.event-detail-module__participation {
    background-color: var(--color-neutrals-container);
    border-radius: var(--brand-border-radius, 16px);
    padding: 16px;
    box-shadow: var(--shadow-card);
}

.event-detail-module__participation--featured {
    padding-bottom: 0;
}

.event-detail-module__actions {
    margin-top: auto;
    padding-top: 16px;
    padding-bottom: 16px;
}

.event-detail-module__nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border: 1.5px solid var(--color-primary-default);
    border-radius: 8px;
    background: transparent;
    color: var(--color-primary-default);
    font-size: var(--font-caption-md-size, 14px);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s, color 0.15s;
}

.event-detail-module__nav-button:hover {
    background-color: var(--color-primary-container);
}

.event-detail-module__nav-button:active {
    color: var(--color-primary-pressed);
}

.event-detail-module__nav-button:focus-visible {
    outline: 2px solid var(--color-primary-focused);
    outline-offset: 2px;
}

.event-detail-module__title {
    font-size: var(--font-h6-size, 16px);
    line-height: var(--font-h6-line-height, 24px);
    font-weight: 600;
    color: var(--color-primary-default);
}

.event-detail-module__icon {
    width: 24px;
    color: var(--color-primary-default);
    font-size: 16px;
}


.event-detail-module__date {
    width: 48px;
    min-width: 48px;
    height: 48px;
    background-color: var(--color-primary-container);
    border-radius: 8px;
}

.event-detail-module__date-day {
    font-size: 18px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--color-primary-default);
}

.event-detail-module__date-month {
    font-size: 12px;
    line-height: var(--font-caption-md-line-height, 20px);
    font-weight: 500;
    color: var(--color-primary-default);
}

.event-detail-module__name {
    font-size: var(--font-body-md-size, 16px);
    line-height: var(--font-body-md-line-height, 24px);
    font-weight: 500;
}

.event-detail-module__badge {
    align-self: flex-start;
    background-color: var(--color-primary-container);
    color: var(--color-primary-default);
    font-size: var(--font-caption-md-size, 14px);
    line-height: var(--font-caption-md-line-height, 20px);
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 100px;
    white-space: nowrap;
}

.event-detail-module__badges {
    /* Reserve one badge-row of height so cards stay a uniform height whether or not
       a status badge is present. 28px = 20px line-height + 2×4px vertical padding. */
    min-height: 28px;
}

.event-detail-module__skeleton-date {
    width: 48px;
    min-width: 48px;
    height: 48px;
    border-radius: 8px;
}

.event-detail-module__row-action {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    width: 24px;
    height: 24px;
    font-size: 16px;
    color: var(--color-primary-default);
    background: transparent;
    border: none;
    border-radius: 8px;
    padding: 0;
    cursor: pointer;
}

.event-detail-module__row-action:hover {
    color: var(--color-primary-hover);
    background-color: var(--color-primary-container);
}

.event-detail-module__row-action:active {
    color: var(--color-primary-pressed);
}

.event-detail-module__row-action:focus-visible {
    outline: 2px solid var(--color-primary-focused);
    outline-offset: 2px;
}

.event-detail-module__qr-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 8px;
    background-color: var(--color-primary-container);
    color: var(--color-primary-default);
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.event-detail-module__qr-button:hover {
    background-color: var(--color-primary-container-hover);
    color: var(--color-primary-hover);
}

.event-detail-module__qr-button:active {
    color: var(--color-primary-pressed);
}

.event-detail-module__qr-button:focus-visible {
    outline: 2px solid var(--color-primary-focused);
    outline-offset: 2px;
}

.event-detail-module__empty {
    min-height: 160px;
    font-size: var(--font-body-md-size, 16px);
    line-height: var(--font-body-md-line-height, 24px);
    color: var(--color-neutrals-hover);
}

.event-detail-module__date--featured {
    width: 56px;
    min-width: 56px;
    height: 56px;
    background-color: var(--color-primary-default);
}

.event-detail-module__date--featured .event-detail-module__date-day {
    font-size: 24px;
    color: var(--color-neutrals-container);
}

.event-detail-module__date--featured .event-detail-module__date-month {
    font-size: 12px;
    color: var(--color-neutrals-container);
    opacity: 0.85;
}

.event-detail-module__name--featured {
    font-size: var(--font-body-lg-size, 18px);
    font-weight: 600;
}

.event-detail-module__skeleton-date--featured {
    width: 56px;
    min-width: 56px;
    height: 56px;
}

.event-detail-module__meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-caption-md-size, 14px);
    line-height: var(--font-caption-md-line-height, 20px);
    color: var(--color-neutrals-hover);
}

.event-detail-module__meta-icon {
    font-size: 12px;
    width: 14px;
    text-align: center;
    flex-shrink: 0;
    color: var(--color-primary-default);
}

.event-detail-module__split {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 16px;
    align-items: stretch;
    min-width: 0;
}

.event-detail-module__split .event-detail-module__participation--featured {
    grid-row: span 2;
}

.event-detail-module__split .event-detail-module__participation--compact {
    align-self: stretch;
}

@media (max-width: 767px) {
    .event-detail-module__split {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }

    .event-detail-module__split .event-detail-module__participation--featured {
        grid-row: span 1;
    }

    .event-detail-module__split .event-detail-module__featured-body {
        height: auto;
    }

    .event-detail-module__split .event-detail-module__participation--compact {
        flex: unset;
    }
}

/* ============================================================
   Event info section (event-info-section__)
   Collapsible arrangement-info panel inside participation cards.
   ============================================================ */

.event-info-section {
    border-top: 1px solid var(--color-neutrals-container-pressed);
    margin-top: 8px;
}

.event-info-section__text {
    font-size: var(--font-caption-md-size, 14px);
    line-height: var(--font-caption-md-line-height, 20px);
    color: var(--color-neutrals-pressed);
}

.event-info-section__section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.event-info-section__section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-caption-md-size, 14px);
    font-weight: 600;
    color: var(--color-neutrals-pressed);
}

.event-info-section__section-icon {
    color: var(--color-neutrals-hover);
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.event-info-section__place {
    font-size: var(--font-caption-md-size, 14px);
    line-height: var(--font-caption-md-line-height, 20px);
    padding-left: 24px;
}

.event-info-section__location-text {
    font-size: var(--font-caption-md-size, 14px);
    line-height: var(--font-caption-md-line-height, 20px);
    padding-left: 24px;
    white-space: pre-line;
}

.event-info-section__session-list {
    margin: 0;
    padding-left: 24px;
}

.event-info-section__session {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-neutrals-container-pressed);
    font-size: var(--font-caption-md-size, 14px);
}

.event-info-section__session:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.event-info-section__session-track {
    color: var(--color-neutrals-hover);
    font-size: 12px;
}

.event-info-section__session-name {
    font-weight: 500;
    color: var(--color-neutrals-pressed);
}

.event-info-section__session-time {
    color: var(--color-neutrals-hover);
    font-size: 12px;
}

/* ============================================================
   Simple module shared — date stamp and meta row
   Reusable across EventParticipationsSimpleModule and future list modules.
   ============================================================ */

/* WCAG pair: --color-primary-default text on --color-primary-container background */
.simple-module__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-width: 40px;
    height: 40px;
    background-color: var(--color-primary-container);
    border-radius: 8px;
    flex-shrink: 0;
    overflow: hidden;
}

.simple-module__date-day {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-body-md-size, 16px);
    line-height: 1.2; /* layout exception: decorative date digit constrained to 40px box */
    font-weight: 700;
    color: var(--color-primary-default);
}

/* WCAG pair: --color-primary-default text on --color-primary-container background */
.simple-module__date-month {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-caption-sm-size, 11px);
    line-height: var(--font-caption-sm-line-height, 16px);
    font-weight: 500;
    color: var(--color-primary-default);
    text-transform: uppercase;
}

.simple-module__meta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-caption-md-size, 14px);
    line-height: var(--font-caption-md-line-height, 20px);
    font-weight: 400;
    color: var(--color-neutrals-hover);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* WCAG pair: --color-primary-default icon on --color-neutrals-container background */
.simple-module__meta-icon {
    font-size: 11px;
    color: var(--color-primary-default);
    flex-shrink: 0;
}

/* ============================================================
   Community group detail module (cg-detail-module__)
   Full-width dashboard module — up to 3 groups ordered by
   latest message activity.
   ============================================================ */

.cg-detail-module {
    font-family: var(--font-family, Roboto, sans-serif);
}

.cg-detail-module__icon {
    width: 24px;
    color: var(--color-primary-default);
    font-size: 16px;
}



.cg-detail-module__title {
    font-size: var(--font-h6-size, 16px);
    line-height: var(--font-h6-line-height, 24px);
    font-weight: 600;
    color: var(--color-primary-default);
}

/* ============================================================
   Custom fields detail module
   Hosts the shared BsSelectCustomFields inside a DashboardListCard so it shares the dashboard's
   white-card chrome (primary-tinted header bar, shadow, radius). Two adjustments are scoped here:
   1) the list card is fixed-height/clipping by design — let this full-width form grow instead;
   2) flatten BsSelectCustomFields from its page grid of shadowed cards into a single-column,
      transparent form so it reads as one card body, not nested cards.
   ============================================================ */

/* Let the form grow with its content instead of clipping to the fixed module height. */
.custom-fields-detail-module .dashboard-list-card {
    height: auto;
}

.custom-fields-detail-module .dashboard-list-card__body {
    padding-bottom: 24px;
}

.custom-fields-detail-module .dashboard-list {
    overflow: visible;
}

/* Element tags outweigh BsSelectCustomFields' scoped (.x[b-hash]) rules, which otherwise win the
   cascade at equal specificity. */
.custom-fields-detail-module div.bs-select-custom-fields {
    display: flex;
    flex-direction: column;
    gap: 24px;
    /* Room for the first group's legend, which overhangs the top border. */
    padding-top: 8px;
}

/* Box + legend mechanic come from the shared .bs-fieldset utility above; these override only the
   BsSelectCustomFields page defaults (filled background, shadow, clipping, wide padding). */
.custom-fields-detail-module div.bs-select-custom-fields__group {
    background: transparent;
    box-shadow: none;
    overflow: visible;
    padding: 16px;
}

/* WCAG pair: --color-primary-default text on --color-neutrals-container (card) background.
   Truncation lives on the shared .bs-fieldset__legend; the ellipsis is repeated here because this
   variant's text is the inner <h3>, and text-overflow only truncates the element directly holding
   the text (the header's nowrap is inherited; the ellipsis must be on the title). */
.custom-fields-detail-module h3.bs-select-custom-fields__group-title {
    font-size: var(--font-body-md-size, 16px);
    line-height: var(--font-body-md-line-height, 24px);
    font-weight: 700;
    color: var(--color-primary-default);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.custom-fields-detail-module div.bs-select-custom-fields__group-body {
    padding: 0;
}

/* Use the full-width module's horizontal space: lay each group's fields out in two columns on
   wider viewports. Mobile-first — single column at the base, two columns from 768px up. */
.custom-fields-detail-module div.bs-select-custom-fields__fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px 24px;
}

@media (min-width: 768px) {
    .custom-fields-detail-module div.bs-select-custom-fields__fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Item grid — single column on mobile, two columns on wider screens */

.cg-detail-module__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.cg-detail-module__list > li {
    min-width: 0;
}

.cg-detail-module__list > li:only-child {
    grid-column: 1 / -1;
}

@media (min-width: 768px) {
    .cg-detail-module__list {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Group cards — each is an anchor wrapping the card content */

.cg-detail-module__group {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    min-width: 0;
    background-color: var(--color-neutrals-container);
    border-radius: var(--brand-border-radius, 16px);
    box-shadow: var(--shadow-card);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s, background-color 0.15s;
}

.cg-detail-module__group:hover {
    box-shadow: var(--shadow-card-hover);
    background-color: var(--color-primary-container);
}

.cg-detail-module__group:active {
    background-color: var(--color-primary-container);
    box-shadow: var(--shadow-card);
}

.cg-detail-module__group:focus-visible {
    outline: 2px solid var(--color-primary-focused);
    outline-offset: 2px;
}

/* Group text content */

.cg-detail-module__group-info {
    min-width: 0;
}

.cg-detail-module__group-name {
    font-size: var(--font-body-lg-size, 18px);
    line-height: var(--font-body-lg-line-height, 28px);
    font-weight: 600;
    color: var(--color-primary-default);
}

@media (max-width: 767px) {
    .cg-detail-module__group-name {
        font-size: var(--font-body-md-size, 16px);
        line-height: var(--font-body-md-line-height, 24px);
    }
}

/* secondary caption below the group name — intentionally below the 16px body floor */
.cg-detail-module__group-description {
    font-size: var(--font-body-sm-size, 14px);
    line-height: var(--font-body-sm-line-height, 20px);
    color: var(--color-neutral-text-secondary);
}

.cg-detail-module__message-count {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-caption-md-size, 12px);
    font-weight: 600;
    color: var(--color-primary-default);
    background-color: var(--color-primary-container);
    border-radius: 12px;
    padding: 4px 8px;
    white-space: nowrap;
}

.cg-detail-module__group-chevron {
    font-size: 12px;
    color: var(--color-neutral-text-secondary);
    opacity: 0.5;
}

/* Avatars */

.cg-detail-module__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.cg-detail-module__avatar--initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary-default);
    color: var(--color-neutrals-container);
    font-weight: 700;
    font-size: 20px;
    user-select: none;
}

/* Empty state */

.cg-detail-module__empty {
    min-height: 160px;
    font-size: var(--font-body-md-size, 16px);
    line-height: var(--font-body-md-line-height, 24px);
    color: var(--color-neutrals-hover);
}

/* Skeleton */

.cg-detail-module__skeleton-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

/* ============================================================
   Board membership detail module (board-detail-module__)
   Full-width dashboard module — list of board memberships with action buttons.
   ============================================================ */

.board-detail-module {
    font-family: var(--font-family, Roboto, sans-serif);
}

.board-detail-module__icon {
    width: 24px;
    color: var(--color-primary-default);
}


/* Board membership rows */

.board-detail-module__title {
    font-size: var(--font-h6-size, 16px);
    line-height: var(--font-h6-line-height, 24px);
    font-weight: 600;
    color: var(--color-primary-default);
}

/* Item grid — single column on mobile, two columns on wider screens */

.board-detail-module__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 768px) {
    .board-detail-module__list {
        grid-template-columns: repeat(2, 1fr);
    }
}

.board-detail-module__item:only-child {
    grid-column: 1 / -1;
}

.board-detail-module__item {
    background-color: var(--color-neutrals-container);
    border-radius: var(--brand-border-radius, 16px);
    box-shadow: var(--shadow-card);
    padding: 16px;
    gap: 0;
    min-width: 0;
}

/* Categories — primary info, shown at the top of each card */

.board-detail-module__categories {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.board-detail-module__category {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.board-detail-module__category + .board-detail-module__category {
    border-top: 1px solid var(--color-neutral-border);
}

.board-detail-module__category-name {
    font-size: var(--font-body-md-size, 16px);
    line-height: var(--font-body-md-line-height, 24px);
    font-weight: 600;
    color: var(--color-primary-default);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.board-detail-module__category-separator {
    color: var(--color-neutral-text-secondary);
    flex-shrink: 0;
}

.board-detail-module__category-dates {
    font-size: var(--font-body-sm-size, 14px);
    line-height: var(--font-body-sm-line-height, 24px);
    color: var(--color-neutral-text-secondary);
    font-weight: 400;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Context line — org · board name (secondary info below categories) */

.board-detail-module__context {
    font-size: var(--font-body-sm-size, 14px);
    line-height: var(--font-body-sm-line-height, 24px);
    color: var(--color-neutral-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.board-detail-module__context-separator {
    color: var(--color-neutral-text-secondary);
}

.board-detail-module__actions {
    margin-top: auto;
    padding-top: 16px;
}

/* Action buttons */

.board-detail-module__action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 24px;
    border: 1px solid var(--color-primary-default);
    font-size: var(--font-body-sm-size, 14px);
    line-height: var(--font-body-sm-line-height, 24px);
    font-weight: 500;
    text-decoration: none;
    background-color: var(--color-primary-container);
    color: var(--color-primary-on-container);
    white-space: nowrap;
    transition: background-color 0.15s, color 0.15s;
}

.board-detail-module__action-btn:hover,
.board-detail-module__action-btn:active {
    background-color: var(--color-primary-default);
    color: var(--color-neutrals-container);
}

.board-detail-module__action-btn:focus-visible {
    outline: 2px solid var(--color-primary-focused);
    outline-offset: 2px;
}

/* Empty state */

.board-detail-module__empty {
    min-height: 80px;
    color: var(--color-neutral-text-secondary);
}

/* Skeletons */

.board-detail-module__skeleton-category {
    height: 24px;
    border-radius: 4px;
}

.board-detail-module__skeleton-actions {
    height: 40px;
    border-radius: 24px;
}

/* ============================================================
   Announcement module (announcement-module__)
   Full-width dashboard module — card grid of organisation-wide announcements.
   ============================================================ */

.announcement-module {
    font-family: var(--font-family, Roboto, sans-serif);
}

.announcement-module__icon {
    width: 24px;
    color: var(--color-primary-default);
    font-size: 16px;
}

.announcement-module__title {
    font-size: var(--font-h6-size, 16px);
    line-height: var(--font-h6-line-height, 24px);
    font-weight: 600;
    color: var(--color-primary-default);
}

/* Card grid */

.announcement-module__cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

/* Individual card */

.announcement-module__card {
    background-color: color-mix(in srgb, var(--color-primary-default) 5%, var(--color-neutrals-container));
    border-radius: var(--brand-border-radius, 16px);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 176px;
}

.announcement-module__card:hover {
    box-shadow: var(--shadow-card-hover);
}

.announcement-module__card-top {
    background-color: var(--color-primary-default);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.announcement-module__card-top .announcement-module__card-date {
    color: white;
}

.announcement-module__card-top .announcement-module__dismiss {
    color: white;
}

.announcement-module__card-top .announcement-module__dismiss:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

.announcement-module__card-top .announcement-module__dismiss:focus-visible {
    outline-color: white;
}

.announcement-module__card-top .dashboard-list__badge {
    background-color: white;
    color: var(--color-primary-default);
}

.announcement-module__dismiss {
    background: none;
    border: none;
    padding: 4px;
    margin-left: auto;
    color: var(--color-neutrals-subdued, currentColor);
    cursor: pointer;
    border-radius: 4px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

.announcement-module__dismiss:hover {
    background-color: color-mix(in srgb, var(--color-primary-default) 12%, transparent);
}

.announcement-module__dismiss:focus-visible {
    outline: 2px solid var(--color-primary-focused);
    outline-offset: 2px;
}

.announcement-module__card-date {
    font-size: var(--font-caption-md-size, 14px);
    line-height: var(--font-caption-md-line-height, 20px);
    color: var(--color-neutrals-default);
    flex-grow: 1;
}

.announcement-module__card-title {
    font-size: var(--font-body-md-size, 16px);
    line-height: var(--font-body-md-line-height, 24px);
    font-weight: 600;
    color: var(--color-neutrals-default);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.announcement-module__card-body {
    padding: 16px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
}

.announcement-module__card-text {
    font-size: var(--font-body-md-size, 16px);
    line-height: var(--font-body-md-line-height, 24px);
    color: var(--color-neutrals-default);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.announcement-module__see-more {
    background: none;
    border: none;
    padding: 0;
    font-size: var(--font-body-md-size, 16px);
    color: var(--color-primary-default);
    cursor: pointer;
    align-self: flex-start;
}

.announcement-module__see-more:hover {
    color: var(--color-primary-hover);
}

.announcement-module__see-more:focus-visible {
    outline: 2px solid var(--color-primary-focused);
    outline-offset: 2px;
}

.announcement-module__see-more:active {
    color: var(--color-primary-active);
}

.announcement-module__popup-date {
    font-size: var(--font-caption-md-size, 14px);
    line-height: var(--font-caption-md-line-height, 20px);
    color: var(--color-neutrals-hover);
    margin-bottom: 8px;
}

.announcement-module__popup-text {
    font-size: var(--font-body-md-size, 16px);
    line-height: var(--font-body-md-line-height, 24px);
    color: var(--color-neutrals-default);
    white-space: pre-wrap;
}

/* Empty state */

.announcement-module__empty {
    min-height: 120px;
    color: var(--color-neutrals-hover);
    font-size: var(--font-body-md-size, 16px);
}

/* Skeleton */

.announcement-module__skeleton-date {
    width: 80px;
}

.announcement-module__skeleton-title {
    width: 70%;
    height: 16px;
}

/* ============================================================
   Community groups simple module avatar (cg-simple-module__)
   Small avatar shown in each row of CommunityGroupSimpleModule.
   ============================================================ */

.cg-simple-module__avatar {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    flex-shrink: 0;
    object-fit: cover;
}

.cg-simple-module__avatar--placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-1-default);
    color: var(--color-2-container);
    font-family: var(--font-family, Roboto, sans-serif);
    font-weight: 600;
    font-size: 12px;
    line-height: 1.5;
    user-select: none;
}

/* ============================================================
   Alert / Snackbar (bs-alert)
   Inline feedback banner styled after the BrandSync Snackbar spec.
   Color pairs: *-default text on *-container background.
   ============================================================ */
.bs-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    border-radius: 4px;
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-body-md-size, 16px);
    line-height: var(--font-body-md-line-height, 24px);
}

.bs-alert__body {
    flex: 1;
    padding-right: 8px;
}

.bs-alert__action {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--font-body-md-size, 16px);
    font-weight: 500;
    color: inherit;
    padding: 0 16px;
    min-height: 44px;
    align-self: center;
    white-space: nowrap;
    text-decoration: underline;
    transition: opacity 0.15s ease;
}

.bs-alert__action:hover          { opacity: 0.8; }
.bs-alert__action:active         { opacity: 0.7; }
.bs-alert__action:focus-visible  { outline: 2px solid currentColor; outline-offset: 2px; }

.bs-alert__close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 16px;
    min-height: 44px;
    min-width: 44px;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-h6-size, 20px);
    line-height: var(--font-h6-line-height, 32px);
    color: inherit;
    transition: opacity 0.15s ease;
}

.bs-alert__close:hover          { opacity: 0.8; }
.bs-alert__close:active         { opacity: 0.9; }
.bs-alert__close:focus-visible  { outline: 2px solid currentColor; outline-offset: 2px; }

/* WCAG pair: --color-information-default text on --color-information-container background — customer must ensure 4.5:1 */
.bs-alert--information { background-color: var(--color-information-container); color: var(--color-information-default); }
/* WCAG pair: --color-success-default text on --color-success-container background — customer must ensure 4.5:1 */
.bs-alert--success     { background-color: var(--color-success-container); color: var(--color-success-default); }
/* WCAG pair: --color-warning-default text on --color-warning-container background — customer must ensure 4.5:1 */
.bs-alert--warning     { background-color: var(--color-warning-container); color: var(--color-warning-default); }
/* WCAG pair: --color-error-default text on --color-error-container background — customer must ensure 4.5:1 */
.bs-alert--error       { background-color: var(--color-error-container); color: var(--color-error-default); }
/* WCAG pair: --color-neutrals-default text on --color-neutrals-container-pressed background — customer must ensure 4.5:1 */
.bs-alert--neutral     { background-color: var(--color-neutrals-container-pressed); color: var(--color-neutrals-default); }

/* ============================================================
   Badge (bs-badge)
   Pill-shaped label for status, categories, and highlights.
   Color pairs: *-default text on *-container background.
   ============================================================ */
.bs-badge {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-caption-md-size, 14px);
    line-height: var(--font-caption-md-line-height, 20px);
    font-weight: 400;
    padding: 4px 8px;
    border-radius: 100px;
    white-space: nowrap;
}

.bs-badge--primary {
    background-color: var(--color-primary-container);
    color: var(--color-primary-default);
}

.bs-badge--neutral {
    background-color: var(--color-neutrals-container-pressed);
    color: var(--color-neutrals-default);
}

.bs-badge--success {
    background-color: var(--color-success-container);
    color: var(--color-success-default);
}

/* ============================================================
   Info pages (contact, about, ...) — card rendering customer-configured HTML.
   Padding is handled by Bootstrap p-3 / p-md-4 utilities on the element.
   ============================================================ */

.info-page__card {
    background-color: var(--color-neutrals-container);
    border-radius: var(--brand-border-radius, 16px);
    box-shadow: var(--shadow-card);
    color: var(--color-neutrals-default);
    font-family: var(--font-family, 'Roboto', sans-serif);
    font-size: var(--font-body-md-size, 16px);
    line-height: var(--font-body-md-line-height, 1.5);
}

.bs-badge--error {
    background-color: var(--color-error-container);
    color: var(--color-error-default);
}

.bs-badge--warning {
    background-color: var(--color-warning-container);
    color: var(--color-warning-default);
}

.bs-badge--information {
    background-color: var(--color-information-container);
    color: var(--color-information-default);
}

/* ============================================================
   BsProfileAvatar (bs-profile-avatar)
   Shows a member's picture or initials. Fills its parent, which
   owns the diameter, background and border.
   ============================================================ */

.bs-profile-avatar__image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* WCAG pair: --color-neutrals-container text on the frame's --color-primary-default background.
   Initials size scales with the frame via a token so a smaller avatar can shrink the text. */
.bs-profile-avatar__initials {
    font-size: var(--profile-avatar-initials-size, 34px);
    font-weight: 600;
    color: var(--color-neutrals-container);
    line-height: 1; /* single-token avatar text, centered by the flex frame */
    text-transform: uppercase;
}

/* ============================================================
   Add Services Modal (add-services-modal__)
   ============================================================ */

.add-services-modal__service-row {
    padding: 8px 16px;
    background-color: var(--color-neutrals-container);
    border-radius: 8px;
}

.add-services-modal__companion-section {
    padding: 8px 16px;
    background-color: var(--color-neutrals-container);
    border-radius: 8px;
}


.add-services-modal__summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    background-color: var(--color-neutrals-container);
    border-radius: 8px;
    font-size: var(--font-body-md-regular-size, 16px);
    color: var(--color-neutrals-default);
}

/* ============================================================
   Collapsible chevron — rotation toggle (collapsible-chevron)
   Single fa-chevron-down icon; rotate 180deg when expanded.
   ============================================================ */

.collapsible-chevron {
    flex-shrink: 0;
    font-size: 16px;
    transition: transform 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
    .collapsible-chevron {
        transition: none;
    }
}

.collapsible-chevron--expanded {
    transform: rotate(180deg);
}

/* ============================================================
   Collapsible body — CSS grid animation (collapsible-body)
   ============================================================ */

.collapsible-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
    .collapsible-body {
        transition: none;
    }
}

.collapsible-body.expanded {
    grid-template-rows: 1fr;
}

.collapsible-body__inner {
    overflow: hidden;
    min-height: 0;
}

/* ============================================================
   Bootstrap .card — BrandSync overrides
   Apply BrandSync shadow and border-radius; remove default Bootstrap border.
   ============================================================ */
.card {
    box-shadow: var(--shadow-card);
    border-radius: var(--brand-border-radius, 1rem);
    border: none;
}