/*
 * Future Surface
 *
 * A tenant-colored presentation layer shared by owner, client, staff, auth,
 * booking, agreement, payment, planning, finance, mail, and settings pages.
 * It changes no content, permissions, routes, forms, or workflow state.
 */

.app-shell.app-future {
    --future-cool: #6c9fba;
    --future-cool-light: #d9edf4;
    --future-line: rgba(87, 128, 157, .3);
    --future-glass: rgba(255, 255, 255, .84);
    --future-glass-warm: rgba(250, 247, 239, .8);
    --future-shadow: 0 4px 9px rgba(28, 45, 67, .09), 0 20px 44px rgba(28, 45, 67, .15), 0 42px 78px rgba(38, 57, 78, .075);
    --future-shadow-hover: 0 8px 15px rgba(28, 45, 67, .11), 0 28px 56px rgba(28, 45, 67, .19), 0 54px 92px rgba(38, 57, 78, .09);
    background:
        radial-gradient(circle at 8% 4%, rgba(255,255,255,.98) 0, transparent 27rem),
        radial-gradient(ellipse at 92% 18%, rgba(125,174,203,.18) 0, transparent 33rem),
        radial-gradient(ellipse at 52% 73%, rgba(224,190,120,.15) 0, transparent 39rem),
        linear-gradient(145deg, #fcfaf5 0%, var(--app-canvas) 48%, var(--app-canvas-deep) 100%);
}

.app-shell.app-future::before {
    position: fixed;
    z-index: 0;
    inset: 0;
    background-image:
        linear-gradient(rgba(52,82,116,.044) 1px, transparent 1px),
        linear-gradient(90deg, rgba(52,82,116,.044) 1px, transparent 1px);
    background-size: 34px 34px;
    content: "";
    opacity: 1;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, rgba(0,0,0,.76) 30%, transparent 82%);
    mask-image: linear-gradient(to bottom, #000 0, rgba(0,0,0,.76) 30%, transparent 82%);
}

.app-shell.app-future::after {
    position: fixed;
    z-index: 0;
    top: 5rem;
    right: -8rem;
    width: 38rem;
    height: 24rem;
    background: radial-gradient(ellipse, rgba(113,164,194,.15), transparent 68%);
    content: "";
    filter: blur(12px);
    pointer-events: none;
    transform: rotate(-12deg);
}

.app-shell.app-future > main,
.app-shell.app-future > .site-footer {
    position: relative;
    z-index: 1;
}

/* Crystalline app bar shared by every role without changing its navigation. */
.app-shell.app-future .site-header {
    background:
        radial-gradient(circle at 16% -120%, rgba(145,193,218,.35), transparent 39%),
        linear-gradient(112deg, var(--app-navy-deep), var(--app-navy-soft) 57%, var(--app-navy-deep));
    border-bottom-color: rgba(222,187,112,.76);
    box-shadow: 0 11px 30px rgba(16,28,46,.23), inset 0 -1px 0 rgba(129,176,206,.22);
}

.app-shell.app-future .site-header::after {
    background: linear-gradient(90deg, transparent 2%, rgba(121,174,202,.64) 24%, rgba(240,207,140,.94) 50%, rgba(121,174,202,.64) 76%, transparent 98%);
}

.app-shell.app-future .site-nav-dropdown {
    background:
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(239,244,244,.93)) padding-box,
        linear-gradient(125deg, rgba(222,183,105,.7), rgba(103,156,186,.62), rgba(255,255,255,.82)) border-box;
    border: 1px solid transparent;
    box-shadow: 0 12px 25px rgba(20,36,57,.14), 0 34px 72px rgba(20,36,57,.18), inset 0 1px 0 #fff;
    -webkit-backdrop-filter: blur(22px) saturate(135%);
    backdrop-filter: blur(22px) saturate(135%);
}

