/* Tenant-controlled admin visual layer. Keep selectors broad + !important because many legacy pages still contain inline page CSS. */
body[class*="q-admin-theme-"] {
    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-admin-theme-"] * {
    color-scheme: var(--q-color-scheme);
}

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

body[class*="q-admin-theme-"]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.18));
}

body.q-admin-theme-minimal::before,
body.q-admin-theme-champagne::before,
body.q-admin-theme-lavender::before,
body.q-admin-theme-porcelain::before {
    background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.04));
}

.q-app-sidebar {
    background: color-mix(in srgb, var(--q-bg-elevated-strong) 88%, transparent) !important;
    border-right: 1px solid var(--q-line) !important;
    box-shadow: 18px 0 70px rgba(0,0,0,.24) !important;
}

.q-app-sidebar .menu-button,
.q-app-sidebar li,
.q-app-sidebar button,
.q-app-sidebar a {
    color: var(--q-text-soft) !important;
}

.q-app-sidebar .menu-item:hover,
.q-app-sidebar .menu-item:focus-within {
    background: color-mix(in srgb, var(--q-brand) 14%, transparent) !important;
    border-color: color-mix(in srgb, var(--q-brand) 36%, transparent) !important;
}

.q-status-pill,
.btn-primary,
.q-btn-primary,
button[type="submit"].btn-primary {
    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 18px 42px color-mix(in srgb, var(--q-brand) 28%, transparent) !important;
}


.q-panel,
.q-card,
.card,
.modal-content,
.dropdown-menu,
.table-responsive,
.q-dashboard-card,
.q-stat-card,
.q-section-card {
    background: var(--q-bg-elevated) !important;
    border-color: var(--q-line) !important;
    color: var(--q-text) !important;
    border-radius: var(--q-card-radius) !important;
}

body.q-admin-panel-solid .q-panel,
body.q-admin-panel-solid .q-card,
body.q-admin-panel-solid .card,
body.q-admin-panel-solid .modal-content,
body.q-admin-panel-solid .dropdown-menu,
body.q-admin-panel-solid .table-responsive,
body.q-admin-panel-solid .q-dashboard-card,
body.q-admin-panel-solid .q-stat-card,
body.q-admin-panel-solid .q-section-card {
    backdrop-filter: none !important;
    background: var(--q-bg-elevated-strong) !important;
}

body.q-admin-panel-outline .q-panel,
body.q-admin-panel-outline .q-card,
body.q-admin-panel-outline .card,
body.q-admin-panel-outline .modal-content,
body.q-admin-panel-outline .table-responsive {
    background: color-mix(in srgb, var(--q-bg-elevated) 54%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--q-brand) 34%, var(--q-line)) !important;
}

.form-control,
.form-select,
select,
textarea,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="url"],
input[type="password"] {
    background: var(--q-bg-input) !important;
    border-color: var(--q-line) !important;
    color: var(--q-text) !important;
}

.form-select option,
select option,
.form-select optgroup,
select optgroup {
    background-color: var(--q-option-bg) !important;
    color: var(--q-option-text) !important;
}

.form-control::placeholder,
textarea::placeholder,
input::placeholder {
    color: color-mix(in srgb, var(--q-muted) 84%, transparent) !important;
    opacity: 1 !important;
}

.form-control:focus,
.form-select:focus,
select:focus,
textarea:focus,
input:focus {
    border-color: var(--q-brand) !important;
    box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--q-brand) 24%, transparent) !important;
}

.table,
.table td,
.table th,
label,
.section-title,
.q-title,
.q-h1,
.q-h2,
.q-h3,
h1,
h2,
h3,
h4,
h5 {
    color: var(--q-text) !important;
}

.text-muted,
.q-muted,
small,
.sidebar-note {
    color: var(--q-muted) !important;
}

body.q-admin-layout-compact .q-main-content {
    max-width: 1160px !important;
    margin-inline: auto !important;
}

body.q-admin-layout-wide .q-main-content {
    max-width: 1680px !important;
    margin-inline: auto !important;
}

@media (max-width: 768px) {
    body[class*="q-admin-layout-"] .q-main-content {
        width: 100% !important;
        max-width: 100% !important;
        padding-inline: .85rem !important;
    }

    .q-app-sidebar {
        width: min(86vw, 320px) !important;
    }
}

body[class*="q-admin-theme-"] .badge,
body[class*="q-admin-theme-"] .q-pill,
body[class*="q-admin-theme-"] .theme-pill {
    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-admin-theme-"] a {
    color: color-mix(in srgb, var(--q-brand) 72%, var(--q-text)) !important;
}


