/* Cross-page UI/UX refinements */
.ux-compact-header,
.ux-tabs-shell,
.dashboard-premium-head,
.dashboard-health-card {
    border: 1px solid rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 24px 80px rgba(225, 29, 72, 0.10);
    backdrop-filter: blur(22px);
}

.ux-compact-header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: space-between;
    border-radius: 1.75rem;
    padding: clamp(1.25rem, 3vw, 2rem);
}

@media (min-width: 1024px) {
    .ux-compact-header {
        flex-direction: row;
        align-items: end;
    }
}

.ux-tabs-shell {
    overflow: hidden;
    border-radius: 2rem;
}

.ux-tabs-nav {
    display: flex;
    gap: .55rem;
    overflow-x: auto;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(255, 255, 255, 0.62);
    padding: .75rem;
    scrollbar-width: none;
}

.ux-tabs-nav::-webkit-scrollbar {
    display: none;
}

.ux-tab-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .62rem;
    min-height: 3rem;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: 1.05rem;
    padding: .78rem 1rem;
    color: rgba(15, 23, 42, .65);
    font-size: .84rem;
    font-weight: 950;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}

.ux-tab-button:hover {
    transform: translateY(-1px);
    border-color: rgba(244, 63, 94, .14);
    background: rgba(255, 241, 242, .82);
    color: #be123c;
}

.ux-tab-button.is-active {
    border-color: rgba(244, 63, 94, .18);
    background: linear-gradient(135deg, #e11d48, #db2777 55%, #f97316);
    color: #fff;
    box-shadow: 0 16px 42px rgba(225, 29, 72, .24);
}

.ux-tab-content {
    padding: clamp(1rem, 2vw, 1.5rem);
}

.ux-tab-panel {
    animation: uxTabIn .22s ease both;
}

@keyframes uxTabIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.ux-public-status-card {
    max-width: 44rem;
}

.ux-invitation-inline {
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    background: linear-gradient(135deg, rgba(255, 241, 242, .58), rgba(255, 247, 237, .42));
    padding: 1.25rem;
}

#invitationSummary > div,
.ux-invitation-summary-card {
    border: 1px solid rgba(244, 63, 94, .12);
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, .68);
    padding: 1rem;
    box-shadow: 0 12px 34px rgba(225, 29, 72, .06);
}

.dashboard-premium-head {
    position: relative;
    overflow: hidden;
    border-radius: 2rem;
    padding: clamp(1.25rem, 3vw, 2rem);
}

.dashboard-premium-head::before {
    content: '';
    position: absolute;
    right: -5rem;
    top: -6rem;
    width: 18rem;
    height: 18rem;
    border-radius: 999px;
    background: rgba(244, 63, 94, .20);
    filter: blur(34px);
    pointer-events: none;
}

.dashboard-head-grid {
    position: relative;
    display: grid;
    gap: 1.25rem;
    align-items: stretch;
}

@media (min-width: 1280px) {
    .dashboard-head-grid {
        grid-template-columns: minmax(0, 1fr) minmax(360px, .52fr);
    }
}

.dashboard-title-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.25rem;
}

.dashboard-title-card h2 {
    max-width: 58rem;
    font-size: clamp(2rem, 4vw, 3.65rem);
    font-weight: 950;
    letter-spacing: -.045em;
    line-height: 1.04;
}

.dashboard-health-card {
    border-radius: 1.65rem;
    padding: 1.25rem;
}

.dashboard-health-card > div {
    height: 100%;
}

.dashboard-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.dashboard-quick-actions a,
.dashboard-quick-actions button {
    min-height: 3rem;
    border-radius: 1rem;
    font-weight: 900;
}

#dashboardMetricsIntro {
    border: 1px solid rgba(255, 255, 255, .64);
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, .58);
    padding: 1.1rem 1.25rem;
    box-shadow: 0 16px 44px rgba(225, 29, 72, .07);
    backdrop-filter: blur(18px);
}

#dashboardPage .wedding-card {
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

