/* /Components/Account/Shared/StatusMessage.razor.rz.scp.css */
/* Espace l'alerte du formulaire qui suit, et signale chaque rendu par une
   microinteraction. Mutualisé pour toutes les pages auth/SSR (#787). */
.wv-alert[b-ryd5dps4ks] {
    margin-bottom: var(--space-5);
}

/* Erreur : tremblement bref "non, réessaie" — distingue deux tentatives
   infructueuses successives sans texte parasite (ex. l'heure). */
.wv-alert--danger[b-ryd5dps4ks] {
    animation: status-alert-shake-b-ryd5dps4ks var(--duration-slow) var(--ease-in-out);
}

/* Succès / info : entrée douce, le shake serait contre-intuitif. */
.wv-alert--success[b-ryd5dps4ks] {
    animation: status-alert-rise-b-ryd5dps4ks var(--duration-normal) var(--ease-out);
}

@keyframes status-alert-shake-b-ryd5dps4ks {
    0%,
    100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-6px);
    }

    40% {
        transform: translateX(5px);
    }

    60% {
        transform: translateX(-3px);
    }

    80% {
        transform: translateX(2px);
    }
}

@keyframes status-alert-rise-b-ryd5dps4ks {
    0% {
        opacity: 0;
        transform: translateY(-6px);
    }

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

@media (prefers-reduced-motion: reduce) {
    .wv-alert--danger[b-ryd5dps4ks],
    .wv-alert--success[b-ryd5dps4ks] {
        animation: none;
    }
}
/* /Components/Common/Breadcrumb.razor.rz.scp.css */
.breadcrumb[b-6dgto6h4i1] {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin-bottom: 0;
    list-style: none;
    align-items: center;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
}

.breadcrumb-item[b-6dgto6h4i1] {
    display: flex;
    align-items: center;
    padding-left: 0;
    /* Remove default padding */
}

.breadcrumb-item.seprator[b-6dgto6h4i1] {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    color: var(--bs-secondary);
    font-size: 0.7rem;
    opacity: 0.5;
}

/* Hide default separator */
.breadcrumb-item+.breadcrumb-item[b-6dgto6h4i1]::before {
    content: none !important;
}

.breadcrumb-link[b-6dgto6h4i1] {
    color: var(--bs-secondary);
    text-decoration: none;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    font-weight: 500;
    margin-left: 0 !important;
    /* Override top-row generic style */
}

.breadcrumb-link:hover[b-6dgto6h4i1] {
    color: var(--bs-primary);
    background-color: transparent;
    text-decoration: none;
}

.breadcrumb-item.active[b-6dgto6h4i1] {
    color: var(--bs-body-color);
    font-weight: 600;
}

/* Specific styling for Home icon if we keep it, but user said remove icons?
   The user likely meant text icons. I kept the home icon in the razor file as it is the root.
   Adjusting it to be subtle.
*/
.bi-house-door-fill[b-6dgto6h4i1] {
    font-size: 1rem;
    color: var(--bs-secondary);
    margin-top: -2px;
    /* Visual alignment */
}

.bi-house-door-fill:hover[b-6dgto6h4i1] {
    color: var(--bs-primary);
}
/* /Components/Common/Dashboard/BudgetOverviewCard.razor.rz.scp.css */
.dashboard-card[b-s0uxdxsljn] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    padding: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-card:hover[b-s0uxdxsljn] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    border-color: var(--color-dark);
}

.widget-title[b-s0uxdxsljn] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-dark);
    letter-spacing: 0.05em;
}

.widget-icon[b-s0uxdxsljn] {
    color: var(--color-dark);
}

.voir-tout[b-s0uxdxsljn] {
    font-size: 0.75rem;
    color: var(--color-dark);
    text-decoration: none;
}

.voir-tout:hover[b-s0uxdxsljn] {
    text-decoration: underline;
}

.budget-empty[b-s0uxdxsljn] {
    color: var(--color-text);
    padding: 1rem 0;
}

.budget-empty-icon[b-s0uxdxsljn] {
    font-size: 2rem;
    color: var(--color-text-muted);
    opacity: 0.5;
}

.budget-empty p[b-s0uxdxsljn] {
    font-size: 0.875rem;
}
/* /Components/Common/Dashboard/CarpoolStatusSummary.razor.rz.scp.css */
.carpool-status[b-1q4fsmqfz4] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.carpool-status-main[b-1q4fsmqfz4] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-surface-alt);
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
}

.carpool-status-main--clickable[b-1q4fsmqfz4] {
    cursor: pointer;
    transition:
        background-color var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-fast) var(--ease-out),
        transform var(--duration-fast) var(--ease-out);
}

.carpool-status-main--clickable:hover[b-1q4fsmqfz4] {
    box-shadow: var(--shadow-sm);
}

.carpool-status-main--clickable:active[b-1q4fsmqfz4] {
    transform: translateY(1px);
}

.carpool-status-main--clickable:focus-visible[b-1q4fsmqfz4] {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.carpool-status-chevron[b-1q4fsmqfz4] {
    margin-left: auto;
    font-size: 1.25rem;
    line-height: 1;
    opacity: 0.6;
}

.carpool-status-main--success[b-1q4fsmqfz4] {
    background: var(--color-success-bg);
    border-color: var(--color-success);
    color: var(--color-success);
}

.carpool-status-main--warning[b-1q4fsmqfz4] {
    background: var(--color-warning-bg);
    border-color: var(--color-warning);
    color: var(--color-warning);
}

.carpool-status-main--danger[b-1q4fsmqfz4] {
    background: var(--color-danger-bg);
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.carpool-status-main--neutral[b-1q4fsmqfz4] {
    background: var(--color-surface-alt);
    border-color: var(--color-border);
    color: var(--color-text-muted);
}

.carpool-status-icon[b-1q4fsmqfz4] {
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
}

.carpool-status-text[b-1q4fsmqfz4] {
    min-width: 0;
}

.carpool-status-title[b-1q4fsmqfz4] {
    font-size: var(--text-md);
    font-weight: 600;
    line-height: var(--leading-tight);
    color: inherit;
}

.carpool-status-detail[b-1q4fsmqfz4] {
    margin-top: 2px;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: var(--leading-normal);
}

.carpool-status-metrics[b-1q4fsmqfz4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

.carpool-metric[b-1q4fsmqfz4] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.carpool-metric-label[b-1q4fsmqfz4] {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    font-weight: 500;
}

.carpool-metric-value[b-1q4fsmqfz4] {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 500;
    line-height: 1;
    color: var(--color-dark);
}

.carpool-metric-value.is-warning[b-1q4fsmqfz4] {
    color: var(--color-warning);
}
/* /Components/Common/Dashboard/LatestMessagesCard.razor.rz.scp.css */
.dashboard-card[b-g96fjuqzw2] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    transition: border-color var(--duration-fast) var(--ease-out);
}

.dashboard-card:hover[b-g96fjuqzw2] {
    border-color: var(--color-border-strong);
}

.widget-title[b-g96fjuqzw2] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-dark);
    letter-spacing: 0.05em;
}

.widget-icon[b-g96fjuqzw2] {
    color: var(--color-dark);
}

.voir-tout[b-g96fjuqzw2] {
    font-size: 0.75rem;
    color: var(--color-dark);
    text-decoration: none;
}

.voir-tout:hover[b-g96fjuqzw2] {
    text-decoration: underline;
}

.feed-list[b-g96fjuqzw2] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.feed-row[b-g96fjuqzw2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem;
    border-radius: 0.375rem;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.feed-row:hover[b-g96fjuqzw2] {
    background-color: rgba(212, 165, 137, 0.15);
    color: inherit;
    text-decoration: none;
}

.feed-row-content[b-g96fjuqzw2] {
    flex: 1;
    min-width: 0;
}

.feed-name[b-g96fjuqzw2] {
    font-weight: 600;
    font-size: 0.875rem;
}

.feed-snippet[b-g96fjuqzw2] {
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.feed-date[b-g96fjuqzw2] {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    margin-left: 0.75rem;
}

.empty-state[b-g96fjuqzw2] {
    text-align: center;
    padding: 1.5rem 0;
    color: var(--bs-secondary-color);
}

.empty-state h6[b-g96fjuqzw2] {
    color: var(--color-dark);
    margin-bottom: 0.5rem;
}

.empty-state p[b-g96fjuqzw2] {
    margin-bottom: 1rem;
    font-size: 0.875rem;
}
/* /Components/Common/Dashboard/OnboardingChecklist.razor.rz.scp.css */
.dashboard-card[b-a2rix0x01p] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    padding: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-card:hover[b-a2rix0x01p] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    border-color: var(--color-dark);
}

.widget-title[b-a2rix0x01p] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-dark);
    letter-spacing: 0.05em;
}

.progress-label[b-a2rix0x01p] {
    font-size: 0.875rem;
    color: var(--color-dark);
    margin-bottom: 0.5rem;
}

.step-row[b-a2rix0x01p] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-surface-alt);
}

.step-row:last-child[b-a2rix0x01p] {
    border-bottom: none;
}

.step-complete[b-a2rix0x01p] {
    text-decoration: line-through;
    color: var(--bs-secondary-color);
}

.complete-state[b-a2rix0x01p] {
    text-align: center;
    padding: 1.5rem 0;
    color: var(--color-success);
}

@media (max-width: 576px) {
    .step-row[b-a2rix0x01p] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .step-row .btn[b-a2rix0x01p] {
        min-height: 44px;
        min-width: 44px;
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
        width: 100%;
        margin-top: 0.25rem;
    }
}
/* /Components/Common/Dashboard/RsvpActivityCard.razor.rz.scp.css */
.dashboard-card[b-9hq1ivemsy] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    padding: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-card:hover[b-9hq1ivemsy] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    border-color: var(--color-dark);
}

.widget-title[b-9hq1ivemsy] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-dark);
    letter-spacing: 0.05em;
}

.widget-icon[b-9hq1ivemsy] {
    color: var(--color-dark);
}

.voir-tout[b-9hq1ivemsy] {
    font-size: 0.75rem;
    color: var(--color-dark);
    text-decoration: none;
}

.voir-tout:hover[b-9hq1ivemsy] {
    text-decoration: underline;
}

.feed-list[b-9hq1ivemsy] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.feed-row[b-9hq1ivemsy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem;
    border-radius: 0.375rem;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.feed-row:hover[b-9hq1ivemsy] {
    background-color: rgba(212, 165, 137, 0.15);
    color: inherit;
    text-decoration: none;
}

.feed-row-content[b-9hq1ivemsy] {
    flex: 1;
    min-width: 0;
}

.feed-name[b-9hq1ivemsy] {
    font-weight: 600;
    font-size: 0.875rem;
}

.feed-detail[b-9hq1ivemsy] {
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.feed-date[b-9hq1ivemsy] {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    margin-left: 0.75rem;
}

.empty-state[b-9hq1ivemsy] {
    text-align: center;
    padding: 1.5rem 0;
    color: var(--bs-secondary-color);
}

.empty-state h6[b-9hq1ivemsy] {
    color: var(--color-dark);
    margin-bottom: 0.5rem;
}

.empty-state p[b-9hq1ivemsy] {
    margin-bottom: 0;
    font-size: 0.875rem;
}
/* /Components/Common/Dashboard/RsvpOverviewCard.razor.rz.scp.css */
.dashboard-card[b-a51y4ebqic] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    padding: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-card:hover[b-a51y4ebqic] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    border-color: var(--color-dark);
}

.widget-title[b-a51y4ebqic] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-dark);
    letter-spacing: 0.05em;
}

.widget-icon[b-a51y4ebqic] {
    color: var(--color-dark);
}

.voir-tout[b-a51y4ebqic] {
    font-size: 0.75rem;
    color: var(--color-dark);
    text-decoration: none;
}

.voir-tout:hover[b-a51y4ebqic] {
    text-decoration: underline;
}

.rsvp-layout[b-a51y4ebqic] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.rsvp-counts[b-a51y4ebqic] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rsvp-chart[b-a51y4ebqic] {
    flex-shrink: 0;
    width: 140px;
    height: 140px;
}

.count-row[b-a51y4ebqic] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.count-dot[b-a51y4ebqic] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.count-label[b-a51y4ebqic] {
    flex: 1;
    font-size: 0.875rem;
}

.count-value[b-a51y4ebqic] {
    font-size: 1rem;
    font-weight: 600;
    min-width: 2rem;
    text-align: right;
}

.per-event-row[b-a51y4ebqic] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0;
    font-size: 0.875rem;
}

.per-event-name[b-a51y4ebqic] {
    font-weight: 500;
}

.per-event-stats[b-a51y4ebqic] {
    white-space: nowrap;
}

.empty-state[b-a51y4ebqic] {
    text-align: center;
    padding: 1.5rem 0;
    color: var(--bs-secondary-color);
}

.empty-state h6[b-a51y4ebqic] {
    color: var(--color-dark);
    margin-bottom: 0.5rem;
}

.empty-state p[b-a51y4ebqic] {
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

@media (max-width: 576px) {
    .rsvp-layout[b-a51y4ebqic] {
        flex-direction: column;
    }

    .rsvp-chart[b-a51y4ebqic] {
        width: 120px;
        height: 120px;
    }
}
/* /Components/Common/Dashboard/UpcomingEventsCard.razor.rz.scp.css */
.dashboard-card[b-rach5lvb78] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    padding: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-card:hover[b-rach5lvb78] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    border-color: var(--color-dark);
}

.widget-title[b-rach5lvb78] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-dark);
    letter-spacing: 0.05em;
}

.voir-tout[b-rach5lvb78] {
    font-size: 0.75rem;
    color: var(--color-dark);
    text-decoration: none;
}

.voir-tout:hover[b-rach5lvb78] {
    text-decoration: underline;
}

.event-item[b-rach5lvb78] {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-surface-alt);
}

.event-item:last-child[b-rach5lvb78] {
    border-bottom: none;
}

.event-title[b-rach5lvb78] {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.event-date[b-rach5lvb78] {
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
    margin-bottom: 0.25rem;
}

.event-attendance[b-rach5lvb78] {
    font-size: 0.875rem;
}

@media (max-width: 576px) {
    .event-attendance[b-rach5lvb78] {
        display: flex;
        flex-wrap: wrap;
        gap: 0.125rem 0.25rem;
        font-size: 0.8125rem;
    }
}

.empty-state[b-rach5lvb78] {
    text-align: center;
    padding: 1.5rem 0;
    color: var(--bs-secondary-color);
}

.empty-state h6[b-rach5lvb78] {
    color: var(--color-dark);
    margin-bottom: 0.5rem;
}

.empty-state p[b-rach5lvb78] {
    margin-bottom: 1rem;
    font-size: 0.875rem;
}
/* /Components/Common/PageLoader.razor.rz.scp.css */
.wedding-loader-overlay[b-k4vur6wxr9] {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 240, 245, 0.97) 0%, rgba(255, 250, 250, 0.97) 100%);
    backdrop-filter: blur(8px);
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    justify-content: center;
    /* No fade-in - appear instantly to cover page */
}

.wedding-loader-overlay.fade-out[b-k4vur6wxr9] {
    animation: fadeOut-b-k4vur6wxr9 0.5s ease-in-out forwards;
}

.wedding-loader-content[b-k4vur6wxr9] {
    text-align: center;
    animation: fadeInScale-b-k4vur6wxr9 0.5s ease-out;
}

.wedding-loader-icon[b-k4vur6wxr9] {
    width: 100px;
    height: 100px;
    margin: 0 auto 2rem;
    position: relative;
}

.wedding-loader-icon svg[b-k4vur6wxr9] {
    width: 100%;
    height: 100%;
}

.wedding-loader-ring[b-k4vur6wxr9] {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 2;
    stroke-dasharray: 282.7;
    stroke-dashoffset: 0;
    transform-origin: center;
    animation: fillUnfillRing-b-k4vur6wxr9 2.5s ease-in-out infinite;
}

.wedding-loader-heart[b-k4vur6wxr9] {
    fill: var(--color-accent-soft);
    transform-origin: center;
    animation: heartbeat-b-k4vur6wxr9 2s ease-in-out infinite;
}

.wedding-loader-message[b-k4vur6wxr9] {
    font-size: 1.125rem;
    color: var(--color-text-muted);
    font-weight: 500;
    margin: 0;
    letter-spacing: 0.5px;
}

@keyframes fillUnfillRing-b-k4vur6wxr9 {
    0% {
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dashoffset: -282.7;
    }

    100% {
        stroke-dashoffset: -565.4;
    }
}

@keyframes heartbeat-b-k4vur6wxr9 {

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

    50% {
        transform: scale(1.08);
    }
}

@keyframes fadeInScale-b-k4vur6wxr9 {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeIn-b-k4vur6wxr9 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOut-b-k4vur6wxr9 {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
    }
}

@keyframes fadeText-b-k4vur6wxr9 {

    0%,
    10% {
        opacity: 1;
    }

    45%,
    55% {
        opacity: 0;
    }

    90%,
    100% {
        opacity: 1;
    }
}
/* /Components/Common/PasswordCriteriaHint.razor.rz.scp.css */
/* Password Criteria Hint — colocated with PasswordCriteriaHint.razor */
.password-criteria-hint[b-bch36l2di6] {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    padding: 0.8rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.82rem;
    transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

.password-criteria-hint.all-met[b-bch36l2di6] {
    border-color: var(--color-success);
    box-shadow: 0 0 0 3px rgba(38, 176, 80, 0.12);
}

.password-criteria-hint .criteria-header[b-bch36l2di6] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
}

.password-criteria-hint .criteria-header i[b-bch36l2di6] {
    font-size: 1rem;
}

.password-criteria-hint .criteria-list[b-bch36l2di6] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem 1.2rem;
}

.password-criteria-hint .criteria-list li[b-bch36l2di6] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-dark);
    line-height: 1.45;
    opacity: 0.55;
    transition: opacity 0.3s ease, color 0.3s ease;
}

/* Criterion icon — default: red X */
.password-criteria-hint .criteria-list li .criteria-icon[b-bch36l2di6] {
    font-size: 0.85rem;
    flex-shrink: 0;
    color: var(--color-danger);
    transition: color 0.3s ease, transform 0.3s ease;
}

/* Criterion met — green check */
.password-criteria-hint .criteria-list li.met[b-bch36l2di6] {
    opacity: 1;
}

.password-criteria-hint .criteria-list li.met .criteria-icon[b-bch36l2di6] {
    color: var(--color-success);
    transform: scale(1.1);
}

/* Icon swap: X → Check via Bootstrap Icons content code */
.password-criteria-hint .criteria-list li.met .criteria-icon[b-bch36l2di6]::before {
    content: "\f26e";
    /* bi-check-circle-fill */
}

/* Responsive single-column on small screens */
@media (max-width: 480px) {
    .password-criteria-hint .criteria-list[b-bch36l2di6] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Common/ReconnectModal.razor.rz.scp.css */
/* Reconnect Modal Overlay */
.my-reconnect-modal[b-u37ijai0bl] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 247, 238, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 99999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Show/Hide States */
.components-reconnect-show[b-u37ijai0bl] {
    opacity: 1;
    pointer-events: auto;
}

.components-reconnect-hide[b-u37ijai0bl] {
    opacity: 0;
    pointer-events: none;
}

/* Content Container */
.reconnect-content[b-u37ijai0bl] {
    display: none;
    max-width: 500px;
    width: 90%;
    animation: slideUp-b-u37ijai0bl 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideUp-b-u37ijai0bl {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

/* Card Styling - Enhanced with theme colors */
.reconnect-content .card[b-u37ijai0bl] {
    background: var(--color-surface);
    border-radius: 1.25rem;
    overflow: hidden;
}

.reconnect-content .card-body[b-u37ijai0bl] {
    background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-accent-pale) 100%);
}

/* Icon Colors matching theme */
.reconnect-content .text-primary[b-u37ijai0bl] {
    color: var(--color-dark) !important;
}

/* Alert customization */
.reconnect-content .alert[b-u37ijai0bl] {
    border-radius: 0.75rem;
    border: none;
}

/* Button enhancements */
.reconnect-content .btn-primary[b-u37ijai0bl] {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
    border: none;
    border-radius: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-md);
}

.reconnect-content .btn-primary:hover[b-u37ijai0bl] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.reconnect-content .btn-primary:active[b-u37ijai0bl] {
    transform: translateY(0);
}

/* Spinner customization */
.reconnect-content .spinner-border[b-u37ijai0bl] {
    width: 3rem;
    height: 3rem;
    border-width: 0.3rem;
}

/* Content Display Logic */
.my-reconnect-modal.components-reconnect-show:not(.components-reconnect-failed):not(.components-reconnect-rejected) .attempt[b-u37ijai0bl] {
    display: block;
}

.my-reconnect-modal.components-reconnect-failed .failed[b-u37ijai0bl] {
    display: block;
}

.my-reconnect-modal.components-reconnect-rejected .rejected[b-u37ijai0bl] {
    display: block;
}
/* /Components/Common/ScheduleEventCard.razor.rz.scp.css */
/* Event Card */
.event-card[b-axf905kljy] {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1.5rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    width: 100%;
}

.event-card.clickable[b-axf905kljy] {
    cursor: pointer;
}

.event-card:hover[b-axf905kljy] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    border-color: var(--color-dark);
}

/* Current Event */
.event-card.current[b-axf905kljy] {
    border-color: var(--color-success);
    border-width: 3px;
    background: linear-gradient(135deg, var(--color-success-bg) 0%, var(--color-surface) 100%);
    box-shadow: 0 4px 16px rgba(58, 125, 68, 0.18);
}

@keyframes pulse-b-axf905kljy {

    0%,
    100% {
        box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px rgba(58, 125, 68, 0.28);
    }

    50% {
        box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 8px rgba(58, 125, 68, 0.14);
    }
}

/* Past Event */
.event-card.past[b-axf905kljy] {
    opacity: 0.65;
    border-color: var(--color-border);
    background: var(--color-surface-alt);
}