/* =========================================================
   ADMIN CONTRAST HARDENING LAYER
   Admin pages mix older hand-written CSS, Bootstrap utility classes and
   tenant colours. These rules keep the theme visual but force readable text
   on themed surfaces, tables, forms, cards and dialogs.
   ========================================================= */
body[class*="q-admin-theme-"] .text-dark,
body[class*="q-admin-theme-"] .text-black,
body[class*="q-admin-theme-"] .text-body,
body[class*="q-admin-theme-"] .text-muted,
body[class*="q-admin-theme-"] .text-secondary,
body[class*="q-admin-theme-"] .form-text,
body[class*="q-admin-theme-"] .small,
body[class*="q-admin-theme-"] small {
    color: var(--q-text-soft) !important;
}

body[class*="q-admin-theme-"] h1,
body[class*="q-admin-theme-"] h2,
body[class*="q-admin-theme-"] h3,
body[class*="q-admin-theme-"] h4,
body[class*="q-admin-theme-"] h5,
body[class*="q-admin-theme-"] h6,
body[class*="q-admin-theme-"] label,
body[class*="q-admin-theme-"] .card-title,
body[class*="q-admin-theme-"] .fw-bold,
body[class*="q-admin-theme-"] strong {
    color: var(--q-text) !important;
}

body[class*="q-admin-theme-"] .card,
body[class*="q-admin-theme-"] .q-card,
body[class*="q-admin-theme-"] .q-panel,
body[class*="q-admin-theme-"] .glass-background,
body[class*="q-admin-theme-"] .modal-content,
body[class*="q-admin-theme-"] .swal2-popup {
    background: var(--q-bg-elevated) !important;
    border-color: var(--q-line) !important;
    color: var(--q-text) !important;
}

body[class*="q-admin-theme-"] .card *,
body[class*="q-admin-theme-"] .q-card *,
body[class*="q-admin-theme-"] .q-panel *,
body[class*="q-admin-theme-"] .modal-content *,
body[class*="q-admin-theme-"] .swal2-popup * {
    text-shadow: none;
}

body[class*="q-admin-theme-"] table,
body[class*="q-admin-theme-"] thead,
body[class*="q-admin-theme-"] tbody,
body[class*="q-admin-theme-"] tr,
body[class*="q-admin-theme-"] td,
body[class*="q-admin-theme-"] th {
    color: var(--q-text) !important;
}

body[class*="q-admin-theme-"] .table,
body[class*="q-admin-theme-"] .table * {
    color: var(--q-text) !important;
}

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

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

body[class*="q-admin-theme-"] .btn-primary,
body[class*="q-admin-theme-"] button[type="submit"],
body[class*="q-admin-theme-"] .q-primary-action {
    background: linear-gradient(135deg, var(--q-brand), var(--q-brand-2)) !important;
    border-color: transparent !important;
    color: var(--q-on-brand) !important;
}

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

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

/* =========================================================
   FINAL READABILITY GUARDRAILS
   Legacy admin pages use page-level/inline backgrounds (.box, .content,
   .chart-container, .text-light, etc.). The tenant theme must own those
   surfaces as well, otherwise text can become white-on-light or dark-on-dark.
   ========================================================= */
body[class*="q-admin-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-admin-theme-"] .box,
body[class*="q-admin-theme-"] .content,
body[class*="q-admin-theme-"] .chart-container,
body[class*="q-admin-theme-"] .statistics .content,
body[class*="q-admin-theme-"] .statis .box,
body[class*="q-admin-theme-"] .charts .chart-container,
body[class*="q-admin-theme-"] .booking-card,
body[class*="q-admin-theme-"] .bestseller-card,
body[class*="q-admin-theme-"] .order-card,
body[class*="q-admin-theme-"] .staff-card,
body[class*="q-admin-theme-"] .device-card,
body[class*="q-admin-theme-"] .area-card,
body[class*="q-admin-theme-"] .location-card,
body[class*="q-admin-theme-"] .archive-card,
body[class*="q-admin-theme-"] .subscription-card,
body[class*="q-admin-theme-"] .account-card,
body[class*="q-admin-theme-"] .settings-card,
body[class*="q-admin-theme-"] [class*="card"],
body[class*="q-admin-theme-"] [class*="panel"],
body[class*="q-admin-theme-"] [class*="container"][style*="background"],
body[class*="q-admin-theme-"] [style*="background: rgba(0, 0, 0"],
body[class*="q-admin-theme-"] [style*="background:rgba(0, 0, 0"],
body[class*="q-admin-theme-"] [style*="background-color: rgba(0, 0, 0"],
body[class*="q-admin-theme-"] [style*="background-color:rgba(0, 0, 0"],
body[class*="q-admin-theme-"] [style*="background: rgba(255, 255, 255"],
body[class*="q-admin-theme-"] [style*="background:rgba(255, 255, 255"],
body[class*="q-admin-theme-"] [style*="background-color: rgba(255, 255, 255"],
body[class*="q-admin-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-admin-theme-"] .box *,
body[class*="q-admin-theme-"] .content *,
body[class*="q-admin-theme-"] .chart-container *,
body[class*="q-admin-theme-"] .statistics .content *,
body[class*="q-admin-theme-"] .statis .box *,
body[class*="q-admin-theme-"] .charts .chart-container *,
body[class*="q-admin-theme-"] .booking-card *,
body[class*="q-admin-theme-"] .bestseller-card *,
body[class*="q-admin-theme-"] .staff-card *,
body[class*="q-admin-theme-"] .device-card *,
body[class*="q-admin-theme-"] .area-card *,
body[class*="q-admin-theme-"] .location-card *,
body[class*="q-admin-theme-"] .archive-card *,
body[class*="q-admin-theme-"] .subscription-card *,
body[class*="q-admin-theme-"] .account-card *,
body[class*="q-admin-theme-"] .settings-card * {
    color: inherit;
}

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

