/*
 * customer-portal.css — premium editorial surface for the post-login
 * customer shell (dashboard, bookings, invoices, notifications, profile,
 * loyalty, rewards).
 *
 * Companion to portal-login.css. portal-login.css polishes the login itself;
 * THIS file polishes everything customers see AFTER they sign in, so the
 * brand impression doesn't fall off a cliff once they're inside.
 *
 * Direction: same Aman/Aesop editorial luxury — Cormorant Garamond display,
 * Inter body, sage spine, hairline gold rim, frosted glass card, generous
 * whitespace, paper texture wash.
 *
 * Strategy: NEW .cust-* utility classes living ALONGSIDE the existing
 * Tailwind/legacy markup. We never remove or override Tailwind utilities;
 * we add a premium layer that the most visible elements can opt into.
 *
 * Loaded AFTER /css/tailwind.css so cascade specificity wins.
 *
 * Naming guard: there is already a `cust-search-*` namespace in
 * customer/dashboard.php for the global search dropdown. The classes here
 * use distinct prefixes (cust-page, cust-section, cust-h1, cust-h2,
 * cust-eyebrow, cust-btn-primary, cust-btn-ghost, cust-divider) and do NOT
 * collide with cust-search-*.
 */

/* =========================================================================
   Design tokens — mirrors portal-login.css, repeated so this file is
   self-contained (portal-login.css is not loaded on the post-login shell).
   ========================================================================= */
:root {
    /* Sage spine */
    --cust-sage-50:  #F2F4ED;
    --cust-sage-100: #E3E8DA;
    --cust-sage-200: #C7D1B5;
    --cust-sage-300: #A7B594;
    --cust-sage-400: #859673;
    --cust-sage-500: #5E7259;
    --cust-sage-600: #556855;
    --cust-sage-700: #445344;
    --cust-sage-800: #384438;
    --cust-sage-900: #2F3830;
    --cust-sage-950: #1A201B;

    /* Warm cream */
    --cust-cream-50:  #FBFAF6;
    --cust-cream-100: #F5F0E8;
    --cust-cream-200: #E8DFD0;
    --cust-cream-300: #D3C5AE;

    /* Editorial metallics */
    --cust-gold-300: #E2C9A4;
    --cust-gold-400: #D2B48C;
    --cust-gold-500: #C4A882;
    --cust-gold-600: #A88B5E;
    --cust-bronze:   #B88859;

    /* Customer-portal accent — bronze, matching [data-portal="customer"] */
    --cust-accent:        var(--cust-bronze);
    --cust-accent-soft:   rgba(184, 136, 89, 0.18);
    --cust-accent-glow:   rgba(184, 136, 89, 0.45);

    /* Type scale */
    --cust-type-h1:      clamp(28px, 3.6vw, 40px);
    --cust-type-h2:      clamp(22px, 2.4vw, 28px);
    --cust-type-eyebrow: 11px;

    /* Motion */
    --cust-ease-soft:   cubic-bezier(0.22, 1, 0.36, 1);

    /* Surfaces */
    --cust-radius-card: 24px;
    --cust-radius-pill: 999px;
    --cust-shadow-card:
        0 1px 0 0 rgba(255, 255, 255, 0.65) inset,
        0 30px 90px -28px rgba(20, 28, 22, 0.18),
        0 10px 28px -10px rgba(20, 28, 22, 0.08);
}

/* =========================================================================
   Cormorant Garamond — fall back gracefully if Google Fonts is blocked.
   Most customer pages already preload Inter via inline @import; we add
   Cormorant here for any page that hasn't loaded it yet.
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600&family=Inter:wght@300;400;500;600;700&display=swap');

/* =========================================================================
   .cust-page
   Page-level wrap. Lays a warm cream wash + paper texture under the entire
   post-login shell so the white-gray-50 Tailwind body no longer reads as
   commodity SaaS.

   Opt-in: customer pages add `cust-page` to <main> (or a wrapper). Tailwind
   utility classes on the same element keep working — we only contribute
   background + texture + base color.
   ========================================================================= */
.cust-page {
    position: relative;
    background-color: var(--cust-cream-50);
    color: var(--cust-sage-900);
    isolation: isolate;
}
.cust-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 8% 4%, rgba(212, 180, 140, 0.05) 0%, transparent 38%),
        radial-gradient(circle at 92% 96%, rgba(107, 128, 104, 0.04) 0%, transparent 44%),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.44 0 0 0 0 0.32 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    background-size: auto, auto, 260px 260px;
    background-attachment: fixed, fixed, fixed;
    pointer-events: none;
    z-index: 0;
    opacity: 0.9;
}
.cust-page > * {
    position: relative;
    z-index: 1;
}

