/*
   Tenant-controlled customer visual layer.
   IMPORTANT: this file must never change the customer app structure.
   The original PlaceOrder/Menu/Basket responsive layout remains the source of truth.
   Themes only alter colour, contrast, backgrounds, borders and decorative ambience.
*/

body[class*="q-customer-theme-"] {
    min-height: 100vh;
    background: var(--q-page-bg), var(--q-venue-bg-image) !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
    color: var(--q-text) !important;
}

body[class*="q-customer-theme-"] * {
    color-scheme: var(--q-color-scheme);
}

body[class*="q-customer-theme-"] ::selection {
    background: var(--q-selection-bg);
    color: var(--q-selection-text);
}

/* High-level surfaces: colour only, no sizing/grid/spacing changes. */
body[class*="q-customer-theme-"] .menu-header,
body[class*="q-customer-theme-"] .categories,
body[class*="q-customer-theme-"] .basket-bar,
body[class*="q-customer-theme-"] .card,
body[class*="q-customer-theme-"] .summary,
body[class*="q-customer-theme-"] .basket-page,
body[class*="q-customer-theme-"] .basket-header,
body[class*="q-customer-theme-"] .basket-item,
body[class*="q-customer-theme-"] .basket-summary,
body[class*="q-customer-theme-"] .swal2-popup.swal-light-gradient {
    background: var(--q-bg-elevated) !important;
    border-color: var(--q-line) !important;
    color: var(--q-text) !important;
}