body[class*="q-admin-theme-"] .q-app-sidebar,
body[class*="q-admin-theme-"] .q-app-sidebar *,
body[class*="q-admin-theme-"] .sidebar,
body[class*="q-admin-theme-"] .sidebar *,
body[class*="q-admin-theme-"] aside,
body[class*="q-admin-theme-"] aside * {
    color: var(--q-text) !important;
}

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

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

body[class*="q-admin-theme-"] .btn-primary,
body[class*="q-admin-theme-"] .btn-success,
body[class*="q-admin-theme-"] .btn-info,
body[class*="q-admin-theme-"] .btn-warning,
body[class*="q-admin-theme-"] .btn-danger,
body[class*="q-admin-theme-"] .q-status-pill,
body[class*="q-admin-theme-"] .q-btn-primary,
body[class*="q-admin-theme-"] .q-primary-action,
body[class*="q-admin-theme-"] button[type="submit"] {
    color: var(--q-on-brand) !important;
}

body[class*="q-admin-theme-"] .btn-primary *,
body[class*="q-admin-theme-"] .btn-success *,
body[class*="q-admin-theme-"] .btn-info *,
body[class*="q-admin-theme-"] .btn-warning *,
body[class*="q-admin-theme-"] .btn-danger *,
body[class*="q-admin-theme-"] .q-status-pill *,
body[class*="q-admin-theme-"] .q-btn-primary *,
body[class*="q-admin-theme-"] .q-primary-action *,
body[class*="q-admin-theme-"] button[type="submit"] * {
    color: inherit !important;
}

/* =========================================================
   SCHEME-AWARE READABILITY BASELINE
   This is the CSS fallback before the JavaScript contrast audit runs. Older
   pages such as Devices define their own dark-page typography (#fff) while
   the tenant theme can switch the real page background to a light palette.
   These selectors normalise the common page/header/card text classes without
   changing layout.
   ========================================================= */
body.q-admin-scheme-light {
    --q-readable-page-text: #111827;
    --q-readable-page-soft: #334155;
    --q-readable-page-muted: #64748b;
}

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

body[class*="q-admin-theme-"] .q-main-content,
body[class*="q-admin-theme-"] .q-main-content > *,
body[class*="q-admin-theme-"] .q-main-content .devices-page,
body[class*="q-admin-theme-"] .q-main-content .device-details-page,
body[class*="q-admin-theme-"] .q-main-content .dashboard-container,
body[class*="q-admin-theme-"] .q-main-content .container,
body[class*="q-admin-theme-"] .q-main-content .container-fluid {
    color: var(--q-readable-page-text, var(--q-text)) !important;
}

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

body[class*="q-admin-theme-"] main .text-muted,
body[class*="q-admin-theme-"] main .text-secondary,
body[class*="q-admin-theme-"] main .form-text,
body[class*="q-admin-theme-"] main .devices-subtitle,
body[class*="q-admin-theme-"] main .page-subtitle,
body[class*="q-admin-theme-"] main .stat-label,
body[class*="q-admin-theme-"] main .device-order-subtitle,
body[class*="q-admin-theme-"] main .device-meta,
body[class*="q-admin-theme-"] main .q-page-subtitle {
    color: var(--q-readable-page-soft, var(--q-text-soft)) !important;
}