/* =========================================================================
   .cust-section
   Frosted-glass card surface with a hairline gold inner rim, matching
   .portal-card from portal-login.css. Use to wrap the top welcome / KPI
   block (and, gradually, other major dashboard sections) so they read as
   editorial cards instead of flat Tailwind divs.
   ========================================================================= */
.cust-section {
    position: relative;
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.82) 0%,
            rgba(255, 255, 255, 0.66) 100%);
    border: 1px solid rgba(184, 156, 123, 0.18);
    border-radius: var(--cust-radius-card);
    box-shadow: var(--cust-shadow-card);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    padding: 28px 28px 24px;
    margin-bottom: 24px;
}
@media (min-width: 768px) {
    .cust-section {
        padding: 36px 40px 32px;
    }
}

/* Inner gold rim — same treatment as .portal-card::before */
.cust-section::before {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: calc(var(--cust-radius-card) - 1px);
    background: linear-gradient(135deg,
        rgba(212, 180, 140, 0.10) 0%,
        transparent 35%,
        transparent 65%,
        rgba(107, 128, 104, 0.07) 100%);
    pointer-events: none;
    z-index: 0;
}
.cust-section > * {
    position: relative;
    z-index: 1;
}

/* Optional accent dot in the top-right corner (matches portal-card::after).
   Apply by adding the `.cust-section--sealed` modifier. */
.cust-section--sealed::after {
    content: '';
    position: absolute;
    top: 18px;
    right: 18px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cust-accent);
    box-shadow: 0 0 0 4px var(--cust-accent-soft);
    opacity: 0.85;
    z-index: 2;
}

/* =========================================================================
   .cust-section--ghost
   Wave 2: a lighter-weight surface for repeating rows (invoice rows,
   notification items) so a list of 20 cards doesn't feel as heavy as 20
   full frosted-glass cards stacked vertically. Skips the inner gold rim,
   uses a paler wash, slimmer padding, and a tighter radius.
   ========================================================================= */
.cust-section--ghost {
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.72) 0%,
            rgba(255, 255, 255, 0.54) 100%);
    border: 1px solid rgba(184, 156, 123, 0.12);
    border-radius: 18px;
    box-shadow:
        0 1px 0 0 rgba(255, 255, 255, 0.55) inset,
        0 14px 36px -22px rgba(20, 28, 22, 0.10);
    backdrop-filter: blur(8px) saturate(125%);
    -webkit-backdrop-filter: blur(8px) saturate(125%);
    padding: 18px 20px;
    margin-bottom: 12px;
}
@media (min-width: 768px) {
    .cust-section--ghost {
        padding: 20px 24px;
    }
}
/* Ghost variant suppresses the inner gold rim from .cust-section. */
.cust-section--ghost::before {
    display: none;
}

/* =========================================================================
   Typography — Cormorant Garamond display headlines, Inter body.
   .cust-h1 / .cust-h2 promote the most visible headings to editorial weight.
   ========================================================================= */
.cust-h1 {
    font-family: 'Cormorant Garamond', 'Times New Roman', serif;
    font-weight: 400;
    font-size: var(--cust-type-h1);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--cust-sage-900);
    margin: 0 0 10px;
}
.cust-h1 em {
    font-style: italic;
    color: var(--cust-accent);
    font-weight: 400;
}

.cust-h2 {
    font-family: 'Cormorant Garamond', 'Times New Roman', serif;
    font-weight: 500;
    font-size: var(--cust-type-h2);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--cust-sage-900);
    margin: 0 0 8px;
}

/* Uppercase tracking eyebrow — matches portal-login.css .form-eyebrow.
   Use above a cust-h1 to mark section type ("YOUR DASHBOARD", "INVOICES"). */
.cust-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: 'Inter', sans-serif;
    font-size: var(--cust-type-eyebrow);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    color: var(--cust-sage-600);
    margin-bottom: 12px;
}
.cust-eyebrow::before {
    content: '';
    width: 28px;
    height: 1px;
    background: var(--cust-accent);
    flex-shrink: 0;
}

/* =========================================================================
   Buttons — pill shapes that mirror .portal-btn (primary) and a softer
   ghost variant for secondary actions. Both keep the 56px desktop / 48px
   mobile minimum touch target.
   ========================================================================= */
.cust-btn-primary,
.cust-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 26px;
    border-radius: var(--cust-radius-pill);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    border: 0;
    transition:
        transform 280ms var(--cust-ease-soft),
        background 280ms var(--cust-ease-soft),
        box-shadow 280ms var(--cust-ease-soft),
        color 200ms var(--cust-ease-soft),
        border-color 200ms var(--cust-ease-soft);
    position: relative;
    overflow: hidden;
}