/* Upcoming Event */
.event-card.upcoming[b-axf905kljy] {
    border-color: var(--color-warning);
    border-width: 3px;
    background: linear-gradient(135deg, var(--color-warning-bg) 0%, var(--color-surface) 100%);
    box-shadow: 0 4px 16px rgba(199, 138, 58, 0.18);
}

/* Seating Plan Event */
.event-card.seating-plan[b-axf905kljy] {
    border-left-color: var(--color-dark);
    border-left-width: 3px;
    border-left-style: solid;
}


@keyframes blink-b-axf905kljy {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* Event Content */
.event-content[b-axf905kljy] {
    position: relative;
}

.event-header[b-axf905kljy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.event-time[b-axf905kljy] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-dark);
    display: flex;
    align-items: center;
}

/* Actions (3-dot menu) — pinned top-right of card */
.event-actions[b-axf905kljy] {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    z-index: 1;
}

.event-actions[b-axf905kljy]  .btn-icon-only .e-btn-content {
    padding: 0;
}

.event-actions[b-axf905kljy]  .btn-icon-only .e-btn-icon {
    margin-left: 0 !important;
}

.event-actions[b-axf905kljy]  .btn-icon-only .e-caret {
    display: none !important;
}

.event-actions[b-axf905kljy]  .e-dropdown-btn {
    border: none;
    background: transparent;
    padding: 0.25rem 0.5rem;
    min-width: auto;
    color: var(--bs-gray-800);
}

.event-actions[b-axf905kljy]  .e-dropdown-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

.event-actions[b-axf905kljy]  .e-dropdown-btn:focus,
.event-actions[b-axf905kljy]  .e-dropdown-btn:active {
    background: rgba(0, 0, 0, 0.1);
    box-shadow: none;
}

.event-title[b-axf905kljy] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-dark);
    margin: 0 0 1rem 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.event-details[b-axf905kljy] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.event-detail-item[b-axf905kljy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.event-detail-item i[b-axf905kljy] {
    font-size: 1rem;
}

.event-invite-row[b-axf905kljy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.event-invited-badge[b-axf905kljy] {
    font-size: 0.8rem;
    color: var(--bs-secondary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.event-invited-badge:hover[b-axf905kljy] {
    color: var(--bs-primary);
    text-decoration: underline;
}

.event-all-guests-badge[b-axf905kljy] {
    background-color: var(--color-surface-alt);
    color: var(--color-dark);
    border: 1px solid var(--color-border);
}

.event-group-badge[b-axf905kljy] {
    margin-top: 0.5rem;
}

.event-message-action[b-axf905kljy] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

/* Responsive Design - Mobile Adjustments */
@media (max-width: 576px) {
    .event-header[b-axf905kljy] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .event-card[b-axf905kljy] {
        padding: 1rem;
    }

    .event-title[b-axf905kljy] {
        font-size: 1.1rem;
    }
}

/* Print Styles */
@media print {

    .event-actions[b-axf905kljy],
    .btn[b-axf905kljy] {
        display: none !important;
    }

    .event-card[b-axf905kljy] {
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid var(--color-border);
    }
}
/* /Components/Common/WedButtonGroup.razor.rz.scp.css */
/* WedButtonGroup: Responsive button toolbar component */

.wed-button-group-container[b-apojreljcz] {
    margin-bottom: 1.25rem;
    width: 100%;
    /* Ensures the container has width for JS calculations */
}

/* Hide only during the very first calculation so we don't get FOUC.
   After the first render the class is dropped and the container stays
   visible across subsequent parent re-renders. */
.wed-button-group-container.is-initializing[b-apojreljcz] {
    visibility: hidden;
}

/* btn-group handles layout for visible and overflow containers */

/* Prevent text wrapping inside buttons */
[b-apojreljcz] .btn {
    white-space: nowrap;
}

/* Ensure the button group itself doesn't wrap */
[b-apojreljcz] .btn-group {
    flex-wrap: nowrap;
}

/* Dropdown menu styling - global styles for JS elements */
.wed-button-group-overflow .dropdown-menu[b-apojreljcz] {
    min-width: 200px;
    display: none;
    padding: var(--space-2) 0;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.wed-button-group-overflow .dropdown-menu.show[b-apojreljcz] {
    display: block;
}

/* Use ::deep for elements dynamically created by JS */
.wed-button-group-overflow[b-apojreljcz]  .dropdown-menu .dropdown-item {
    cursor: pointer;
    display: block;
    width: 100%;
    clear: both;
    font-weight: 400;
    color: var(--color-dark);
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}

.wed-button-group-overflow[b-apojreljcz]  .dropdown-menu .dropdown-item:hover,
.wed-button-group-overflow[b-apojreljcz]  .dropdown-menu .dropdown-item:focus {
    background-color: var(--color-border);
    color: var(--color-dark);
}

.wed-button-group-overflow[b-apojreljcz]  .dropdown-menu .dropdown-item i {
    margin-right: 0.5rem;
    width: 1rem;
    text-align: center;
}

/* Hamburger button icon adjustment */
:global(.wed-button-group-overflow .btn i)[b-apojreljcz] {
    margin-right: 0;
}

/* Direction.Rtl: the AlwaysVisible button (typically the primary action)
   slides to the far right via order: 2, while the overflow kebab is
   pushed to the far left via order: -1. Buttons are written in natural
   reading order in markup (AlwaysVisible first) and the `order` property
   reorders them visually without touching the DOM.
   Visual flow becomes:  [kebab] secondaries... [primary]                                                                            */
.wed-button-group--rtl[b-apojreljcz]  .btn-group > [data-always-visible="true"] {
    order: 2;
}

.wed-button-group--rtl[b-apojreljcz]  .btn-group > .wed-button-group-overflow {
    order: -1;
}

/* Bootstrap's btn-group rounding targets DOM :first-child / :last-child,
   which are the wrong visual edges once `order` reshuffles items. Reset
   every child to square corners and re-apply rounding based on visual
   position. */
.wed-button-group--rtl[b-apojreljcz]  .btn-group > .btn,
.wed-button-group--rtl[b-apojreljcz]  .btn-group > .wv-btn,
.wed-button-group--rtl[b-apojreljcz]  .btn-group > .wed-button-group-overflow > .btn {
    border-radius: 0;
}

/* Visual rightmost = AlwaysVisible primary. */
.wed-button-group--rtl[b-apojreljcz]  .btn-group > [data-always-visible="true"] {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
}

/* Visual leftmost when the kebab is showing = the kebab itself. */
.wed-button-group--rtl.wed-button-group--has-overflow[b-apojreljcz]  .btn-group > .wed-button-group-overflow > .btn {
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
}

/* Visual leftmost when the kebab is hidden:
   - normal case: the sibling right after the AlwaysVisible button (which
     is :first-child by convention);
   - fallback: the very first non-AlwaysVisible child, in case the
     AlwaysVisible button itself isn't rendered (for example when an
     `<AuthorizeView>` hides it). */
.wed-button-group--rtl:not(.wed-button-group--has-overflow)[b-apojreljcz]  .btn-group > [data-always-visible="true"] + *,
.wed-button-group--rtl:not(.wed-button-group--has-overflow)[b-apojreljcz]  .btn-group > :not([data-always-visible="true"]):first-child {
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
}
/* /Components/Common/WedCard.razor.rz.scp.css */
.wv-card-title-group[b-2krqe05m1y] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}
/* /Components/Common/WedEmojiPickerToolbarItem.razor.rz.scp.css */
.wed-emoji-picker-wrapper[b-a1b3bd8plc] {
    position: relative;
    display: inline-block;
}

[b-a1b3bd8plc] .wed-emoji-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    display: none;
}

[b-a1b3bd8plc] .wed-emoji-backdrop.open {
    display: block;
}

.wed-emoji-popover[b-a1b3bd8plc] {
    position: fixed;
    z-index: 10001;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    display: none;
}

.wed-emoji-popover.open[b-a1b3bd8plc] {
    display: block;
}
/* /Components/Common/WedGuestCercleSelector.razor.rz.scp.css */
/* Cercles tag belt: identity-level chips that sit between the page
   header (or vCard) and the form rails. Two-line layout: small CERCLES
   label on top, then a wrap-row with chips and the "+ Ajouter" dropdown
   anchored on the right. */
.wv-cercle-selector[b-0m180qzfei] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    /* Subtle indent so the label icon visually aligns with the icons
       inside the surrounding badges (which sit ~8px in from the pill
       border). Without this the bare icon feels glued to the page edge. */
    padding-left: var(--space-2);
}

.wv-cercle-selector__label[b-0m180qzfei] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.wv-cercle-selector__label i[b-0m180qzfei] {
    color: var(--color-accent);
    font-size: var(--text-base);
}

/* Chips and dropdown share one flex-wrap row. The chips wrapper uses
   display:contents so chips and dropdown align as direct siblings of
   __row, keeping the dropdown anchored next to the last chip. */
.wv-cercle-selector__row[b-0m180qzfei] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.wv-cercle-selector__chips[b-0m180qzfei] {
    display: contents;
}

.wv-cercle-selector__chip[b-0m180qzfei] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-1) 2px var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--pastel-lavender);
    color: var(--pastel-lavender-fg);
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    animation: wv-cercle-chip-arrive-b-0m180qzfei var(--duration-fast) var(--ease-out);
}

.wv-cercle-selector--readonly .wv-cercle-selector__chip[b-0m180qzfei] {
    padding: 2px var(--space-2);
}

/* Field variant: rendered as a single bordered Syncfusion SfMultiSelect
   with FloatLabelType.Auto, so it sits next to other form fields without
   visual breaks. Drop the belt's left indent and column gap. */
.wv-cercle-selector--field[b-0m180qzfei] {
    padding-left: 0;
    gap: 0;
}

.wv-cercle-selector__remove[b-0m180qzfei] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 0;
    background: transparent;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
    border-radius: var(--radius-full);
    padding: 0;
    line-height: 1;
    transition: opacity var(--duration-instant) var(--ease-out),
                background-color var(--duration-instant) var(--ease-out);
}

.wv-cercle-selector__remove:hover[b-0m180qzfei] {
    opacity: 1;
    background: rgba(0, 0, 0, 0.08);
}

.wv-cercle-selector__remove:focus-visible[b-0m180qzfei] {
    outline: none;
    box-shadow: var(--shadow-focus);
    opacity: 1;
}

.wv-cercle-selector__empty[b-0m180qzfei] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-style: italic;
}

/* Style only the input wrapper, not the popup. ::deep is required
   because Syncfusion attaches our CssClass to its dynamically-rendered
   elements which do not carry Blazor's scoped attribute. */
.wv-cercle-selector[b-0m180qzfei]  .wv-cercle-selector__add.e-input-group {
    flex: 0 0 14rem;
    max-width: 100%;
}

/* Quick-create button rendered inside the SfDropDownList NoRecordsTemplate
   when the typed name does not match any existing cercle. */
.wv-cercle-selector__create[b-0m180qzfei] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: 0;
    color: var(--color-accent);
    font-size: var(--text-sm);
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--duration-instant) var(--ease-out);
}

.wv-cercle-selector__create:hover[b-0m180qzfei] {
    background: var(--color-accent-pale);
}

.wv-cercle-selector__no-records[b-0m180qzfei] {
    display: block;
    padding: var(--space-2) var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-style: italic;
}

@keyframes wv-cercle-chip-arrive-b-0m180qzfei {
    from {
        opacity: 0;
        transform: scale(0.85);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .wv-cercle-selector__chip[b-0m180qzfei] {
        animation: none;
    }
}
/* /Components/Common/WedInfoTip.razor.rz.scp.css */
.wed-infotip[b-i0czrdjnep] {
    display: inline-flex;
    align-items: center;
}

/* Force the SfTooltip internal wrapper to stay inline */
.wed-infotip[b-i0czrdjnep]  div {
    display: inline-flex !important;
    align-items: center;
}

/* Hide the tooltip content until Syncfusion JS initializes it */
.wed-infotip[b-i0czrdjnep]  .e-tooltip-wrap {
    display: none !important;
}

.wed-infotip-icon[b-i0czrdjnep] {
    cursor: help;
    font-size: 1.15em;
    color: #9e9e9e;
    opacity: 0.75;
    transition: opacity 0.2s ease;
    margin-left: 0.25rem;
    line-height: 1;
}

.wed-infotip-icon:hover[b-i0czrdjnep],
.wed-infotip-icon:focus-visible[b-i0czrdjnep] {
    opacity: 1;
}
/* /Components/Common/WedInheritedField.razor.rz.scp.css */
.inherited-hint[b-6yue48f1v4] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--bs-secondary);
}
/* /Components/Common/WedLightbox.razor.rz.scp.css */
/* Lightbox overlay */
.wed-lightbox[b-gn2kq4sf47] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
    outline: none;
}

.wed-lightbox.active[b-gn2kq4sf47] {
    opacity: 1;
    visibility: visible;
    touch-action: none;
}

/* Content container */
.wed-lightbox-content[b-gn2kq4sf47] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 75vw;
    max-height: 90vh;
    padding: 1rem;
    outline: none;
}

/* === Image === */
/* The stage wraps the image and is the transform target for pinch-zoom / pan. */
.wed-lightbox-image-stage[b-gn2kq4sf47] {
    position: relative;
    display: inline-flex;
    max-width: 100%;
    max-height: 80vh;
    transform-origin: center center;
    touch-action: none;
    will-change: transform;
    animation: wedLightboxZoomIn-b-gn2kq4sf47 0.3s ease;
}

.wed-lightbox-image[b-gn2kq4sf47] {
    display: block;
    max-width: 100%;
    max-height: 80vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* Off-screen cache warmer for neighbouring images (preload). */
.wed-lightbox-preload[b-gn2kq4sf47] {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* === Video === */
.wed-lightbox-video[b-gn2kq4sf47] {
    max-width: 100%;
    max-height: 80vh;
    width: auto;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: wedLightboxZoomIn-b-gn2kq4sf47 0.3s ease;
}

/* === Audio === */
.wed-lightbox-audio-wrapper[b-gn2kq4sf47] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding: 3rem 4rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    min-width: 320px;
    animation: wedLightboxZoomIn-b-gn2kq4sf47 0.3s ease;
}

.wed-lightbox-audio-icon[b-gn2kq4sf47] {
    font-size: 4rem;
    color: rgba(255, 255, 255, 0.9);
    animation: wedAudioPulse-b-gn2kq4sf47 2s ease-in-out infinite;
}

.wed-lightbox-audio[b-gn2kq4sf47] {
    width: 100%;
    min-width: 280px;
}

@keyframes wedAudioPulse-b-gn2kq4sf47 {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.08); opacity: 1; }
}