body[class*="q-admin-theme-"] main .card,
body[class*="q-admin-theme-"] main .card *,
body[class*="q-admin-theme-"] main .q-card,
body[class*="q-admin-theme-"] main .q-card *,
body[class*="q-admin-theme-"] main .q-panel,
body[class*="q-admin-theme-"] main .q-panel *,
body[class*="q-admin-theme-"] main .device-order-card,
body[class*="q-admin-theme-"] main .device-order-card *,
body[class*="q-admin-theme-"] main .tenant-device-card,
body[class*="q-admin-theme-"] main .tenant-device-card *,
body[class*="q-admin-theme-"] main .device-stat,
body[class*="q-admin-theme-"] main .device-stat * {
    color: var(--q-readable-page-text, var(--q-text)) !important;
}

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

/* =========================================================
   FINAL ADMIN READABILITY + STATIC ARTWORK PROTECTION
   Keep actual generated artwork/previews untouched while forcing legacy page
   headers and text utilities to readable values on light/dark theme schemes.
   ========================================================= */
body.q-admin-scheme-light main :where(h1,h2,h3,h4,h5,h6,p,span,small,label,strong,a,li,td,th,button):not([data-q-contrast-ignore]):not([data-q-contrast-ignore] *) {
    --q-readable-page-text: #111827;
    --q-readable-page-soft: #334155;
}

body.q-admin-scheme-dark main :where(h1,h2,h3,h4,h5,h6,p,span,small,label,strong,a,li,td,th,button):not([data-q-contrast-ignore]):not([data-q-contrast-ignore] *) {
    --q-readable-page-text: #f8fafc;
    --q-readable-page-soft: #dbeafe;
}

body[class*="q-admin-theme-"] main :where(.page-title,.page-subtitle,.devices-title,.devices-subtitle,.hero-title,.hero-subtitle,.q-page-title,.q-page-subtitle,.display-1,.display-2,.display-3,.display-4,.display-5,.display-6):not([data-q-contrast-ignore]):not([data-q-contrast-ignore] *) {
    color: var(--q-readable-page-text, var(--q-text)) !important;
    text-shadow: none !important;
}

body[class*="q-admin-theme-"] main :where(.text-white,.text-light):not(.btn):not(.badge):not([data-q-contrast-ignore]):not([data-q-contrast-ignore] *) {
    color: var(--q-readable-page-text, var(--q-text)) !important;
}

body[class*="q-admin-theme-"] main :where(.text-muted,.text-secondary,.lead,.small,small):not([data-q-contrast-ignore]):not([data-q-contrast-ignore] *) {
    color: var(--q-readable-page-soft, var(--q-text-soft)) !important;
}

body[class*="q-admin-theme-"] [data-q-contrast-ignore],
body[class*="q-admin-theme-"] [data-q-contrast-ignore] * {
    color-scheme: normal !important;
}

/* =========================================================
   ABSOLUTE ADMIN READABILITY PATCH
   Do not allow tenant themes to make controls or static dark surfaces illegible.
   ========================================================= */
body[class*="q-admin-theme-"] .qr-hero,
body[class*="q-admin-theme-"] .qr-hero :where(h1,h2,h3,h4,h5,h6,p,span,small,strong,i) {
    color: #f8fafc !important;
    text-shadow: none !important;
}

body[class*="q-admin-theme-"] .qr-hero .qr-kicker,
body[class*="q-admin-theme-"] .qr-hero .qr-kicker * {
    color: #facc15 !important;
}

body[class*="q-admin-theme-"] .qr-hero .qr-description {
    color: #e2e8f0 !important;
}

body[class*="q-admin-theme-"] .qr-hero .qr-hero-point,
body[class*="q-admin-theme-"] .qr-hero .qr-hero-point * {
    color: #f8fafc !important;
}

body.q-admin-scheme-light .audit-header h1,
body.q-admin-scheme-light .audit-wrapper > h1,
body.q-admin-scheme-light main .audit-header h1 {
    color: #111827 !important;
}

body.q-admin-scheme-dark .audit-header h1,
body.q-admin-scheme-dark .audit-wrapper > h1,
body.q-admin-scheme-dark main .audit-header h1 {
    color: #f8fafc !important;
}

body[class*="q-admin-theme-"] .audit-wrapper .table-wrapper,
body[class*="q-admin-theme-"] .audit-wrapper table {
    background: #0f172a !important;
    color: #e5eefb !important;
    border-color: rgba(148,163,184,.18) !important;
}

body[class*="q-admin-theme-"] .audit-wrapper th {
    background: #1e293b !important;
    color: #dbeafe !important;
}