body[class*="q-customer-theme-"].q-customer-card-solid .menu-header,
body[class*="q-customer-theme-"].q-customer-card-solid .categories,
body[class*="q-customer-theme-"].q-customer-card-solid .basket-bar,
body[class*="q-customer-theme-"].q-customer-card-solid .card,
body[class*="q-customer-theme-"].q-customer-card-solid .summary,
body[class*="q-customer-theme-"].q-customer-card-solid .basket-page,
body[class*="q-customer-theme-"].q-customer-card-solid .basket-header,
body[class*="q-customer-theme-"].q-customer-card-solid .basket-item,
body[class*="q-customer-theme-"].q-customer-card-solid .basket-summary {
    background: var(--q-bg-elevated-strong) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body[class*="q-customer-theme-"].q-customer-card-outline .menu-header,
body[class*="q-customer-theme-"].q-customer-card-outline .categories,
body[class*="q-customer-theme-"].q-customer-card-outline .basket-bar,
body[class*="q-customer-theme-"].q-customer-card-outline .card,
body[class*="q-customer-theme-"].q-customer-card-outline .summary,
body[class*="q-customer-theme-"].q-customer-card-outline .basket-page,
body[class*="q-customer-theme-"].q-customer-card-outline .basket-header,
body[class*="q-customer-theme-"].q-customer-card-outline .basket-item,
body[class*="q-customer-theme-"].q-customer-card-outline .basket-summary {
    background: color-mix(in srgb, var(--q-bg-elevated) 56%, transparent) !important;
    border-color: color-mix(in srgb, var(--q-brand) 34%, var(--q-line)) !important;
}

body[class*="q-customer-theme-"] .menu-header strong,
body[class*="q-customer-theme-"] .menu-header span,
body[class*="q-customer-theme-"] .menus-caption,
body[class*="q-customer-theme-"] .menu-title,
body[class*="q-customer-theme-"] .cat-name,
body[class*="q-customer-theme-"] .menu-info h4,
body[class*="q-customer-theme-"] .basket-header h1,
body[class*="q-customer-theme-"] .basket-item-title,
body[class*="q-customer-theme-"] .basket-price,
body[class*="q-customer-theme-"] .summary h4,
body[class*="q-customer-theme-"] .summary-total,
body[class*="q-customer-theme-"] .price,
body[class*="q-customer-theme-"] label {
    color: var(--q-text) !important;
}

body[class*="q-customer-theme-"] .menu-info p,
body[class*="q-customer-theme-"] .summary span,
body[class*="q-customer-theme-"] .basket-item-desc,
body[class*="q-customer-theme-"] .location-text,
body[class*="q-customer-theme-"] .summary-row,
body[class*="q-customer-theme-"] .empty-basket,
body[class*="q-customer-theme-"] .footer {
    color: var(--q-text-soft) !important;
}

/* Theme layout presets are intentionally visual-only. No grid/template/image size overrides. */
body[class*="q-customer-theme-"].q-customer-layout-hero .menu-header {
    background: linear-gradient(160deg, color-mix(in srgb, var(--q-brand) 20%, transparent), color-mix(in srgb, var(--q-bg-elevated-strong) 92%, transparent)), var(--q-venue-bg-image) !important;
    background-size: cover !important;
    background-position: center !important;
}

body[class*="q-customer-theme-"].q-customer-layout-compact .menu-header,
body[class*="q-customer-theme-"].q-customer-layout-compact .categories,
body[class*="q-customer-theme-"].q-customer-layout-compact .menu-item,
body[class*="q-customer-theme-"].q-customer-layout-compact .basket-item {
    box-shadow: 0 10px 24px rgba(0,0,0,.16) !important;
}

body[class*="q-customer-theme-"] .categories a,
body[class*="q-customer-theme-"] .basket-btn,
body[class*="q-customer-theme-"] .menu-header .btn-light,
body[class*="q-customer-theme-"] .secondary,
body[class*="q-customer-theme-"] .back-link,
body[class*="q-customer-theme-"] .wine-btn,
body[class*="q-customer-theme-"] .wine-size-btn {
    background: color-mix(in srgb, var(--q-brand) 16%, transparent) !important;
    border-color: color-mix(in srgb, var(--q-brand) 34%, var(--q-line)) !important;
    color: var(--q-text) !important;
}

body[class*="q-customer-theme-"] .categories a:hover,
body[class*="q-customer-theme-"] .basket-btn:hover,
body[class*="q-customer-theme-"] .menu-header .btn-light:hover,
body[class*="q-customer-theme-"] .secondary:hover,
body[class*="q-customer-theme-"] .back-link:hover,
body[class*="q-customer-theme-"] .wine-btn:hover,
body[class*="q-customer-theme-"] .wine-size-btn:hover {
    background: color-mix(in srgb, var(--q-brand) 24%, transparent) !important;
    color: var(--q-text) !important;
}

body[class*="q-customer-theme-"] .categories a.bg-dark.text-light,
body[class*="q-customer-theme-"] .add-btn,
body[class*="q-customer-theme-"] .basket-bar a,
body[class*="q-customer-theme-"] .primary,
body[class*="q-customer-theme-"] .checkout-btn,
body[class*="q-customer-theme-"] .swal2-confirm {
    background: linear-gradient(135deg, var(--q-brand), var(--q-brand-2)) !important;
    border-color: transparent !important;
    color: var(--q-on-brand) !important;
    box-shadow: 0 14px 32px color-mix(in srgb, var(--q-brand) 24%, transparent) !important;
}

body[class*="q-customer-theme-"] .add-btn *,
body[class*="q-customer-theme-"] .basket-bar a *,
body[class*="q-customer-theme-"] .primary *,
body[class*="q-customer-theme-"] .checkout-btn *,
body[class*="q-customer-theme-"] .swal2-confirm * {
    color: var(--q-on-brand) !important;
}

body[class*="q-customer-theme-"] select,
body[class*="q-customer-theme-"] textarea,
body[class*="q-customer-theme-"] input,
body[class*="q-customer-theme-"] .form-control,
body[class*="q-customer-theme-"] .form-select {
    background: var(--q-bg-input) !important;
    border-color: var(--q-line) !important;
    color: var(--q-text) !important;
}

body[class*="q-customer-theme-"] .form-select option,
body[class*="q-customer-theme-"] select option,
body[class*="q-customer-theme-"] .form-select optgroup,
body[class*="q-customer-theme-"] select optgroup {
    background-color: var(--q-option-bg) !important;
    color: var(--q-option-text) !important;
}

body[class*="q-customer-theme-"] .form-control::placeholder,
body[class*="q-customer-theme-"] textarea::placeholder,
body[class*="q-customer-theme-"] input::placeholder {
    color: color-mix(in srgb, var(--q-muted) 84%, transparent) !important;
    opacity: 1 !important;
}

body[class*="q-customer-theme-"] .badge,
body[class*="q-customer-theme-"] .pill,
body[class*="q-customer-theme-"] .tag,
body[class*="q-customer-theme-"] .basket-count,
body[class*="q-customer-theme-"] .qty-control {
    background: color-mix(in srgb, var(--q-brand) 18%, transparent) !important;
    color: var(--q-text) !important;
    border-color: color-mix(in srgb, var(--q-brand) 34%, var(--q-line)) !important;
}

body[class*="q-customer-theme-"] .qty-btn,
body[class*="q-customer-theme-"] .remove-btn {
    color: var(--q-text) !important;
}

body[class*="q-customer-theme-"] a:not(.primary):not(.checkout-btn):not(.add-btn):not(.basket-bar a) {
    color: color-mix(in srgb, var(--q-brand) 72%, var(--q-text)) !important;
}

body.q-customer-graphics-none::before,
body.q-customer-graphics-none::after {
    display: none !important;
}

body.q-customer-graphics-aurora::before,
body.q-customer-graphics-orbs::before,
body.q-customer-graphics-stripes::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

body.q-customer-graphics-aurora::before {
    background: radial-gradient(circle at 12% 16%, color-mix(in srgb, var(--q-brand) 24%, transparent), transparent 34%), radial-gradient(circle at 86% 12%, color-mix(in srgb, var(--q-brand-2) 18%, transparent), transparent 34%);
}

body.q-customer-graphics-orbs::before {
    background: radial-gradient(circle at 18% 20%, color-mix(in srgb, var(--q-brand) 30%, transparent), transparent 18%), radial-gradient(circle at 82% 72%, color-mix(in srgb, var(--q-brand-2) 22%, transparent), transparent 20%);
    filter: blur(6px);
}

body.q-customer-graphics-stripes::before {
    background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--q-brand) 10%, transparent) 0 1px, transparent 1px 16px);
}