/* === Animations === */
@keyframes wedLightboxZoomIn-b-gn2kq4sf47 {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes wedImagePop-b-gn2kq4sf47 {
    from {
        transform: scale(0.97);
        opacity: 0.6;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.wed-lightbox-image-stage.slide-left[b-gn2kq4sf47],
.wed-lightbox-image-stage.slide-right[b-gn2kq4sf47],
.wed-lightbox-video.slide-left[b-gn2kq4sf47],
.wed-lightbox-video.slide-right[b-gn2kq4sf47],
.wed-lightbox-audio-wrapper.slide-left[b-gn2kq4sf47],
.wed-lightbox-audio-wrapper.slide-right[b-gn2kq4sf47] {
    animation: wedImagePop-b-gn2kq4sf47 0.2s ease-out;
}

/* Close button — fixed top-right of viewport */
.wed-lightbox-close[b-gn2kq4sf47] {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 10001;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    font-size: 1.5rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.8;
    transition: all 0.2s ease;
}

.wed-lightbox-close:hover[b-gn2kq4sf47] {
    opacity: 1;
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

/* Navigation arrows — fixed to viewport edges */
.wed-lightbox-nav[b-gn2kq4sf47] {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10001;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: white;
    font-size: 1.75rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.2s ease;
}

.wed-lightbox-nav:hover[b-gn2kq4sf47] {
    opacity: 1;
    background: rgba(255, 255, 255, 0.18);
    transform: translateY(-50%) scale(1.1);
}

.wed-lightbox-nav.prev[b-gn2kq4sf47] {
    left: 1.5rem;
}

.wed-lightbox-nav.next[b-gn2kq4sf47] {
    right: 1.5rem;
}

/* Info bar below the media */
.wed-lightbox-info[b-gn2kq4sf47] {
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    padding-top: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* Mobile adjustments */
@media (max-width: 576px) {
    .wed-lightbox-content[b-gn2kq4sf47] {
        max-width: 95vw;
        padding: 0.5rem;
    }

    .wed-lightbox-image-stage[b-gn2kq4sf47],
    .wed-lightbox-image-stage img[b-gn2kq4sf47] {
        max-width: 100%;
        max-height: 85vh;
        border-radius: 4px;
    }

    .wed-lightbox-video[b-gn2kq4sf47] {
        max-width: 100%;
        max-height: 85vh;
        border-radius: 4px;
    }

    .wed-lightbox-audio-wrapper[b-gn2kq4sf47] {
        min-width: auto;
        width: 90vw;
        padding: 2rem;
    }

    .wed-lightbox-close[b-gn2kq4sf47] {
        top: 0.75rem;
        right: 0.75rem;
        width: 36px;
        height: 36px;
        font-size: 1.25rem;
    }

    .wed-lightbox-nav[b-gn2kq4sf47] {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }

    .wed-lightbox-nav.prev[b-gn2kq4sf47] {
        left: 2rem;
    }

    .wed-lightbox-nav.next[b-gn2kq4sf47] {
        right: 2rem;
    }
}
/* /Components/Layout/AppLayout.razor.rz.scp.css */
.main-wrapper[b-2iewnpd7ua] {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-height: 100vh;
    min-height: 0;
    overflow: hidden;
}

/*
 * Global page header rendered by AppLayout through SectionOutlet.
 * Stays at the top of the column; the content area below is the
 * scroll container, so the bar is always visible but no body
 * scroll appears when the content already fits the viewport.
 */
.page-header--global[b-2iewnpd7ua] {
    flex-shrink: 0;
    padding: var(--space-4) var(--space-8);
    background-color: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    z-index: var(--z-sticky);
}

.page-header--global .page-header-subtitle:empty[b-2iewnpd7ua] {
    display: none;
}

.page-header--global .page-header-actions:empty[b-2iewnpd7ua] {
    display: none;
}

/* Hide the whole bar if the page left the title slot blank. */
.page-header--global:has(.page-header-title h1:empty)[b-2iewnpd7ua] {
    display: none;
}

/*
 * WedButtonGroup tweaks specific to the page-header context.
 *
 * Desktop: size the container to natural content (max-content) so the JS
 * overflow logic doesn't kick in unnecessarily, and remove the default
 * margin-bottom that would push the kebab below the title baseline.
 *
 * Mobile: stretch buttons to fill the row evenly while keeping the kebab
 * compact so it doesn't claim a fair share of the toolbar by itself.
 */
@media (min-width: 768px) {
    .page-header--global .page-header-actions[b-2iewnpd7ua]  .wed-button-group-container {
        width: max-content;
        margin-bottom: 0;
    }
    .page-header--global .page-header-actions[b-2iewnpd7ua]  .wed-button-group-container > .btn-group {
        width: max-content;
    }
}

@media (max-width: 767.98px) {
    .page-header--global .page-header-actions[b-2iewnpd7ua]  .wed-button-group-container,
    .page-header--global .page-header-actions[b-2iewnpd7ua]  .wed-button-group-container > .btn-group {
        width: 100%;
    }
    .page-header--global .page-header-actions[b-2iewnpd7ua]  .wed-button-group-container > .btn-group > * {
        flex: 1 1 auto;
    }
    .page-header--global .page-header-actions[b-2iewnpd7ua]  .wed-button-group-container > .btn-group > .wed-button-group-overflow {
        flex: 0 0 auto;
    }
}

.content[b-2iewnpd7ua] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-6) var(--space-4);
    background-color: var(--color-bg);
    color: var(--color-text);
}

.content.content-full[b-2iewnpd7ua] {
    padding: 0 !important;
    display: flex;
    flex-direction: column;
}

/* Mobile */
@media (max-width: 991.98px) {
    .main-content[b-2iewnpd7ua] {
        --mobile-navbar-height: 64px;
        padding-top: var(--mobile-navbar-height);
        height: 100dvh;
        display: flex;
        flex-direction: column;
    }

    .main-wrapper[b-2iewnpd7ua] {
        height: calc(100dvh - var(--mobile-navbar-height));
        max-height: calc(100dvh - var(--mobile-navbar-height));
    }

    .page-header--global[b-2iewnpd7ua] {
        padding: var(--space-4);
    }

    .content[b-2iewnpd7ua] {
        padding: var(--space-4) var(--space-5);
    }

    .content.content-full[b-2iewnpd7ua] {
        padding: 0 !important;
    }

    .content.content-fixed-height[b-2iewnpd7ua] {
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
}

/* Desktop */
@media (min-width: 992px) {
    .main-content[b-2iewnpd7ua] {
        margin-left: 280px;
        transition: margin-left var(--duration-normal) var(--ease-in-out);
    }

    .main-content.sidebar-collapsed[b-2iewnpd7ua] {
        margin-left: 72px !important;
    }

    .content[b-2iewnpd7ua] {
        padding: var(--space-8);
    }

    .content.content-full[b-2iewnpd7ua] {
        padding: 0 !important;
    }

    .content.content-fixed-height[b-2iewnpd7ua] {
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Styles moved to AppLayout.razor.css */
/* /Components/Layout/NavGroup.razor.rz.scp.css */
/* ===========================================
   NAV GROUP STYLES (structure only)
   Colors and padding are set by parent NavMenu.razor.css with ::deep
   =========================================== */
.nav-group[b-vjhairchfv] {
    margin-top: 0.25rem;
}

.nav-group-header[b-vjhairchfv] {
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    white-space: nowrap;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.nav-group-header:hover[b-vjhairchfv] {
    opacity: 0.85;
}

.nav-group-header .bi[b-vjhairchfv] {
    font-size: 1rem;
    width: 1.25rem;
    min-width: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Chevron indicator */
.nav-group-chevron[b-vjhairchfv] {
    font-size: 0.6rem !important;
    width: auto !important;
    min-width: auto !important;
    opacity: 0.5;
    transition: opacity 0.2s ease;
    margin-right: 0.25rem;
}

.nav-group-header:hover .nav-group-chevron[b-vjhairchfv] {
    opacity: 0.8;
}

/* Collapsible group items container */
.nav-group-items[b-vjhairchfv] {
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.25s ease;
}

.nav-group-expanded[b-vjhairchfv] {
    max-height: 500px;
    /* large enough for any reasonable content */
    opacity: 1;
}

.nav-group-collapsed[b-vjhairchfv] {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
}

/* When collapsed but contains the active page, reveal only the active item */
.nav-group-collapsed:has(.active)[b-vjhairchfv] {
    max-height: 500px;
    opacity: 1;
    pointer-events: auto;
}

/* ===========================================
   FLYOUT (collapsed sidebar)
   ===========================================
   When the sidebar is collapsed, clicking a group icon opens a flyout
   panel anchored to that icon. The panel uses position: fixed so it
   escapes the sidebar's overflow: hidden — NavMenu.razor.js sets the
   top/left inline based on the anchor's bounding rect each time the
   flyout opens. */

.nav-group-collapsed-anchor[b-vjhairchfv] {
    position: relative;
}

.nav-group-collapsed-btn.is-flyout-open[b-vjhairchfv] {
    background: rgba(var(--color-accent-rgb), 0.22);
    color: rgba(255, 255, 255, 0.95);
}

.nav-flyout[b-vjhairchfv] {
    position: fixed;
    z-index: var(--z-overlay);
    min-width: 240px;
    max-width: 320px;
    padding: var(--space-2);
    background: var(--color-dark);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    color: rgba(255, 255, 255, 0.95);
    /* Constrain to viewport so the inner list scrolls when a group has many items. */
    max-height: calc(100vh - var(--space-8));
    overflow-y: auto;
    /* Hidden until JS computes top/left in positionFlyout — otherwise
       Blazor renders the panel before OnAfterRenderAsync runs and the
       browser paints it briefly at the viewport origin (top:0, left:0). */
    visibility: hidden;
}

.nav-flyout-header[b-vjhairchfv] {
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-1);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Children inside the flyout are passed as ChildContent (NavLinks rendered
   by NavMenuItems). Use ::deep so these styles reach across scope. The
   rules undo the compact-collapsed look the parent sidebar applies, so
   items render at full size with text. */
.nav-flyout-items[b-vjhairchfv]  .nav-link {
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    min-height: 36px !important;
    padding: var(--space-2) var(--space-3) !important;
    border-radius: var(--radius-md);
    color: rgba(255, 255, 255, 0.78) !important;
    text-decoration: none;
    white-space: nowrap;
}

.nav-flyout-items[b-vjhairchfv]  .nav-link .bi {
    margin-right: var(--space-2) !important;
}

.nav-flyout-items[b-vjhairchfv]  .nav-link:hover {
    background: rgba(var(--color-accent-rgb), 0.12) !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

.nav-flyout-items[b-vjhairchfv]  .nav-link.active {
    background: rgba(var(--color-accent-rgb), 0.22) !important;
    color: rgba(255, 255, 255, 1) !important;
    font-weight: 600;
}

.nav-flyout-items[b-vjhairchfv]  .nav-text {
    display: inline !important;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.nav[b-as41x5ugk0]  .nav-link {
    --bs-nav-link-color: rgba(255, 255, 255, 0.78);
}

.nav[b-as41x5ugk0]  .nav-link:focus {
    --bs-nav-link-hover-color: rgba(255, 255, 255, 1);
}

.nav[b-as41x5ugk0]  .nav-link:hover {
    --bs-nav-link-hover-color: var(--color-accent);
}

.nav[b-as41x5ugk0]  .nav-link.active:hover {
    --bs-nav-link-hover-color: var(--color-dark);
}

.nav[b-as41x5ugk0]  .nav-link.active {
    background-color: rgba(var(--color-accent-rgb), 0.22);
}

/* ===========================================
   SHARED NAV STYLES
   =========================================== */
[b-as41x5ugk0] .nav .bi:not(.nav-group-chevron) {
    font-size: 1rem !important;
    width: 1.25rem !important;
    min-width: 1.25rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

[b-as41x5ugk0] .nav-group-collapsed:has(.active) > .nav-item:not(:has(.active)) {
    display: none;
}

[b-as41x5ugk0] .nav-section:not(:has(.nav-item)) {
    display: none;
}

/* ===========================================
   SCROLLBAR
   =========================================== */
.scrollable-nav[b-as41x5ugk0] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--color-accent-rgb), 0.45) rgba(0, 0, 0, 0.2);
}

.scrollable-nav:hover[b-as41x5ugk0] {
    scrollbar-color: var(--color-accent) rgba(0, 0, 0, 0.3);
}

.scrollable-nav[b-as41x5ugk0]::-webkit-scrollbar {
    width: 8px;
}

.scrollable-nav[b-as41x5ugk0]::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-sm);
}

.scrollable-nav[b-as41x5ugk0]::-webkit-scrollbar-thumb {
    background: rgba(var(--color-accent-rgb), 0.45);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.scrollable-nav[b-as41x5ugk0]::-webkit-scrollbar-thumb:hover {
    background: var(--color-accent);
}

/* ===========================================
   SIDEBAR TOGGLE (inside sidebar header)
   =========================================== */
.sidebar-toggle-btn[b-as41x5ugk0] {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
        background-color var(--duration-fast) var(--ease-out),
        color var(--duration-fast) var(--ease-out);
}

.sidebar-toggle-btn:hover[b-as41x5ugk0] {
    background: rgba(var(--color-accent-rgb), 0.15);
    color: rgba(255, 255, 255, 0.95);
}

.sidebar-toggle-btn .bi[b-as41x5ugk0] {
    font-size: 1rem;
}


/* ===========================================
   SIDEBAR USER (desktop)
   =========================================== */
.sidebar-user[b-as41x5ugk0] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.78);
    font-size: var(--text-sm);
}

.sidebar-user-icon[b-as41x5ugk0] {
    font-size: 1.1rem;
    opacity: 0.8;
    flex-shrink: 0;
}

.sidebar-user-email[b-as41x5ugk0] {
    flex: 1 1 auto;
    min-width: 0;
    color: rgba(255, 255, 255, 0.85);
}

.sidebar-user-actions[b-as41x5ugk0] {
    display: flex;
    gap: var(--space-1);
    flex-shrink: 0;
}

.sidebar-user-logout-form[b-as41x5ugk0] {
    display: inline-flex;
    margin: 0;
}

.sidebar-user-btn[b-as41x5ugk0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: var(--radius-md);
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    text-decoration: none;
    transition:
        background-color var(--duration-fast) var(--ease-out),
        color var(--duration-fast) var(--ease-out);
}

.sidebar-user-btn:hover[b-as41x5ugk0] {
    background: rgba(var(--color-accent-rgb), 0.15);
    color: rgba(255, 255, 255, 0.95);
}

.sidebar-user-btn .bi[b-as41x5ugk0] {
    font-size: 0.9rem;
}

/* ===========================================
   SIDEBAR FOOTER
   =========================================== */
.sidebar-footer[b-as41x5ugk0] {
    padding: var(--space-3) var(--space-4);
    text-align: center;
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-footer .footer-version[b-as41x5ugk0] {
    width: 100%;
    font-size: 0.7rem;
    opacity: 0.65;
    letter-spacing: 0.03em;
}

.sidebar-footer .bi[b-as41x5ugk0] {
    font-size: 0.75rem;
    opacity: 0.7;
    transition: transform var(--duration-normal) var(--ease-out), opacity var(--duration-normal) var(--ease-out);
}

.sidebar-footer:hover .bi[b-as41x5ugk0] {
    opacity: 1;
    transform: scale(1.15);
    color: var(--color-danger);
}

.sidebar-footer .footer-text[b-as41x5ugk0] {
    transition: opacity var(--duration-normal) var(--ease-out);
}

.sidebar-footer a[b-as41x5ugk0] {
    transition: color var(--duration-fast) var(--ease-out);
    color: inherit;
}

.sidebar-footer a:hover[b-as41x5ugk0] {
    color: var(--color-accent) !important;
}

/* ===========================================
   MOBILE
   =========================================== */
.navbar[b-as41x5ugk0] {
    background: var(--color-dark) !important;
    box-shadow: var(--shadow-md);
}

.navbar-brand[b-as41x5ugk0] {
    font-size: var(--text-md);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95) !important;
}

.navbar-toggler[b-as41x5ugk0] {
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: var(--space-2);
    transition:
        background-color var(--duration-fast) var(--ease-out),
        border-color var(--duration-fast) var(--ease-out);
}

.navbar-toggler:hover[b-as41x5ugk0] {
    border-color: var(--color-accent);
    background: rgba(var(--color-accent-rgb), 0.1);
}

.navbar-toggler:focus[b-as41x5ugk0] {
    box-shadow: 0 0 0 0.15rem rgba(var(--color-accent-rgb), 0.25);
}

.navbar-toggler-icon[b-as41x5ugk0] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.mobile-page-title[b-as41x5ugk0] {
    font-size: 0.7rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.02em;
    line-height: 1.2;
    margin-top: 1px;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Mobile user section (in offcanvas) */
.mobile-user-section[b-as41x5ugk0] {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: var(--space-3) var(--space-4);
    margin-top: var(--space-2);
}

.mobile-user-email[b-as41x5ugk0] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: rgba(255, 255, 255, 0.75);
    font-size: var(--text-sm);
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-2);
}

.mobile-user-email .bi[b-as41x5ugk0] {
    font-size: 1.1rem;
    opacity: 0.8;
}

.mobile-user-actions[b-as41x5ugk0] {
    display: flex;
    gap: var(--space-2);
}

.mobile-user-actions form[b-as41x5ugk0] {
    flex: 1;
}

.mobile-user-btn[b-as41x5ugk0] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(var(--color-accent-rgb), 0.1);
    border: 1px solid rgba(var(--color-accent-rgb), 0.22);
    cursor: pointer;
    transition:
        background-color var(--duration-fast) var(--ease-out),
        border-color var(--duration-fast) var(--ease-out),
        color var(--duration-fast) var(--ease-out);
}

.mobile-user-btn:hover[b-as41x5ugk0] {
    background: rgba(var(--color-accent-rgb), 0.2);
    border-color: rgba(var(--color-accent-rgb), 0.4);
    color: rgba(255, 255, 255, 1);
}

.mobile-user-btn-logout[b-as41x5ugk0] {
    color: rgba(231, 76, 60, 0.85);
    background: rgba(231, 76, 60, 0.08);
    border-color: rgba(231, 76, 60, 0.25);
    width: 100%;
}

.mobile-user-btn-logout:hover[b-as41x5ugk0] {
    background: rgba(231, 76, 60, 0.15);
    border-color: rgba(231, 76, 60, 0.4);
    color: rgba(231, 76, 60, 1);
}

/* Mobile offcanvas */
.offcanvas[b-as41x5ugk0] {
    width: 280px;
    background: var(--color-dark) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.offcanvas .nav-link[b-as41x5ugk0] {
    border-radius: var(--radius-md);
    margin-bottom: 2px;
    transition:
        background-color var(--duration-fast) var(--ease-out),
        color var(--duration-fast) var(--ease-out),
        padding-left var(--duration-fast) var(--ease-out);
    color: rgba(255, 255, 255, 0.78) !important;
    position: relative;
    overflow: hidden;
}

.offcanvas .nav-link[b-as41x5ugk0]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px;
    height: 60%;
    background: var(--color-accent);
    border-radius: 0 3px 3px 0;
    transition: transform var(--duration-fast) var(--ease-out);
}

.offcanvas .nav-link:hover[b-as41x5ugk0] {
    background: rgba(var(--color-accent-rgb), 0.12) !important;
    color: rgba(255, 255, 255, 0.95) !important;
    padding-left: calc(1rem + 4px) !important;
}

.offcanvas .nav-link:hover[b-as41x5ugk0]::before {
    transform: translateY(-50%) scaleY(1);
}

.offcanvas .nav-link.active[b-as41x5ugk0] {
    background: rgba(var(--color-accent-rgb), 0.22) !important;
    color: rgba(255, 255, 255, 1) !important;
    font-weight: 600;
}

.offcanvas .nav-link.active[b-as41x5ugk0]::before {
    transform: translateY(-50%) scaleY(1);
    background: var(--color-accent);
}

.offcanvas[b-as41x5ugk0]  .nav-group-header {
    color: rgba(255, 255, 255, 0.45) !important;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.offcanvas[b-as41x5ugk0]  .nav-group-header .bi:not(.nav-group-chevron) {
    color: rgba(255, 255, 255, 0.45) !important;
}

.offcanvas[b-as41x5ugk0]  .nav-group-header .nav-text {
    color: rgba(255, 255, 255, 0.45) !important;
}

.offcanvas[b-as41x5ugk0]  .nav-link-padding {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

.offcanvas .nav-group .nav-item .nav-link[b-as41x5ugk0] {
    padding-left: calc(var(--space-4) + 1.25rem + var(--space-4)) !important;
}

/* ===========================================
   DESKTOP
   =========================================== */
.sidebar-desktop[b-as41x5ugk0] {
    width: 280px;
    height: 100vh;
    max-height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-sticky);
    background: var(--color-dark);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    transition: width var(--duration-normal) var(--ease-in-out);
    overflow: hidden;
}

.sidebar-desktop.collapsed[b-as41x5ugk0] {
    width: 72px;
}

.sidebar-desktop.collapsed .sidebar-title[b-as41x5ugk0] {
    display: none;
}

.sidebar-desktop.collapsed[b-as41x5ugk0]  .nav-text {
    display: none;
}

.sidebar-desktop.collapsed[b-as41x5ugk0]  .nav-group-header .nav-text {
    display: none;
}

.sidebar-desktop.collapsed .footer-text[b-as41x5ugk0] {
    display: none;
}

.sidebar-desktop.collapsed .sidebar-header a[b-as41x5ugk0] {
    justify-content: center;
}

.sidebar-desktop.collapsed .sidebar-logo[b-as41x5ugk0] {
    margin-right: 0 !important;
}

.sidebar-desktop.collapsed[b-as41x5ugk0]  .nav-link {
    justify-content: center;
    padding-left: var(--space-3) !important;
    padding-right: var(--space-3) !important;
    min-height: 40px !important;
    padding-top: var(--space-2) !important;
    padding-bottom: var(--space-2) !important;
}

.sidebar-desktop.collapsed[b-as41x5ugk0]  .nav-link .bi {
    margin-right: 0 !important;
}

.sidebar-desktop.collapsed[b-as41x5ugk0]  .nav-group-header {
    justify-content: center;
    padding-left: var(--space-3) !important;
    padding-right: var(--space-3) !important;
    height: auto;
    min-height: 32px;
}

.sidebar-desktop.collapsed[b-as41x5ugk0]  .nav-group-header .bi {
    margin-right: 0 !important;
}

.sidebar-desktop.collapsed[b-as41x5ugk0]  .nav-group-collapsed-btn {
    background: none;
    border: none;
    width: 100%;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.78);
    padding: var(--space-2) var(--space-4);
    display: flex;
    justify-content: center;
}

.sidebar-desktop.collapsed[b-as41x5ugk0]  .nav-group-collapsed-btn .bi {
    font-size: 1rem;
    margin-right: 0 !important;
}

.sidebar-desktop.collapsed[b-as41x5ugk0]  .nav-group-collapsed-btn:hover {
    background: rgba(var(--color-accent-rgb), 0.15);
    color: rgba(255, 255, 255, 0.95);
}

.sidebar-desktop.collapsed .sidebar-user[b-as41x5ugk0],
.sidebar-desktop.collapsed .sidebar-footer[b-as41x5ugk0] {
    display: none;
}

/* Sidebar header */
.sidebar-header[b-as41x5ugk0] {
    height: 3.5rem;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.12);
}

.sidebar-desktop.collapsed .sidebar-header[b-as41x5ugk0] {
    justify-content: center;
    padding: var(--space-3) 0;
}

/* In collapsed state, hide the brand link so the toggle button is the
   only header element. The Tableau de bord nav item already provides
   navigation back to the dashboard. !important is needed because the
   markup carries Bootstrap's .d-flex utility (display: flex !important). */
.sidebar-desktop.collapsed .sidebar-header .navbar-brand[b-as41x5ugk0] {
    display: none !important;
}

.sidebar-logo[b-as41x5ugk0] {
    height: 36px;
    width: 36px;
    margin-right: var(--space-3);
    flex-shrink: 0;
    transition: margin var(--duration-normal) var(--ease-in-out);
}

.sidebar-desktop.collapsed .sidebar-logo[b-as41x5ugk0] {
    margin-right: 0;
}

.sidebar-title[b-as41x5ugk0] {
    font-family: var(--font-display);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.95);
    transition: opacity var(--duration-fast) var(--ease-out);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Desktop nav-link */
.sidebar-desktop .nav-link[b-as41x5ugk0] {
    border-radius: var(--radius-md);
    transition:
        background-color var(--duration-fast) var(--ease-out),
        color var(--duration-fast) var(--ease-out);
    text-decoration: none;
    color: rgba(255, 255, 255, 0.78) !important;
    white-space: nowrap;
    overflow: hidden;
    padding-left: var(--space-3) !important;
    padding-right: var(--space-3) !important;
    position: relative;
}

.sidebar-desktop .nav-link[b-as41x5ugk0]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px;
    height: 60%;
    background: var(--color-accent);
    border-radius: 0 3px 3px 0;
    transition: transform var(--duration-fast) var(--ease-out);
}

.sidebar-desktop[b-as41x5ugk0]  .nav-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity var(--duration-fast) var(--ease-out);
}

.sidebar-desktop[b-as41x5ugk0]  .nav-group-header {
    color: rgba(255, 255, 255, 0.5) !important;
    padding-left: var(--space-3);
    padding-right: var(--space-3);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sidebar-desktop[b-as41x5ugk0]  .nav-group-header .bi:not(.nav-group-chevron) {
    color: rgba(255, 255, 255, 0.5) !important;
}

.sidebar-desktop[b-as41x5ugk0]  .nav-group-header .nav-text {
    color: rgba(255, 255, 255, 0.5) !important;
}

.sidebar-desktop[b-as41x5ugk0]  .nav-link-padding {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
}

.sidebar-desktop .nav-group .nav-item .nav-link[b-as41x5ugk0] {
    padding-left: calc(var(--space-3) + 1.25rem + var(--space-4)) !important;
}

.sidebar-desktop.collapsed .nav-group .nav-item .nav-link[b-as41x5ugk0] {
    padding-left: 0 !important;
}

.sidebar-desktop .nav-link:hover[b-as41x5ugk0] {
    background: rgba(var(--color-accent-rgb), 0.12) !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

.sidebar-desktop .nav-link:hover[b-as41x5ugk0]::before {
    transform: translateY(-50%) scaleY(1);
}

/* Active state: gold-tinted bg + gold-leaning text. The 0.35 alpha fill
   alone makes the current page unambiguous, no left bar, no bold needed.
   ::deep pierces into NavMenuItems (separate Blazor scope) where .nav-link
   is actually rendered. The existing 0.22 rule at the top of this file
   uses the same .nav ::deep approach. */
.sidebar-desktop[b-as41x5ugk0]  .nav-link.active {
    background: rgba(var(--color-accent-rgb), 0.35) !important;
    color: var(--color-accent-soft) !important;
}

.sidebar-desktop[b-as41x5ugk0]  .nav-link.active .bi {
    color: var(--color-accent);
}

.sidebar-desktop[b-as41x5ugk0]  .nav-link.active:hover {
    background: rgba(var(--color-accent-rgb), 0.42) !important;
    color: var(--color-surface) !important;
}

/* Flyout styling lives in NavGroup.razor.css (Blazor scoped CSS only
   matches elements rendered by the same component). */

/* ===========================================
   RESPONSIVE
   =========================================== */
@media (min-width: 992px) {
    .navbar.fixed-top[b-as41x5ugk0] {
        display: none !important;
    }

    .offcanvas[b-as41x5ugk0] {
        display: none !important;
    }

    .sidebar-desktop[b-as41x5ugk0] {
        display: flex !important;
    }
}

@media (max-width: 991.98px) {
    .sidebar-desktop[b-as41x5ugk0] {
        display: none !important;
    }
}
/* /Components/Layout/UnauthorizedLayout.razor.rz.scp.css */
/* UnauthorizedLayout - Modern Authentication Layout */
.unauthorized-layout[b-kjubf9762f] {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--bs-body-bg) 0%, #ffecd4 50%, #f5d6c6 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem 1rem;
}

.auth-container[b-kjubf9762f] {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.auth-header[b-kjubf9762f] {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.auth-logo[b-kjubf9762f] {
    width: 80px;
    height: 80px;
    filter: drop-shadow(0 4px 12px rgba(var(--bs-primary-rgb), 0.2));
    transition: transform 0.3s ease;
}

.auth-logo:hover[b-kjubf9762f] {
    transform: scale(1.05);
}

.auth-title[b-kjubf9762f] {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--bs-primary);
    margin: 0;
    letter-spacing: 0.5px;
}

.auth-card[b-kjubf9762f] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(var(--bs-primary-rgb), 0.12),
        0 2px 8px rgba(var(--bs-primary-rgb), 0.08);
    padding: 2rem;
    width: 100%;
    transition: box-shadow 0.3s ease;
}

.auth-card:hover[b-kjubf9762f] {
    box-shadow: 0 12px 40px rgba(var(--bs-primary-rgb), 0.15),
        0 4px 12px rgba(var(--bs-primary-rgb), 0.1);
}

/* Override default h1, h2 styling within the card */
.auth-card[b-kjubf9762f]  h1 {
    font-size: 1.5rem;
    color: var(--bs-primary);
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.auth-card[b-kjubf9762f]  h2 {
    font-size: 1rem;
    color: #8b7355;
    margin-bottom: 1.5rem;
    font-weight: 400;
}

.auth-card[b-kjubf9762f]  hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--bs-secondary), transparent);
    margin: 1rem 0;
}