#dashboardPage .wedding-card:hover {
    transform: translateY(-2px);
    border-color: rgba(244, 63, 94, .22);
    box-shadow: 0 30px 90px rgba(225, 29, 72, .12);
}

.dashboard-section-card {
    position: relative;
    overflow: hidden;
}

.dashboard-section-card::after {
    content: '';
    position: absolute;
    right: -3rem;
    top: -4rem;
    width: 10rem;
    height: 10rem;
    border-radius: 999px;
    background: rgba(244, 63, 94, .08);
    filter: blur(24px);
    pointer-events: none;
}

#dashboardPage > section:first-of-type,
#dashboardPage .dashboard-premium-head,
#guestsPage > section:first-of-type {
    display: none !important;
}

#guestsPage section:has(#guestStatusDistribution) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1rem !important;
}

#guestsPage .wedding-card:has(#guestStatusDistribution) {
    width: 100% !important;
}

#guestStatusDistribution {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .75rem !important;
}

@media (min-width: 1024px) {
    #guestStatusDistribution {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

#guestStatusDistribution > div {
    border-radius: 1rem !important;
    padding: .78rem .9rem !important;
}

#guestStatusDistribution > div .mb-2 {
    margin-bottom: .45rem !important;
}

#guestStatusDistribution span {
    padding: .22rem .55rem !important;
    font-size: .68rem !important;
}

html[data-theme="dark"] .ux-compact-header,
body[data-theme="dark"] .ux-compact-header,
html[data-theme="dark"] .ux-tabs-shell,
body[data-theme="dark"] .ux-tabs-shell,
html[data-theme="dark"] .dashboard-premium-head,
body[data-theme="dark"] .dashboard-premium-head,
html[data-theme="dark"] .dashboard-health-card,
body[data-theme="dark"] .dashboard-health-card,
html[data-theme="dark"] #dashboardMetricsIntro,
body[data-theme="dark"] #dashboardMetricsIntro {
    border-color: rgba(255, 255, 255, .08);
    background: rgba(17, 24, 39, .74);
    box-shadow: 0 24px 90px rgba(0, 0, 0, .30);
}

html[data-theme="dark"] .ux-tabs-nav,
body[data-theme="dark"] .ux-tabs-nav,
html[data-theme="dark"] .ux-invitation-inline,
body[data-theme="dark"] .ux-invitation-inline {
    border-color: rgba(255, 255, 255, .08);
    background: rgba(15, 23, 42, .46);
}

html[data-theme="dark"] .ux-tab-button,
body[data-theme="dark"] .ux-tab-button {
    color: rgba(248, 250, 252, .72);
}

html[data-theme="dark"] .ux-tab-button:hover,
body[data-theme="dark"] .ux-tab-button:hover {
    border-color: rgba(255, 255, 255, .10);
    background: rgba(31, 41, 55, .78);
    color: #fecdd3;
}

html[data-theme="dark"] #invitationSummary > div,
body[data-theme="dark"] #invitationSummary > div,
html[data-theme="dark"] .ux-invitation-summary-card,
body[data-theme="dark"] .ux-invitation-summary-card {
    border-color: rgba(255, 255, 255, .08);
    background: rgba(31, 41, 55, .64);
}

@media (max-width: 640px) {
    .ux-compact-header,
    .ux-tabs-shell,
    .dashboard-premium-head,
    .dashboard-health-card,
    #dashboardMetricsIntro {
        border-radius: 1.35rem;
    }

    .ux-tabs-nav {
        padding: .55rem;
    }

    .ux-tab-button {
        min-height: 2.75rem;
        padding: .7rem .82rem;
        font-size: .78rem;
    }
}

/* Vows brand system: navy + gold */
:root {
    --vows-navy: #0A1A2F;
    --vows-navy-2: #102744;
    --vows-navy-3: #18385D;
    --vows-gold: #C9A063;
    --vows-gold-2: #E6C677;
    --vows-cream: #FAF8F5;
    --vows-soft-gold: rgba(201, 160, 99, .14);
    --vows-soft-navy: rgba(10, 26, 47, .12);
    --vows-ink: #071424;
    --wedding-rose: var(--vows-navy);
    --wedding-pink: var(--vows-gold);
    --wedding-cream: var(--vows-cream);
    --wedding-ink: var(--vows-ink);
}