/* =========================================================
   CONTRAST HARDENING LAYER
   This section deliberately uses higher specificity + !important because
   several customer pages contain inline/page-level colours and Bootstrap
   utility classes such as .text-dark/.text-muted. Tenant themes must never
   make customer text unreadable.
   ========================================================= */
body[class*="q-customer-theme-"] .text-dark,
body[class*="q-customer-theme-"] .text-black,
body[class*="q-customer-theme-"] .text-body,
body[class*="q-customer-theme-"] .text-muted,
body[class*="q-customer-theme-"] .swal2-title,
body[class*="q-customer-theme-"] .swal2-html-container,
body[class*="q-customer-theme-"] .swal2-content,
body[class*="q-customer-theme-"] .swal2-popup.swal-light-gradient .swal2-title,
body[class*="q-customer-theme-"] .swal2-popup.swal-light-gradient .swal2-html-container,
body[class*="q-customer-theme-"] .swal2-popup.swal-light-gradient .text-dark,
body[class*="q-customer-theme-"] .swal2-popup.swal-light-gradient .text-muted {
    color: var(--q-text) !important;
}

body[class*="q-customer-theme-"] .swal2-popup,
body[class*="q-customer-theme-"] .swal2-popup.swal-light-gradient {
    background: var(--q-bg-elevated-strong) !important;
    color: var(--q-text) !important;
    border: 1px solid var(--q-line) !important;
}

body[class*="q-customer-theme-"] .swal2-popup *,
body[class*="q-customer-theme-"] .menu-item *,
body[class*="q-customer-theme-"] .menu-header *,
body[class*="q-customer-theme-"] .categories *,
body[class*="q-customer-theme-"] .basket-bar *,
body[class*="q-customer-theme-"] .basket-page *,
body[class*="q-customer-theme-"] .basket-item *,
body[class*="q-customer-theme-"] .basket-summary *,
body[class*="q-customer-theme-"] .summary * {
    text-shadow: none;
}