/* Form styling */
.auth-card[b-kjubf9762f]  .form-floating {
    margin-bottom: 1rem;
}

.auth-card[b-kjubf9762f]  .form-floating>.form-control {
    border: 1px solid #e0d5cc;
    border-radius: 10px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-card[b-kjubf9762f]  .form-floating>.form-control:focus {
    border-color: var(--bs-secondary);
    box-shadow: 0 0 0 3px rgba(var(--bs-secondary-rgb), 0.2);
}

.auth-card[b-kjubf9762f]  .form-floating>label {
    color: #8b7355;
}

/* Button styling */
.auth-card[b-kjubf9762f]  .btn-primary {
    background: linear-gradient(135deg, var(--bs-primary) 0%, #8b6b4a 100%);
    border: none;
    border-radius: 10px;
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    color: white;
    transition: all 0.2s ease;
}

.auth-card[b-kjubf9762f]  .btn-primary:hover {
    background: linear-gradient(135deg, #8b6b4a 0%, #a07d5a 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.25);
    color: white;
}

.auth-card[b-kjubf9762f]  .btn-primary:active {
    transform: translateY(0);
}

/* Links (exclude buttons) */
.auth-card[b-kjubf9762f]  a:not(.btn) {
    color: var(--bs-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.auth-card[b-kjubf9762f]  a:not(.btn):hover {
    color: var(--bs-secondary);
    text-decoration: underline;
}

/* Checkbox styling */
.auth-card[b-kjubf9762f]  .form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* Validation messages */
.auth-card[b-kjubf9762f]  .text-danger {
    color: var(--bs-danger) !important;
    font-size: 0.875rem;
}

.auth-card[b-kjubf9762f]  .validation-summary-errors {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.auth-footer[b-kjubf9762f] {
    text-align: center;
    color: #8b7355;
    font-size: 0.875rem;
}

.auth-footer p[b-kjubf9762f] {
    margin: 0;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .unauthorized-layout[b-kjubf9762f] {
        padding: 1rem;
    }

    .auth-card[b-kjubf9762f] {
        padding: 1.5rem;
        border-radius: 12px;
    }

    .auth-logo[b-kjubf9762f] {
        width: 64px;
        height: 64px;
    }

    .auth-title[b-kjubf9762f] {
        font-size: 1.5rem;
    }
}
/* /Components/Messages/ConversationList.razor.rz.scp.css */
.conversation-list-root[b-x1mqh5ezls] {
    background: var(--color-surface);
}

.conversation-list-header[b-x1mqh5ezls] {
    background: var(--color-surface-alt);
    border-color: var(--color-border) !important;
}

.conversation-list-title[b-x1mqh5ezls] {
    color: var(--color-dark);
    font-weight: 600;
}

.conversation-avatar[b-x1mqh5ezls] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 600;
    flex-shrink: 0;
}

.min-width-0[b-x1mqh5ezls] {
    min-width: 0;
}

.conversation-item[b-x1mqh5ezls] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--bs-border-color);
    cursor: pointer;
    transition: background-color 0.15s ease;
    border-left: 3px solid transparent;
}

.conversation-item:hover[b-x1mqh5ezls] {
    background-color: var(--bs-tertiary-bg);
}

.conversation-item.active[b-x1mqh5ezls] {
    background-color: var(--bs-secondary);
    border-left-color: var(--bs-primary);
    color: var(--bs-dark);
}

.conversation-item .fw-semibold[b-x1mqh5ezls] {
    font-weight: 600;
}

.conversation-footer[b-x1mqh5ezls] {
    flex-shrink: 0;
}
/* /Components/Messages/Message.razor.rz.scp.css */
/* Message wrapper positioning */
.message-wrapper.sent[b-k8rt25jyac] {
    display: flex;
    justify-content: flex-end;
}

.message-wrapper.received[b-k8rt25jyac] {
    display: flex;
    justify-content: flex-start;
}

/* Message bubble styling */
.message-bubble[b-k8rt25jyac] {
    max-width: 75%;
    padding: 12px 16px;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s ease;
}

.message-bubble:hover[b-k8rt25jyac] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Sent message bubble (system) */
.sent-bubble[b-k8rt25jyac] {
    background: linear-gradient(135deg, var(--bs-primary) 0%, var(--color-dark) 100%);
    color: var(--bs-light);
    border-bottom-right-radius: 4px;
}

.sent-bubble .text-muted[b-k8rt25jyac] {
    color: rgba(255, 255, 255, 0.8) !important;
}

.sent-bubble .badge[b-k8rt25jyac] {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
}

.sent-bubble .border-top[b-k8rt25jyac] {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Received message bubble */
.received-bubble[b-k8rt25jyac] {
    background-color: var(--color-surface-alt);
    color: var(--color-dark);
    border-bottom-left-radius: 4px;
    border: 1px solid var(--color-border);
}

/* Template icon (top-right corner of bubble) */
.template-icon-wrapper[b-k8rt25jyac] {
    position: absolute;
    top: 8px;
    right: 10px;
    line-height: 1;
}

.template-icon[b-k8rt25jyac] {
    opacity: 0.5;
    cursor: help;
    font-size: 0.75rem;
}

.template-icon:hover[b-k8rt25jyac] {
    opacity: 0.9;
}

/* Message body text */
.message-body[b-k8rt25jyac] {
    white-space: pre-wrap;
    word-wrap: break-word;
    line-height: 1.5;
    margin: 0;
}

/* Message media */
.message-media video[b-k8rt25jyac] {
    border-radius: 8px;
    max-height: 300px;
    width: auto;
}

.message-media audio[b-k8rt25jyac] {
    border-radius: 8px;
    max-width: 100%;
}

.message-image[b-k8rt25jyac] {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.message-image:hover[b-k8rt25jyac] {
    opacity: 0.85;
}

/* Message footer */
.message-footer[b-k8rt25jyac] {
    font-size: 0.875rem;
}

.message-footer .border-top[b-k8rt25jyac] {
    border-color: rgba(0, 0, 0, 0.1) !important;
}

/* Button styling in messages */
.message-bubble .btn-sm[b-k8rt25jyac] {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

/* Badges in messages */
.message-bubble .badge[b-k8rt25jyac] {
    font-size: 0.7rem;
    padding: 0.25em 0.5em;
}

/* Spoiler content */
.spoiler-content[b-k8rt25jyac] {
    border: 2px dashed var(--color-warning);
}

/* Responsive */
@media (max-width: 768px) {
    .message-bubble[b-k8rt25jyac] {
        max-width: 85%;
    }
}
/* /Components/Messages/MessageComposer.razor.rz.scp.css */
.message-composer[b-l1q1av0t8q] {
    background-color: var(--color-surface);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.02);
}

/* Syncfusion overrides for cleaner look */
.message-composer[b-l1q1av0t8q]  .e-input-group {
    border-radius: 0.5rem;
    border-color: var(--color-border);
}

.message-composer[b-l1q1av0t8q]  .e-input-group:not(.e-disabled):focus-within {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-focus);
}

.message-composer[b-l1q1av0t8q]  .e-btn {
    border-radius: 0.5rem;
    text-transform: none;
    font-weight: 500;
}

.compact-dropdown[b-l1q1av0t8q] {
    margin-bottom: 0.5rem;
}

.restrictions-list[b-l1q1av0t8q] {
    display: block !important;
    max-height: 120px !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
}

@media (min-width: 768px) {
    .restrictions-list[b-l1q1av0t8q] {
        max-height: 200px !important;
    }
}
/* /Components/Pages/Admin/AIUsage.razor.rz.scp.css */
.ai-usage-metric[b-iv2ej1v8is] {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 500;
    color: var(--color-dark);
    line-height: 1.1;
}

.ai-usage-sub[b-iv2ej1v8is] {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
/* /Components/Pages/Admin/MessageStatistics.razor.rz.scp.css */
/* ============================================
   Message Statistics — Scoped Styles
   Follows the wedding-themed design system
   ============================================ */

/* Card base */
.stat-card[b-20ls550qvj] {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.2s ease;
}

.stat-card:hover[b-20ls550qvj] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* ── KPI Cards ── */
.kpi-card[b-20ls550qvj] {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
}

.kpi-card.h-100[b-20ls550qvj] {
    height: 100%;
}

.kpi-icon-circle[b-20ls550qvj] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.kpi-icon-circle.sent[b-20ls550qvj] { background: rgba(116, 88, 62, 0.1); color: var(--color-dark); }
.kpi-icon-circle.delivery[b-20ls550qvj] { background: rgba(13, 110, 253, 0.1); color: #0d6efd; }
.kpi-icon-circle.read[b-20ls550qvj] { background: rgba(25, 135, 84, 0.1); color: #198754; }
.kpi-icon-circle.response[b-20ls550qvj] { background: rgba(111, 66, 193, 0.1); color: #6f42c1; }
.kpi-icon-circle.received[b-20ls550qvj] { background: rgba(13, 202, 240, 0.1); color: #0dcaf0; }
.kpi-icon-circle.media[b-20ls550qvj] { background: rgba(253, 126, 20, 0.1); color: #fd7e14; }
.kpi-icon-circle.timer[b-20ls550qvj] { background: rgba(32, 201, 151, 0.1); color: #20c997; }

.kpi-body[b-20ls550qvj] {
    flex: 1;
    min-width: 0;
}

.kpi-badge[b-20ls550qvj] {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    background: var(--color-border);
    color: var(--color-dark);
    vertical-align: middle;
    margin-left: 0.3rem;
}

.kpi-label[b-20ls550qvj] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-dark);
    margin-bottom: 0.1rem;
    line-height: 1.3;
}

.kpi-metric[b-20ls550qvj] {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-dark);
}

.kpi-metric.delivery[b-20ls550qvj] { color: #0d6efd; }
.kpi-metric.read[b-20ls550qvj] { color: #198754; }
.kpi-metric.response[b-20ls550qvj] { color: #6f42c1; }
.kpi-metric.received[b-20ls550qvj] { color: #0dcaf0; }
.kpi-metric.media[b-20ls550qvj] { color: #fd7e14; }
.kpi-metric.timer[b-20ls550qvj] { color: #20c997; }

.kpi-unit[b-20ls550qvj] {
    font-size: 0.9rem;
    font-weight: 600;
    margin-left: 1px;
}

.kpi-sub[b-20ls550qvj] {
    font-size: 0.73rem;
    color: #8c8c8c;
    margin-top: 0.1rem;
}

/* ── Section headers ── */
.section-header[b-20ls550qvj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f0ebe6;
}

.section-header i[b-20ls550qvj] {
    color: var(--color-dark);
    font-size: 1rem;
}

.section-header h5[b-20ls550qvj] {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-dark);
}

/* ── Status breakdown (chart + details side by side) ── */
.breakdown-layout[b-20ls550qvj] {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

.breakdown-chart[b-20ls550qvj] {
    flex-shrink: 0;
    width: 160px;
    height: 160px;
}

.breakdown-details[b-20ls550qvj] {
    flex: 1;
    min-width: 0;
}

.status-row[b-20ls550qvj] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0;
}

.status-dot[b-20ls550qvj] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-label[b-20ls550qvj] {
    flex: 0 0 auto;
    font-size: 0.82rem;
    font-weight: 500;
    min-width: 5rem;
    color: #495057;
}

.status-count[b-20ls550qvj] {
    font-size: 0.82rem;
    font-weight: 700;
    min-width: 2rem;
    text-align: right;
    color: var(--color-dark);
}

.status-pct[b-20ls550qvj] {
    font-size: 0.75rem;
    color: #8c8c8c;
    min-width: 2.8rem;
    text-align: right;
}

.status-bar-track[b-20ls550qvj] {
    flex: 1;
    height: 5px;
    background: #f5f0ec;
    border-radius: 3px;
    overflow: hidden;
}

.status-bar-fill[b-20ls550qvj] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease;
}

/* ── Info banners ── */
.info-banner[b-20ls550qvj] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    border-radius: 0.5rem;
    font-size: 0.78rem;
    line-height: 1.4;
}

.info-banner.muted[b-20ls550qvj] {
    background: #faf8f6;
    color: #8c8c8c;
    border: 1px solid #f0ebe6;
}

.info-banner.danger[b-20ls550qvj] {
    background: #fef5f5;
    color: #dc3545;
    border: 1px solid #f5c6cb;
}

.info-banner i[b-20ls550qvj] {
    flex-shrink: 0;
    margin-top: 0.1rem;
}

/* ── Rate badges (template grid) ── */
.rate-badge[b-20ls550qvj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    min-width: 3rem;
}

.rate-badge.high[b-20ls550qvj] { background: rgba(25, 135, 84, 0.08); color: #198754; }
.rate-badge.medium[b-20ls550qvj] { background: rgba(255, 193, 7, 0.12); color: #997404; }
.rate-badge.low[b-20ls550qvj] { background: rgba(220, 53, 69, 0.08); color: #dc3545; }

/* ── Syncfusion Grid overrides ── */
[b-20ls550qvj] .stat-grid .e-gridheader {
    background: #faf8f6;
    border-bottom: 2px solid #f0ebe6;
}

[b-20ls550qvj] .stat-grid .e-headercell {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-dark) !important;
}

[b-20ls550qvj] .stat-grid .e-rowcell {
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem !important;
}

[b-20ls550qvj] .stat-grid .e-row:nth-child(even) {
    background: #fdfcfb;
}

[b-20ls550qvj] .stat-grid .e-row:hover .e-rowcell {
    background: #f9f5f1 !important;
}

/* ── Empty state ── */
.empty-state[b-20ls550qvj] {
    text-align: center;
    padding: 3rem 1.5rem;
}

.empty-state i[b-20ls550qvj] {
    font-size: 2.5rem;
    color: var(--color-border);
    margin-bottom: 0.75rem;
    display: block;
}

.empty-state h6[b-20ls550qvj] {
    color: var(--color-dark);
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.empty-state p[b-20ls550qvj] {
    color: #8c8c8c;
    font-size: 0.875rem;
}

/* ── Refresh button spin ── */
[b-20ls550qvj] .spin {
    animation: wed-spin-b-20ls550qvj 0.8s linear infinite;
}

@keyframes wed-spin-b-20ls550qvj {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ── Responsive ── */
@media (max-width: 767.98px) {
    .kpi-metric[b-20ls550qvj] {
        font-size: 1.4rem;
    }

    .breakdown-layout[b-20ls550qvj] {
        flex-direction: column;
        align-items: center;
    }

    .breakdown-chart[b-20ls550qvj] {
        width: 130px;
        height: 130px;
    }
}
/* /Components/Pages/AI/ChatbotPreview.razor.rz.scp.css */
.chatbot-preview[b-28iexwkqmy] {
    max-width: 820px;
    margin: 0 auto;
}

.chat-history[b-28iexwkqmy] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-height: 60vh;
    overflow-y: auto;
    padding-right: var(--space-2);
    margin-bottom: var(--space-5);
}

.bubble-row[b-28iexwkqmy] {
    display: flex;
}

.bubble-row--user[b-28iexwkqmy] {
    justify-content: flex-end;
}

.bubble-row--assistant[b-28iexwkqmy] {
    justify-content: flex-start;
}

.bubble[b-28iexwkqmy] {
    max-width: 80%;
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
}

.bubble--user[b-28iexwkqmy] {
    background: var(--color-accent-pale);
    color: var(--color-text);
}

.bubble--assistant[b-28iexwkqmy] {
    background: var(--color-surface-alt);
    color: var(--color-text);
}

.bubble-meta[b-28iexwkqmy] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

.bubble-meta-separator[b-28iexwkqmy] {
    opacity: 0.6;
}

.bubble-content[b-28iexwkqmy] {
    white-space: pre-wrap;
    line-height: var(--leading-normal);
}

.typing[b-28iexwkqmy] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    height: var(--space-4);
}

.typing span[b-28iexwkqmy] {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--color-text-muted);
    opacity: 0.4;
    animation: typing-bounce-b-28iexwkqmy 1.2s var(--ease-in-out) infinite;
}

.typing span:nth-child(2)[b-28iexwkqmy] {
    animation-delay: 0.2s;
}

.typing span:nth-child(3)[b-28iexwkqmy] {
    animation-delay: 0.4s;
}

@keyframes typing-bounce-b-28iexwkqmy {
    0%, 60%, 100% {
        opacity: 0.4;
        transform: translateY(0);
    }
    30% {
        opacity: 1;
        transform: translateY(-3px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .typing span[b-28iexwkqmy] {
        animation: none;
    }
}

.composer[b-28iexwkqmy] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.composer-actions[b-28iexwkqmy] {
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 992px) {
    .chatbot-preview[b-28iexwkqmy] {
        max-width: 100%;
    }
}
/* /Components/Pages/Budget/BudgetOverviewPanel.razor.rz.scp.css */
.budget-overview[b-ae0tnr31bu] {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-6);
}

.budget-overview-summary[b-ae0tnr31bu] {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.budget-overview-title[b-ae0tnr31bu] {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--color-dark);
}

.budget-overview-mini[b-ae0tnr31bu] {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.budget-overview[open] .budget-overview-mini[b-ae0tnr31bu] {
    display: none;
}

.budget-overview-summary[b-ae0tnr31bu]::-webkit-details-marker {
    display: none;
}

.budget-overview-summary[b-ae0tnr31bu]::marker {
    display: none;
}

.budget-overview-summary[b-ae0tnr31bu]::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid var(--color-text-muted);
    border-bottom: 2px solid var(--color-text-muted);
    transform: rotate(-45deg);
    transition: transform var(--duration-fast) var(--ease-out);
}

.budget-overview[open] .budget-overview-summary[b-ae0tnr31bu]::before {
    transform: rotate(45deg);
}

.budget-kpis[b-ae0tnr31bu] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
    margin-top: var(--space-4);
}

@media (max-width: 992px) {
    .budget-kpis[b-ae0tnr31bu] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .budget-kpis[b-ae0tnr31bu] {
        grid-template-columns: 1fr;
    }

    .budget-overview-mini[b-ae0tnr31bu] {
        display: none;
    }
}

.budget-kpi[b-ae0tnr31bu] {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    padding: var(--space-4);
}

.budget-kpi-label[b-ae0tnr31bu] {
    font-size: var(--text-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-1);
}

.budget-kpi-value[b-ae0tnr31bu] {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 500;
    line-height: var(--leading-tight);
    color: var(--color-dark);
}

.budget-kpi-value--success[b-ae0tnr31bu] {
    color: var(--color-success);
}

.budget-kpi-value--danger[b-ae0tnr31bu] {
    color: var(--color-danger);
}

.budget-kpi-sub[b-ae0tnr31bu] {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}

.budget-progress[b-ae0tnr31bu] {
    display: flex;
    height: var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--color-border);
    overflow: hidden;
    margin-top: var(--space-2);
}

.budget-progress-paid[b-ae0tnr31bu] {
    background: var(--color-success);
}

.budget-progress-topay[b-ae0tnr31bu] {
    background: var(--color-warning);
}

.budget-kpi-legend[b-ae0tnr31bu] {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-1);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.budget-kpi-legend-sep[b-ae0tnr31bu] {
    width: var(--space-3);
}

.budget-dot[b-ae0tnr31bu] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-full);
    display: inline-block;
}

.budget-dot--paid[b-ae0tnr31bu] {
    background: var(--color-success);
}

.budget-dot--topay[b-ae0tnr31bu] {
    background: var(--color-warning);
}

.budget-cat-list[b-ae0tnr31bu] {
    list-style: none;
    margin: var(--space-5) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.budget-cat-list > li[b-ae0tnr31bu] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 200px;
    align-items: center;
    gap: var(--space-3);
}

.budget-cat-name[b-ae0tnr31bu] {
    font-size: var(--text-base);
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.budget-cat-bar[b-ae0tnr31bu] {
    height: var(--space-1);
    border-radius: var(--radius-pill);
    background: var(--color-border);
    overflow: hidden;
}

.budget-cat-bar-fill[b-ae0tnr31bu] {
    height: 100%;
    background: var(--color-accent);
}

.budget-cat-bar-fill.is-over[b-ae0tnr31bu] {
    background: var(--color-danger);
}

.budget-cat-amounts[b-ae0tnr31bu] {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    white-space: nowrap;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.budget-cat-amounts.is-over[b-ae0tnr31bu] {
    color: var(--color-danger);
}

.budget-cat-amounts > i[b-ae0tnr31bu] {
    margin-right: var(--space-1);
}

@media (max-width: 576px) {
    .budget-cat-list > li[b-ae0tnr31bu] {
        grid-template-columns: 1fr auto;
    }

    .budget-cat-bar[b-ae0tnr31bu] {
        grid-column: 1 / -1;
    }
}
/* /Components/Pages/Carpool/Carpool.razor.rz.scp.css */
.carpool-viewbar[b-7h4xxoq747] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
}

.carpool-viewbar__toggle[b-7h4xxoq747] {
    display: inline-flex;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 2px;
}

.carpool-viewmode[b-7h4xxoq747] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-4);
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: 500;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.carpool-viewmode:hover[b-7h4xxoq747] {
    color: var(--color-dark);
}

.carpool-viewmode:focus-visible[b-7h4xxoq747] {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.carpool-viewmode.is-active[b-7h4xxoq747] {
    background: var(--color-dark);
    color: #fff;
}

/* ── Radius scale control ── */
.carpool-radius[b-7h4xxoq747] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2);
    min-width: 280px;
    max-width: 360px;
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.carpool-radius__head[b-7h4xxoq747] {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.carpool-radius__icon[b-7h4xxoq747] {
    color: var(--color-accent);
    font-size: 1.05rem;
}

.carpool-radius__label[b-7h4xxoq747] {
    flex: 1 1 auto;
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.carpool-radius__value[b-7h4xxoq747] {
    font-family: var(--font-display);
    font-size: 1.4rem;
    line-height: 1;
    font-weight: 500;
    color: var(--color-dark);
}

.carpool-radius__value small[b-7h4xxoq747] {
    font-family: var(--font-body);
    font-size: 0.65em;
    font-weight: 500;
    color: var(--color-text-muted);
    margin-left: 2px;
}

/* Range input, WV-themed. Covers Webkit/Moz. */
.carpool-radius__slider[b-7h4xxoq747] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: transparent;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

.carpool-radius__slider:focus-visible[b-7h4xxoq747] {
    outline: none;
}

.carpool-radius__slider[b-7h4xxoq747]::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: var(--radius-pill);
    background: linear-gradient(
        to right,
        var(--color-accent) 0%,
        var(--color-accent) var(--radius-percent, 10%),
        var(--color-border) var(--radius-percent, 10%),
        var(--color-border) 100%
    );
}

.carpool-radius__slider[b-7h4xxoq747]::-moz-range-track {
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--color-border);
}

.carpool-radius__slider[b-7h4xxoq747]::-moz-range-progress {
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--color-accent);
}

.carpool-radius__slider[b-7h4xxoq747]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    margin-top: -6px;
    background: var(--color-surface);
    border: 2px solid var(--color-accent);
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
    cursor: grab;
    transition: transform var(--duration-fast) var(--ease-out);
}

.carpool-radius__slider[b-7h4xxoq747]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--color-surface);
    border: 2px solid var(--color-accent);
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
    cursor: grab;
}

.carpool-radius__slider:active[b-7h4xxoq747]::-webkit-slider-thumb { transform: scale(1.1); cursor: grabbing; }
.carpool-radius__slider:active[b-7h4xxoq747]::-moz-range-thumb     { transform: scale(1.1); cursor: grabbing; }

.carpool-radius__slider:focus-visible[b-7h4xxoq747]::-webkit-slider-thumb { box-shadow: var(--shadow-focus); }
.carpool-radius__slider:focus-visible[b-7h4xxoq747]::-moz-range-thumb     { box-shadow: var(--shadow-focus); }

.carpool-radius__slider:disabled[b-7h4xxoq747] { opacity: 0.5; cursor: default; }

.carpool-radius__scale[b-7h4xxoq747] {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    padding: 0 2px;
}

.carpool-filters[b-7h4xxoq747] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    margin-bottom: var(--space-4);
}

.carpool-filters__search[b-7h4xxoq747] {
    flex: 0 1 280px;
    min-width: 220px;
}

.carpool-filters__tags[b-7h4xxoq747] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    flex: 1 1 auto;
}

.carpool-tag[b-7h4xxoq747] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: 500;
    cursor: pointer;
    transition:
        background-color var(--duration-fast) var(--ease-out),
        color var(--duration-fast) var(--ease-out),
        border-color var(--duration-fast) var(--ease-out),
        opacity var(--duration-fast) var(--ease-out);
    opacity: 0.6;
}

.carpool-tag:hover[b-7h4xxoq747] {
    opacity: 1;
    border-color: var(--color-border-strong);
}

.carpool-tag:focus-visible[b-7h4xxoq747] {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.carpool-tag.is-active[b-7h4xxoq747] {
    opacity: 1;
    color: var(--color-dark);
    border-color: transparent;
}

/* Semantic variants when the chip is active — pull from shared tokens. */
.carpool-tag--success.is-active[b-7h4xxoq747] { background: var(--color-success-bg); color: var(--color-success); }
.carpool-tag--warning.is-active[b-7h4xxoq747] { background: var(--color-warning-bg); color: var(--color-warning); }
.carpool-tag--danger.is-active[b-7h4xxoq747]  { background: var(--color-danger-bg);  color: var(--color-danger); }
.carpool-tag--info.is-active[b-7h4xxoq747]    { background: var(--color-info-bg);    color: var(--color-info); }
.carpool-tag--neutral.is-active[b-7h4xxoq747] { background: var(--color-surface-alt); color: var(--color-dark); }

.carpool-tag__count[b-7h4xxoq747] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    padding: 0 var(--space-1);
    border-radius: var(--radius-pill);
    background: rgba(43, 31, 31, 0.08);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1;
}

.carpool-tag.is-active .carpool-tag__count[b-7h4xxoq747] {
    background: rgba(255, 255, 255, 0.55);
}

.carpool-tag--reset[b-7h4xxoq747] {
    opacity: 1;
    font-weight: 600;
    color: var(--color-dark);
    background: transparent;
}

.carpool-tag--reset:disabled[b-7h4xxoq747] {
    opacity: 0.4;
    cursor: default;
    background: transparent;
}
/* /Components/Pages/Carpool/CarpoolMap.razor.rz.scp.css */
.carpool-map-container[b-x1od6g4c1w] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.carpool-map-canvas[b-x1od6g4c1w] {
    height: clamp(500px, calc(100vh - 320px), 900px);
    width: 100%;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}
/* /Components/Pages/Groups/Groups.razor.rz.scp.css */
/* Syncfusion Grid Row Height & Alignment Fixes */
[b-57swdn9ai2] .e-grid .e-rowcell {
    padding: 8px 12px;
    line-height: 20px;
    vertical-align: middle;
}

/* Frozen Action Column Alignment (Right) */
[b-57swdn9ai2] .e-grid .e-frozen-right-content .e-rowcell {
    padding: 0 12px !important;
    height: 48px !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

/* Frozen Content Wrapper Alignment */
[b-57swdn9ai2] .e-grid .e-frozen-right-content .e-rowcell>div,
[b-57swdn9ai2] .e-grid .e-frozen-right-content .e-rowcell>span {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
}

/* Kebab Button Fix */
[b-57swdn9ai2] .e-grid .e-frozen-right-content .btn-kebab {
    padding: 4px !important;
    margin: 0 !important;
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Lock Icon Alignment (Matches Kebab Button) */
.system-lock-icon[b-57swdn9ai2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    width: 30px;
    padding: 4px;
    margin: 0 !important;
    margin-right: 6px !important;
    /* Visual alignment with button */
}
/* /Components/Pages/Guests/Details.razor.rz.scp.css */
/* Top "carte de visite": avatar + phone, email, person-type pill, RSVP status under the page header */
.guest-vcard[b-en6rbyptwx] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.guest-vcard__meta[b-en6rbyptwx] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    flex: 1;
    min-width: 0;
}

.guest-vcard-link[b-en6rbyptwx] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    text-decoration: none;
}

.guest-vcard-link:hover[b-en6rbyptwx] {
    color: var(--color-accent);
}

/* Initials avatar: used in vCard (lg) and linked guest rows (sm) */
.guest-avatar[b-en6rbyptwx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    font-weight: 600;
    line-height: 1;
    flex-shrink: 0;
    user-select: none;
}

.guest-avatar--sm[b-en6rbyptwx] {
    width: 32px;
    height: 32px;
    font-size: var(--text-xs);
}

.guest-avatar--rose[b-en6rbyptwx]     { background: var(--pastel-rose);     color: var(--pastel-rose-fg); }
.guest-avatar--peach[b-en6rbyptwx]    { background: var(--pastel-peach);    color: var(--pastel-peach-fg); }
.guest-avatar--sage[b-en6rbyptwx]     { background: var(--pastel-sage);     color: var(--pastel-sage-fg); }
.guest-avatar--sky[b-en6rbyptwx]      { background: var(--pastel-sky);      color: var(--pastel-sky-fg); }
.guest-avatar--lavender[b-en6rbyptwx] { background: var(--pastel-lavender); color: var(--pastel-lavender-fg); }
.guest-avatar--sand[b-en6rbyptwx]     { background: var(--pastel-sand);     color: var(--pastel-sand-fg); }

/* Compact meal pills used in Per-course mode read-only display */
.meal-pill-list[b-en6rbyptwx] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.meal-pill[b-en6rbyptwx] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    font-size: var(--text-xs);
    line-height: 1.4;
}

.meal-pill__course[b-en6rbyptwx] {
    color: var(--color-text-muted);
    font-weight: 500;
}

.meal-pill__name[b-en6rbyptwx] {
    color: var(--color-dark);
    font-weight: 500;
}

/* Two-rail asymmetric grid (atelier layout, mirrors Edit) */
.guest-page-grid[b-en6rbyptwx] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    align-items: start;
}