body.wedding-body {
    background:
        radial-gradient(circle at top left, rgba(201, 160, 99, .22), transparent 34rem),
        radial-gradient(circle at bottom right, rgba(10, 26, 47, .12), transparent 30rem),
        linear-gradient(135deg, #FAF8F5 0%, #F7F0E5 44%, #EEF2F8 100%) !important;
    color: var(--vows-ink) !important;
}

html[data-theme="dark"] body.wedding-body,
body[data-theme="dark"].wedding-body {
    background:
        radial-gradient(circle at top left, rgba(201, 160, 99, .20), transparent 34rem),
        radial-gradient(circle at bottom right, rgba(55, 95, 145, .20), transparent 30rem),
        linear-gradient(135deg, #06111F 0%, #0A1A2F 48%, #071424 100%) !important;
    color: #FAF8F5 !important;
}

.wedding-topbar,
.ux-compact-header,
.ux-tabs-shell,
.dashboard-premium-head,
.dashboard-health-card,
#dashboardMetricsIntro {
    border-color: rgba(201, 160, 99, .26) !important;
    background: rgba(250, 248, 245, .78) !important;
    box-shadow: 0 24px 80px rgba(10, 26, 47, .10) !important;
}

.wedding-main::before {
    background-image:
        linear-gradient(rgba(10, 26, 47, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201, 160, 99, .055) 1px, transparent 1px) !important;
}

.wedding-sidebar {
    background:
        linear-gradient(180deg, rgba(250, 248, 245, .88), rgba(239, 231, 217, .92)),
        radial-gradient(circle at top, rgba(201, 160, 99, .24), transparent 18rem) !important;
    border-right-color: rgba(201, 160, 99, .30) !important;
    box-shadow: 24px 0 70px rgba(10, 26, 47, .12) !important;
}

.wedding-card,
.wedding-modal,
.budget-metric-card,
.budget-command-card,
.seating-top-command,
.seating-tool-panel,
.assistant-panel,
.assistant-stat,
.assistant-nav,
.assistant-tabs-shell,
.assistant-page-header {
    border-color: rgba(201, 160, 99, .28) !important;
    background: rgba(250, 248, 245, .82) !important;
    box-shadow: 0 24px 80px rgba(10, 26, 47, .10) !important;
}

.wedding-input {
    border-color: rgba(201, 160, 99, .30) !important;
    background-color: rgba(255, 255, 255, .82) !important;
}

.wedding-input:focus,
.wedding-input:focus-within {
    border-color: rgba(201, 160, 99, .82) !important;
    box-shadow: 0 0 0 4px rgba(201, 160, 99, .18) !important;
}

.menu a.active,
.ux-tab-button.is-active,
.assistant-tab-button.is-active,
.assistant-gradient-button,
.budget-modal-rail,
[class*="from-rose-"],
[class*="from-pink-"] {
    background-image: linear-gradient(135deg, var(--vows-navy), var(--vows-navy-2) 54%, var(--vows-gold)) !important;
}

[class*="from-rose-"],
[class*="from-pink-"] {
    --tw-gradient-from: var(--vows-navy) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(10 26 47 / 0) var(--tw-gradient-to-position) !important;
}

[class*="via-rose-"],
[class*="via-pink-"] {
    --tw-gradient-stops: var(--tw-gradient-from), var(--vows-navy-2) var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}

[class*="to-rose-"],
[class*="to-pink-"] {
    --tw-gradient-to: var(--vows-gold) var(--tw-gradient-to-position) !important;
}

[class*="text-rose-"],
[class*="text-pink-"],
.assistant-kicker,
.assistant-nav a:hover,
.assistant-chip,
.scene-icon,
.scene-chip {
    color: var(--vows-gold) !important;
}

[class*="bg-rose-"],
[class*="bg-pink-"] {
    background-color: rgba(201, 160, 99, .14) !important;
}

[class*="border-rose-"],
[class*="border-pink-"] {
    border-color: rgba(201, 160, 99, .30) !important;
}

[class*="ring-rose-"],
[class*="ring-pink-"] {
    --tw-ring-color: rgba(201, 160, 99, .35) !important;
}

[class*="shadow-rose-"],
[class*="shadow-pink-"] {
    --tw-shadow-color: rgba(10, 26, 47, .16) !important;
    --tw-shadow: var(--tw-shadow-colored) !important;
}

.bg-slate-950,
.hover\:bg-rose-700:hover,
.dashboard-quick-actions a.bg-slate-950,
.dashboard-quick-actions button.bg-slate-950 {
    background-color: var(--vows-navy) !important;
}

.text-slate-950,
.budget-command-copy h2,
.scene-label,
.scene-note-text {
    color: var(--vows-ink) !important;
}

.wedding-sidebar .menu i,
.sidebar-collapse-button,
.wedding-topbar .fa-ring,
.wedding-sidebar .fa-ring {
    color: var(--vows-gold) !important;
}

.sidebar-collapse-button {
    border-color: rgba(201, 160, 99, .30) !important;
    background: rgba(250, 248, 245, .94) !important;
    box-shadow: 0 14px 34px rgba(10, 26, 47, .14) !important;
}

.wedding-check-card,
.assistant-chip,
.assistant-step,
.assistant-favorite-toggle,
.assistant-image-preview,
.assistant-category-card {
    border-color: rgba(201, 160, 99, .24) !important;
    background: rgba(201, 160, 99, .10) !important;
}

.wedding-check-card:hover,
.assistant-chip:hover,
.assistant-category-card:hover,
#dashboardPage .wedding-card:hover {
    border-color: rgba(201, 160, 99, .42) !important;
    box-shadow: 0 24px 70px rgba(10, 26, 47, .14) !important;
}

