/* /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: fixed;
    top: 3.5rem;
    left: 0;
    right: 0;
    bottom: 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: 10000;
    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;
}

@media (min-width: 992px) {
    .wedding-loader-overlay[b-k4vur6wxr9] {
        left: 280px;
    }
}

@media (max-width: 991.98px) {
    .wedding-loader-overlay[b-k4vur6wxr9] {
        top: 56px;
    }
}

.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 */
}

/* 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 === */
.wed-lightbox-image[b-gn2kq4sf47] {
    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);
    animation: wedLightboxZoomIn-b-gn2kq4sf47 0.3s ease;
}

/* === 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.slide-left[b-gn2kq4sf47],
.wed-lightbox-image.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[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);
}

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

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

/* 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;
}

/* Status messages */
.auth-card[b-kjubf9762f]  .alert {
    border-radius: 10px;
    border: none;
    padding: 1rem;
}

.auth-card[b-kjubf9762f]  .alert-info {
    background: #f0f7ff;
    color: #3b6ea8;
}

.auth-card[b-kjubf9762f]  .alert-danger {
    background: #fef2f2;
    color: var(--bs-danger);
}

.auth-card[b-kjubf9762f]  .alert-success {
    background: #f0fdf4;
    color: #3d8b55;
}

.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/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/Components/NodeRenderers/RulerNodeRenderer.razor.rz.scp.css */
.ruler-node-simple[b-r6va7zzhzp] {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}