.rail[b-en6rbyptwx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

@media (min-width: 992px) {
    .guest-page-grid[b-en6rbyptwx] {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    }
}

.rail--right .rail-sticky[b-en6rbyptwx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Mobile order: rails stack in DOM order (Informations + Liens first,
   then Présence + Logistique). */
@media (max-width: 991.98px) {
    .rail--left[b-en6rbyptwx]  { order: 1; }
    .rail--right[b-en6rbyptwx] { order: 2; }
}

/* Read-only key/value list used in every Details card.
   Mirrors the form-field grid in Edit so navigating between modes
   does not re-arrange the visual layout. */
.field-list[b-en6rbyptwx] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    margin: 0;
}

.field-item[b-en6rbyptwx] {
    margin: 0;
    min-width: 0;
}

.field-item--full[b-en6rbyptwx] {
    grid-column: 1 / -1;
}

.field-item dt[b-en6rbyptwx] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: 500;
    margin-bottom: var(--space-1);
    text-transform: none;
}

.field-item dd[b-en6rbyptwx] {
    color: var(--color-dark);
    font-weight: 500;
    margin: 0;
    word-wrap: break-word;
}

.field-item__empty[b-en6rbyptwx] {
    color: var(--color-text-muted);
    font-weight: 400;
    font-style: italic;
}

.field-item__success[b-en6rbyptwx] {
    color: var(--color-success);
    font-weight: 500;
}

@media (max-width: 768px) {
    .field-list[b-en6rbyptwx] {
        grid-template-columns: 1fr;
    }
}

/* Logistics card: sectioned with thin dividers and small caps labels */
.logistics-section[b-en6rbyptwx] {
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-5);
}

.logistics-section:last-child[b-en6rbyptwx] {
    padding-bottom: 0;
    border-bottom: 0;
    margin-bottom: 0;
}

.logistics-section__title[b-en6rbyptwx] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-3) 0;
}

.logistics-section__title i[b-en6rbyptwx] {
    font-size: var(--text-base);
    color: var(--color-accent);
}

.presence-invitations[b-en6rbyptwx] {
    /* The outer rail-sticky handles overflow on xl. */
}

/* Inheritance hint shown under inherited values */
.inherited-from[b-en6rbyptwx] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    margin-top: var(--space-1);
}

/* Cercle chips */
.cercle-chip-list[b-en6rbyptwx] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* Personnes liées: list rows */
.linked-guest-list[b-en6rbyptwx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.linked-guest-row[b-en6rbyptwx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-alt);
}

.linked-guest-row__primary[b-en6rbyptwx] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    flex: 1;
}

.linked-guest-row__info[b-en6rbyptwx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.linked-guest-row__name[b-en6rbyptwx] {
    font-weight: 600;
    color: var(--color-dark);
}

.linked-guest-row__pills[b-en6rbyptwx] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

/* Anti-affinity rows (read-only): mirror Edit.razor.css — danger-tinted surface
   with a 3px left accent (WedAlert pattern, DESIGN.md §5.6) and a leading
   constraint icon to clearly separate "people NOT to seat together" from
   the warm beige .linked-guest-row "people connected to this guest" pattern. */
.anti-affinity-list[b-en6rbyptwx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.anti-affinity-row[b-en6rbyptwx] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-danger-bg);
    border-left: 3px solid var(--color-danger);
    border-radius: var(--radius-md);
    background: var(--color-danger-bg);
}

.anti-affinity-row__icon[b-en6rbyptwx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: var(--color-surface);
    color: var(--color-danger);
    font-size: var(--text-md);
}

.anti-affinity-row__info[b-en6rbyptwx] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    min-width: 0;
    flex: 1;
}

.anti-affinity-row__name[b-en6rbyptwx] {
    font-weight: 600;
    color: var(--color-dark);
}

/* Compact icon-only button (mirror styling from Edit.razor.css) */
.wv-icon-btn[b-en6rbyptwx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    text-decoration: none;
    transition: background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}

.wv-icon-btn:hover[b-en6rbyptwx] {
    background: var(--color-accent-pale);
    color: var(--color-accent);
    border-color: var(--color-accent-soft);
}

.wv-icon-btn:focus-visible[b-en6rbyptwx] {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.wv-link-action[b-en6rbyptwx] {
    display: inline-flex;
    align-items: center;
    color: var(--color-accent);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 500;
}

.wv-link-action:hover[b-en6rbyptwx] {
    color: var(--color-accent-hover);
    text-decoration: underline;
}

/* Meal selection rendering */
.meal-option-row[b-en6rbyptwx] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.meal-color-dot[b-en6rbyptwx] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}

/* Invitations panel: aligned grid rows (read-only variant) */
.invitation-grid[b-en6rbyptwx] {
    display: flex;
    flex-direction: column;
}

.invitation-row[b-en6rbyptwx] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-3) var(--space-2);
    border-bottom: 1px solid var(--color-border);
}

.invitation-row:last-child[b-en6rbyptwx] {
    border-bottom: 0;
}

.invitation-row__title[b-en6rbyptwx] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    margin: 0;
}

.invitation-row__title-text[b-en6rbyptwx] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.invitation-row__title-name[b-en6rbyptwx] {
    font-weight: 500;
    color: var(--color-dark);
}

.invitation-row__date[b-en6rbyptwx] {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.invitation-row__actions[b-en6rbyptwx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}

.invitation-row__response[b-en6rbyptwx] {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    flex-basis: 100%;
    text-align: right;
}

@media (max-width: 768px) {
    .invitation-row[b-en6rbyptwx] {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }

    .invitation-row__actions[b-en6rbyptwx] {
        justify-content: flex-start;
    }

    .invitation-row__response[b-en6rbyptwx] {
        text-align: left;
        flex-basis: auto;
    }
}
/* /Components/Pages/Guests/Edit.razor.rz.scp.css */
/* Top "carte de visite": avatar + phone, email, person-type pill, RSVP status under the page header */
.guest-vcard[b-ytx5scxk10] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.guest-vcard__meta[b-ytx5scxk10] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    flex: 1;
    min-width: 0;
}

.guest-vcard-link[b-ytx5scxk10] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    text-decoration: none;
}

.guest-vcard-link:hover[b-ytx5scxk10] {
    color: var(--color-accent);
}

/* Initials avatar: used in vCard (lg) and linked guest rows (sm).
   Palette is hashed from the guest's name for stable but varied colors. */
.guest-avatar[b-ytx5scxk10] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    font-weight: 600;
    line-height: 1;
    flex-shrink: 0;
    user-select: none;
}

.guest-avatar--sm[b-ytx5scxk10] {
    width: 32px;
    height: 32px;
    font-size: var(--text-xs);
}

.guest-avatar--rose[b-ytx5scxk10]     { background: var(--pastel-rose);     color: var(--pastel-rose-fg); }
.guest-avatar--peach[b-ytx5scxk10]    { background: var(--pastel-peach);    color: var(--pastel-peach-fg); }
.guest-avatar--sage[b-ytx5scxk10]     { background: var(--pastel-sage);     color: var(--pastel-sage-fg); }
.guest-avatar--sky[b-ytx5scxk10]      { background: var(--pastel-sky);      color: var(--pastel-sky-fg); }
.guest-avatar--lavender[b-ytx5scxk10] { background: var(--pastel-lavender); color: var(--pastel-lavender-fg); }
.guest-avatar--sand[b-ytx5scxk10]     { background: var(--pastel-sand);     color: var(--pastel-sand-fg); }

/* Présence card: bulk mark-all actions in the header */
.presence-bulk-actions[b-ytx5scxk10] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

/* Mobile sticky save bar (only on <lg viewports, only when dirty) */
.mobile-save-bar[b-ytx5scxk10] {
    display: none;
}

@media (max-width: 991.98px) {
    .mobile-save-bar[data-visible="true"][b-ytx5scxk10] {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: var(--space-3) var(--space-4);
        background: var(--color-surface);
        border-top: 1px solid var(--color-border);
        z-index: var(--z-sticky);
        justify-content: center;
        animation: mobile-save-bar-slide-in-b-ytx5scxk10 var(--duration-normal) var(--ease-out);
    }

    .mobile-save-bar[data-visible="true"] .wv-btn[b-ytx5scxk10] {
        flex: 1;
        max-width: 480px;
    }

    /* Reserve room so the sticky bar never covers the last card.
       Save bar height: 12px padding * 2 + 36px button + 1px border ≈ 61px,
       plus a comfortable safe-area margin. */
    .guest-page-grid[b-ytx5scxk10] {
        padding-bottom: 6rem;
    }

    /* Présence card on mobile: let the bulk-actions cluster wrap below the
       title rather than crashing into it on narrow viewports. The wv-card
       header is shared, so we only relax it inside the right rail. */
    .rail--right[b-ytx5scxk10]  .wv-card-header {
        flex-wrap: wrap;
        row-gap: var(--space-2);
    }

    .presence-bulk-actions[b-ytx5scxk10] {
        flex-wrap: wrap;
    }
}

@keyframes mobile-save-bar-slide-in-b-ytx5scxk10 {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-save-bar[data-visible="true"][b-ytx5scxk10] {
        animation: none;
    }
}

/* Two-rail asymmetric grid (atelier layout).
   Left rail: identity + logistics + liens (scrolls with the page).
   Right rail: présence (cercles + invitations), pinned in viewport on xl. */
.guest-page-grid[b-ytx5scxk10] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    align-items: start;
}

.rail[b-ytx5scxk10] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

@media (min-width: 992px) {
    .guest-page-grid[b-ytx5scxk10] {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    }
}

.rail--right .rail-sticky[b-ytx5scxk10] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Mobile order: rails stack in DOM order (Informations + Liens first,
   then Présence + Logistique). Save bar at the bottom keeps the primary
   action reachable as the user scrolls past identity to attendance. */
@media (max-width: 991.98px) {
    .rail--left[b-ytx5scxk10]  { order: 1; }
    .rail--right[b-ytx5scxk10] { order: 2; }
}

/* Logistics card: sectioned with thin dividers and small caps labels */
.logistics-section[b-ytx5scxk10] {
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-5);
}

.logistics-section:last-child[b-ytx5scxk10] {
    padding-bottom: 0;
    border-bottom: 0;
    margin-bottom: 0;
}

.logistics-section__title[b-ytx5scxk10] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-3) 0;
}

.logistics-section__title i[b-ytx5scxk10] {
    font-size: var(--text-base);
    color: var(--color-accent);
}

.presence-invitations[b-ytx5scxk10] {
    /* The outer rail-sticky handles overflow on xl. */
}

/* Inheritance hint shown under fields inheriting from a parent guest */
.inherited-from[b-ytx5scxk10] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    margin-top: var(--space-1);
}

/* Personnes liées: list rows */
.linked-guest-list[b-ytx5scxk10] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.linked-guest-row[b-ytx5scxk10] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-alt);
    animation: linked-row-arrive-b-ytx5scxk10 var(--duration-normal) var(--ease-out);
}

.linked-guest-row__primary[b-ytx5scxk10] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    flex: 1;
}

.linked-guest-row__info[b-ytx5scxk10] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.linked-guest-row__name[b-ytx5scxk10] {
    font-weight: 600;
    color: var(--color-dark);
}

.linked-guest-row__pills[b-ytx5scxk10] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.linked-guest-row__actions[b-ytx5scxk10] {
    display: flex;
    gap: var(--space-1);
    flex-shrink: 0;
    align-self: flex-start;
}

@keyframes linked-row-arrive-b-ytx5scxk10 {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .linked-guest-row[b-ytx5scxk10] {
        animation: none;
    }
}

/* Inline form panel for legacy "Ajouter accompagnant/enfant" or "Rattacher" patterns
   (kept in case of fallback; main flow uses WedDialogs) */
.linked-form-panel[b-ytx5scxk10] {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-alt);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.linked-form-title[b-ytx5scxk10] {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-dark);
    margin: 0 0 var(--space-3);
}

/* Action footer: full-width "Ajouter une personne" SfDropDownButton at the
   bottom of the Personnes liées card. CTA is part of the content flow,
   not a control bar in the header. */
.linked-footer[b-ytx5scxk10] {
    margin-top: var(--space-3);
}

.linked-footer[b-ytx5scxk10]  .linked-footer__btn {
    width: 100%;
    justify-content: center;
    color: var(--color-accent);
    background: var(--color-accent-pale);
    border: 1px dashed var(--color-accent-soft);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-4);
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}

.linked-footer[b-ytx5scxk10]  .linked-footer__btn:hover {
    background: var(--color-accent-soft);
    border-color: var(--color-accent);
    color: var(--color-dark);
}

.linked-footer[b-ytx5scxk10]  .linked-footer__btn .e-caret {
    color: inherit;
}

/* Compact icon-only buttons (used for row-level actions inside linked-guest rows) */
.wv-icon-btn[b-ytx5scxk10] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    text-decoration: none;
    transition: background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}

.wv-icon-btn:hover[b-ytx5scxk10] {
    background: var(--color-accent-pale);
    color: var(--color-accent);
    border-color: var(--color-accent-soft);
}