.budget-command-card {
    background:
        linear-gradient(135deg, rgba(250, 248, 245, .92), rgba(239, 231, 217, .80)),
        radial-gradient(circle at top right, rgba(201, 160, 99, .24), transparent 24rem) !important;
}

.budget-command-card::after,
.dashboard-premium-head::before,
.dashboard-section-card::after {
    background: rgba(201, 160, 99, .18) !important;
}

.budget-section-label.rose,
.budget-section-label.pink,
.budget-section-label.amber {
    border-color: rgba(201, 160, 99, .24) !important;
    background: rgba(201, 160, 99, .12) !important;
    color: var(--vows-navy) !important;
}

.budget-section-label.rose > div,
.budget-section-label.pink > div,
.budget-section-label.amber > div {
    background: rgba(255, 255, 255, .86) !important;
    color: var(--vows-gold) !important;
}

.seating-stage-wrap {
    border-color: rgba(201, 160, 99, .28) !important;
    background:
        radial-gradient(circle at 50% 8%, rgba(201, 160, 99, .18), transparent 360px),
        radial-gradient(circle at 18% 88%, rgba(10, 26, 47, .10), transparent 300px),
        linear-gradient(135deg, rgba(250, 248, 245, .92), rgba(239, 231, 217, .82)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 30px 100px rgba(10,26,47,.14) !important;
}

.seating-canvas {
    background-color: rgba(250, 248, 245, .62) !important;
    background-image:
        linear-gradient(rgba(201, 160, 99, .14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201, 160, 99, .14) 1px, transparent 1px),
        linear-gradient(rgba(10,26,47,.04) 2px, transparent 2px),
        linear-gradient(90deg, rgba(10,26,47,.04) 2px, transparent 2px),
        radial-gradient(circle at 50% 10%, rgba(201,160,99,.16), transparent 320px) !important;
}

.scene-table,
.scene-chair,
.scene-note,
.scene-lounge,
.scene-dj,
.scene-photo,
.scene-gift,
.scene-entrance,
.scene-restroom,
.scene-kids,
.scene-security,
.scene-emergency {
    border-color: rgba(201, 160, 99, .32) !important;
    background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(239,231,217,.82)) !important;
    box-shadow: 0 22px 52px rgba(10,26,47,.13) !important;
}