body[class*="q-customer-theme-"] .swal2-popup h1,
body[class*="q-customer-theme-"] .swal2-popup h2,
body[class*="q-customer-theme-"] .swal2-popup h3,
body[class*="q-customer-theme-"] .swal2-popup h4,
body[class*="q-customer-theme-"] .swal2-popup h5,
body[class*="q-customer-theme-"] .swal2-popup h6,
body[class*="q-customer-theme-"] .swal2-popup p,
body[class*="q-customer-theme-"] .swal2-popup span,
body[class*="q-customer-theme-"] .swal2-popup div:not(.badge),
body[class*="q-customer-theme-"] .swal2-popup label:not(.modifier-choice) {
    color: var(--q-text) !important;
}

body[class*="q-customer-theme-"] .modifier-choice {
    color: var(--q-text) !important;
    border-color: color-mix(in srgb, var(--q-brand) 34%, var(--q-line)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 10px 22px rgba(0,0,0,.12) !important;
}

body[class*="q-customer-theme-"] .modifier-choice .badge,
body[class*="q-customer-theme-"] .wine-size-btn .badge {
    background: var(--q-bg-3) !important;
    color: var(--q-text) !important;
    border: 1px solid var(--q-line) !important;
}

body[class*="q-customer-theme-"] .btn-secondary,
body[class*="q-customer-theme-"] .swal2-cancel {
    background: var(--q-bg-input) !important;
    border-color: var(--q-line) !important;
    color: var(--q-text) !important;
}

body[class*="q-customer-theme-"] .btn-close,
body[class*="q-customer-theme-"] .btn-close-white {
    filter: none !important;
}

body[class*="q-customer-theme-"] .menu-item {
    color: var(--q-text) !important;
}

body[class*="q-customer-theme-"] .cat-name span,
body[class*="q-customer-theme-"] .menu-title,
body[class*="q-customer-theme-"] .toast-style,
body[class*="q-customer-theme-"] .toast-style * {
    color: var(--q-text) !important;
}

/* =========================================================
   FINAL READABILITY GUARDRAILS
   Customer pages and SweetAlert dialogs must remain readable with every
   venue palette. These rules do not change layout; they only take ownership
   of colour on legacy/Bootstrap text utilities and common customer surfaces.
   ========================================================= */
body[class*="q-customer-theme-"] {
    --bs-body-color: var(--q-text) !important;
    --bs-secondary-color: var(--q-text-soft) !important;
    --bs-tertiary-color: var(--q-muted) !important;
    --bs-emphasis-color: var(--q-text) !important;
    --bs-heading-color: var(--q-text) !important;
    --bs-link-color: color-mix(in srgb, var(--q-brand) 72%, var(--q-text)) !important;
    --bs-link-hover-color: color-mix(in srgb, var(--q-brand-2) 74%, var(--q-text)) !important;
}

body[class*="q-customer-theme-"] .menu-item,
body[class*="q-customer-theme-"] .menu-card,
body[class*="q-customer-theme-"] .item-card,
body[class*="q-customer-theme-"] .category-card,
body[class*="q-customer-theme-"] .modifier-card,
body[class*="q-customer-theme-"] .modifier-choice,
body[class*="q-customer-theme-"] .wine-size-btn,
body[class*="q-customer-theme-"] .wine-btn,
body[class*="q-customer-theme-"] .basket-card,
body[class*="q-customer-theme-"] .basket-item,
body[class*="q-customer-theme-"] .basket-summary,
body[class*="q-customer-theme-"] .summary,
body[class*="q-customer-theme-"] .swal2-popup,
body[class*="q-customer-theme-"] [class*="card"],
body[class*="q-customer-theme-"] [class*="panel"],
body[class*="q-customer-theme-"] [style*="background: rgba(0, 0, 0"],
body[class*="q-customer-theme-"] [style*="background:rgba(0, 0, 0"],
body[class*="q-customer-theme-"] [style*="background-color: rgba(0, 0, 0"],
body[class*="q-customer-theme-"] [style*="background-color:rgba(0, 0, 0"],
body[class*="q-customer-theme-"] [style*="background: rgba(255, 255, 255"],
body[class*="q-customer-theme-"] [style*="background:rgba(255, 255, 255"],
body[class*="q-customer-theme-"] [style*="background-color: rgba(255, 255, 255"],
body[class*="q-customer-theme-"] [style*="background-color:rgba(255, 255, 255"] {
    background: var(--q-bg-elevated) !important;
    border-color: var(--q-line) !important;
    color: var(--q-text) !important;
}

body[class*="q-customer-theme-"] .text-light,
body[class*="q-customer-theme-"] .text-white,
body[class*="q-customer-theme-"] .text-dark,
body[class*="q-customer-theme-"] .text-black,
body[class*="q-customer-theme-"] .text-body,
body[class*="q-customer-theme-"] .text-secondary,
body[class*="q-customer-theme-"] .text-muted,
body[class*="q-customer-theme-"] .lead,
body[class*="q-customer-theme-"] p,
body[class*="q-customer-theme-"] span,
body[class*="q-customer-theme-"] label,
body[class*="q-customer-theme-"] small,
body[class*="q-customer-theme-"] li,
body[class*="q-customer-theme-"] td,
body[class*="q-customer-theme-"] th,
body[class*="q-customer-theme-"] .swal2-title,
body[class*="q-customer-theme-"] .swal2-html-container,
body[class*="q-customer-theme-"] .swal2-content {
    color: var(--q-text) !important;
}

body[class*="q-customer-theme-"] .text-warning { color: #f59e0b !important; }
body[class*="q-customer-theme-"] .text-info { color: #06b6d4 !important; }
body[class*="q-customer-theme-"] .text-danger { color: #ef4444 !important; }
body[class*="q-customer-theme-"] .text-success { color: #22c55e !important; }

body[class*="q-customer-theme-"] .btn,
body[class*="q-customer-theme-"] button,
body[class*="q-customer-theme-"] a.btn {
    color: var(--q-text) !important;
}

body[class*="q-customer-theme-"] .btn-primary,
body[class*="q-customer-theme-"] .btn-success,
body[class*="q-customer-theme-"] .btn-info,
body[class*="q-customer-theme-"] .btn-warning,
body[class*="q-customer-theme-"] .btn-danger,
body[class*="q-customer-theme-"] .add-btn,
body[class*="q-customer-theme-"] .basket-bar a,
body[class*="q-customer-theme-"] .primary,
body[class*="q-customer-theme-"] .checkout-btn,
body[class*="q-customer-theme-"] .swal2-confirm {
    color: var(--q-on-brand) !important;
}

body[class*="q-customer-theme-"] .btn-primary *,
body[class*="q-customer-theme-"] .btn-success *,
body[class*="q-customer-theme-"] .btn-info *,
body[class*="q-customer-theme-"] .btn-warning *,
body[class*="q-customer-theme-"] .btn-danger *,
body[class*="q-customer-theme-"] .add-btn *,
body[class*="q-customer-theme-"] .basket-bar a *,
body[class*="q-customer-theme-"] .primary *,
body[class*="q-customer-theme-"] .checkout-btn *,
body[class*="q-customer-theme-"] .swal2-confirm * {
    color: inherit !important;
}

/* CSS fallback before the runtime contrast audit runs. The customer app can be
   themed light or dark, so utility classes and hand-written menu text must not
   assume one fixed foreground colour. */
body.q-customer-scheme-light {
    --q-readable-page-text: #111827;
    --q-readable-page-soft: #334155;
    --q-readable-page-muted: #64748b;
}

body.q-customer-scheme-dark {
    --q-readable-page-text: #f8fafc;
    --q-readable-page-soft: #dbeafe;
    --q-readable-page-muted: #aab8cf;
}

body[class*="q-customer-theme-"] main,
body[class*="q-customer-theme-"] main h1,
body[class*="q-customer-theme-"] main h2,
body[class*="q-customer-theme-"] main h3,
body[class*="q-customer-theme-"] main h4,
body[class*="q-customer-theme-"] main h5,
body[class*="q-customer-theme-"] main h6,
body[class*="q-customer-theme-"] main p,
body[class*="q-customer-theme-"] main label,
body[class*="q-customer-theme-"] main small,
body[class*="q-customer-theme-"] main span,
body[class*="q-customer-theme-"] main li,
body[class*="q-customer-theme-"] main td,
body[class*="q-customer-theme-"] main th,
body[class*="q-customer-theme-"] .swal2-popup,
body[class*="q-customer-theme-"] .swal2-popup * {
    color: var(--q-readable-page-text, var(--q-text)) !important;
}

body[class*="q-customer-theme-"] main .text-muted,
body[class*="q-customer-theme-"] main .text-secondary,
body[class*="q-customer-theme-"] main .form-text,
body[class*="q-customer-theme-"] main .description,
body[class*="q-customer-theme-"] main .muted,
body[class*="q-customer-theme-"] .swal2-html-container,
body[class*="q-customer-theme-"] .swal2-footer {
    color: var(--q-readable-page-soft, var(--q-text-soft)) !important;
}

body[class*="q-customer-theme-"] .btn-primary,
body[class*="q-customer-theme-"] .add-button,
body[class*="q-customer-theme-"] .basket-button,
body[class*="q-customer-theme-"] button[type="submit"] {
    color: var(--q-on-brand) !important;
}

/* =========================================================
   ABSOLUTE MODIFIER READABILITY / COLOUR PRESERVATION
   Modifier colours are operational data, not tenant-theme chrome. The theme
   must never wash them out. Each modifier button carries calculated CSS
   variables from swal_helper.js; these rules deliberately sit last.
   ========================================================= */
body[class*="q-customer-theme-"] .swal2-popup .modifier-choice,
body[class*="q-customer-theme-"] .swal2-popup .modifier-choice:not(.active) {
    background: var(--modifier-bg, rgba(85,153,85,.20)) !important;
    color: var(--modifier-fg, #111827) !important;
    border: 1px solid currentColor !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 14px 28px rgba(0,0,0,.12) !important;
}

body[class*="q-customer-theme-"] .swal2-popup .modifier-choice.active {
    background: var(--modifier-bg, #559955) !important;
    color: var(--modifier-fg, #ffffff) !important;
    border-color: var(--modifier-bg, #559955) !important;
    box-shadow: 0 18px 38px rgba(0,0,0,.20), 0 0 0 3px color-mix(in srgb, var(--modifier-bg, #559955) 32%, transparent) !important;
}

body[class*="q-customer-theme-"] .swal2-popup .modifier-choice,
body[class*="q-customer-theme-"] .swal2-popup .modifier-choice *,
body[class*="q-customer-theme-"] .swal2-popup .modifier-choice .modifier-label,
body[class*="q-customer-theme-"] .swal2-popup .modifier-choice .modifier-label span:not(.badge) {
    color: var(--modifier-fg, currentColor) !important;
    text-shadow: none !important;
}

body[class*="q-customer-theme-"] .swal2-popup .modifier-choice .modifier-price-badge,
body[class*="q-customer-theme-"] .swal2-popup .modifier-choice .badge {
    background: var(--modifier-badge-bg, rgba(17,24,39,.88)) !important;
    color: var(--modifier-badge-fg, #f8fafc) !important;
    border: 1px solid color-mix(in srgb, var(--modifier-bg, #559955) 50%, transparent) !important;
}

/* =========================================================
   ABSOLUTE CUSTOMER READABILITY PATCH
   Customer theme starts only after a venue has been resolved. Once active,
   every visible text surface uses theme-safe foregrounds, while operational
   modifier colours remain protected by their own calculated variables.
   ========================================================= */
body:not([class*="q-customer-theme-"]) {
    color-scheme: dark;
}

body[class*="q-customer-theme-"] :where(h1,h2,h3,h4,h5,h6,p,span,small,label,strong,li,td,th,button,a):not([data-q-contrast-ignore]):not([data-q-contrast-ignore] *) {
    text-shadow: none !important;
}

body[class*="q-customer-theme-"] .swal2-popup {
    background: var(--q-bg-elevated-strong) !important;
    color: var(--q-text) !important;
}

body[class*="q-customer-theme-"] .swal2-popup :where(h1,h2,h3,h4,h5,h6,p,span,small,label,strong,div):not(.modifier-choice):not(.modifier-choice *) {
    color: var(--q-text) !important;
}

body[class*="q-customer-theme-"] .modifier-choice,
body[class*="q-customer-theme-"] .modifier-choice * {
    color: var(--modifier-fg, currentColor) !important;
}

body[class*="q-customer-theme-"] .modifier-choice .badge,
body[class*="q-customer-theme-"] .modifier-choice .modifier-price-badge {
    color: var(--modifier-badge-fg, #f8fafc) !important;
    background: var(--modifier-badge-bg, rgba(17,24,39,.88)) !important;
}


/* =========================================================
   CUSTOMER FORM CONTROL READABILITY LOCKDOWN
   Protect floating labels, file controls and buttons from tenant palettes on
   account/profile pages and any customer form screen.
   ========================================================= */
body[class*="q-customer-theme-"] .form-floating > label,
body[class*="q-customer-theme-"] .form-floating > .form-control:focus ~ label,
body[class*="q-customer-theme-"] .form-floating > .form-control:not(:placeholder-shown) ~ label,
body[class*="q-customer-theme-"] .form-floating > .form-select ~ label {
    color: var(--q-text) !important;
    background: color-mix(in srgb, var(--q-bg-elevated-strong) 92%, transparent) !important;
    border-radius: .45rem !important;
    padding-inline: .45rem !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

body[class*="q-customer-theme-"] .form-floating > .form-control,
body[class*="q-customer-theme-"] .form-floating > .form-select,
body[class*="q-customer-theme-"] .profile-card input,
body[class*="q-customer-theme-"] .profile-card select,
body[class*="q-customer-theme-"] .profile-card textarea {
    background: var(--q-bg-input) !important;
    border: 1px solid var(--q-line) !important;
    color: var(--q-text) !important;
}

body[class*="q-customer-theme-"] input[type="file"],
body[class*="q-customer-theme-"] .form-control[type="file"] {
    background: var(--q-bg-input) !important;
    border: 1px solid var(--q-line) !important;
    color: var(--q-text) !important;
}

body[class*="q-customer-theme-"] input[type="file"]::file-selector-button,
body[class*="q-customer-theme-"] .form-control[type="file"]::file-selector-button {
    background: color-mix(in srgb, var(--q-text) 12%, var(--q-bg-elevated-strong)) !important;
    border: 0 !important;
    border-right: 1px solid var(--q-line) !important;
    color: var(--q-text) !important;
    font-weight: 700 !important;
}

body[class*="q-customer-theme-"] input[type="file"]::-webkit-file-upload-button,
body[class*="q-customer-theme-"] .form-control[type="file"]::-webkit-file-upload-button {
    background: color-mix(in srgb, var(--q-text) 12%, var(--q-bg-elevated-strong)) !important;
    border: 0 !important;
    border-right: 1px solid var(--q-line) !important;
    color: var(--q-text) !important;
    font-weight: 700 !important;
}

body[class*="q-customer-theme-"] .btn,
body[class*="q-customer-theme-"] button,
body[class*="q-customer-theme-"] a.btn {
    text-shadow: none !important;
}

body[class*="q-customer-theme-"] .btn-dark,
body[class*="q-customer-theme-"] a.btn-dark,
body[class*="q-customer-theme-"] button.btn-dark {
    background: #111827 !important;
    border-color: #111827 !important;
    color: #f8fafc !important;
}

body[class*="q-customer-theme-"] .btn-dark *,
body[class*="q-customer-theme-"] a.btn-dark *,
body[class*="q-customer-theme-"] button.btn-dark * {
    color: #f8fafc !important;
}

body[class*="q-customer-theme-"] .btn-secondary,
body[class*="q-customer-theme-"] a.btn-secondary,
body[class*="q-customer-theme-"] button.btn-secondary,
body[class*="q-customer-theme-"] .secondary {
    background: var(--q-bg-input) !important;
    border: 1px solid var(--q-line) !important;
    color: var(--q-text) !important;
}

body[class*="q-customer-theme-"] .btn-secondary *,
body[class*="q-customer-theme-"] a.btn-secondary *,
body[class*="q-customer-theme-"] button.btn-secondary *,
body[class*="q-customer-theme-"] .secondary * {
    color: var(--q-text) !important;
}