.wv-icon-btn:focus-visible[b-ytx5scxk10] {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.wv-icon-btn--unlink:hover[b-ytx5scxk10] {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

/* "Voir" / "Modifier" link inside cards */
.wv-link-action[b-ytx5scxk10] {
    display: inline-flex;
    align-items: center;
    color: var(--color-accent);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 500;
}

.wv-link-action:hover[b-ytx5scxk10] {
    color: var(--color-accent-hover);
    text-decoration: underline;
}

/* Meal selection: inline color dot inside dropdown items */
.meal-option-row[b-ytx5scxk10] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding-left: var(--space-3);
}

.meal-color-dot[b-ytx5scxk10] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}

/* Invitations panel: aligned grid rows */
.invitation-grid[b-ytx5scxk10] {
    display: flex;
    flex-direction: column;
}

.invitation-row[b-ytx5scxk10] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-3) var(--space-2);
    border-bottom: 1px solid var(--color-border);
}

.invitation-row:last-child[b-ytx5scxk10] {
    border-bottom: 0;
}

.invitation-row__title[b-ytx5scxk10] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    margin: 0;
    cursor: pointer;
}

.invitation-row__check[b-ytx5scxk10] {
    margin: 0;
    flex-shrink: 0;
}

.invitation-row__title-text[b-ytx5scxk10] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.invitation-row__title-name[b-ytx5scxk10] {
    font-weight: 500;
    color: var(--color-dark);
}

.invitation-row__date[b-ytx5scxk10] {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

/* Actions cluster (badge + status + responded date) collapses with flex-wrap
   when the rail is narrow, so individual cells never get squeezed. */
.invitation-row__actions[b-ytx5scxk10] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}

.invitation-row__select[b-ytx5scxk10] {
    width: auto;
    min-width: 7rem;
}

.invitation-row__response[b-ytx5scxk10] {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    flex-basis: 100%;
    text-align: right;
}

@media (max-width: 768px) {
    .invitation-row[b-ytx5scxk10] {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }

    .invitation-row__actions[b-ytx5scxk10] {
        justify-content: flex-start;
    }

    .invitation-row__response[b-ytx5scxk10] {
        text-align: left;
        flex-basis: auto;
    }
}

/* Anti-affinity list rows
   Pattern: WedAlert-style danger surface (DESIGN.md §5.6) — soft danger background
   with a 3px left accent in --color-danger, plus a leading constraint icon.
   Rationale: visually separates "people related to this guest" (warm beige cards in
   .linked-guest-row) from "people who must NOT be seated with this guest" (danger-
   tinted, icon-led rows). Both stay strictly within design tokens. */
.anti-affinity-list[b-ytx5scxk10] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.anti-affinity-row[b-ytx5scxk10] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-danger-bg);
    border-left: 3px solid var(--color-danger);
    border-radius: var(--radius-md);
    background: var(--color-danger-bg);
}

.anti-affinity-row__icon[b-ytx5scxk10] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: var(--color-surface);
    color: var(--color-danger);
    font-size: var(--text-md);
}

.anti-affinity-row__info[b-ytx5scxk10] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    min-width: 0;
    flex: 1;
}

.anti-affinity-row__name[b-ytx5scxk10] {
    font-weight: 600;
    color: var(--color-dark);
}

/* Inline toggle button used to flip the constraint type without
   removing/re-adding. Inherits .wv-badge--{variant} so it keeps the
   semantic color palette; we only override interactivity affordances. */
.anti-affinity-row__toggle[b-ytx5scxk10] {
    border: 1px solid transparent;
    cursor: pointer;
    font-family: inherit;
    transition:
        background-color var(--duration-fast) var(--ease-out),
        border-color var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-fast) var(--ease-out);
}

.anti-affinity-row__toggle:hover[b-ytx5scxk10] {
    border-color: currentColor;
}

.anti-affinity-row__toggle:focus-visible[b-ytx5scxk10] {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.anti-affinity-row__toggle-icon[b-ytx5scxk10] {
    margin-left: var(--space-1);
    font-size: 0.75em;
    opacity: 0.65;
}

.wv-icon-btn--danger:hover[b-ytx5scxk10] {
    background: var(--color-danger-bg);
    color: var(--color-danger);
    border-color: var(--color-danger);
}

/* Cercle chips (rendered inside Présence on Edit, inline list on Details) */
.cercle-chip-list[b-ytx5scxk10] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}
/* /Components/Pages/Guests/Guests.razor.rz.scp.css */
/* ── Metric strip ── */
.metric-strip[b-3zyarf2fvi] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.25rem 0;
}

.metric-chip[b-3zyarf2fvi] {
    --chip-color: var(--bs-secondary);
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4rem 0.75rem;
    border-radius: 2rem;
    border: 1.5px solid var(--chip-color);
    color: var(--chip-color);
    background: var(--bs-body-bg, var(--color-surface));
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 0.8rem;
    line-height: 1.4;
    cursor: pointer;
    transition: transform 0.12s ease, background 0.12s ease;
}

.metric-chip:active[b-3zyarf2fvi] {
    transform: scale(0.96);
}

.metric-chip.active[b-3zyarf2fvi] {
    background: var(--chip-color);
    color: var(--color-surface);
}

.metric-chip i[b-3zyarf2fvi] {
    font-size: 0.85rem;
}

.metric-chip-value[b-3zyarf2fvi] {
    font-weight: 700;
}

.metric-chip-label[b-3zyarf2fvi] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 500;
    opacity: 0.8;
}

.metric-chip[b-3zyarf2fvi]  .wed-infotip-icon {
    color: currentColor;
    opacity: 1;
    font-size: 1em;
    margin-left: 0;
}

/* Color variants — single custom-property override each */
.metric-chip-success[b-3zyarf2fvi] {
    --chip-color: var(--bs-success);
}

.metric-chip-info[b-3zyarf2fvi] {
    --chip-color: var(--bs-info);
}

.metric-chip-warning[b-3zyarf2fvi] {
    --chip-color: var(--bs-warning);
}

.metric-chip-danger[b-3zyarf2fvi] {
    --chip-color: var(--bs-danger);
}

/* "Sans tél." chip is an alert, not a filter — fill by default to break the row rhythm */
.metric-chip-danger:not(.active)[b-3zyarf2fvi] {
    background: var(--color-danger-bg, #fdf0f0);
    box-shadow: 0 0 0 3px rgba(184, 64, 64, 0.08);
}

.metric-chip-danger:not(.active):hover[b-3zyarf2fvi] {
    background: #fbe2e2;
}

/* Visual separator between the alert chip and the regular filter chips */
.metric-chip-danger + .metric-chip[b-3zyarf2fvi] {
    margin-left: 0.5rem;
    position: relative;
}

.metric-chip-danger + .metric-chip[b-3zyarf2fvi]::before {
    content: "";
    position: absolute;
    left: -0.5rem;
    top: 25%;
    bottom: 25%;
    width: 1px;
    background: var(--color-border, #e8e2d8);
}

.metric-chip-secondary[b-3zyarf2fvi] {
    --chip-color: var(--bs-secondary);
}

/* ── Family grouping toggle ── */
.family-toggle-btn[b-3zyarf2fvi] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.family-toggle-btn i[b-3zyarf2fvi] {
    font-size: 0.9rem;
    transition: transform 0.2s ease;
}

.family-toggle-btn:hover i[b-3zyarf2fvi] {
    transform: scale(1.15);
}

/* ── Family group caption ── */
.family-group-caption[b-3zyarf2fvi] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.family-group-caption i[b-3zyarf2fvi] {
    color: var(--bs-primary);
    font-size: 1rem;
}

.family-group-caption .badge[b-3zyarf2fvi] {
    font-size: 0.7rem;
    font-weight: 600;
}

/* Hide the default group expand/collapse text, keep arrow */
[b-3zyarf2fvi] .e-groupcaption .e-templatecell {
    padding: 0.35rem 0.5rem;
}
/* /Components/Pages/Guests/ImportGuests.razor.rz.scp.css */
/* ===========================================
   ImportGuests Page – Scoped Styles
   =========================================== */

/* Stats row */
.import-stats[b-enfby14hz9] {
    display: flex;
    gap: var(--space-2);
    flex-shrink: 0;
}

.import-stat[b-enfby14hz9] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1 1 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface);
}

.import-stat-icon[b-enfby14hz9] {
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
}

.import-stat-body[b-enfby14hz9] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

.import-stat-value[b-enfby14hz9] {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 500;
    color: var(--color-dark);
}

.import-stat-label[b-enfby14hz9] {
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--color-text-muted);
}

.import-stat--success[b-enfby14hz9] {
    background: var(--color-success-bg);
    border-color: var(--color-success-bg);
}
.import-stat--success .import-stat-icon[b-enfby14hz9] {
    background: var(--color-success);
    color: var(--color-surface);
}
.import-stat--success .import-stat-value[b-enfby14hz9],
.import-stat--success .import-stat-label[b-enfby14hz9] {
    color: var(--color-success);
}

.import-stat--danger[b-enfby14hz9] {
    background: var(--color-danger-bg);
    border-color: var(--color-danger-bg);
}
.import-stat--danger .import-stat-icon[b-enfby14hz9] {
    background: var(--color-danger);
    color: var(--color-surface);
}
.import-stat--danger .import-stat-value[b-enfby14hz9],
.import-stat--danger .import-stat-label[b-enfby14hz9] {
    color: var(--color-danger);
}

.import-stat--info[b-enfby14hz9] {
    background: var(--color-info-bg);
    border-color: var(--color-info-bg);
}
.import-stat--info .import-stat-icon[b-enfby14hz9] {
    background: var(--color-info);
    color: var(--color-surface);
}
.import-stat--info .import-stat-value[b-enfby14hz9],
.import-stat--info .import-stat-label[b-enfby14hz9] {
    color: var(--color-info);
}

/* Grid toolbar */
.import-grid-toolbar[b-enfby14hz9] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

/* Collapsible sections */
.import-collapsible[b-enfby14hz9] {
    flex-shrink: 0;
}

.import-collapse-toggle[b-enfby14hz9] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    text-align: left;
    padding: var(--space-2) var(--space-3);
    background: var(--color-warning-bg);
    color: var(--color-warning);
    font-weight: 600;
    font-size: var(--text-sm);
    border: 0;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out);
}

.import-collapse-toggle:hover[b-enfby14hz9] {
    background: color-mix(in srgb, var(--color-warning-bg) 80%, var(--color-warning) 20%);
}

.import-collapse-chevron[b-enfby14hz9] {
    font-size: 0.7rem;
    transition: transform var(--duration-fast) var(--ease-out);
    opacity: 0.7;
}

[aria-expanded="true"] .import-collapse-chevron[b-enfby14hz9] {
    transform: rotate(180deg);
}

/* Sidebar header */
.import-sidebar-header[b-enfby14hz9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}

/* Grid container */
.import-grid-container[b-enfby14hz9] {
    min-height: 200px;
}

.import-grid-inner[b-enfby14hz9] {
    min-height: 0;
}

/* ── SfGrid cell overrides ── */

/* Compact Syncfusion controls inside grid cells */
[b-enfby14hz9] .e-grid .import-cell-type .e-input-group,
[b-enfby14hz9] .e-grid .import-cell-phone .e-input-group,
[b-enfby14hz9] .e-grid .import-cell-cercles .e-control-wrapper {
    margin-bottom: 0 !important;
}

[b-enfby14hz9] .e-grid .import-cell-cercles .e-multi-select-wrapper {
    min-height: 30px !important;
}

/* Type warning highlight */
[b-enfby14hz9] .e-grid .e-warning .e-input-group {
    border-color: var(--bs-danger) !important;
    box-shadow: 0 0 0 0.15rem rgba(var(--bs-danger-rgb), 0.25);
}

/* Invalid row tint */
[b-enfby14hz9] .e-grid .e-row.import-row-invalid {
    background-color: rgba(var(--bs-danger-rgb), 0.06) !important;
}

[b-enfby14hz9] .e-grid .e-row.import-row-invalid td {
    border-left-color: var(--bs-danger) !important;
}

/* Deselected row opacity */
[b-enfby14hz9] .e-grid .e-row.import-row-deselected {
    opacity: 0.55;
}

/* Duplicate row styling */
[b-enfby14hz9] .e-grid .e-row.import-row-duplicate {
    background-color: rgba(var(--bs-warning-rgb), 0.08) !important;
    opacity: 0.65;
}

/* Ensure editable cells allow overflow for dropdowns */
[b-enfby14hz9] .e-grid .e-rowcell {
    overflow: visible !important;
}

/* Phone component in grid: tighter layout */
[b-enfby14hz9] .e-grid .import-cell-phone {
    min-width: 200px;
}

/* ── Family badge pill ── */
.import-family-badge[b-enfby14hz9] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--badge-color);
    background: color-mix(in srgb, var(--badge-color) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--badge-color) 30%, transparent);
}

.import-family-member[b-enfby14hz9] {
    color: var(--badge-color);
    opacity: 0.7;
    padding-left: 0.5rem;
}

/* ── Update row styling ── */
[b-enfby14hz9] .e-grid .e-row.import-row-update {
    background-color: rgba(var(--bs-info-rgb), 0.06) !important;
}

[b-enfby14hz9] .e-grid .e-row.import-row-update td {
    border-left-color: var(--bs-info) !important;
}

/* ── Detail button in grid ── */
.import-detail-btn[b-enfby14hz9],
[b-enfby14hz9] .import-detail-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    font-size: 0.9rem;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.import-detail-btn:hover[b-enfby14hz9],
[b-enfby14hz9] .import-detail-btn:hover {
    background: var(--color-surface-alt);
    color: var(--color-dark);
}

.import-detail-btn:focus-visible[b-enfby14hz9],
[b-enfby14hz9] .import-detail-btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

/* ── Detail panel (fixed sidebar) ── */
.import-sidebar-panel[b-enfby14hz9] {
    position: fixed;
    top: 3.5rem;
    right: 0;
    width: 380px;
    height: calc(100vh - 3.5rem);
    background: var(--color-surface);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
    z-index: 1050;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.25s ease;
}

.import-sidebar-panel.open[b-enfby14hz9] {
    transform: translateX(0);
}

.import-sidebar-backdrop[b-enfby14hz9] {
    position: fixed;
    inset: 0;
    z-index: 1040;
}

@media (max-width: 991.98px) {
    .import-sidebar-panel[b-enfby14hz9] {
        top: 0;
        height: 100%;
        width: 100%;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
.dashboard-header-stats[b-nk37wfyglu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-2);
}

.dashboard-header-stats span[b-nk37wfyglu] {
    white-space: nowrap;
}

.dashboard-header-link[b-nk37wfyglu] {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
}

.dashboard-header-link:hover[b-nk37wfyglu] {
    color: var(--color-accent);
}

@media (max-width: 576px) {
    .dashboard-header-stats[b-nk37wfyglu] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-1);
    }
}

/* Auto-packing dashboard grid — CSS multi-column fills columns top-to-bottom
   without leaving empty gaps when card heights differ. */
.dashboard-grid[b-nk37wfyglu] {
    column-width: 24rem;
    column-gap: var(--space-4);
}

.dashboard-grid-item[b-nk37wfyglu] {
    break-inside: avoid;
    margin-bottom: var(--space-4);
    /* inline-block prevents some browsers from splitting the card across columns */
    display: inline-block;
    width: 100%;
}
/* /Components/Pages/Layout/Components/AntiAffinityOverviewContent.razor.rz.scp.css */
.anti-affinity-overview-section__title[b-b735uhmj3h] {
    display: flex;
    align-items: center;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: var(--space-4) 0 var(--space-2);
}

.anti-affinity-overview-section__title:first-child[b-b735uhmj3h] {
    margin-top: 0;
}

.anti-affinity-overview-section__count[b-b735uhmj3h] {
    margin-left: auto;
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: none;
    letter-spacing: normal;
}

.anti-affinity-overview-list[b-b735uhmj3h] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.anti-affinity-overview-row[b-b735uhmj3h] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.anti-affinity-overview-row--violated[b-b735uhmj3h] {
    border: 1px solid var(--color-warning-bg);
    border-left: 3px solid var(--color-warning);
    background: var(--color-warning-bg);
}

.anti-affinity-overview-row__icon[b-b735uhmj3h] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    font-size: var(--text-md);
}

.anti-affinity-overview-row--violated .anti-affinity-overview-row__icon[b-b735uhmj3h] {
    background: var(--color-surface);
    color: var(--color-warning);
}

.anti-affinity-overview-row__info[b-b735uhmj3h] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    min-width: 0;
    flex: 1;
}

.anti-affinity-overview-row__pair[b-b735uhmj3h] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    min-width: 0;
}

.anti-affinity-overview-row__name[b-b735uhmj3h] {
    font-weight: 600;
    color: var(--color-dark);
    text-decoration: none;
}

.anti-affinity-overview-row__name:hover[b-b735uhmj3h] {
    color: var(--color-accent);
    text-decoration: underline;
}

.anti-affinity-overview-row__separator[b-b735uhmj3h] {
    color: var(--color-text-muted);
}

.anti-affinity-overview-row__table[b-b735uhmj3h] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.anti-affinity-overview-row__table i[b-b735uhmj3h] {
    color: var(--color-warning);
}
/* /Components/Pages/Layout/Konva/ReceptionLayoutKonva.razor.rz.scp.css */
.kv-shell[b-lp4in0irpx] {
    position: relative;
    display: grid;
    grid-template-columns: 260px 1fr 280px;
    height: 100%;
    background: var(--color-bg);
    overflow: hidden;
}

.kv-sidebar[b-lp4in0irpx],
.kv-properties[b-lp4in0irpx] {
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.kv-properties[b-lp4in0irpx] {
    border-right: none;
    border-left: 1px solid var(--color-border);
}

.kv-sidebar-head[b-lp4in0irpx] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-dark);
}

.kv-sidebar-head .wv-badge[b-lp4in0irpx] {
    margin-left: auto;
}

.kv-palette[b-lp4in0irpx] {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.kv-palette-item[b-lp4in0irpx] {
    flex: 1 1 60px;
    min-width: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: var(--space-1);
    padding: var(--space-2);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    line-height: 1.25;
    color: var(--color-text);
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    transition: border-color var(--duration-fast) var(--ease-out),
        background-color var(--duration-fast) var(--ease-out);
}

.kv-palette-item > span:last-child[b-lp4in0irpx] { display: block; width: 100%; }

.kv-palette-item:hover[b-lp4in0irpx] {
    border-color: var(--color-accent);
    background: var(--color-surface-alt);
}

.kv-palette-item:active[b-lp4in0irpx] {
    cursor: grabbing;
}

.kv-palette-icon[b-lp4in0irpx] {
    width: 28px;
    height: 28px;
    border: 1.5px solid var(--color-text-muted);
    background: var(--color-bg);
}

.kv-palette-icon.is-round[b-lp4in0irpx] { border-radius: var(--radius-full); }

.kv-palette-icon.is-rect[b-lp4in0irpx] {
    border-radius: var(--radius-sm);
    height: 18px;
    margin: 5px 0;
}

.kv-palette-glyph[b-lp4in0irpx] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--color-text-muted);
}

.kv-palette-item:hover .kv-palette-glyph[b-lp4in0irpx] { color: var(--color-accent); }

.kv-sidebar-search[b-lp4in0irpx] {
    padding: var(--space-3) var(--space-4);
}

.kv-sidebar-search input[b-lp4in0irpx] {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    background: var(--color-surface);
    color: var(--color-text);
}

.kv-sidebar-search input:focus[b-lp4in0irpx] {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: var(--shadow-focus);
}

.kv-sidebar-group-filter[b-lp4in0irpx] {
    padding: 0 var(--space-4) var(--space-3);
}

.kv-sidebar-group-filter[b-lp4in0irpx]  .e-multiselect {
    width: 100%;
}


.kv-sidebar-filters[b-lp4in0irpx] {
    display: flex;
    align-items: stretch;
    gap: 2px;
    padding: 0 var(--space-3) var(--space-3);
    background: var(--color-surface);
}

.kv-filter-pill[b-lp4in0irpx] {
    flex: 1;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: var(--space-2) var(--space-1);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: background-color var(--duration-fast) var(--ease-out),
        border-color var(--duration-fast) var(--ease-out),
        color var(--duration-fast) var(--ease-out);
}

.kv-filter-pill:first-child[b-lp4in0irpx] {
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
}

.kv-filter-pill:last-child[b-lp4in0irpx] {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
}

.kv-filter-pill + .kv-filter-pill[b-lp4in0irpx] {
    border-left: none;
}

.kv-filter-pill:hover:not(.is-active)[b-lp4in0irpx] {
    background: var(--color-surface-alt);
    color: var(--color-dark);
}

.kv-filter-pill.is-active[b-lp4in0irpx] {
    background: var(--color-surface);
    border-color: var(--color-border-strong);
    color: var(--color-dark);
    box-shadow: inset 0 -2px 0 0 var(--color-accent);
}

.kv-filter-pill-count[b-lp4in0irpx] {
    font-size: 10px;
    line-height: 1;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.kv-filter-pill.is-active .kv-filter-pill-count[b-lp4in0irpx] { color: var(--color-accent); font-weight: 600; }


.kv-participants[b-lp4in0irpx] {
    list-style: none;
    margin: 0;
    padding: var(--space-2) var(--space-2) var(--space-4);
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kv-participant[b-lp4in0irpx] {
    position: relative;
    display: grid;
    grid-template-columns: 12px 32px 1fr auto;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-2) var(--space-2) 0;
    border-radius: var(--radius-md);
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    background: transparent;
    border: 1px solid transparent;
    transition: background-color var(--duration-fast) var(--ease-out),
        border-color var(--duration-fast) var(--ease-out);
}

.kv-participant:hover[b-lp4in0irpx] {
    background: var(--color-surface-alt);
    border-color: var(--color-border);
}

.kv-participant:active[b-lp4in0irpx] { cursor: grabbing; }

/* Drag handle: visible on hover, gives clear affordance */
.kv-participant-drag[b-lp4in0irpx] {
    color: var(--color-border-strong);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-out);
}

.kv-participant:hover .kv-participant-drag[b-lp4in0irpx] { opacity: 1; }
.kv-participant:hover .kv-participant-drag i[b-lp4in0irpx] { color: var(--color-text-muted); }