.cust-btn-primary {
    background: var(--cust-sage-900);
    color: var(--cust-cream-50);
    box-shadow:
        0 12px 28px -10px rgba(20, 28, 22, 0.32),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.cust-btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, var(--cust-accent-soft) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 700ms var(--cust-ease-soft);
}
.cust-btn-primary:hover {
    background: var(--cust-sage-800);
    transform: translateY(-1px);
    box-shadow:
        0 22px 42px -12px rgba(20, 28, 22, 0.42),
        inset 0 0 0 1px var(--cust-accent-soft);
    color: var(--cust-cream-50);
}
.cust-btn-primary:hover::before { transform: translateX(100%); }
.cust-btn-primary:active { transform: translateY(0); }
.cust-btn-primary:focus-visible {
    outline: 2px solid var(--cust-accent);
    outline-offset: 3px;
}

.cust-btn-ghost {
    background: transparent;
    color: var(--cust-sage-800);
    border: 1px solid rgba(85, 104, 85, 0.28);
}
.cust-btn-ghost:hover {
    background: rgba(85, 104, 85, 0.06);
    border-color: var(--cust-sage-700);
    color: var(--cust-sage-900);
}
.cust-btn-ghost:focus-visible {
    outline: 2px solid var(--cust-accent);
    outline-offset: 3px;
}

@media (min-width: 768px) {
    .cust-btn-primary,
    .cust-btn-ghost {
        min-height: 52px;
        padding: 0 30px;
        font-size: 13px;
    }
}

/* =========================================================================
   .cust-divider
   Gold hairline with optional centered ornament. Use between major
   sections to slow the scroll rhythm.
   ========================================================================= */
.cust-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--cust-accent);
    margin: 32px 0;
    opacity: 0.7;
}
.cust-divider::before,
.cust-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: currentColor;
    opacity: 0.45;
}
.cust-divider span {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 14px;
    letter-spacing: 0.04em;
    color: var(--cust-sage-700);
}
.cust-divider--plain::before,
.cust-divider--plain::after {
    opacity: 0.35;
}

/* =========================================================================
   .cust-stat-num  (Wave 3)
   Cormorant Garamond display number for stat cards (total spent, total
   bookings, amount due). Replaces the Tailwind text-3xl font-extrabold treatment
   with an editorial display weight that matches .cust-h1. The optional <em>
   accent inherits the bronze tone for a unit/currency mark.
   ========================================================================= */
.cust-stat-num {
    font-family: 'Cormorant Garamond', 'Times New Roman', serif;
    font-weight: 400;
    font-size: clamp(32px, 3.2vw, 40px);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--cust-sage-900);
    display: inline-block;
}
.cust-stat-num em {
    font-style: italic;
    color: var(--cust-accent);
    font-weight: 400;
    font-size: 0.7em;
    margin-right: 2px;
    letter-spacing: 0;
}

/* =========================================================================
   .cust-form-field  (Wave 3)
   Ghost input pattern matching portal-login's editorial form input — no box,
   just a hairline bottom border that softens to sage on focus, with an
   animated bronze underline that sweeps in from the left. Wrap each labeled
   input in a .cust-form-field block; the input child gets the underline.
   Tailwind classes already on the <input> still cascade — this layer wins
   only on border-bottom + outline.
   ========================================================================= */
.cust-form-field {
    position: relative;
    display: block;
    margin-bottom: 4px;
}
.cust-form-field > label,
.cust-form-field-label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--cust-sage-700);
    margin-bottom: 6px;
}
.cust-form-field input[type="text"],
.cust-form-field input[type="email"],
.cust-form-field input[type="tel"],
.cust-form-field input[type="password"],
.cust-form-field input[type="number"],
.cust-form-field input[type="url"],
.cust-form-field select,
.cust-form-field textarea {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(85, 104, 85, 0.28) !important;
    border-radius: 0 !important;
    padding: 10px 2px !important;
    width: 100%;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: var(--cust-sage-900);
    transition: border-color 220ms var(--cust-ease-soft);
    box-shadow: none !important;
}
.cust-form-field input::placeholder,
.cust-form-field textarea::placeholder {
    color: rgba(47, 56, 48, 0.35);
    font-style: italic;
}
.cust-form-field input:focus,
.cust-form-field select:focus,
.cust-form-field textarea:focus {
    outline: none !important;
    border-bottom-color: var(--cust-sage-600) !important;
    box-shadow: none !important;
}
/* Animated bronze underline sweep — sits beneath the hairline border. */
.cust-form-field::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--cust-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 320ms var(--cust-ease-soft);
    pointer-events: none;
}
.cust-form-field:focus-within::after {
    transform: scaleX(1);
}