.ruler-line[b-r6va7zzhzp] {
    width: 100%;
    height: 2px;
    background-color: #333;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.ruler-endpoint[b-r6va7zzhzp] {
    width: 10px;
    height: 10px;
    border: 2px solid #333;
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.ruler-endpoint.left[b-r6va7zzhzp] {
    left: 0;
}

.ruler-endpoint.right[b-r6va7zzhzp] {
    right: 0;
}

.ruler-label[b-r6va7zzhzp] {
    background-color: #fff;
    padding: 2px 6px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    color: #333;
    z-index: 3;
    pointer-events: auto;
    /* allow text selection if needed */
}
/* /Components/Pages/Layout/Components/NodeRenderers/TableNodeRenderer.razor.rz.scp.css */
/* Seat Marker Styles */
.seat-marker[b-7c16rc62ft] {
    transition: transform 0.2s, background-color 0.2s, border-color 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.seat-marker:hover[b-7c16rc62ft] {
    transform: translate(-50%, -50%) scale(1.2) !important;
    z-index: 10;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.seat-marker.occupied:hover[b-7c16rc62ft] {
    cursor: alias;
    border-color: #ef4444 !important;
}

/* Selected Seat State */
.seat-marker.selected[b-7c16rc62ft] {
    border: 2px solid var(--color-dark) !important;
    box-shadow: 0 0 0 3px rgba(116, 88, 62, 0.3), 0 2px 8px rgba(116, 88, 62, 0.4);
    transform: translate(-50%, -50%) scale(1.15) !important;
    z-index: 20;
}

.seat-marker.selected:hover[b-7c16rc62ft] {
    box-shadow: 0 0 0 4px rgba(116, 88, 62, 0.4), 0 4px 12px rgba(116, 88, 62, 0.5);
    transform: translate(-50%, -50%) scale(1.2) !important;
}

/* Related Seat State — same family unit (MainGuestId) as the selected seat.
   Clean solid gold ring around the seat, no glow or animation, so it stays
   tasteful while still reading from a few tables away. */
.seat-marker.related[b-7c16rc62ft] {
    border: 2px solid var(--color-accent) !important;
    box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.4) !important;
    z-index: 15;
}

.seat-marker.related:hover[b-7c16rc62ft] {
    box-shadow: 0 0 0 4px rgba(201, 168, 76, 0.55) !important;
}

/* Married seats are SVG hearts — the wrapper has no box-shadow, so colour
   the outline via a drop-shadow filter on the SVG itself. */
.seat-marker.married.related .seat-heart-svg[b-7c16rc62ft] {
    filter: drop-shadow(0 0 0 var(--color-accent)) drop-shadow(0 0 3px rgba(201, 168, 76, 0.55));
}

/* Married Seat - Heart Shape (SVG-based) */
.seat-marker.married[b-7c16rc62ft] {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    position: relative;
    transition: transform 0.2s, filter 0.2s;
}

.seat-heart-svg[b-7c16rc62ft] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.seat-heart-label[b-7c16rc62ft] {
    position: relative;
    z-index: 1;
    font-weight: 500;
    pointer-events: none;
    margin-top: -2px;
}

.seat-marker.married:hover[b-7c16rc62ft] {
    transform: translate(-50%, -50%) scale(1.2) !important;
    z-index: 10;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.seat-marker.married.selected[b-7c16rc62ft] {
    filter: drop-shadow(0 0 3px rgba(116, 88, 62, 0.5)) drop-shadow(0 0 6px rgba(116, 88, 62, 0.4));
    transform: translate(-50%, -50%) scale(1.15) !important;
    z-index: 20;
}

.seat-marker.married.selected:hover[b-7c16rc62ft] {
    filter: drop-shadow(0 0 4px rgba(116, 88, 62, 0.6)) drop-shadow(0 0 8px rgba(116, 88, 62, 0.5));
    transform: translate(-50%, -50%) scale(1.2) !important;
}

/* Table Surface Styles */
.table-surface[b-7c16rc62ft] {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Table Node Styles */
.table-node-container[b-7c16rc62ft] {
    position: relative;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.table-surface-inner[b-7c16rc62ft] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* WedBud theme colors - warm beige/cream */
    background: linear-gradient(145deg, #faf6f0 0%, #f5ebe0 100%);
    border: 2px solid var(--color-dark);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}

/* When the node is selected */
.table-surface-inner.node-selected[b-7c16rc62ft] {
    border: 2px dashed var(--color-dark) !important;
    box-shadow: 0 0 0 2px rgba(116, 88, 62, 0.2);
}

.table-name[b-7c16rc62ft] {
    font-size: 1.1em;
    font-weight: 600;
    text-align: center;
    pointer-events: none;
    padding: 4px 8px;
    color: var(--color-dark);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Table status indicator (free seats count) */
.table-status[b-7c16rc62ft] {
    margin-top: 2px;
}

.table-status-text[b-7c16rc62ft] {
    font-size: 0.85em;
    font-weight: 500;
    color: var(--color-dark);
    opacity: 0.9;
}
/* /Components/Pages/Layout/Components/ParticipantSidebar.razor.rz.scp.css */
/* Prevent text selection during drag operations */
.list-group-item[draggable="true"][b-38cmi6jfdr] {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Visual feedback during drag */
.list-group-item[draggable="true"]:active[b-38cmi6jfdr] {
    cursor: grabbing;
    opacity: 0.7;
}

/* Declined guests are visually dimmed and non-interactive */
.list-group-item.wv-participant-declined[b-38cmi6jfdr] {
    opacity: 0.55;
    background-color: var(--color-surface-alt);
}

.list-group-item.wv-participant-declined:hover[b-38cmi6jfdr] {
    opacity: 0.75;
}
/* /Components/Pages/Layout/DiagramNodeRenderer.razor.rz.scp.css */
/* Styles moved to RulerNodeRenderer and TableNodeRenderer CSS files */
/* /Components/Pages/Layout/ReceptionLayout.razor.rz.scp.css */
/* Main Layout Container */
.layout-container[b-74p23jlnp1] {
    height: calc(100vh - 60px);
    display: flex;
    overflow: hidden;
    outline: none;
    /* Remove focus outline */
}

/* Left sidebar - desktop base */
.sidebar-left[b-74p23jlnp1] {
    width: 300px;
}

/* Hide diagram scrollbars */
[b-74p23jlnp1] #diagram-container,
[b-74p23jlnp1] #diagram-container * {
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
}

[b-74p23jlnp1] #diagram-container::-webkit-scrollbar,
[b-74p23jlnp1] #diagram-container *::-webkit-scrollbar {
    display: none;
}

/* Hide Syncfusion default selection border */
[b-74p23jlnp1] .e-diagram-border {
    stroke: transparent !important;
}

/* Hide palette symbol tooltip — Syncfusion positions it at bottom-right of palette
   instead of near the symbol. Symbols are self-explanatory (circle, rect, ruler). */
[b-74p23jlnp1] .e-symbolpalette .e-blazordiagram-tooltip {
    display: none !important;
}

/* Hide palette accordion header — single group, title is redundant */
[b-74p23jlnp1] .e-symbolpalette .e-acrdn-header {
    display: none !important;
}

/* KISS FIX: Disable Syncfusion pointer events during seat drag
   This prevents Syncfusion from capturing the pointer and getting into a "stuck" state
   when HTML5 drag-and-drop takes over. The seat markers (HTML elements) still receive
   drag events because they have their own ondragover/ondrop handlers. */
[b-74p23jlnp1] #diagram-container.seat-dragging .e-diagram-layer,
[b-74p23jlnp1] #diagram-container.seat-dragging .e-background-layer,
[b-74p23jlnp1] #diagram-container.seat-dragging .e-grid-layer,
[b-74p23jlnp1] #diagram-container.seat-dragging .e-html-layer,
[b-74p23jlnp1] #diagram-container.seat-dragging svg {
    pointer-events: none !important;
}

/* But keep pointer events on seat markers so drops still work */
[b-74p23jlnp1] #diagram-container.seat-dragging .seat-marker {
    pointer-events: auto !important;
}

/* Mobile Responsive Styles */

/* Mobile toggle buttons - hidden by default on desktop */
.mobile-toggle-btn[b-74p23jlnp1] {
    display: none;
    position: fixed;
    z-index: 999;
    padding: 12px 6px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    border: none;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mobile-toggle-btn:hover[b-74p23jlnp1] {
    filter: brightness(1.1);
}

.mobile-toggle-side[b-74p23jlnp1] {
    writing-mode: vertical-lr;
    color: white;
    white-space: nowrap;
    border-radius: 0 8px 8px 0;
}

.mobile-toggle-left[b-74p23jlnp1] {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: var(--bs-primary, #0d6efd);
}

.mobile-toggle-right[b-74p23jlnp1] {
    right: 0;
    top: 50%;
    transform: translateY(-50%) rotate(180deg);
    background: var(--bs-secondary, #6c757d);
}

/* Hide toggle buttons when a sidebar is open */
.sidebar-overlay.show~.mobile-toggle-btn[b-74p23jlnp1] {
    display: none !important;
}

/* Sidebar overlay backdrop */
.sidebar-overlay[b-74p23jlnp1] {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1050;
}

.sidebar-overlay.show[b-74p23jlnp1] {
    display: block;
}

/* Mobile breakpoint */
@media (max-width: 991.98px) {

    /* Height managed by layout (content-fixed-height uses flex column) */
    .layout-container[b-74p23jlnp1] {
        flex: 1;
        min-height: 0;
    }

    /* Show mobile toggle buttons */
    .mobile-toggle-btn[b-74p23jlnp1] {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* Left sidebar - off-canvas style */
    .sidebar-left[b-74p23jlnp1] {
        position: fixed !important;
        left: -400px;
        top: 0;
        height: 100vh !important;
        width: 320px !important;
        max-width: 85vw;
        transition: left 0.3s ease;
        z-index: 1060 !important;
        box-shadow: 2px 0 15px rgba(0, 0, 0, 0.2);
    }

    .sidebar-left.mobile-open[b-74p23jlnp1] {
        left: 0;
    }

    /* Right sidebar - off-canvas style */
    .sidebar-right[b-74p23jlnp1] {
        position: fixed !important;
        right: -280px;
        top: 0;
        height: 100vh !important;
        width: 280px !important;
        max-width: 85vw;
        transition: right 0.3s ease;
        z-index: 1060 !important;
        box-shadow: -2px 0 15px rgba(0, 0, 0, 0.2);
    }

    .sidebar-right.mobile-open[b-74p23jlnp1] {
        right: 0;
    }

    /* Close button for sidebars on mobile */
    .sidebar-close-btn[b-74p23jlnp1] {
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 8px;
        right: 8px;
        z-index: 10;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 6px;
        font-size: 1.2rem;
        cursor: pointer;
        width: 32px;
        height: 32px;
        padding: 0;
        color: #666;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    }

    .sidebar-close-btn:hover[b-74p23jlnp1] {
        color: #333;
        background: #f0f0f0;
    }

    /* Main canvas takes full width */
    .main-canvas[b-74p23jlnp1] {
        width: 100% !important;
    }

    /* Adjust top toolbar for mobile */
    .layout-container>.main-canvas>div>div:first-child[b-74p23jlnp1] {
        flex-direction: column !important;
        gap: 10px !important;
        left: 10px !important;
        right: 10px !important;
        top: 10px !important;
    }

    /* Stats bar scrollable on mobile */
    .stats-bar[b-74p23jlnp1] {
        overflow-x: auto;
        white-space: nowrap;
        max-width: 100%;
        padding: 8px 12px !important;
        gap: 12px !important;
    }

    .stats-bar[b-74p23jlnp1]::-webkit-scrollbar {
        height: 4px;
    }

    .stats-bar[b-74p23jlnp1]::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 2px;
    }

    /* Smaller export buttons on mobile */
    .export-toolbar[b-74p23jlnp1] {
        padding: 4px !important;
    }

    .export-toolbar .btn[b-74p23jlnp1] {
        padding: 4px 8px;
        font-size: 0.75rem;
    }

    /* Zoom toolbar repositioned */
    .zoom-toolbar[b-74p23jlnp1] {
        bottom: 10px !important;
        right: 50% !important;
        transform: translateX(50%);
    }
}

/* Very small screens */
@media (max-width: 575.98px) {

    .sidebar-left[b-74p23jlnp1],
    .sidebar-right[b-74p23jlnp1] {
        width: 100vw !important;
        max-width: 100vw;
    }

    .sidebar-left[b-74p23jlnp1] {
        left: -100vw;
    }

    .sidebar-right[b-74p23jlnp1] {
        right: -100vw;
    }

    /* Hide some stats on very small screens */
    .stats-item-children[b-74p23jlnp1] {
        display: none !important;
    }
}

/* Desktop - hide close buttons */
@media (min-width: 992px) {
    .sidebar-close-btn[b-74p23jlnp1] {
        display: none !important;
    }
}

/* Remove default margin from WedButtonGroup in this layout */
[b-74p23jlnp1] .wed-button-group-container {
    margin-bottom: 0;
}

/* Hide browser number input spinners (increment/decrement buttons) */
[b-74p23jlnp1] input[type="number"]::-webkit-outer-spin-button,
[b-74p23jlnp1] input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

[b-74p23jlnp1] input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* ============================================================
   Outils admin — sober sub-section of the right rail
   Cream-tinted chrome (header, toolbar, filters), white log
   surface, gold severity hint per line. Lines are plain text:
   selectable by drag, copyable as a block via the toolbar.
   Admin-only surface; in-system with the rest of WedBud.
   ============================================================ */

.wv-admin[b-74p23jlnp1] {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--color-surface-alt);
    border-top: 1px solid var(--color-border);
    color: var(--color-text);
}

/* --- Header strip --- */
.wv-admin-head[b-74p23jlnp1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-3) var(--space-2);
}

.wv-admin-head-title[b-74p23jlnp1] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.wv-admin-head-label[b-74p23jlnp1] {
    font-weight: 600;
    color: var(--color-text);
}

.wv-admin-head-count[b-74p23jlnp1] {
    font-family: var(--font-mono);
    font-feature-settings: "tnum" 1;
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    text-transform: none;
}

.wv-admin-head-clear[b-74p23jlnp1] {
    appearance: none;
    background: transparent;
    border: 0;
    padding: var(--space-1) var(--space-2);
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition:
        color var(--duration-fast) var(--ease-out),
        background-color var(--duration-fast) var(--ease-out);
}
.wv-admin-head-clear:hover:not(:disabled)[b-74p23jlnp1] {
    color: var(--color-accent-hover);
    background: var(--color-accent-pale);
}
.wv-admin-head-clear:focus-visible[b-74p23jlnp1] {
    outline: none;
    box-shadow: var(--shadow-focus);
}
.wv-admin-head-clear:disabled[b-74p23jlnp1] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* --- Action toolbar (uses WedButtonGroup) --- */
.wv-admin-toolbar[b-74p23jlnp1] {
    padding: 0 var(--space-3) var(--space-2);
}

/* --- Filter pills strip --- */
.wv-admin-filters[b-74p23jlnp1] {
    display: flex;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    border-top: 1px dashed var(--color-border);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-alt);
    flex-wrap: wrap;
}

.wv-admin-filter[b-74p23jlnp1] {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    padding: var(--space-1) var(--space-2);
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    cursor: pointer;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    transition:
        color var(--duration-fast) var(--ease-out),
        background-color var(--duration-fast) var(--ease-out),
        border-color var(--duration-fast) var(--ease-out);
}
.wv-admin-filter:hover:not(:disabled)[b-74p23jlnp1] {
    color: var(--color-text);
    background: var(--color-accent-pale);
    border-color: var(--color-border);
}
.wv-admin-filter.is-active[b-74p23jlnp1] {
    color: var(--color-dark);
    background: var(--color-accent-soft);
    border-color: var(--color-accent-soft);
    font-weight: 500;
}
.wv-admin-filter:focus-visible[b-74p23jlnp1] {
    outline: none;
    box-shadow: var(--shadow-focus);
}
.wv-admin-filter:disabled[b-74p23jlnp1] {
    opacity: 0.4;
    cursor: not-allowed;
}

.wv-admin-filter-count[b-74p23jlnp1] {
    font-family: var(--font-mono);
    font-feature-settings: "tnum" 1;
    font-size: 0.7em;
    padding: 0 var(--space-1);
    border-radius: var(--radius-pill);
    background: rgba(var(--color-accent-rgb), 0.1);
    min-width: 1.4em;
    text-align: center;
    line-height: 1.5;
    color: inherit;
}
.wv-admin-filter.is-active .wv-admin-filter-count[b-74p23jlnp1] {
    background: rgba(43, 31, 31, 0.1);
}

/* --- Log surface --- */
.wv-admin-log[b-74p23jlnp1] {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 200px;
    overflow-y: auto;
    background: var(--color-surface);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    line-height: 1.5;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-strong) transparent;
}
.wv-admin-log[b-74p23jlnp1]::-webkit-scrollbar { width: 6px; }
.wv-admin-log[b-74p23jlnp1]::-webkit-scrollbar-thumb {
    background: var(--color-border-strong);
    border-radius: var(--radius-pill);
}
.wv-admin-log[b-74p23jlnp1]::-webkit-scrollbar-track { background: transparent; }

.wv-admin-log-line[b-74p23jlnp1] {
    display: grid;
    grid-template-columns: 56px 36px 1fr;
    align-items: baseline;
    column-gap: var(--space-2);
    padding: 4px var(--space-2) 4px var(--space-3);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    cursor: text;
    position: relative;
}
.wv-admin-log-line:last-child[b-74p23jlnp1] { border-bottom: 0; }
.wv-admin-log-line[b-74p23jlnp1]::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 2px;
    background: var(--rail, var(--color-border));
}
.wv-admin-log-line:hover[b-74p23jlnp1] {
    background: rgba(var(--color-accent-rgb), 0.04);
}

/* Newest entry: brief gold flash to draw the eye. */
.wv-admin-log-line:first-child[b-74p23jlnp1] {
    animation: wv-admin-flash-b-74p23jlnp1 700ms var(--ease-out);
}
@keyframes wv-admin-flash-b-74p23jlnp1 {
    0%   { background: rgba(var(--color-accent-rgb), 0.14); }
    100% { background: transparent; }
}

.wv-admin-log-line[data-severity="info"][b-74p23jlnp1]    { --rail: var(--color-border-strong); }
.wv-admin-log-line[data-severity="action"][b-74p23jlnp1]  { --rail: var(--color-accent); }
.wv-admin-log-line[data-severity="sync"][b-74p23jlnp1]    { --rail: var(--color-info); }
.wv-admin-log-line[data-severity="warning"][b-74p23jlnp1] { --rail: var(--color-warning); }
.wv-admin-log-line[data-severity="error"][b-74p23jlnp1]   { --rail: var(--color-danger); }

.wv-admin-log-time[b-74p23jlnp1] {
    color: var(--color-text-muted);
    font-feature-settings: "tnum" 1;
    white-space: nowrap;
}

.wv-admin-log-tag[b-74p23jlnp1] {
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    font-weight: 600;
    text-align: center;
    padding: 1px var(--space-1);
    border-radius: var(--radius-sm);
    background: var(--color-border);
    color: var(--color-text-muted);
    text-transform: uppercase;
    line-height: 1.4;
}
.wv-admin-log-line[data-severity="action"]  .wv-admin-log-tag[b-74p23jlnp1] {
    color: var(--color-accent-hover);
    background: rgba(var(--color-accent-rgb), 0.16);
}
.wv-admin-log-line[data-severity="sync"]    .wv-admin-log-tag[b-74p23jlnp1] {
    color: var(--color-info);
    background: var(--color-info-bg);
}
.wv-admin-log-line[data-severity="warning"] .wv-admin-log-tag[b-74p23jlnp1] {
    color: var(--color-warning);
    background: var(--color-warning-bg);
}
.wv-admin-log-line[data-severity="error"]   .wv-admin-log-tag[b-74p23jlnp1] {
    color: var(--color-danger);
    background: var(--color-danger-bg);
}

.wv-admin-log-body[b-74p23jlnp1] {
    color: var(--color-text);
    word-break: break-word;
}

.wv-admin-log-empty[b-74p23jlnp1] {
    padding: var(--space-5) var(--space-3);
    text-align: center;
    font-family: var(--font-display);
    font-style: italic;
    color: var(--color-text-muted);
    font-size: var(--text-base);
    letter-spacing: 0.01em;
    border-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
    .wv-admin-log-line:first-child[b-74p23jlnp1] { animation: none; }
    .wv-admin-filter[b-74p23jlnp1],
    .wv-admin-head-clear[b-74p23jlnp1] { transition: none; }
}

/* Inline button styled to match neighbouring stat columns in the summary bar.
   Reset the native <button> defaults so it visually reads as a column. */
.summary-anti-affinity-btn[b-74p23jlnp1] {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    cursor: pointer;
    transition: opacity var(--duration-fast) var(--ease-out);
}

.summary-anti-affinity-btn:hover[b-74p23jlnp1] {
    opacity: 0.75;
}

.summary-anti-affinity-btn:focus-visible[b-74p23jlnp1] {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-radius: var(--radius-sm);
}
/* /Components/Pages/Memories.razor.rz.scp.css */
/* Gallery Page Styles — "Souvenirs" */

/* Header styling */
.gallery-header[b-g1jveb6zw1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1.5rem 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.gallery-header h1[b-g1jveb6zw1] {
    font-size: 1.75rem;
    font-weight: 600;
    margin: 0;
    color: var(--bs-heading-color);
}

.gallery-actions[b-g1jveb6zw1] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Gallery Grid - Responsive masonry-style */
.gallery-grid[b-g1jveb6zw1] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    padding: 0.5rem 0;
}

@media (min-width: 768px) {
    .gallery-grid[b-g1jveb6zw1] {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 1.25rem;
    }
}

@media (min-width: 1200px) {
    .gallery-grid[b-g1jveb6zw1] {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 1.5rem;
    }
}

/* Gallery Item Card */
.gallery-item[b-g1jveb6zw1] {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bs-body-bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    aspect-ratio: 1;
}

.gallery-item:hover[b-g1jveb6zw1] {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.gallery-item.selected[b-g1jveb6zw1] {
    box-shadow: 0 0 0 3px var(--bs-primary), 0 12px 24px rgba(var(--bs-primary-rgb), 0.25);
    transform: translateY(-2px);
}

/* 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 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.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 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.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: 2;
    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 0.3s ease;
}

.gallery-item:hover .gallery-media-video i[b-g1jveb6zw1] {
    transform: scale(1.15);
}

.gallery-media-audio[b-g1jveb6zw1] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.gallery-media-audio i[b-g1jveb6zw1] {
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.5rem;
    animation: audioPulse-b-g1jveb6zw1 2s ease-in-out infinite;
}

.gallery-audio-label[b-g1jveb6zw1] {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    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 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1rem;
    z-index: 3;
}

.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: 0.75rem;
    right: 0.75rem;
    z-index: 10;
}

.gallery-checkbox input[type="checkbox"][b-g1jveb6zw1] {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 2px solid rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    cursor: pointer;
    transition: all 0.2s ease;
    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(--bs-primary);
    border-color: var(--bs-primary);
}

.gallery-checkbox input[type="checkbox"]:checked[b-g1jveb6zw1]::after {
    content: '✓';
    color: white;
    font-size: 14px;
    font-weight: bold;
}

/* Guest info badge */
.gallery-guest-badge[b-g1jveb6zw1] {
    font-size: 0.75rem;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.gallery-guest-badge i[b-g1jveb6zw1] {
    font-size: 0.875rem;
}

/* 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(--bs-dark);
    border: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 5;
}

.gallery-item:hover .gallery-view-btn[b-g1jveb6zw1] {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.gallery-view-btn:hover[b-g1jveb6zw1] {
    background: white;
    transform: translate(-50%, -50%) scale(1.1);
}

/* Empty state — premium wedding feel */
.gallery-empty[b-g1jveb6zw1] {
    text-align: center;
    padding: 5rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gallery-empty-visual[b-g1jveb6zw1] {
    margin-bottom: 2rem;
}

.gallery-empty-icons[b-g1jveb6zw1] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.gallery-empty-icon-item[b-g1jveb6zw1] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    animation: emptyFloatIn-b-g1jveb6zw1 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: var(--delay);
}

.gallery-empty-icon-item.featured[b-g1jveb6zw1] {
    width: 80px;
    height: 80px;
    font-size: 2rem;
    background: linear-gradient(135deg, #f8c4d4 0%, #e8a0b8 100%);
    color: #c2185b;
    box-shadow: 0 8px 24px rgba(194, 24, 91, 0.15);
    animation: emptyFloatIn-b-g1jveb6zw1 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both,
               emptyHeartbeat-b-g1jveb6zw1 3s ease-in-out 1s infinite;
    animation-delay: var(--delay), 1s;
}

.gallery-empty-title[b-g1jveb6zw1] {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--bs-heading-color);
    margin-bottom: 0.5rem;
}

.gallery-empty-description[b-g1jveb6zw1] {
    color: var(--bs-secondary-color);
    max-width: 360px;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    font-size: 0.925rem;
}


@keyframes emptyFloatIn-b-g1jveb6zw1 {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.85);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes emptyHeartbeat-b-g1jveb6zw1 {
    0%, 100% { transform: scale(1); }
    15% { transform: scale(1.06); }
    30% { transform: scale(1); }
}

/* Load more section */
.gallery-load-more[b-g1jveb6zw1] {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
}

/* Selection counter badge */
.selection-badge[b-g1jveb6zw1] {
    background: var(--bs-primary);
    color: white;
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    margin-left: 0.5rem;
    font-weight: 600;
}

/* Button improvements */
.gallery-btn[b-g1jveb6zw1] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.gallery-btn-primary[b-g1jveb6zw1] {
    background: var(--bs-primary);
    color: white;
    border: none;
}

.gallery-btn-primary:hover[b-g1jveb6zw1] {
    background: var(--bs-primary);
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.gallery-btn-danger[b-g1jveb6zw1] {
    background: var(--bs-danger);
    color: white;
    border: none;
}

.gallery-btn-danger:hover[b-g1jveb6zw1] {
    background: var(--bs-danger);
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.gallery-btn-outline[b-g1jveb6zw1] {
    background: transparent;
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
}

.gallery-btn-outline:hover[b-g1jveb6zw1] {
    background: var(--bs-tertiary-bg);
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .gallery-header[b-g1jveb6zw1] {
        flex-direction: column;
        align-items: flex-start;
    }

    .gallery-actions[b-g1jveb6zw1] {
        width: 100%;
        justify-content: flex-end;
    }
}

/* 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: 0.5rem;
    padding: 2rem;
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
}
/* /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 */
.schedule-board[b-7kvy8y77fg] {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: var(--space-4);
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    scroll-padding-inline-start: 48px;
    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;
    scroll-snap-align: start;
    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[b-7kvy8y77fg] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* 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;
}

/* Last add-event slot in each column — always visible, no hover required */
.add-event-slot-last[b-7kvy8y77fg] {
    height: 28px;
    padding: 0.15rem 0;
    flex-shrink: 0;
}

.add-event-slot-last .add-event-btn[b-7kvy8y77fg] {
    opacity: 0.4;
}

/* 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);
}

.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) {
    .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;
    }

    .schedule-board[b-7kvy8y77fg] {
        flex-wrap: wrap;
        overflow: visible;
    }

    .board-column[b-7kvy8y77fg] {
        page-break-inside: avoid;
        min-width: 45%;
        max-width: 50%;
    }
}