/* Seated: subtle accent strip + slightly muted */
.kv-participant.is-seated .kv-participant-avatar[b-lp4in0irpx] {
    box-shadow: 0 0 0 2px var(--color-accent-pale);
}

/* Declined: barred name, very faded */
.kv-participant.is-declined[b-lp4in0irpx] {
    opacity: 0.55;
    cursor: not-allowed;
}

.kv-participant.is-declined .kv-participant-name[b-lp4in0irpx] {
    text-decoration: line-through;
    text-decoration-color: var(--color-text-muted);
    text-decoration-thickness: 1px;
}

.kv-participant.is-declined .kv-participant-avatar[b-lp4in0irpx] {
    filter: grayscale(1);
    opacity: 0.7;
}

.kv-participant.is-declined:active[b-lp4in0irpx] { cursor: not-allowed; }

/* Avatar */
.kv-participant-avatar[b-lp4in0irpx] {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-dark);
    flex-shrink: 0;
    position: relative;
}

/* Tiny role marker bottom-right of the avatar for non-primary guests */
.kv-participant-role-dot[b-lp4in0irpx] {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    border-radius: var(--radius-full);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: var(--color-text-muted);
    line-height: 1;
}

.kv-participant-role-dot--child[b-lp4in0irpx] { color: var(--color-info); }
.kv-participant-role-dot--plusone[b-lp4in0irpx] { color: var(--color-text-muted); }
.kv-participant-role-dot--married[b-lp4in0irpx] { color: var(--color-accent); }

/* Text block */
.kv-participant-text[b-lp4in0irpx] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.kv-participant-name[b-lp4in0irpx] {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kv-participant-meta[b-lp4in0irpx] {
    font-size: 11px;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Status side: pill (table or "À placer") with optional unassign cross */
.kv-participant-status[b-lp4in0irpx] {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.kv-participant-pill[b-lp4in0irpx] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kv-participant-pill--seated[b-lp4in0irpx] {
    background: var(--color-accent-pale);
    color: var(--color-dark);
    border: 1px solid var(--color-accent-soft);
}

.kv-participant-pill--unseated[b-lp4in0irpx] {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.kv-participant-pill--declined[b-lp4in0irpx] {
    background: transparent;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}

.kv-participant-unassign[b-lp4in0irpx] {
    background: none;
    border: none;
    color: var(--color-text-muted);
    padding: 0 var(--space-1) 0 var(--space-1);
    margin-left: 2px;
    cursor: pointer;
    display: none;
    align-items: center;
    font-size: 14px;
    line-height: 1;
    border-radius: var(--radius-full);
}

.kv-participant:hover .kv-participant-unassign[b-lp4in0irpx] { display: inline-flex; }

.kv-participant-unassign:hover[b-lp4in0irpx] { color: var(--color-danger); }

/* Empty state in the participant list */
.kv-participants-empty[b-lp4in0irpx] {
    padding: var(--space-8) var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.kv-participants-empty i[b-lp4in0irpx] {
    font-size: 28px;
    color: var(--color-border-strong);
}

.kv-canvas-area[b-lp4in0irpx] {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.kv-toolbar[b-lp4in0irpx] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.kv-stats[b-lp4in0irpx] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text);
}

.kv-stats strong[b-lp4in0irpx] { color: var(--color-dark); font-weight: 600; }

.kv-stats-sep[b-lp4in0irpx] { width: 1px; height: 16px; background: var(--color-border); }

.kv-summary[b-lp4in0irpx] {
    display: flex;
    /* Align every tile by its bottom edge so all <strong> values sit on
       the same horizontal line, regardless of label length wrapping. */
    align-items: end;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding: var(--space-1) 0;
}

.kv-summary-item[b-lp4in0irpx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
    min-width: 44px;
    /* Reset <button>-default styling so the Anti-affinités tile (which is
       a button to be clickable) behaves identically to the plain <div>
       tiles next to it — no UA padding, no font inheritance break. */
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: inherit;
}

.kv-summary-label[b-lp4in0irpx] {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.kv-summary-item strong[b-lp4in0irpx] {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--color-dark);
    font-variant-numeric: tabular-nums;
    /* display:block + fixed line-height keeps every <strong> the same
       height AND lets the natural text baseline align across cells.
       Flex centering aligns the WHOLE line box, which shifts visually
       when the line contains a tall glyph (✔/❌) next to digits — the
       baseline approach keeps the digits themselves anchored. */
    display: block;
    text-align: center;
    line-height: 1.5;
}

/* Unicode ✔/❌ glyphs render taller than digits, so their visual
   center sits above the digit baseline. Shrink and push them down
   slightly so they share the digits' visual line. */
.kv-summary-glyph[b-lp4in0irpx] {
    font-size: 0.85em;
    display: inline-block;
    vertical-align: -0.05em;
}

.kv-summary-accent[b-lp4in0irpx] { color: var(--color-accent) !important; }
.kv-summary-ok[b-lp4in0irpx] { color: var(--color-success) !important; }
.kv-summary-warn[b-lp4in0irpx] { color: var(--color-danger) !important; }

.kv-summary-sep[b-lp4in0irpx] {
    width: 1px;
    height: 28px;
    background: var(--color-border);
}

.kv-summary-clickable[b-lp4in0irpx] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.kv-summary-clickable:hover .kv-summary-label[b-lp4in0irpx] { color: var(--color-dark); }

.kv-actions[b-lp4in0irpx] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.kv-action[b-lp4in0irpx] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-dark);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
        border-color var(--duration-fast) var(--ease-out);
}

.kv-action:hover[b-lp4in0irpx] {
    background: var(--color-surface-alt);
    border-color: var(--color-accent);
}

.kv-action-primary[b-lp4in0irpx] {
    background: var(--color-accent);
    color: var(--color-dark);
    border-color: var(--color-accent);
}

.kv-action-primary:hover[b-lp4in0irpx] {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
}

.kv-action-danger[b-lp4in0irpx] {
    background: var(--color-danger-bg);
    color: var(--color-danger);
    border-color: var(--color-danger);
}

.kv-action-danger:hover[b-lp4in0irpx] {
    background: var(--color-danger);
    color: var(--color-surface);
}

.kv-action[disabled][b-lp4in0irpx] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Both clusters float over the canvas (.kv-stage-wrap is position:relative).
   Shadow is legitimate here — DESIGN.md reserves it for real floating
   elements, which these are. Pill shape, surface bg, accent on hover. */
.kv-history-controls[b-lp4in0irpx],
.kv-zoom-controls[b-lp4in0irpx] {
    position: absolute;
    bottom: var(--space-4);
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-md);
}

.kv-history-controls[b-lp4in0irpx] { left: var(--space-4); }
.kv-zoom-controls[b-lp4in0irpx] { right: var(--space-4); }

/* Circular icon buttons so the hover highlight matches the pill geometry —
   a rounded-rect highlight inside a full-round pill reads as misaligned. */
.kv-history-controls button[b-lp4in0irpx],
.kv-zoom-controls button:not(.kv-zoom-value)[b-lp4in0irpx] {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    border: 0;
    background: transparent;
    color: var(--color-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.kv-history-controls button:hover:not([disabled])[b-lp4in0irpx],
.kv-zoom-controls button:not(.kv-zoom-value):hover[b-lp4in0irpx] { background: var(--color-accent-pale); color: var(--color-accent-hover); }

.kv-history-controls button[disabled][b-lp4in0irpx] { opacity: 0.4; cursor: not-allowed; }

.kv-zoom-value[b-lp4in0irpx] {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    min-width: 44px;
    text-align: center;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    padding: var(--space-1) var(--space-2);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.kv-zoom-value:hover[b-lp4in0irpx] { background: var(--color-accent-pale); color: var(--color-dark); }

.kv-stage-wrap[b-lp4in0irpx] {
    flex: 1;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle, rgba(43, 31, 31, 0.06) 1px, transparent 1px) 0 0 / 24px 24px,
        var(--color-bg);
    touch-action: none;
}

.kv-stage-host[b-lp4in0irpx] {
    position: absolute;
    inset: 0;
    outline: none;
    touch-action: none;
}

.kv-stage-host:focus[b-lp4in0irpx],
.kv-stage-host:focus-visible[b-lp4in0irpx] { outline: none; }

.kv-stage-wrap.kv-drop-target[b-lp4in0irpx]::before {
    content: '';
    position: absolute;
    inset: var(--space-3);
    border: 2px dashed var(--color-accent);
    border-radius: var(--radius-md);
    pointer-events: none;
    z-index: 5;
}

.kv-loading[b-lp4in0irpx] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    background: rgba(250, 248, 245, 0.85);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.kv-properties-head[b-lp4in0irpx] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-dark);
}

.kv-properties-body[b-lp4in0irpx] {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    overflow-y: auto;
    /* Take up remaining vertical space so the Outils admin block below
       is pinned to the bottom of the panel. */
    flex: 1 1 auto;
    min-height: 0;
}

.kv-prop-row[b-lp4in0irpx] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
    font-size: var(--text-sm);
}

.kv-prop-row span[b-lp4in0irpx] { color: var(--color-text-muted); }
.kv-prop-row strong[b-lp4in0irpx] { color: var(--color-dark); font-weight: 600; }

.kv-prop-note[b-lp4in0irpx] {
    font-size: var(--text-xs);
    color: var(--color-accent);
    padding: var(--space-2);
    background: var(--color-accent-pale);
    border-radius: var(--radius-sm);
}

.kv-prop-empty[b-lp4in0irpx] {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    font-style: italic;
}

.kv-prop-action[b-lp4in0irpx] {
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-danger);
    background: var(--color-danger-bg);
    color: var(--color-danger);
    font-size: var(--text-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.kv-prop-action:hover[b-lp4in0irpx] { background: var(--color-danger); color: var(--color-surface); }


.kv-prop-seats[b-lp4in0irpx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
}

.kv-prop-seats-head[b-lp4in0irpx] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.kv-prop-seats-head i[b-lp4in0irpx] { font-size: 14px; }

.kv-prop-seats-count[b-lp4in0irpx] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    padding: 0 6px;
    height: 18px;
    border-radius: var(--radius-pill);
    background: var(--color-accent-pale);
    color: var(--color-dark);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    text-transform: none;
    letter-spacing: 0;
}

.kv-prop-seats-list[b-lp4in0irpx] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 280px;
    overflow-y: auto;
}

.kv-prop-seat-item[b-lp4in0irpx] {
    display: grid;
    grid-template-columns: 22px 26px 1fr auto;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-1) var(--space-1) 0;
    border-radius: var(--radius-md);
    transition: background-color var(--duration-fast) var(--ease-out);
}

.kv-prop-seat-item:hover[b-lp4in0irpx] { background: var(--color-surface-alt); }

.kv-prop-seat-num[b-lp4in0irpx] {
    font-size: 11px;
    color: var(--color-text-muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.kv-prop-seat-avatar[b-lp4in0irpx] {
    position: relative;
    width: 26px;
    height: 26px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    color: var(--color-dark);
    flex-shrink: 0;
}

.kv-prop-seat-avatar .kv-participant-role-dot[b-lp4in0irpx] {
    width: 12px;
    height: 12px;
    font-size: 8px;
    bottom: -1px;
    right: -2px;
}

.kv-prop-seat-name[b-lp4in0irpx] {
    font-size: var(--text-sm);
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kv-prop-seat-unassign[b-lp4in0irpx] {
    background: none;
    border: none;
    color: var(--color-text-muted);
    padding: 0 var(--space-1);
    cursor: pointer;
    display: none;
    align-items: center;
    font-size: 14px;
    line-height: 1;
    border-radius: var(--radius-full);
}

.kv-prop-seat-item:hover .kv-prop-seat-unassign[b-lp4in0irpx] { display: inline-flex; }

.kv-prop-seat-unassign:hover[b-lp4in0irpx] { color: var(--color-danger); }

.kv-prop-seats-empty[b-lp4in0irpx] {
    margin: 0;
    padding: var(--space-3) 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    font-style: italic;
    text-align: center;
}

.kv-prop-guest[b-lp4in0irpx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-2);
}

.kv-prop-guest-name[b-lp4in0irpx] {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--color-dark);
    overflow: hidden;
    text-overflow: ellipsis;
}

.kv-prop-sub[b-lp4in0irpx] {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.kv-prop-badges[b-lp4in0irpx] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-top: var(--space-1);
}

.kv-prop-meals[b-lp4in0irpx] {
    margin-top: var(--space-2);
}

.kv-prop-meals-label[b-lp4in0irpx] {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.kv-meal-chip[b-lp4in0irpx] {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-2);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-surface);
}

.kv-assign-search[b-lp4in0irpx] {
    position: relative;
    margin-top: var(--space-2);
}

.kv-assign-search i[b-lp4in0irpx] {
    position: absolute;
    top: 50%;
    left: var(--space-2);
    transform: translateY(-50%);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    pointer-events: none;
}

.kv-assign-search input[b-lp4in0irpx] {
    width: 100%;
    box-sizing: border-box;
    padding: var(--space-2) var(--space-2) var(--space-2) calc(var(--space-2) * 2 + 16px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    background: var(--color-surface);
    color: var(--color-text);
}

.kv-assign-search input:focus[b-lp4in0irpx] {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: var(--shadow-focus);
}

.kv-assign-list[b-lp4in0irpx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: var(--space-2);
    max-height: 360px;
    overflow-y: auto;
}

.kv-assign-item[b-lp4in0irpx] {
    display: grid;
    grid-template-columns: 32px 1fr;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    cursor: pointer;
    text-align: left;
    transition: background-color var(--duration-fast) var(--ease-out),
        border-color var(--duration-fast) var(--ease-out);
}

.kv-assign-item:hover[b-lp4in0irpx] {
    background: var(--color-surface-alt);
    border-color: var(--color-border);
}

.kv-assign-item .kv-participant-avatar[b-lp4in0irpx] {
    width: 32px;
    height: 32px;
}

.kv-assign-item .kv-participant-text[b-lp4in0irpx] { min-width: 0; }

.kv-assign-empty[b-lp4in0irpx] {
    margin: var(--space-2) 0;
    padding: var(--space-4) 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
}

.kv-assign-empty i[b-lp4in0irpx] { font-size: 20px; color: var(--color-border-strong); }

.kv-assign-more[b-lp4in0irpx] {
    margin: var(--space-1) 0 0;
    text-align: center;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.kv-properties-empty[b-lp4in0irpx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-12) var(--space-4);
    color: var(--color-text-muted);
    text-align: center;
    flex: 1;
}

.kv-properties-empty i[b-lp4in0irpx] { font-size: 2rem; opacity: 0.5; }

.kv-fieldset[b-lp4in0irpx] {
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.kv-fieldset[disabled][b-lp4in0irpx] { opacity: 0.55; }

.kv-field[b-lp4in0irpx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.kv-field input[type="text"][b-lp4in0irpx],
.kv-field input[type="number"][b-lp4in0irpx] {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--color-text);
    background: var(--color-surface);
}

.kv-field input:focus[b-lp4in0irpx] {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: var(--shadow-focus);
}

.kv-field-row[b-lp4in0irpx] { display: flex; gap: var(--space-2); }
.kv-field-row .kv-field[b-lp4in0irpx] { flex: 1 1 0; min-width: 0; }

.kv-field-checkbox[b-lp4in0irpx] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text);
    cursor: pointer;
}

.kv-admin[b-lp4in0irpx] {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-alt);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    /* Stay pinned to the bottom of the panel regardless of how short the
       properties-body content is. */
    flex-shrink: 0;
    margin-top: auto;
}

.kv-admin-head[b-lp4in0irpx] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.kv-admin-count[b-lp4in0irpx] { font-weight: 400; }

.kv-admin-buttons[b-lp4in0irpx] { display: flex; flex-wrap: wrap; gap: var(--space-1); }

.kv-admin-btn[b-lp4in0irpx] {
    flex: 1 1 auto;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--text-xs);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    white-space: nowrap;
}

.kv-admin-btn:hover:not([disabled])[b-lp4in0irpx] {
    background: var(--color-surface-alt);
    border-color: var(--color-accent);
}

.kv-admin-btn[disabled][b-lp4in0irpx] { opacity: 0.4; cursor: not-allowed; }

.kv-admin-btn.is-danger[b-lp4in0irpx] { color: var(--color-danger); border-color: var(--color-danger); }
.kv-admin-btn.is-danger:hover:not([disabled])[b-lp4in0irpx] { background: var(--color-danger-bg); }

.kv-admin-log[b-lp4in0irpx] {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 180px;
    overflow-y: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.kv-admin-log-line[b-lp4in0irpx] {
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    gap: var(--space-2);
}

.kv-admin-log-line:last-child[b-lp4in0irpx] { border-bottom: none; }

.kv-admin-log-time[b-lp4in0irpx] { color: var(--color-text-muted); font-family: var(--font-mono); flex-shrink: 0; }
.kv-admin-log-tag[b-lp4in0irpx] { font-weight: 600; color: var(--color-accent); flex-shrink: 0; min-width: 48px; }
.kv-admin-log-body[b-lp4in0irpx] { flex: 1; min-width: 0; }

.kv-admin-log-empty[b-lp4in0irpx] {
    padding: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-style: italic;
    text-align: center;
}

/* ── Mobile off-canvas sidebars ─────────────────────────────────
 * On screens ≤ 992 px both sidebars become fixed off-canvas drawers
 * that slide in from the left / right edges. Two vertical toggle
 * buttons pinned to the viewport edges open them; a backdrop overlay
 * closes them on click. The desktop 3-column grid collapses to a
 * single column so the canvas takes full width. */

.kv-sidebar-toggle[b-lp4in0irpx] {
    display: none;
    position: absolute;
    z-index: var(--z-overlay);
    top: 50%;
    padding: var(--space-3) var(--space-2);
    gap: var(--space-2);
    background: var(--color-accent);
    color: var(--color-dark);
    border: none;
    cursor: pointer;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    writing-mode: vertical-lr;
    white-space: nowrap;
    transform: translateY(-50%);
    box-shadow: 0 4px 12px rgba(43, 31, 31, 0.16);
}

.kv-sidebar-toggle--left[b-lp4in0irpx] {
    left: 0;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* Right toggle: same reading direction as the left one (head tilted right
   to read top-to-bottom). The earlier 180° rotation flipped the glyphs
   upside down which looked broken. */
.kv-sidebar-toggle--right[b-lp4in0irpx] {
    right: 0;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.kv-sidebar-toggle:hover[b-lp4in0irpx] { background: var(--color-accent-hover); }

.kv-sidebar-toggle i[b-lp4in0irpx] {
    font-size: var(--text-md);
}

.kv-sidebar-backdrop[b-lp4in0irpx] {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(43, 31, 31, 0.45);
    z-index: var(--z-overlay);
}

.kv-sidebar-backdrop.is-open[b-lp4in0irpx] { display: block; }

.kv-sidebar-close[b-lp4in0irpx] {
    display: none;
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    z-index: 2;
    font-size: var(--text-md);
}

.kv-sidebar-close:hover[b-lp4in0irpx] { color: var(--color-dark); background: var(--color-surface-alt); }

@media (max-width: 1800px) {
    .kv-shell[b-lp4in0irpx] { grid-template-columns: 1fr; }

    .kv-sidebar-toggle[b-lp4in0irpx] { display: inline-flex; align-items: center; }
    .kv-sidebar-close[b-lp4in0irpx] { display: inline-flex; }

    .kv-sidebar[b-lp4in0irpx],
    .kv-properties[b-lp4in0irpx] {
        position: absolute;
        top: 0;
        height: 100%;
        width: 320px;
        max-width: 85%;
        z-index: var(--z-modal);
        transition: transform var(--duration-normal) var(--ease-out);
        box-shadow: 0 8px 32px rgba(43, 31, 31, 0.2);
    }

    .kv-sidebar[b-lp4in0irpx] {
        left: 0;
        transform: translateX(-100%);
        border-right: 1px solid var(--color-border);
    }

    .kv-properties[b-lp4in0irpx] {
        right: 0;
        width: 280px;
        transform: translateX(100%);
        border-left: 1px solid var(--color-border);
    }

    .kv-sidebar.is-open[b-lp4in0irpx] { transform: translateX(0); }
    .kv-properties.is-open[b-lp4in0irpx] { transform: translateX(0); }

    /* Toggles hide themselves while their drawer is open (set via Razor). */
    .kv-sidebar-toggle.is-hidden[b-lp4in0irpx] { display: none; }
}

/* Very small screens: drawers fill the kv-shell width. */
@media (max-width: 575px) {
    .kv-sidebar[b-lp4in0irpx],
    .kv-properties[b-lp4in0irpx] { width: 100%; max-width: 100%; }
}
/* /Components/Pages/Memories.razor.rz.scp.css */
/* Gallery Page Styles — "Souvenirs" */

/* Gallery Grid - Responsive masonry-style */
.gallery-grid[b-g1jveb6zw1] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-4);
    padding: var(--space-2) 0;
}

@media (min-width: 768px) {
    .gallery-grid[b-g1jveb6zw1] {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: var(--space-5);
    }
}

@media (min-width: 1200px) {
    .gallery-grid[b-g1jveb6zw1] {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: var(--space-6);
    }
}

/* Gallery Item Card — flat style per DESIGN.md §4.3/§5.3 */
.gallery-item[b-g1jveb6zw1] {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    transition: border-color var(--duration-normal) var(--ease-out),
                box-shadow var(--duration-normal) var(--ease-out);
    cursor: pointer;
    aspect-ratio: 1;
}

.gallery-item:hover[b-g1jveb6zw1] {
    border-color: var(--color-border-strong);
}

.gallery-item.selected[b-g1jveb6zw1] {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-focus);
}

/* Media container */
.gallery-media-container[b-g1jveb6zw1] {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.gallery-image[b-g1jveb6zw1] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-normal) var(--ease-out);
}