body[class*="q-admin-theme-"] .audit-wrapper td {
    background: transparent !important;
    color: #e5eefb !important;
}

body[class*="q-admin-theme-"] .audit-wrapper .state-new,
body[class*="q-admin-theme-"] .audit-wrapper .new-state {
    color: #22d3ee !important;
}

body[class*="q-admin-theme-"] .audit-wrapper .message-cell,
body[class*="q-admin-theme-"] .audit-wrapper td:last-child {
    color: #facc15 !important;
}

body[class*="q-admin-theme-"] .switch-card {
    background: var(--q-bg-elevated-strong) !important;
    border: 1px solid var(--q-line) !important;
    color: var(--q-text) !important;
}

body[class*="q-admin-theme-"] .switch-card .switch-content,
body[class*="q-admin-theme-"] .switch-card .switch-content strong {
    color: var(--q-text) !important;
}

body[class*="q-admin-theme-"] .switch-card .switch-content span {
    color: var(--q-text-soft) !important;
}

body[class*="q-admin-theme-"] .switch-box {
    background: color-mix(in srgb, var(--q-text) 12%, var(--q-bg-input)) !important;
    border: 2px solid color-mix(in srgb, var(--q-text) 38%, var(--q-line)) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 2px 8px rgba(0,0,0,.18) !important;
}

body[class*="q-admin-theme-"] .switch-box::after {
    background: var(--q-text) !important;
    box-shadow: 0 1px 6px rgba(0,0,0,.30) !important;
}

body[class*="q-admin-theme-"] .switch-card input:checked + .switch-box {
    background: var(--q-brand) !important;
    border-color: color-mix(in srgb, var(--q-brand) 72%, var(--q-text)) !important;
}

body[class*="q-admin-theme-"] .switch-card input:checked + .switch-box::after {
    background: var(--q-on-brand) !important;
}

body[class*="q-admin-theme-"] .status-dot {
    color: inherit !important;
    background: currentColor !important;
    box-shadow: none !important;
    animation: none !important;
}

body[class*="q-admin-theme-"] #card-element,
body[class*="q-admin-theme-"] .StripeElement {
    background: var(--q-bg-input) !important;
    border-color: var(--q-line) !important;
    color: var(--q-text) !important;
}


/* =========================================================
   FORM / BUTTON / MODAL READABILITY LOCKDOWN
   Final layer for old admin pages using Bootstrap buttons, SweetAlert forms,
   native file inputs and floating labels. This is colour-only except the
   Add Menu Item SweetAlert width/grid requested for usability.
   ========================================================= */
body[class*="q-admin-theme-"] .actions .btn,
body[class*="q-admin-theme-"] .menu-card .actions .btn,
body[class*="q-admin-theme-"] a.btn.btn-dark,
body[class*="q-admin-theme-"] button.btn.btn-dark {
    background: #111827 !important;
    border-color: #111827 !important;
    color: #f8fafc !important;
    box-shadow: 0 10px 24px rgba(15,23,42,.18) !important;
}