.app-shell.app-future .site-nav-dropdown a:hover,
.app-shell.app-future .site-nav-dropdown a:focus-visible {
    background: linear-gradient(110deg, rgba(226,239,245,.86), rgba(255,247,229,.9));
    box-shadow: inset 3px 0 0 rgba(104,158,188,.62), inset 0 1px 0 #fff, 0 7px 16px rgba(28,45,67,.08);
}

/* Remove the dashboard's former local canvas; the same atmosphere now belongs to the entire app. */
.app-shell.app-future .dashboard-future {
    isolation: auto;
    background: transparent;
}

.app-shell.app-future .dashboard-future::before,
.app-shell.app-future .dashboard-future::after {
    display: none;
}

/* Shared page-title treatment. */
.app-shell.app-future :is(
    .page-heading,
    .portal-hero,
    .portal-form-heading,
    .dashboard-welcome,
    .dashboard-section-heading,
    .schedule-heading,
    .finance-heading,
    .catalog-heading,
    .resource-heading,
    .staff-admin-heading,
    .staff-portal-heading,
    .admin-event-heading,
    .mail-center-heading,
    .mail-compose-heading,
    .inquiry-inbox-hero,
    .inquiry-detail-hero
) h1,
.app-shell.app-future .dashboard-section-heading h2 {
    color: var(--app-navy-deep);
    background: linear-gradient(112deg, var(--app-navy-deep) 6%, var(--app-navy-soft) 64%, var(--app-gold-deep) 118%);
    -webkit-background-clip: text;
    background-clip: text;
    font-family: Georgia, "Times New Roman", serif;
    text-shadow: 0 10px 26px rgba(34,60,91,.13);
    -webkit-text-fill-color: transparent;
}

.app-shell.app-future :is(
    .page-heading,
    .portal-hero,
    .portal-form-heading,
    .schedule-heading,
    .finance-heading,
    .catalog-heading,
    .resource-heading,
    .staff-admin-heading,
    .staff-portal-heading,
    .admin-event-heading,
    .mail-center-heading,
    .mail-compose-heading,
    .inquiry-inbox-hero,
    .inquiry-detail-hero
) > a,
.app-shell.app-future :is(
    .schedule-heading,
    .finance-heading,
    .catalog-heading,
    .resource-heading,
    .staff-admin-heading,
    .mail-center-heading,
    .mail-compose-heading
) > div:first-child > a {
    color: var(--app-gold-deep);
    font-weight: 820;
    text-decoration: none;
}

.app-shell.app-future .eyebrow {
    color: var(--app-gold-deep);
    text-shadow: 0 1px 0 rgba(255,255,255,.72);
}

.app-shell.app-future :is(
    .page-heading,
    .portal-hero,
    .portal-form-heading,
    .schedule-heading,
    .finance-heading,
    .catalog-heading,
    .resource-heading,
    .staff-admin-heading,
    .staff-portal-heading,
    .admin-event-heading,
    .mail-center-heading,
    .mail-compose-heading,
    .inquiry-inbox-hero,
    .inquiry-detail-hero
)::after {
    display: block;
    width: min(210px, 38%);
    height: 1px;
    margin-top: 15px;
    background: linear-gradient(90deg, rgba(92,146,177,.54), rgba(202,164,89,.66), transparent);
    content: "";
}

.app-shell.app-future :is(.page-heading, .portal-hero)::after {
    margin-right: auto;
    margin-left: auto;
}