/* =========================================================================
   Reduced motion — disable button sweep and any subtle animation.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    .cust-btn-primary,
    .cust-btn-primary::before,
    .cust-btn-ghost {
        transition: none !important;
    }
    .cust-btn-primary::before {
        display: none;
    }
    .cust-form-field::after,
    .cust-form-field input,
    .cust-form-field select,
    .cust-form-field textarea {
        transition: none !important;
    }
}

/* Tabular numerals on data (masterpiece elevation 2026-07-21) — stops number jitter,
   $100k detail. */
.cust-stat-num, .cust-price, .tabular-nums,
[class*="cust-"] .font-bold:not(.cust-h2) { font-variant-numeric: tabular-nums lining-nums; }

/* =========================================================================
   .cust-next — Next Cleaning focal hero (portal elevation 2026-07-21)
   Deep sage field + Cormorant date/price + real crew name + status pill.
   One bronze accent (the left spine + avatar). Replaces the off-token
   #4A5F4A gradient hero and is promoted directly under the greeting.
   ========================================================================= */
.cust-next {
    position: relative;
    overflow: hidden;
    border-radius: var(--cust-radius-card);
    background: linear-gradient(135deg, var(--cust-sage-900) 0%, var(--cust-sage-800) 55%, var(--cust-sage-950) 100%);
    color: var(--cust-cream-50);
    padding: 24px 26px;
    margin-bottom: 24px;
    box-shadow: var(--cust-shadow-card);
}
@media (min-width: 768px) { .cust-next { padding: 30px 34px; } }
.cust-next::before {
    content: '';
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at 88% -12%, rgba(226, 201, 164, 0.13) 0%, transparent 44%);
}
.cust-next::after { /* bronze spine — the one accent */
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: linear-gradient(180deg, var(--cust-gold-400), var(--cust-bronze));
    opacity: 0.9;
}
.cust-next > * { position: relative; z-index: 1; }
.cust-next__eyebrow {
    display: inline-block;
    font-size: 11px; font-weight: 600; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--cust-sage-200); margin-bottom: 16px;
}
.cust-next__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.cust-next__lead { display: flex; align-items: center; gap: 20px; min-width: 0; }
.cust-next__date {
    flex-shrink: 0; width: 76px; height: 76px; border-radius: 18px;
    background: rgba(251, 250, 246, 0.10);
    border: 1px solid rgba(251, 250, 246, 0.16);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.cust-next__mon { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cust-sage-200); line-height: 1; }
.cust-next__day { font-family: 'Cormorant Garamond', serif; font-size: 40px; font-weight: 600; line-height: 1; color: var(--cust-cream-50); margin-top: 3px; }
.cust-next__meta { min-width: 0; }
.cust-next__title { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 26px; line-height: 1.1; margin: 0 0 4px; color: var(--cust-cream-50); }
.cust-next__when { font-size: 14px; color: var(--cust-sage-200); margin: 0; }
.cust-next__crew { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--cust-sage-100); margin: 9px 0 0; }
.cust-next__avatar {
    width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, var(--cust-gold-400), var(--cust-bronze));
    color: #2E2417; font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.cust-next__side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.cust-next__status { font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
.cust-next__price { font-family: 'Cormorant Garamond', serif; font-size: 30px; font-weight: 600; line-height: 1; color: var(--cust-cream-50); }
.cust-next__cta {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 2px;
    font-size: 13px; font-weight: 600; color: var(--cust-sage-900);
    background: var(--cust-cream-50); padding: 9px 18px; border-radius: 999px;
    min-height: 40px; transition: transform 0.2s var(--cust-ease-soft), box-shadow 0.2s;
}
.cust-next__cta:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.4); }
.cust-next__cta i { font-size: 11px; }
@media (max-width: 560px) {
    .cust-next__side { align-items: flex-start; width: 100%; flex-direction: row; flex-wrap: wrap; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .cust-next__cta { transition: none; }
    .cust-next__cta:hover { transform: none; }
}

/* Flush modifier: frosted-seal surface that keeps the card's own inner
   padding (for list/table cards that already pad their header + rows). */
.cust-section--flush { padding: 0; margin-bottom: 0; overflow: hidden; }

/* =========================================================================
   PREMIUM GLASS + CONTRAST UPGRADE (2026-09-01)
   Auto-applies to EXISTING portal markup (no per-page class changes needed).
   Owner feedback: "blends together, poor contrast, badly styled." This layer
   gives the flat gray shell real depth, frosted glass cards, and AA contrast.
   Scoped to body[data-polish="on"] so it only touches the customer portal.
   ========================================================================= */

/* Richer background: soft emerald-tinted paper wash instead of flat gray-50.
   Cards now sit on a subtle gradient so the glass reads as glass. */
body[data-polish="on"].bg-gray-50,
body[data-polish="on"] {
    background:
        radial-gradient(1200px 600px at 12% -5%, rgba(198,161,91,0.06), transparent 60%),
        radial-gradient(1000px 700px at 100% 0%, rgba(22,56,43,0.06), transparent 55%),
        linear-gradient(180deg, #F4F6F2 0%, #EEF1EA 100%) !important;
    background-attachment: fixed;
    color: #17251E;
}

/* Frosted glass for the common card containers used across the portal.
   Targets the typical Tailwind card patterns; conservative so dropdowns/pills
   are not affected. */
body[data-polish="on"] .bg-white.rounded-2xl,
body[data-polish="on"] .bg-white.rounded-xl,
body[data-polish="on"] .bg-white.rounded-lg.shadow,
body[data-polish="on"] .bg-white.rounded-lg.shadow-sm,
body[data-polish="on"] .bg-white.shadow-sm.rounded-lg,
body[data-polish="on"] .stat-card.bg-white {
    background: rgba(255,255,255,0.72) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    backdrop-filter: blur(14px) saturate(1.15);
    border: 1px solid rgba(255,255,255,0.6);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.7) inset,
        0 10px 30px -12px rgba(11,33,26,0.18),
        0 2px 8px -4px rgba(11,33,26,0.10) !important;
    transition: transform .2s ease, box-shadow .2s ease;
}

/* Interactive cards lift on hover for tactile depth */
body[data-polish="on"] a .bg-white.rounded-2xl:hover,
body[data-polish="on"] .bg-white.rounded-2xl.hover\:shadow-md:hover,
body[data-polish="on"] .stat-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.8) inset,
        0 18px 40px -14px rgba(11,33,26,0.24) !important;
}