body[class*="q-admin-theme-"] .actions .btn *,
body[class*="q-admin-theme-"] .menu-card .actions .btn *,
body[class*="q-admin-theme-"] a.btn.btn-dark *,
body[class*="q-admin-theme-"] button.btn.btn-dark * {
    color: #f8fafc !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

body[class*="q-admin-theme-"] .actions .btn-danger,
body[class*="q-admin-theme-"] .menu-card .actions .btn-danger,
body[class*="q-admin-theme-"] a.btn.btn-danger,
body[class*="q-admin-theme-"] button.btn.btn-danger {
    background: #fee2e2 !important;
    border-color: #fecaca !important;
    color: #7f1d1d !important;
}

body[class*="q-admin-theme-"] .actions .btn-danger *,
body[class*="q-admin-theme-"] .menu-card .actions .btn-danger *,
body[class*="q-admin-theme-"] a.btn.btn-danger *,
body[class*="q-admin-theme-"] button.btn.btn-danger * {
    color: #7f1d1d !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

body[class*="q-admin-theme-"] .btn-success:not(.swal2-confirm),
body[class*="q-admin-theme-"] a.btn-success:not(.swal2-confirm),
body[class*="q-admin-theme-"] button.btn-success:not(.swal2-confirm) {
    background: #166534 !important;
    border-color: #166534 !important;
    color: #f0fdf4 !important;
}

body[class*="q-admin-theme-"] .btn-success:not(.swal2-confirm) *,
body[class*="q-admin-theme-"] a.btn-success:not(.swal2-confirm) *,
body[class*="q-admin-theme-"] button.btn-success:not(.swal2-confirm) * {
    color: #f0fdf4 !important;
}

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

body[class*="q-admin-theme-"] input[type="file"]::file-selector-button,
body[class*="q-admin-theme-"] .form-control[type="file"]::file-selector-button,
body[class*="q-admin-theme-"] .swal2-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-admin-theme-"] input[type="file"]::-webkit-file-upload-button,
body[class*="q-admin-theme-"] .form-control[type="file"]::-webkit-file-upload-button,
body[class*="q-admin-theme-"] .swal2-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-admin-theme-"] .form-floating > label,
body[class*="q-admin-theme-"] .qrelia-field .form-floating > label,
body[class*="q-admin-theme-"] .form-floating > .form-control:focus ~ label,
body[class*="q-admin-theme-"] .form-floating > .form-control:not(:placeholder-shown) ~ label,
body[class*="q-admin-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;
    text-shadow: none !important;
    opacity: 1 !important;
}

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

body[class*="q-admin-theme-"] .swal2-popup.q-menu-item-swal {
    width: min(980px, calc(100vw - 2rem)) !important;
    max-width: min(980px, calc(100vw - 2rem)) !important;
    padding: 1.35rem !important;
    background: var(--q-bg-elevated-strong) !important;
    color: var(--q-text) !important;
}

body[class*="q-admin-theme-"] .q-menu-item-swal .swal2-title,
body[class*="q-admin-theme-"] .q-menu-item-swal .swal2-html-container,
body[class*="q-admin-theme-"] .q-menu-item-swal label,
body[class*="q-admin-theme-"] .q-menu-item-swal .text-secondary,
body[class*="q-admin-theme-"] .q-menu-item-swal .allergens-title {
    color: var(--q-text) !important;
}

body[class*="q-admin-theme-"] .q-menu-item-swal #newMenuItemForm {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .85rem 1rem !important;
    align-items: start !important;
    text-align: left !important;
}

body[class*="q-admin-theme-"] .q-menu-item-swal #newMenuItemForm > .swal2-input,
body[class*="q-admin-theme-"] .q-menu-item-swal #newMenuItemForm > .swal2-textarea,
body[class*="q-admin-theme-"] .q-menu-item-swal #newMenuItemForm > .category-select,
body[class*="q-admin-theme-"] .q-menu-item-swal #newMenuItemForm select,
body[class*="q-admin-theme-"] .q-menu-item-swal #newMenuItemForm input:not([type="hidden"]),
body[class*="q-admin-theme-"] .q-menu-item-swal #newMenuItemForm textarea {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    background: var(--q-bg-input) !important;
    border: 1px solid var(--q-line) !important;
    color: var(--q-text) !important;
}

body[class*="q-admin-theme-"] .q-menu-item-swal #mi-description,
body[class*="q-admin-theme-"] .q-menu-item-swal #mi-wineSection,
body[class*="q-admin-theme-"] .q-menu-item-swal .allergens-container,
body[class*="q-admin-theme-"] .q-menu-item-swal .v-container,
body[class*="q-admin-theme-"] .q-menu-item-swal .row.mt-2.text-center {
    grid-column: 1 / -1 !important;
}

body[class*="q-admin-theme-"] .q-menu-item-swal .v-container,
body[class*="q-admin-theme-"] .q-menu-item-swal .allergens-container {
    width: 100% !important;
    margin: 0 !important;
    background: color-mix(in srgb, var(--q-text) 7%, var(--q-bg-elevated)) !important;
    border: 1px solid var(--q-line) !important;
    color: var(--q-text) !important;
}

body[class*="q-admin-theme-"] .q-menu-item-swal .allergens-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)) !important;
    gap: .45rem !important;
    justify-items: stretch !important;
}

body[class*="q-admin-theme-"] .q-menu-item-swal .allergen-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .35rem !important;
    min-height: 44px !important;
    background: var(--q-bg-input) !important;
    border: 1px solid var(--q-line) !important;
    color: var(--q-text) !important;
}

body[class*="q-admin-theme-"] .q-menu-item-swal .allergen-button.active-allergen {
    background: #166534 !important;
    border-color: #16a34a !important;
    color: #f0fdf4 !important;
}

body[class*="q-admin-theme-"] .q-menu-item-swal .allergen-button.active-allergen * {
    color: #f0fdf4 !important;
}

body[class*="q-admin-theme-"] .q-menu-item-swal .row.mt-2.text-center .btn {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

body[class*="q-admin-theme-"] .q-menu-item-swal #mi-wineSection > div:last-child {
    width: 100% !important;
}