/* Luminous glass surfaces across every CRM module. */
.app-shell.app-future :is(
    .steps article,
    .package-card,
    .review-card,
    .summary,
    .booking-form fieldset,
    .activation-form,
    .login-card,
    .client-quote-card,
    .quote-accept-form,
    .contract-client-actions,
    .contract-sign-form,
    .payment-next-step,
    .portal-event-card,
    .portal-package,
    .portal-payment-center,
    .portal-planning-tools,
    .portal-appointments,
    .portal-agreement,
    .event-panel,
    .dashboard-panel,
    .schedule-event-month,
    .schedule-empty-state,
    .inquiry-inbox-panel,
    .inquiry-message-card,
    .inquiry-summary-card,
    .finance-filter-card,
    .finance-results,
    .catalog-card,
    .resource-card,
    .resource-list-shell,
    .client-planning-form,
    .contract-preview-shell,
    .settings-window,
    .settings-pane,
    .branding-logo-card,
    .staff-event-list,
    .staff-assignment-panel,
    .staff-forms-panel,
    .staff-privacy-panel,
    .mail-workspace,
    .mail-system-panel,
    .mail-library,
    .mail-automation-intro,
    .mail-format-start,
    .mail-compose-card,
    .mail-tag-panel,
    .form-library-panel,
    .form-library-card,
    .form-builder-workspace,
    .form-builder-client-preview,
    .event-type-card,
    .package-picker-shell,
    .booking-package-panel,
    .inquiry-booking-panel,
    .ai-prompt-panel,
    .signature-library
) {
    background:
        linear-gradient(145deg, var(--future-glass), var(--future-glass-warm)) padding-box,
        linear-gradient(122deg, rgba(218,178,98,.7), rgba(99,153,184,.58), rgba(255,255,255,.82)) border-box;
    border: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.98), var(--future-shadow);
    -webkit-backdrop-filter: blur(18px) saturate(122%);
    backdrop-filter: blur(18px) saturate(122%);
}

.app-shell.app-future :is(
    .inquiry-inbox-metrics,
    .email-metrics,
    .finance-metrics,
    .catalog-metrics,
    .resource-metrics,
    .mail-overview,
    .portal-package-financials,
    .portal-payment-history,
    .planning-people-summary
) > :is(article, a, div) {
    background:
        linear-gradient(145deg, rgba(255,255,255,.9), rgba(240,244,242,.78)) padding-box,
        linear-gradient(125deg, rgba(217,178,99,.58), rgba(101,154,184,.48), rgba(255,255,255,.82)) border-box;
    border: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 4px 9px rgba(28,45,67,.08), 0 15px 30px rgba(28,45,67,.11);
}

.app-shell.app-future :is(
    .settings-group,
    .settings-link-group,
    .brand-color-control,
    .form-builder-item,
    .planning-field,
    .planning-person-card,
    .portal-event-summary,
    .appointment-list article,
    .portal-appointment-list article,
    .event-email-send-form,
    .event-email-history-list,
    .automation-criteria-panel fieldset,
    .mail-empty-inline,
    .quote-summary
) {
    background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(241,244,241,.77));
    border-color: rgba(91,132,159,.24);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 3px 8px rgba(28,45,67,.07), 0 12px 24px rgba(28,45,67,.08);
}

.app-shell.app-future .login-shell,
.app-shell.app-future .hero {
    background:
        radial-gradient(circle at 16% -18%, rgba(140,191,216,.36), transparent 36%),
        radial-gradient(circle at 84% 118%, rgba(222,185,109,.2), transparent 38%),
        linear-gradient(135deg, var(--app-navy-soft), var(--app-navy-deep));
}

.app-shell.app-future .login-card {
    box-shadow: inset 0 1px 0 #fff, 0 16px 36px rgba(7,18,31,.24), 0 48px 110px rgba(7,18,31,.34), 0 0 0 6px rgba(113,170,199,.08);
}

/* Inset, app-like controls with a cool focus halo. */
.app-shell.app-future input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]),
.app-shell.app-future select,
.app-shell.app-future textarea {
    background: linear-gradient(180deg, rgba(244,248,248,.98), rgba(255,255,255,.99));
    border-color: rgba(73,101,130,.42);
    box-shadow: inset 0 3px 9px rgba(25,43,67,.1), inset 0 -1px 0 #fff, 0 1px 0 rgba(255,255,255,.8);
}