.gallery-item:hover .gallery-image[b-g1jveb6zw1] {
    transform: scale(1.05);
}

/* Video background (poster frame) */
.gallery-video-bg[b-g1jveb6zw1] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-normal) var(--ease-out);
}

.gallery-item:hover .gallery-video-bg[b-g1jveb6zw1] {
    transform: scale(1.05);
}

/* Media placeholder for video/audio */
.gallery-media-placeholder[b-g1jveb6zw1] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: var(--z-base);
    pointer-events: none;
}

.gallery-media-video[b-g1jveb6zw1] {
    background: transparent;
}

.gallery-media-video i[b-g1jveb6zw1] {
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
    transition: transform var(--duration-normal) var(--ease-out);
}

.gallery-item:hover .gallery-media-video i[b-g1jveb6zw1] {
    transform: scale(1.15);
}

.gallery-media-audio[b-g1jveb6zw1] {
    background: var(--color-accent);
}

.gallery-media-audio i[b-g1jveb6zw1] {
    font-size: 3rem;
    color: var(--color-dark);
    margin-bottom: var(--space-2);
    animation: audioPulse-b-g1jveb6zw1 2s ease-in-out infinite;
}

.gallery-audio-label[b-g1jveb6zw1] {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-dark);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

@keyframes audioPulse-b-g1jveb6zw1 {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.08); opacity: 1; }
}

/* Overlay for hover effect */
.gallery-overlay[b-g1jveb6zw1] {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.7) 0%,
        rgba(0, 0, 0, 0.2) 40%,
        transparent 100%
    );
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-out);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--space-4);
    z-index: var(--z-base);
    pointer-events: none;
}

.gallery-item:hover .gallery-overlay[b-g1jveb6zw1],
.gallery-item.selected .gallery-overlay[b-g1jveb6zw1] {
    opacity: 1;
}

/* Checkbox styling */
.gallery-checkbox[b-g1jveb6zw1] {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    z-index: var(--z-base);
}

.gallery-checkbox input[type="checkbox"][b-g1jveb6zw1] {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    border: 2px solid rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-checkbox input[type="checkbox"]:hover[b-g1jveb6zw1] {
    border-color: white;
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.gallery-checkbox input[type="checkbox"]:checked[b-g1jveb6zw1] {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

.gallery-checkbox input[type="checkbox"]:checked[b-g1jveb6zw1]::after {
    content: '\2713';
    color: var(--color-dark);
    font-size: 14px;
    font-weight: bold;
}

/* Guest info badge */
.gallery-guest-badge[b-g1jveb6zw1] {
    font-size: var(--text-xs);
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.gallery-guest-badge i[b-g1jveb6zw1] {
    font-size: var(--text-sm);
}

/* View button on hover */
.gallery-view-btn[b-g1jveb6zw1] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
    background: rgba(255, 255, 255, 0.95);
    color: var(--color-dark);
    border: none;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: opacity var(--duration-normal) var(--ease-out),
                transform var(--duration-normal) var(--ease-out),
                background-color var(--duration-fast) var(--ease-out);
    cursor: pointer;
    box-shadow: var(--shadow-md);
    z-index: var(--z-base);
}

.gallery-item:hover .gallery-view-btn[b-g1jveb6zw1] {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* In selection mode the whole tile toggles selection, so the centred
   "view" button must not offer a conflicting action. */
.gallery-grid.selection-mode .gallery-view-btn[b-g1jveb6zw1] {
    display: none;
}

.gallery-view-btn:hover[b-g1jveb6zw1] {
    background: white;
    transform: translate(-50%, -50%) scale(1.1);
}

/* Infinite scroll sentinel */
.gallery-scroll-sentinel[b-g1jveb6zw1] {
    height: 1px;
    width: 100%;
}

.gallery-loading-indicator[b-g1jveb6zw1] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-8);
    color: var(--color-text-muted);
    font-size: var(--text-base);
}
/* /Components/Pages/Messages/Media.razor.rz.scp.css */
.media-preview-meta[b-f6egmxy8i4] {
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.media-preview-frame[b-f6egmxy8i4] {
    position: relative;
}

/* Shrink the frame to the image bounds so the click target matches the image
   pixels (only applied for images; video/audio fill the frame via their own
   width: 100% rules). */
.media-preview-frame--shrink[b-f6egmxy8i4] {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
}

/* Center the image/video within the preview frame; never upscale beyond the
   intrinsic size so the preview stays consistent with the lightbox. */
.media-preview-frame[b-f6egmxy8i4]  img,
.media-preview-frame[b-f6egmxy8i4]  video {
    display: block;
    margin: 0 auto;
}

/* Full-frame click target for images: any click on the image opens the lightbox */
.media-preview-click-target[b-f6egmxy8i4] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: background-color var(--duration-normal) var(--ease-out);
    z-index: var(--z-base);
}

.media-preview-click-target:hover[b-f6egmxy8i4],
.media-preview-click-target:focus-visible[b-f6egmxy8i4] {
    background: rgba(43, 31, 31, 0.18);
    outline: none;
}

/* Centered round badge — visual cue inside the click target (image case)
   and standalone interactive button (video/audio case) */
.media-preview-view-btn[b-f6egmxy8i4] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    border-radius: var(--radius-full);
    color: var(--color-dark);
    background: rgba(255, 255, 255, 0.95);
    font-size: 1.25rem;
    box-shadow: var(--shadow-md);
    opacity: 0;
    transition:
        opacity var(--duration-normal) var(--ease-out),
        transform var(--duration-normal) var(--ease-out),
        background-color var(--duration-fast) var(--ease-out);
}

/* Image case: badge revealed by hover/focus on the surrounding click target */
.media-preview-click-target:hover .media-preview-view-btn[b-f6egmxy8i4],
.media-preview-click-target:focus-visible .media-preview-view-btn[b-f6egmxy8i4] {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Video/audio case: badge IS the button, hover anywhere on the frame reveals it */
button.media-preview-view-btn[b-f6egmxy8i4] {
    cursor: pointer;
}

.media-preview-frame:hover > button.media-preview-view-btn[b-f6egmxy8i4],
button.media-preview-view-btn:focus-visible[b-f6egmxy8i4] {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

button.media-preview-view-btn:hover[b-f6egmxy8i4] {
    background: #fff;
    transform: translate(-50%, -50%) scale(1.1);
}

@media (min-width: 992px) {
    .media-preview-col[b-f6egmxy8i4]  .wv-card {
        position: sticky;
        top: 0;
    }
}

.wv-upload-zone[b-f6egmxy8i4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-6);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-accent-pale);
    text-align: center;
    transition:
        border-color var(--duration-fast) var(--ease-out),
        background-color var(--duration-fast) var(--ease-out);
}

.wv-upload-zone:hover[b-f6egmxy8i4] {
    border-color: var(--color-accent);
}

/* e-upload-drag-hover is added by Syncfusion on the DropArea while a file is dragged over it */
.wv-upload-zone.e-upload-drag-hover[b-f6egmxy8i4] {
    border-color: var(--color-accent);
    border-style: solid;
    background: var(--color-accent-soft);
}

.wv-upload-zone-icon[b-f6egmxy8i4] {
    font-size: var(--text-2xl);
    color: var(--color-accent);
}

.wv-upload-zone-hint[b-f6egmxy8i4] {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.wv-upload-zone[b-f6egmxy8i4]  .e-upload {
    width: 100%;
    margin: 0;
    border: none;
    background: transparent;
}

.wv-upload-zone[b-f6egmxy8i4]  .e-file-select-wrap {
    padding: 0;
}

/* The uploaded files are shown in the grid below, not inside the uploader */
.wv-upload-zone[b-f6egmxy8i4]  .e-upload-files {
    display: none;
}
/* /Components/Pages/Messages/Messages.razor.rz.scp.css */
.conversation-sidebar[b-zdjd2hv7ul] {
    overflow-y: auto;
    /* Desktop: fixed width */
    width: 350px;
    min-width: 300px;
}

/* Mobile: full width sidebar */
@media (max-width: 991.98px) {
    .conversation-sidebar[b-zdjd2hv7ul] {
        width: 100%;
        min-width: unset;
        transition: transform 0.3s ease;
    }

    /* Hide sidebar when conversation is selected on mobile */
    .conversation-sidebar.sidebar-hidden-mobile[b-zdjd2hv7ul] {
        display: none !important;
    }

    /* Hide main view when no conversation selected on mobile */
    .messages-main.main-hidden-mobile[b-zdjd2hv7ul] {
        display: none !important;
    }

    /* On mobile: hide messages-main by default, show only when conversation is active */
    .messages-main[b-zdjd2hv7ul] {
        display: none;
    }

    /* Show messages-main only when NOT hidden (i.e., conversation is selected) */
    .messages-main:not(.main-hidden-mobile)[b-zdjd2hv7ul] {
        display: flex;
    }
}

.messages-container[b-zdjd2hv7ul] {
    background-color: var(--color-surface-alt);
    min-height: 0;
}

.messages-container-loading[b-zdjd2hv7ul] {
    visibility: hidden;
}

.messages-main[b-zdjd2hv7ul] {
    min-height: 0;
}

.messages-wrapper[b-zdjd2hv7ul] {
    min-height: 0;
}

.conversation-header[b-zdjd2hv7ul] {
    background-color: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border);
}

.avatar-circle[b-zdjd2hv7ul] {
    font-size: 0.9rem;
    font-weight: 600;
}

.messages-loading-overlay[b-zdjd2hv7ul] {
    position: absolute;
    inset: 0;
    background: var(--color-surface-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    pointer-events: all;
    cursor: wait;
}

/* Main container height management */
.messages-container-root[b-zdjd2hv7ul] {
    /* Desktop: 56px top-row only (no mobile navbar) */
    height: calc(100vh - 56px);
    overflow: hidden;
}

/* Mobile: height managed by layout (content-fixed-height uses flex column) */
@media (max-width: 991.98px) {
    .messages-container-root[b-zdjd2hv7ul] {
        flex: 1;
        min-height: 0;
    }
}
/* /Components/Pages/Messages/TemplateMessagesDialog.razor.rz.scp.css */
:global(.template-messages-dialog.e-dialog)[b-49az4wdmxq]
{
    top: 4rem !important;
    transform: translate(-50%, 0) !important;
}

:global(.reschedule-dialog.e-dialog)[b-49az4wdmxq]
{
    top: 6rem !important;
    transform: translate(-50%, 0) !important;
}
/* /Components/Pages/Messages/Templates.razor.rz.scp.css */
.templates-grid-wrapper[b-knb9elypi2] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
/* /Components/Pages/RsvpSettings.razor.rz.scp.css */
/* Common padding wrapper for the SfTab nav and the rich text editor in the
   "Messages des pages RSVP" card. Wrapping both elements in the same
   container keeps the tab nav, its bottom border, and the editor toolbar
   visually aligned at the same horizontal extent. */
.rsvp-messages-tabs-inner[b-ajff6daep7] {
    padding: var(--space-3) var(--space-4) var(--space-4);
}
/* /Components/Pages/Schedule/Schedule.razor.rz.scp.css */
/* Board Container — fills the full .content height-fixed lane.
   Desktop has free scroll (no snap); mobile keeps mandatory snap
   further down for swipe UX.
   .schedule-board-wrap is a non-scrolling positioning context for the
   edge-shadow overlays; .schedule-board is the actual scrollport. */
.schedule-board-wrap[b-7kvy8y77fg] {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.schedule-board[b-7kvy8y77fg] {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: var(--space-4);
    scroll-behavior: smooth;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

/* Column */
.board-column[b-7kvy8y77fg] {
    flex-shrink: 0;
    min-width: 300px;
    max-width: 360px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Column Header */
.column-header[b-7kvy8y77fg] {
    padding: 0;
}

.column-header .date-badge[b-7kvy8y77fg] {
    background: linear-gradient(135deg, var(--color-accent-soft) 0%, var(--color-accent) 100%);
    border: none;
    color: var(--color-dark);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    padding: var(--space-2);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-2);
}

.column-header .date-week-day[b-7kvy8y77fg] {
    font-size: var(--text-xs);
    color: rgba(43, 31, 31, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: right;
}

.column-header .date-day[b-7kvy8y77fg] {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--color-dark);
    line-height: 1;
    text-align: center;
}

.column-header .date-month[b-7kvy8y77fg] {
    font-size: var(--text-xs);
    color: rgba(43, 31, 31, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
}

.column-header .date-info[b-7kvy8y77fg] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2);
    background: var(--color-surface-alt);
}

.column-header .date-info .text-muted[b-7kvy8y77fg] {
    font-size: var(--text-xs);
    line-height: 1;
    color: var(--color-text-muted);
}

/* Column Body — .column-body-wrap is the non-scrolling positioning
   context for the overlays; .column-body is the scrollport. */
.column-body-wrap[b-7kvy8y77fg] {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.column-body[b-7kvy8y77fg] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* Scroll shadows — gradient overlays on the non-scrolling wrappers,
   so they sit flush against the scrollport edges with no padding to
   fight. Painted ON TOP of the cards (z-index above content,
   pointer-events: none lets clicks through). Visibility is toggled by
   Schedule.razor.js, which adds the shadow-* classes on the wrapper
   only while content is actually hidden past that edge. */
.column-body-wrap[b-7kvy8y77fg]::before,
.column-body-wrap[b-7kvy8y77fg]::after,
.schedule-board-wrap[b-7kvy8y77fg]::before,
.schedule-board-wrap[b-7kvy8y77fg]::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 3;
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-out);
}

.column-body-wrap[b-7kvy8y77fg]::before,
.column-body-wrap[b-7kvy8y77fg]::after {
    left: 0;
    right: 0;
    height: 24px;
}

.column-body-wrap[b-7kvy8y77fg]::before {
    top: 0;
    background: linear-gradient(
        to bottom,
        rgba(var(--bs-dark-rgb), 0.26) 0%,
        rgba(var(--bs-dark-rgb), 0.17) 20%,
        rgba(var(--bs-dark-rgb), 0.095) 42%,
        rgba(var(--bs-dark-rgb), 0.035) 68%,
        rgba(var(--bs-dark-rgb), 0) 100%
    );
}

.column-body-wrap[b-7kvy8y77fg]::after {
    bottom: 0;
    background: linear-gradient(
        to top,
        rgba(var(--bs-dark-rgb), 0.26) 0%,
        rgba(var(--bs-dark-rgb), 0.17) 20%,
        rgba(var(--bs-dark-rgb), 0.095) 42%,
        rgba(var(--bs-dark-rgb), 0.035) 68%,
        rgba(var(--bs-dark-rgb), 0) 100%
    );
}

/* Span exactly the column height: the --side-shadow-* variables are
   measured in Schedule.razor.js (board padding + horizontal scrollbar
   both sit outside the columns). var(--space-4) is the pre-JS
   fallback (board padding only). */
.schedule-board-wrap[b-7kvy8y77fg]::before,
.schedule-board-wrap[b-7kvy8y77fg]::after {
    top: var(--side-shadow-top, var(--space-4));
    bottom: var(--side-shadow-bottom, var(--space-4));
    width: 28px;
}

.schedule-board-wrap[b-7kvy8y77fg]::before {
    left: 0;
    background: linear-gradient(
        to right,
        rgba(var(--bs-dark-rgb), 0.26) 0%,
        rgba(var(--bs-dark-rgb), 0.17) 20%,
        rgba(var(--bs-dark-rgb), 0.095) 42%,
        rgba(var(--bs-dark-rgb), 0.035) 68%,
        rgba(var(--bs-dark-rgb), 0) 100%
    );
}

.schedule-board-wrap[b-7kvy8y77fg]::after {
    right: 0;
    background: linear-gradient(
        to left,
        rgba(var(--bs-dark-rgb), 0.26) 0%,
        rgba(var(--bs-dark-rgb), 0.17) 20%,
        rgba(var(--bs-dark-rgb), 0.095) 42%,
        rgba(var(--bs-dark-rgb), 0.035) 68%,
        rgba(var(--bs-dark-rgb), 0) 100%
    );
}

.column-body-wrap.shadow-top[b-7kvy8y77fg]::before {
    opacity: 1;
}

.column-body-wrap.shadow-bottom[b-7kvy8y77fg]::after {
    opacity: 1;
}

.schedule-board-wrap.shadow-start[b-7kvy8y77fg]::before {
    opacity: 1;
}

.schedule-board-wrap.shadow-end[b-7kvy8y77fg]::after {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .column-body-wrap[b-7kvy8y77fg]::before,
    .column-body-wrap[b-7kvy8y77fg]::after,
    .schedule-board-wrap[b-7kvy8y77fg]::before,
    .schedule-board-wrap[b-7kvy8y77fg]::after {
        transition: none;
    }
}

/* Add Event Slot (within column, between cards) */
.add-event-slot[b-7kvy8y77fg] {
    position: relative;
    height: 8px;
    flex-shrink: 0;
}

.add-event-slot .add-event-btn[b-7kvy8y77fg] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

/* "+" at the end of a column body — appends an event after the last
   card. In normal flow (last child of .column-body) so it scrolls
   with the content and is reachable at the bottom of the column. */
.add-event-slot-end[b-7kvy8y77fg] {
    height: 28px;
}

.add-event-slot-end .add-event-btn[b-7kvy8y77fg] {
    opacity: 0.4;
}

.board-column:hover .add-event-slot-end .add-event-btn[b-7kvy8y77fg],
.add-event-slot-end:hover .add-event-btn[b-7kvy8y77fg] {
    opacity: 1;
}

/* Add Event Slot (between columns) */
.add-between-columns[b-7kvy8y77fg] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    align-self: center;
}

.add-event-btn[b-7kvy8y77fg] {
    border-radius: 50%;
    width: 24px;
    height: 24px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--color-border-strong);
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    opacity: 0;
    transition: all var(--duration-fast) var(--ease-out);
    font-size: var(--text-xs);
}

/* Bootstrap Icons set vertical-align: -0.125em on ::before to sit next
   to text; in this icon-only circular button it pushes the glyph low.
   Flex-centering the glyph ignores that offset. */
.add-event-btn .bi[b-7kvy8y77fg] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.add-event-slot:hover .add-event-btn[b-7kvy8y77fg] {
    opacity: 0.6;
}

.add-event-btn:hover[b-7kvy8y77fg] {
    opacity: 1 !important;
    background: var(--color-dark);
    color: var(--color-surface);
    border-style: solid;
    border-color: var(--color-dark);
}

/* Between-column buttons stay always visible */
.add-between-columns .add-event-btn[b-7kvy8y77fg] {
    opacity: 0.4;
    width: 28px;
    height: 28px;
}

/* Empty State (legacy — prefer WedEmptyState) */
.empty-state[b-7kvy8y77fg] {
    background: var(--color-surface);
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-12);
}

.empty-state i[b-7kvy8y77fg] {
    opacity: 0.3;
}

/* Dot Indicators */
.board-dots[b-7kvy8y77fg] {
    display: none; /* Hidden on desktop — mobile-only navigation */
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 0 16px 0;
}

.board-dot[b-7kvy8y77fg] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    padding: 0;
    cursor: pointer;
    background: var(--color-border-strong);
    transition: all var(--duration-fast) var(--ease-out);
}

.board-dot:focus-visible[b-7kvy8y77fg] {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.board-dot.dot-active[b-7kvy8y77fg] {
    width: 10px;
    height: 10px;
    background: var(--color-accent);
}

/* Responsive — Mobile: horizontal scroll with snap */
@media (max-width: 767px) {
    /* Wrappers collapse on mobile — the scrollers flow as direct
       children of their grandparents (no edge shadows on mobile;
       navigation is handled by the dot indicators). */
    .schedule-board-wrap[b-7kvy8y77fg],
    .column-body-wrap[b-7kvy8y77fg] {
        display: contents;
    }

    .schedule-board[b-7kvy8y77fg] {
        scroll-snap-type: x mandatory;
        scroll-padding-inline-start: 0;
        padding: 0 0 1rem 0;
        height: auto; /* override desktop constraint */
    }

    .board-column[b-7kvy8y77fg] {
        min-width: 85vw;
        max-width: 85vw;
        scroll-snap-align: center;
        overflow: visible; /* override desktop overflow: hidden */
    }

    .column-body[b-7kvy8y77fg] {
        overflow-y: visible; /* natural scroll on mobile */
    }

    .add-between-columns[b-7kvy8y77fg] {
        display: none;
    }

    .board-dots[b-7kvy8y77fg] {
        display: flex; /* Show on mobile when rendered */
        padding-top: 8px;
    }

    /* On mobile, always show add-event slots (no hover) */
    .add-event-slot[b-7kvy8y77fg] {
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .add-event-slot .add-event-btn[b-7kvy8y77fg] {
        position: static;
        transform: none;
        opacity: 0.4;
    }
}

/* Mobile — allow natural height inside the scrollable .content */
@media (max-width: 767px) {
    .schedule-board[b-7kvy8y77fg] {
        height: auto;
        flex: 0 0 auto;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .board-column[b-7kvy8y77fg] {
        min-width: 280px;
    }
}

@media (min-width: 1200px) {
    .board-column[b-7kvy8y77fg] {
        min-width: 320px;
    }
}

/* Print Styles */
@media print {
    .add-event-slot[b-7kvy8y77fg],
    .add-between-columns[b-7kvy8y77fg],
    .btn[b-7kvy8y77fg] {
        display: none !important;
    }

    .column-body-wrap[b-7kvy8y77fg]::before,
    .column-body-wrap[b-7kvy8y77fg]::after,
    .schedule-board-wrap[b-7kvy8y77fg]::before,
    .schedule-board-wrap[b-7kvy8y77fg]::after {
        display: none;
    }

    .schedule-board[b-7kvy8y77fg] {
        flex-wrap: wrap;
        overflow: visible;
    }

    .board-column[b-7kvy8y77fg] {
        page-break-inside: avoid;
        min-width: 45%;
        max-width: 50%;
    }
}