body[class*="q-admin-theme-"] .q-menu-item-swal #mi-wineSection .d-flex {
    gap: .85rem !important;
    padding: .65rem .75rem !important;
    border: 1px solid var(--q-line) !important;
    border-radius: .75rem !important;
    background: color-mix(in srgb, var(--q-text) 6%, var(--q-bg-elevated)) !important;
}

body[class*="q-admin-theme-"] .swal2-popup.q-menu-item-swal .swal2-actions .swal2-confirm,
body[class*="q-admin-theme-"] .swal2-popup.q-menu-item-swal .swal2-confirm {
    background: linear-gradient(135deg, var(--q-brand), var(--q-brand-2)) !important;
    color: var(--q-on-brand) !important;
    border: 0 !important;
}

body[class*="q-admin-theme-"] .swal2-popup.q-menu-item-swal .swal2-actions .swal2-cancel,
body[class*="q-admin-theme-"] .swal2-popup.q-menu-item-swal .swal2-cancel {
    background: var(--q-bg-input) !important;
    color: var(--q-text) !important;
    border: 1px solid var(--q-line) !important;
}

@media (max-width: 720px) {
    body[class*="q-admin-theme-"] .swal2-popup.q-menu-item-swal {
        width: calc(100vw - 1rem) !important;
        max-width: calc(100vw - 1rem) !important;
        padding: 1rem !important;
    }

    body[class*="q-admin-theme-"] .q-menu-item-swal #newMenuItemForm {
        grid-template-columns: 1fr !important;
    }

    body[class*="q-admin-theme-"] .q-menu-item-swal #mi-wineSection .d-flex {
        align-items: stretch !important;
        flex-direction: column !important;
    }
}

/* =========================================================
   TARGETED READABILITY CLEANUP
   Floating labels must not draw a pill/background over placeholder text.
   Only promoted labels get a tiny page-matched backplate, while normal labels
   stay transparent inside the input.
   ========================================================= */
body[class*="q-admin-theme-"] .form-floating > label,
body[class*="q-admin-theme-"] .qrelia-field .form-floating > label {
    background: transparent !important;
    color: var(--q-text-soft) !important;
    border-radius: 0 !important;
    padding-inline: .75rem !important;
    opacity: .86 !important;
    text-shadow: none !important;
    pointer-events: none !important;
}

body[class*="q-admin-theme-"] .form-floating > .form-control:focus ~ label,
body[class*="q-admin-theme-"] .form-floating > .form-control:not(:placeholder-shown) ~ label,
body[class*="q-admin-theme-"] .form-floating > .form-select ~ label {
    background: var(--q-bg-input) !important;
    color: var(--q-text) !important;
    border-radius: .35rem !important;
    padding-inline: .35rem !important;
    opacity: 1 !important;
}

/* Activity Audit: use scheme-aware table colours instead of forcing a dark
   table on light tenant themes. */
body[class*="q-admin-theme-"] .audit-wrapper {
    color: var(--q-readable-page-text, var(--q-text)) !important;
}

body[class*="q-admin-theme-"] .audit-wrapper .audit-header h1 {
    color: var(--q-readable-page-text, var(--q-text)) !important;
}

body[class*="q-admin-theme-"] .audit-wrapper .filters input,
body[class*="q-admin-theme-"] .audit-wrapper .filters select {
    background: var(--q-bg-input) !important;
    border: 1px solid var(--q-line) !important;
    color: var(--q-text) !important;
}

body[class*="q-admin-theme-"] .audit-wrapper .filters input::placeholder {
    color: var(--q-text-soft) !important;
    opacity: .78 !important;
}

body[class*="q-admin-theme-"] .audit-wrapper .filters button {
    background: linear-gradient(135deg, var(--q-brand), var(--q-brand-2)) !important;
    border: 0 !important;
    color: var(--q-on-brand) !important;
}

body[class*="q-admin-theme-"] .audit-wrapper .table-wrapper,
body[class*="q-admin-theme-"] .audit-wrapper table {
    background: var(--q-bg-elevated-strong) !important;
    border: 1px solid var(--q-line) !important;
    color: var(--q-text) !important;
}

body[class*="q-admin-theme-"] .audit-wrapper th {
    background: color-mix(in srgb, var(--q-text) 10%, var(--q-bg-elevated-strong)) !important;
    color: var(--q-text) !important;
    border-bottom: 1px solid var(--q-line) !important;
}

body[class*="q-admin-theme-"] .audit-wrapper td {
    background: transparent !important;
    color: var(--q-text) !important;
    border-bottom: 1px solid var(--q-line) !important;
}