.app-shell.app-future input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):focus,
.app-shell.app-future select:focus,
.app-shell.app-future textarea:focus {
    background: #fff;
    border-color: var(--app-gold-deep);
    box-shadow: 0 0 0 4px rgba(102,158,188,.14), 0 0 0 6px rgba(200,163,90,.12), inset 0 2px 4px rgba(24,37,57,.04);
}

.app-shell.app-future :is(.button.secondary, .button-secondary, button.secondary) {
    background:
        radial-gradient(circle at 22% -40%, rgba(139,189,214,.34), transparent 48%),
        linear-gradient(145deg, var(--app-navy-soft), var(--app-navy-deep));
    border-color: rgba(210,178,111,.48);
}

/* Lists and segmented controls share the same cool glass response. */
.app-shell.app-future :is(.schedule-view-switch, .tabs, .mail-workspace-header) {
    background: linear-gradient(180deg, rgba(221,230,232,.82), rgba(245,242,234,.88));
    border-color: rgba(88,129,157,.24);
    box-shadow: inset 0 2px 6px rgba(31,51,74,.09), 0 1px 0 #fff;
}

.app-shell.app-future :is(.schedule-view-switch a.is-active, .tabs a.active, .mail-tabs a.is-active) {
    color: #fff;
    background:
        radial-gradient(circle at 25% -80%, rgba(145,194,218,.34), transparent 54%),
        linear-gradient(145deg, var(--app-navy-soft), var(--app-navy-deep));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 18px rgba(24,37,57,.2);
}

.app-shell.app-future .finance-presets a[aria-current="page"] {
    color: #fff;
    background:
        radial-gradient(circle at 22% -70%, rgba(145,194,218,.34), transparent 54%),
        linear-gradient(145deg, var(--app-navy-soft), var(--app-navy-deep));
    border-color: rgba(210,178,111,.6);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 18px rgba(24,37,57,.2);
}

.app-shell.app-future :is(
    .schedule-event-row,
    .pending-booking-row,
    .inquiry-list-row,
    .staff-event-list > a,
    .portal-form-list a,
    .admin-form-list a,
    .settings-link-group a,
    .mail-message-row,
    .mail-template-library > article,
    .automation-rule-list > article,
    .event-email-history-list article
) {
    background: rgba(255,255,255,.32);
    transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s cubic-bezier(.2,.8,.2,1);
}

.app-shell.app-future :is(
    .schedule-event-month > header,
    .dashboard-pipeline-heading,
    .pending-booking-labels,
    .resource-card > header,
    .panel-heading,
    .mail-compose-topbar
) {
    background: linear-gradient(90deg, rgba(226,237,241,.67), rgba(251,247,237,.6));
    border-color: rgba(90,129,157,.18);
}

.app-shell.app-future .notice {
    background: linear-gradient(110deg, rgba(255,250,235,.94), rgba(235,243,245,.91));
    border-color: rgba(112,150,173,.28);
    border-left-color: var(--app-gold);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.94), 0 7px 17px rgba(28,45,67,.09);
}

.app-shell.app-future .site-footer {
    background: linear-gradient(180deg, rgba(246,241,231,0), rgba(210,223,226,.46));
    border-top-color: rgba(91,136,161,.17);
}

@media (hover:hover) and (pointer:fine) {
    .app-shell.app-future :is(
        .package-card,
        .portal-quick-actions > a,
        .form-library-card,
        .event-type-card,
        .mail-overview > a,
        .mail-format-start-grid a
    ):hover {
        border-color: transparent;
        background:
            linear-gradient(145deg, rgba(236,246,249,.94), rgba(255,248,231,.92)) padding-box,
            linear-gradient(122deg, rgba(222,181,96,.82), rgba(91,153,187,.74), rgba(255,255,255,.9)) border-box;
        box-shadow: inset 0 1px 0 #fff, var(--future-shadow-hover);
        transform: translateY(-5px) scale(1.008);
    }

    .app-shell.app-future :is(
        .schedule-event-row,
        .pending-booking-row,
        .inquiry-list-row,
        .staff-event-list > a,
        .portal-form-list a,
        .admin-form-list a,
        .settings-link-group a,
        .mail-message-row,
        .mail-template-library > article,
        .automation-rule-list > article,
        .event-email-history-list article
    ):hover {
        background: linear-gradient(90deg, rgba(228,241,246,.7), rgba(255,249,236,.72));
        box-shadow: inset 3px 0 0 rgba(87,148,180,.62), 0 8px 18px rgba(20,31,48,.09);
        transform: translateX(3px);
    }
}