/* Contrast: body text darker, headings heavier + distinct from body */
body[data-polish="on"] .text-gray-500 { color: #5A6B60 !important; }
body[data-polish="on"] .text-gray-600 { color: #46564C !important; }
body[data-polish="on"] h1, body[data-polish="on"] h2, body[data-polish="on"] h3 {
    color: #10241C; letter-spacing: -0.01em;
}
body[data-polish="on"] .font-semibold, body[data-polish="on"] .font-bold { color: #10241C; }

/* Money + stats read as data */
body[data-polish="on"] .tabular, body[data-polish="on"] [class*="stat"] .text-2xl,
body[data-polish="on"] [class*="stat"] .text-3xl { font-variant-numeric: tabular-nums; }

/* Sidebar active state: premium gold accent + stronger contrast */
body[data-polish="on"] .sidebar-link.active {
    background: linear-gradient(135deg, rgba(22,56,43,0.06), rgba(198,161,91,0.10)) !important;
    color: #16382B !important;
    border-left: 3px solid #C6A15B !important;
    font-weight: 600;
}
body[data-polish="on"] .sidebar-link:not(.active):hover {
    background: rgba(22,56,43,0.05) !important;
}

/* Gold focus rings for accessibility + brand */
body[data-polish="on"] a:focus-visible,
body[data-polish="on"] button:focus-visible,
body[data-polish="on"] input:focus-visible,
body[data-polish="on"] select:focus-visible {
    outline: 2px solid #C6A15B;
    outline-offset: 2px;
    border-radius: 6px;
}

/* Primary buttons: deeper emerald with subtle sheen for premium feel */
body[data-polish="on"] .bg-sage-600,
body[data-polish="on"] .bg-green-600,
body[data-polish="on"] button.btn-primary {
    background-image: linear-gradient(135deg, #1E4636 0%, #16382B 100%) !important;
    box-shadow: 0 6px 18px -8px rgba(11,33,26,0.5);
}

/* Hairline dividers read cleaner on the new bg */
body[data-polish="on"] .border-gray-100 { border-color: rgba(22,56,43,0.08) !important; }
body[data-polish="on"] .border-gray-200 { border-color: rgba(22,56,43,0.12) !important; }

/* Mobile: keep glass legible on small screens */
@media (max-width: 480px) {
    body[data-polish="on"] .bg-white.rounded-2xl,
    body[data-polish="on"] .bg-white.rounded-xl {
        background: rgba(255,255,255,0.82) !important;
        backdrop-filter: blur(10px);
    }
}

/* =========================================================================
   PORTAL BOLD REDESIGN v2 (2026-09-01) - major visual identity shift.
   Deep emerald sidebar + elevated header + real depth. Owner wanted major
   improvements over the subtle glass pass.
   ========================================================================= */

/* --- DEEP EMERALD SIDEBAR (the biggest identity change) --- */
body[data-polish="on"] .desktop-sidebar {
    background:
        radial-gradient(600px 300px at 50% -10%, rgba(198,161,91,0.10), transparent 60%),
        linear-gradient(180deg, #1A3E30 0%, #16382B 45%, #0E2A20 100%) !important;
    border-right: 1px solid rgba(198,161,91,0.22) !important;
    box-shadow: 4px 0 24px -12px rgba(11,33,26,0.5);
}
/* brand block on dark */
body[data-polish="on"] .desktop-sidebar h1 { color: #F7F4ED !important; }
body[data-polish="on"] .desktop-sidebar p  { color: rgba(215,231,224,0.65) !important; }
body[data-polish="on"] .desktop-sidebar .text-warm-900 { color:#F7F4ED !important; }
body[data-polish="on"] .desktop-sidebar .text-warm-400,
body[data-polish="on"] .desktop-sidebar .text-warm-500 { color: rgba(215,231,224,0.6) !important; }

/* nav links: light ink on dark, clear hover */
body[data-polish="on"] .desktop-sidebar .sidebar-link {
    color: rgba(233,240,234,0.82) !important;
    border-left: 3px solid transparent;
}
body[data-polish="on"] .desktop-sidebar .sidebar-link i,
body[data-polish="on"] .desktop-sidebar .sidebar-link svg { color: rgba(215,231,224,0.7) !important; }
body[data-polish="on"] .desktop-sidebar .sidebar-link:not(.active):hover {
    background: rgba(255,255,255,0.07) !important;
    color: #FFFFFF !important;
}
/* active: gold spine + frosted gold tint + ivory text */
body[data-polish="on"] .desktop-sidebar .sidebar-link.active {
    background: linear-gradient(135deg, rgba(198,161,91,0.22), rgba(198,161,91,0.10)) !important;
    color: #FFFFFF !important;
    border-left: 3px solid #C6A15B !important;
    box-shadow: inset 0 0 0 1px rgba(198,161,91,0.25);
}
body[data-polish="on"] .desktop-sidebar .sidebar-link.active i,
body[data-polish="on"] .desktop-sidebar .sidebar-link.active svg { color:#D9BC85 !important; }
/* the user chip at the bottom of the sidebar */
body[data-polish="on"] .desktop-sidebar .border-t { border-color: rgba(255,255,255,0.10) !important; }

/* --- ELEVATED TOP HEADER (frosted, sits above content) --- */
body[data-polish="on"] header,
body[data-polish="on"] .fixed.top-0.bg-white,
body[data-polish="on"] nav.bg-white.fixed {
    background: rgba(247,244,237,0.78) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    backdrop-filter: blur(16px) saturate(1.2);
    border-bottom: 1px solid rgba(22,56,43,0.10) !important;
    box-shadow: 0 4px 20px -12px rgba(11,33,26,0.25);
}

/* --- STRONGER HERO CARD (the "Good evening" block) --- */
body[data-polish="on"] .cust-section,
body[data-polish="on"] main > div > .bg-white.rounded-2xl:first-of-type {
    background:
        radial-gradient(700px 260px at 88% -30%, rgba(198,161,91,0.10), transparent 60%),
        linear-gradient(135deg, rgba(255,255,255,0.86), rgba(244,246,242,0.82)) !important;
    border: 1px solid rgba(255,255,255,0.7) !important;
}

/* --- DEEPER, more premium card shadows overall --- */
body[data-polish="on"] .bg-white.rounded-2xl,
body[data-polish="on"] .bg-white.rounded-xl {
    box-shadow:
        0 1px 0 rgba(255,255,255,0.8) inset,
        0 14px 40px -16px rgba(11,33,26,0.20),
        0 3px 10px -6px rgba(11,33,26,0.12) !important;
    border-radius: 20px !important;
}

/* --- Book Now / primary CTA: richer emerald with gold ring on hover --- */
body[data-polish="on"] a[href*="book"].bg-\[\#16382B\],
body[data-polish="on"] .btn-book, body[data-polish="on"] a.book-now {
    box-shadow: 0 8px 22px -10px rgba(11,33,26,0.55);
}

/* mobile: sidebar drawer also dark if shown */
body[data-polish="on"] .mobile-nav .desktop-sidebar,
body[data-polish="on"] #mobileSidebar { }

/* =========================================================================
   LUX HERO (2026-09-01) - the signature "wow" centerpiece of the dashboard.
   Cinematic emerald gradient, gold signature arc, editorial serif, glass CTAs.
   Merges greeting + next-clean + one-tap rebook (the conversion action).
   ========================================================================= */
.hero-lux {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    padding: 38px 40px 34px;
    margin-bottom: 28px;
    color: #F7F4ED;
    background:
        radial-gradient(900px 380px at 82% -40%, rgba(198,161,91,0.28), transparent 60%),
        radial-gradient(600px 300px at 8% 120%, rgba(198,161,91,0.10), transparent 55%),
        linear-gradient(135deg, #1E4636 0%, #16382B 42%, #0E2A20 100%);
    border: 1px solid rgba(198,161,91,0.28);
    box-shadow: 0 30px 70px -30px rgba(11,33,26,0.7), 0 2px 0 rgba(255,255,255,0.04) inset;
}
/* gold signature arc (the expensive detail) */
.hero-lux::after {
    content: ""; position: absolute; right: -80px; top: -120px;
    width: 340px; height: 340px; border-radius: 50%;
    border: 1.5px solid rgba(198,161,91,0.35);
    box-shadow: 0 0 0 22px rgba(198,161,91,0.06);
    pointer-events: none;
}
.hero-lux__eyebrow {
    font-family: Inter, sans-serif; font-size: 11px; font-weight: 700;
    letter-spacing: 0.32em; text-transform: uppercase; color: #D9BC85;
    display: block; margin-bottom: 10px;
}
.hero-lux__greet {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(30px, 4.4vw, 46px); font-weight: 600; line-height: 1.02;
    letter-spacing: -0.01em; margin: 0 0 6px; color: #FBFAF6;
}
.hero-lux__greet em { color: #E7C78C; font-style: italic; }
.hero-lux__sub { font-family: Inter, sans-serif; font-size: 14.5px; color: rgba(231,240,234,0.78); margin: 0 0 22px; }

.hero-lux__panel {
    display: flex; flex-wrap: wrap; align-items: center; gap: 22px;
    background: rgba(255,255,255,0.07);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px; padding: 18px 22px; position: relative; z-index: 2;
}
.hero-lux__date {
    flex: 0 0 auto; width: 78px; height: 82px; border-radius: 16px;
    background: linear-gradient(160deg, rgba(198,161,91,0.9), rgba(198,161,91,0.7));
    color: #10241C; display: flex; flex-direction: column; align-items: center; justify-content: center;
    box-shadow: 0 10px 24px -10px rgba(198,161,91,0.6);
}
.hero-lux__date .m { font-family: Inter; font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.85; }
.hero-lux__date .d { font-family: 'Cormorant Garamond', serif; font-size: 34px; font-weight: 700; line-height: 1; }
.hero-lux__info { flex: 1 1 200px; min-width: 160px; }
.hero-lux__svc { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 600; color: #FBFAF6; margin: 0 0 2px; }
.hero-lux__when { font-family: Inter; font-size: 13.5px; color: rgba(231,240,234,0.82); margin: 0; }
.hero-lux__crew { font-family: Inter; font-size: 12.5px; color: rgba(215,231,224,0.62); margin: 6px 0 0; }
.hero-lux__status {
    font-family: Inter; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 6px 12px; border-radius: 999px; background: rgba(211,224,194,0.18); color: #D3E0C2;
    border: 1px solid rgba(211,224,194,0.25); white-space: nowrap;
}
.hero-lux__actions { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; position: relative; z-index: 2; }
.hero-lux__btn {
    font-family: Inter; font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
    padding: 13px 24px; border-radius: 12px; text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
    transition: transform .18s ease, box-shadow .18s ease;
}
.hero-lux__btn--gold { background: linear-gradient(135deg, #D9BC85, #C6A15B); color: #10241C; box-shadow: 0 10px 26px -10px rgba(198,161,91,0.65); }
.hero-lux__btn--ghost { background: rgba(255,255,255,0.08); color: #F7F4ED; border: 1px solid rgba(255,255,255,0.2); }
.hero-lux__btn:hover { transform: translateY(-2px); }
.hero-lux__btn--gold:hover { box-shadow: 0 16px 34px -12px rgba(198,161,91,0.8); }

/* empty-state variant (no upcoming) */
.hero-lux__empty { font-family: Inter; font-size: 14px; color: rgba(231,240,234,0.8); }

@media (max-width: 640px) {
    .hero-lux { padding: 28px 22px; border-radius: 22px; }
    .hero-lux__panel { padding: 16px; gap: 16px; }
    .hero-lux__actions .hero-lux__btn { flex: 1 1 auto; justify-content: center; }
}

/* =========================================================================
   ICON CIRCLE FIX (2026-09-01): several quick-link/avatar icon circles used
   arbitrary Tailwind gradient classes (from-[#5E7259] etc) that were never
   compiled into tailwind.css, so the circle had no background and the icon
   went invisible. Force a guaranteed emerald gradient + light glyph on every
   icon circle in the portal. Also lifts the tiles for premium feel.
   ========================================================================= */
body[data-polish="on"] .w-12.h-12.rounded-2xl[class*="from-["],
body[data-polish="on"] .w-14.h-14.rounded-2xl[class*="from-["],
body[data-polish="on"] .w-10.h-10.rounded-xl[class*="from-["] {
    background-image: linear-gradient(135deg, #1E4636 0%, #16382B 100%) !important;
    box-shadow: 0 8px 20px -8px rgba(11,33,26,0.45) !important;
}
body[data-polish="on"] .w-12.h-12.rounded-2xl i,
body[data-polish="on"] .w-12.h-12.rounded-2xl svg,
body[data-polish="on"] .w-14.h-14.rounded-2xl i,
body[data-polish="on"] .w-14.h-14.rounded-2xl svg,
body[data-polish="on"] .w-10.h-10.rounded-xl i,
body[data-polish="on"] .w-10.h-10.rounded-xl svg {
    color: #F7F4ED !important;
}

/* Premium stat tiles: gold hairline top accent + tabular numerals + lift */
body[data-polish="on"] .cust-stat-num,
body[data-polish="on"] [class*="stat"] .text-3xl,
body[data-polish="on"] [class*="stat"] .text-2xl {
    font-variant-numeric: tabular-nums;
    color: #10241C;
}

/* Quick-link tiles: cleaner glass + hover lift */
body[data-polish="on"] .cust-quick a,
body[data-polish="on"] a.group .bg-white.rounded-2xl {
    transition: transform .18s ease, box-shadow .18s ease;
}
body[data-polish="on"] a.group:hover .w-12.h-12.rounded-2xl {
    transform: translateY(-1px) scale(1.03);
}

/* ── Phones: nothing may force the layout wider than the screen ───────────────
   Mobile Chrome sizes its layout viewport from the widest min-content on the
   page. The status filter pills are a nowrap flex row with no scroll container,
   so bookings / invoices / payments rendered at 480-647px on a 390px phone and
   the whole portal appeared zoomed-out and draggable (iPhone probe 2026-09-11).
   Let the row wrap on small screens. */
@media (max-width: 640px) {
    div:has(> .filter-pill) { flex-wrap: wrap; }
}

/* The page column is a flex item, so its min-width defaults to auto: any wide
   child (a nowrap pill row, a long code, an unbroken email) forces the column -
   and on phones the whole layout viewport - wider than the screen. Confirmed by
   toggling this single property on loyalty.php (496px -> 390px). */
main.cust-page { min-width: 0; }

/* Empty-state panels use p-12 (48px each side); on a 390px phone that leaves
   294px for a full-width button, which then forces the column wider. */
@media (max-width: 640px) {
    main.cust-page .p-12 { padding: 24px !important; }
}

/* The primary button inherited the page ink (#10241C) as its label colour and
   sat on a forest fill - about 1.3:1. Book New Cleaning was unreadable on
   every customer page (iPhone + desktop probe 2026-09-11). */
.cust-btn-primary, .cust-btn-primary:hover, .cust-btn-primary:focus { color: #F7F5F0 !important; }
.cust-btn-primary i { color: inherit; }

/* ── Light text must stay light ──────────────────────────────────────────────
   The polish rule above (.font-semibold / .font-bold -> ink) also
   caught bold text that sits on dark or coloured fills - every Subscribe button,
   the referral banner, the hero title - and painted them ink-on-ink (1.1:1).
   Tailwind's light text utilities win again here, at higher specificity. */
body[data-polish=on] .text-white,
body[data-polish=on] .text-white.font-semibold,
body[data-polish=on] .text-white.font-bold,
body[data-polish=on] .hero-lux__svc,
body[data-polish=on] .hero-lux h1, body[data-polish=on] .hero-lux h2 { color: #FFFFFF !important; }
body[data-polish=on] .text-white\/90 { color: rgba(255,255,255,.9) !important; }
body[data-polish=on] .text-white\/80 { color: rgba(255,255,255,.8) !important; }
body[data-polish=on] .text-white\/70 { color: rgba(255,255,255,.7) !important; }
body[data-polish=on] .text-white\/60 { color: rgba(255,255,255,.6) !important; }
body[data-polish=on] .text-sage-50  { color: #F6F7F4 !important; }
body[data-polish=on] .text-sage-100 { color: #E8EBE3 !important; }
body[data-polish=on] .text-sage-200 { color: #D4DACA !important; }
body[data-polish=on] .text-amber-100, body[data-polish=on] .text-yellow-100 { color: #FEF3C7 !important; }
body[data-polish=on] .text-pink-200 { color: #FBCFE8 !important; }
/* Off-brand accents on the subscription cards: blue is not in the palette. */
body[data-polish=on] .bg-blue-600 { background-color: #2F3830 !important; }
body[data-polish=on] .bg-gray-900 { background-color: #4F6B4F !important; }
/* Faint helper copy that fell under AA on white. */
body[data-polish=on] .text-gray-400 { color: #6F6455 !important; }

/* Tier card on phones: badge + copy + Rewards link sat in one non-wrapping
   row, so the copy column collapsed to one word per line (iPhone probe). */
@media (max-width: 640px) {
    main.cust-page .cust-section .flex.items-start.justify-between { flex-wrap: wrap; }
    main.cust-page .cust-section .flex.items-start.justify-between > .flex.items-center { flex: 1 1 100%; }
}