body[class*="q-admin-theme-"] .audit-wrapper tbody tr:hover {
    background: color-mix(in srgb, var(--q-brand) 8%, transparent) !important;
}

body[class*="q-admin-theme-"] .audit-wrapper td strong,
body[class*="q-admin-theme-"] .audit-wrapper td small {
    color: inherit !important;
}

body[class*="q-admin-theme-"] .audit-wrapper .badge.create,
body[class*="q-admin-theme-"] .audit-wrapper .badge.update,
body[class*="q-admin-theme-"] .audit-wrapper .badge.delete,
body[class*="q-admin-theme-"] .audit-wrapper .badge.other {
    color: #ffffff !important;
}

body[class*="q-admin-theme-"] .audit-wrapper .text-info,
body[class*="q-admin-theme-"] .audit-wrapper .new-state {
    color: color-mix(in srgb, var(--q-brand) 68%, var(--q-text)) !important;
}

body[class*="q-admin-theme-"] .audit-wrapper .text-warning,
body[class*="q-admin-theme-"] .audit-wrapper .message-cell {
    color: color-mix(in srgb, #b45309 64%, var(--q-text)) !important;
}

body[class*="q-admin-theme-"] .audit-wrapper .empty-row td,
body[class*="q-admin-theme-"] .audit-wrapper .pagination-shell,
body[class*="q-admin-theme-"] .audit-wrapper .pagination-summary {
    color: var(--q-text-soft) !important;
}

body[class*="q-admin-theme-"] .audit-wrapper .page-link,
body[class*="q-admin-theme-"] .audit-wrapper .page-disabled,
body[class*="q-admin-theme-"] .audit-wrapper .page-ellipsis {
    background: var(--q-bg-input) !important;
    border-color: var(--q-line) !important;
    color: var(--q-text) !important;
}

body[class*="q-admin-theme-"] .audit-wrapper .page-current {
    background: linear-gradient(135deg, var(--q-brand), var(--q-brand-2)) !important;
    border-color: transparent !important;
    color: var(--q-on-brand) !important;
}

/* =========================================================
   FINAL LAYOUT / FORM-LABEL / MENU IMAGE FIXES
   1) Keep page content centred in the usable area only once. The theme layout
      must not centre .q-main-content and then let #wrapper offset again.
   2) Floating labels must never draw a visible block over placeholders/text.
   3) Menu item image fallbacks and action controls stay readable.
   ========================================================= */
body[class*="q-admin-theme-"] .q-main-content {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.q-admin-layout-compact #wrapper:not(.fullwidth) {
    max-width: 1160px !important;
}

body.q-admin-layout-wide #wrapper:not(.fullwidth) {
    max-width: 1680px !important;
}

body[class*="q-admin-theme-"] .form-floating > label,
body[class*="q-admin-theme-"] .qrelia-field .form-floating > label,
body[class*="q-admin-theme-"] .form-floating > .form-control:focus ~ label,
body[class*="q-admin-theme-"] .form-floating > .form-control:not(:placeholder-shown) ~ label,
body[class*="q-admin-theme-"] .form-floating > .form-select ~ label {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    color: var(--q-text-soft) !important;
    border-radius: 0 !important;
    padding-inline: .75rem !important;
    opacity: .95 !important;
    text-shadow: none !important;
}

body[class*="q-admin-theme-"] .form-floating > .form-control::placeholder,
body[class*="q-admin-theme-"] .form-floating > textarea::placeholder {
    color: color-mix(in srgb, var(--q-text-soft) 70%, transparent) !important;
    opacity: .75 !important;
}

body[class*="q-admin-theme-"] .menu-card .v-con img,
body[class*="q-admin-theme-"] .menu-card img.image-preview {
    background: color-mix(in srgb, var(--q-text) 5%, var(--q-bg-elevated-strong)) !important;
    border: 1px solid var(--q-line) !important;
}

body[class*="q-admin-theme-"] .menu-card .menu-title,
body[class*="q-admin-theme-"] .menu-card .price {
    color: var(--q-readable-page-text, var(--q-text)) !important;
}

body[class*="q-admin-theme-"] .menu-card .menu-description,
body[class*="q-admin-theme-"] .menu-card .badge-category .text-secondary {
    color: var(--q-readable-page-soft, var(--q-text-soft)) !important;
}

@media (min-width: 769px) {
    body:has(.q-app-sidebar) #wrapper:not(.fullwidth) {
        margin-left: calc(var(--q-sidebar-width) + var(--q-admin-wrapper-side-space)) !important;
        margin-right: var(--q-admin-wrapper-side-space) !important;
    }
}