/* One-time, progressive scroll reveals. Content stays visible when JavaScript is unavailable. */
@media (prefers-reduced-motion: no-preference) {
    .app-shell.app-future.future-motion [data-future-reveal] {
        opacity: 0;
        transform: translate3d(var(--future-shift-x, 0px), 18px, 0) scale(.99);
        transition:
            opacity .28s ease var(--future-delay, 0ms),
            transform .34s cubic-bezier(.2,.78,.2,1) var(--future-delay, 0ms);
        will-change: opacity, transform;
    }

    .app-shell.app-future.future-motion [data-future-reveal].is-visible {
        opacity: 1;
        transform: translate3d(0,0,0) scale(1);
        will-change: auto;
    }
}

@media (max-width: 720px) {
    .app-shell.app-future {
        --future-shadow: 0 4px 8px rgba(28,45,67,.08), 0 15px 31px rgba(28,45,67,.14), 0 28px 52px rgba(38,57,78,.065);
    }

    .app-shell.app-future::before {
        background-size: 26px 26px;
        opacity: .82;
    }

    .app-shell.app-future::after {
        right: -18rem;
        width: 32rem;
        opacity: .72;
    }

    .app-shell.app-future :is(
        .page-heading,
        .portal-hero,
        .portal-form-heading,
        .schedule-heading,
        .finance-heading,
        .catalog-heading,
        .resource-heading,
        .staff-admin-heading,
        .staff-portal-heading,
        .admin-event-heading,
        .mail-center-heading,
        .mail-compose-heading,
        .inquiry-inbox-hero,
        .inquiry-detail-hero
    )::after {
        margin-top: 10px;
    }
}

@media (max-width: 1100px) and (prefers-reduced-motion: no-preference) {
    .app-shell.app-future.future-motion [data-future-reveal] {
        --future-shift-x: 0px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-shell.app-future [data-future-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

@media print {
    .app-shell.app-future::before,
    .app-shell.app-future::after {
        display: none !important;
    }

    .app-shell.app-future [data-future-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Phone schedules: each booking is a contained, tactile card instead of one continuous row stack. */
@media (max-width: 700px) {
    .app-shell.app-future .schedule-event-rows {
        background:
            radial-gradient(circle at 12% 0, rgba(255,255,255,.8), transparent 13rem),
            linear-gradient(180deg, rgba(221,228,230,.78), rgba(240,235,224,.84));
    }

    .app-shell.app-future .schedule-event-rows > .schedule-event-row {
        border-color: rgba(79,104,126,.24);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.98),
            0 2px 4px rgba(25,39,58,.1),
            0 10px 20px rgba(25,39,58,.13);
    }

    .app-shell.app-future .schedule-event-rows > .schedule-event-row:nth-child(odd) {
        background:
            radial-gradient(circle at 10% -32%, #fff 0, rgba(255,255,255,0) 12rem),
            linear-gradient(145deg, #fffdf8, #f5eddd);
    }

    .app-shell.app-future .schedule-event-rows > .schedule-event-row:nth-child(even) {
        background:
            radial-gradient(circle at 10% -32%, rgba(255,255,255,.98) 0, rgba(255,255,255,0) 12rem),
            linear-gradient(145deg, #f5fafb, #e8eff1);
    }

    .app-shell.app-future .schedule-event-compact .schedule-list-date {
        border-right-color: rgba(128,103,54,.28);
    }
}