.scene-table::before,
.scene-chair::after,
.scene-aisle::before {
    border-color: rgba(201, 160, 99, .34) !important;
}

.scene-table-chair-dot,
.scene-chair::before {
    background: linear-gradient(135deg, var(--vows-gold-2), var(--vows-gold)) !important;
    box-shadow: 0 10px 24px rgba(201,160,99,.24) !important;
}

.assistant-message.is-assistant .assistant-message-bubble {
    border-color: rgba(201, 160, 99, .22) !important;
    background: rgba(201, 160, 99, .10) !important;
}

.assistant-message.is-user .assistant-message-bubble {
    background: var(--vows-navy) !important;
}

.assistant-chat-window::-webkit-scrollbar-thumb {
    background: rgba(201, 160, 99, .36) !important;
}

html[data-theme="dark"] .wedding-topbar,
body[data-theme="dark"] .wedding-topbar,
html[data-theme="dark"] .wedding-sidebar,
body[data-theme="dark"] .wedding-sidebar,
html[data-theme="dark"] .wedding-card,
body[data-theme="dark"] .wedding-card,
html[data-theme="dark"] .wedding-modal,
body[data-theme="dark"] .wedding-modal,
html[data-theme="dark"] .budget-metric-card,
body[data-theme="dark"] .budget-metric-card,
html[data-theme="dark"] .budget-command-card,
body[data-theme="dark"] .budget-command-card,
html[data-theme="dark"] .seating-top-command,
body[data-theme="dark"] .seating-top-command,
html[data-theme="dark"] .seating-tool-panel,
body[data-theme="dark"] .seating-tool-panel,
html[data-theme="dark"] .assistant-panel,
body[data-theme="dark"] .assistant-panel,
html[data-theme="dark"] .assistant-stat,
body[data-theme="dark"] .assistant-stat,
html[data-theme="dark"] .assistant-nav,
body[data-theme="dark"] .assistant-nav,
html[data-theme="dark"] .assistant-tabs-shell,
body[data-theme="dark"] .assistant-tabs-shell,
html[data-theme="dark"] .assistant-page-header,
body[data-theme="dark"] .assistant-page-header {
    border-color: rgba(201, 160, 99, .16) !important;
    background: rgba(10, 26, 47, .78) !important;
    box-shadow: 0 24px 90px rgba(0, 0, 0, .32) !important;
}

html[data-theme="dark"] .wedding-input,
body[data-theme="dark"] .wedding-input {
    border-color: rgba(201, 160, 99, .20) !important;
    background-color: rgba(7, 20, 36, .78) !important;
}

html[data-theme="dark"] .text-slate-950,
body[data-theme="dark"] .text-slate-950,
html[data-theme="dark"] .budget-command-copy h2,
body[data-theme="dark"] .budget-command-copy h2 {
    color: #FAF8F5 !important;
}

html[data-theme="dark"] [class*="text-rose-"],
body[data-theme="dark"] [class*="text-rose-"],
html[data-theme="dark"] [class*="text-pink-"],
body[data-theme="dark"] [class*="text-pink-"] {
    color: var(--vows-gold-2) !important;
}

html[data-theme="dark"] [class*="bg-rose-"],
body[data-theme="dark"] [class*="bg-rose-"],
html[data-theme="dark"] [class*="bg-pink-"],
body[data-theme="dark"] [class*="bg-pink-"] {
    background-color: rgba(201, 160, 99, .16) !important;
}

html[data-theme="dark"] .seating-stage-wrap,
body[data-theme="dark"] .seating-stage-wrap,
html[data-theme="dark"] .seating-canvas,
body[data-theme="dark"] .seating-canvas {
    background-color: rgba(7, 20, 36, .72) !important;
}