/* ROUND 87 - Glass UI for everyone: storefront, customer pages, every admin style, developer panel, referral portal.
   Turn off: tenant-wide (Dashboard Styles > Glass), per person (droplet button), or automatically by the device's reduced-transparency setting. */
html{--gl-a:var(--primary,#6c8cff);--gl-b:color-mix(in srgb,var(--primary,#6c8cff) 45%,#8b5cf6);--gl-blur:16px;
 --gl-bg:rgba(255,255,255,.62);--gl-bg2:rgba(255,255,255,.82);--gl-brd:rgba(255,255,255,.62);--gl-hi:rgba(255,255,255,.80);--gl-shadow:rgba(30,45,90,.24);
 --gl-field:rgba(255,255,255,.60);--gl-fbrd:rgba(20,26,40,.15);--gl-ink:rgba(20,26,40,.045)}
html:not([data-tl-resolved])[data-theme-mode="dark"],html[data-tl-resolved="dark"],html[data-ba-tone="dark"]{--gl-bg:rgba(26,31,44,.55);--gl-bg2:rgba(20,24,34,.82);--gl-brd:rgba(255,255,255,.13);--gl-hi:rgba(255,255,255,.10);--gl-shadow:rgba(0,0,0,.6);--gl-field:rgba(255,255,255,.07);--gl-fbrd:rgba(255,255,255,.16);--gl-ink:rgba(255,255,255,.05)}
/* glass switched off: other rules that read these variables fall back to solid colours */
html[data-ba-glass="off"]{--gl-bg:#ffffff;--gl-bg2:#ffffff;--gl-field:#ffffff;--gl-brd:rgba(20,26,40,.10)}
html[data-ba-glass="off"][data-tl-resolved="dark"],html[data-ba-glass="off"]:not([data-tl-resolved])[data-theme-mode="dark"],html[data-ba-glass="off"][data-ba-tone="dark"]{--gl-bg:#161d2e;--gl-bg2:#161d2e;--gl-field:rgba(255,255,255,.07);--gl-brd:rgba(255,255,255,.12)}
body.ba-v2-developer{--gl-a:var(--dev-accent,#6c8cff)}

/* ---- ambient colour glows behind the page (this is what the glass refracts) ---- */
html:not([data-ba-glass="off"]) body:not(#ba-g){background-image:radial-gradient(900px 620px at 8% -8%,color-mix(in srgb,var(--gl-a) 34%,transparent),transparent 62%),radial-gradient(820px 600px at 104% 6%,color-mix(in srgb,var(--gl-b) 28%,transparent),transparent 62%),radial-gradient(1000px 700px at 48% 112%,color-mix(in srgb,var(--gl-a) 22%,transparent),transparent 64%)!important;background-attachment:fixed!important;background-repeat:no-repeat!important}
@media (hover:none){html:not([data-ba-glass="off"]) body:not(#ba-g){background-attachment:scroll!important}}

/* ---- frosted surfaces ---- */
html:not([data-ba-glass="off"]) :is(.card,.pcard,.trust-item,.cat-pill:not(.active),.accordion-item,.toast,.card-dev,.dev-card,.stat-card,.dv2-quick,.ba-v2-tenant-strip,.ba-v2-admin-action){
 background:var(--gl-bg)!important;border:1px solid var(--gl-brd)!important;-webkit-backdrop-filter:blur(var(--gl-blur)) saturate(165%);backdrop-filter:blur(var(--gl-blur)) saturate(165%);
 box-shadow:inset 0 1px 0 var(--gl-hi),0 20px 40px -24px var(--gl-shadow)!important}
html:not([data-ba-glass="off"]) :is(.modal-content,.offcanvas,.dropdown-menu,.popover,.dev-modal-box,.ba-storefront-mobile-bar){
 background:var(--gl-bg2)!important;border:1px solid var(--gl-brd)!important;-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
 box-shadow:inset 0 1px 0 var(--gl-hi),0 28px 60px -24px var(--gl-shadow)!important}
html:not([data-ba-glass="off"]) .modal-backdrop.show{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
/* nested panels stay flat (no double blur) */
html:not([data-ba-glass="off"]) :is(.card,.modal-content,.offcanvas) :is(.card,.pcard,.trust-item){-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--gl-ink)!important;box-shadow:none!important}
html:not([data-ba-glass="off"]) :is(.card-header,.card-footer){background:transparent!important;border-color:var(--gl-brd)!important}
/* header: glass over the page, dropdowns inside it keep a light panel so their dark text is always readable */
html:not([data-ba-glass="off"]) .navbar{background:color-mix(in srgb,var(--navbar-bg,#ffffff) 66%,transparent)!important;-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid var(--gl-brd)!important}
html:not([data-ba-glass="off"]) .navbar .dropdown-menu{background:rgba(255,255,255,.86)!important;border-color:rgba(255,255,255,.7)!important}
/* sidebars keep their own tint, just translucent */
html:not([data-ba-glass="off"]) .admin-sidebar{background:color-mix(in srgb,var(--sb-bg,#ffffff) 58%,transparent)!important;-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%)}
html:not([data-ba-glass="off"]) .dev-sidebar{background:color-mix(in srgb,var(--dev-mid,#1b2130) 60%,transparent)!important;-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%)}
/* phone drawers sit over a dimmed page: keep them nearly solid so text stays crisp */
@media (max-width:767.98px){html:not([data-ba-glass="off"]) .admin-sidebar{background:color-mix(in srgb,var(--sb-bg,#ffffff) 95%,transparent)!important}html:not([data-ba-glass="off"]) .dev-sidebar{background:color-mix(in srgb,var(--dev-mid,#1b2130) 96%,transparent)!important}}
/* fields + buttons */
html:not([data-ba-glass="off"]) :is(.form-control,.form-select,.input-group-text){background-color:var(--gl-field)!important;border-color:var(--gl-fbrd)!important}
html:not([data-ba-glass="off"]) :is(.btn-primary,.btn-success,.tl-cta){background-image:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,0) 58%)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 12px 22px -12px color-mix(in srgb,var(--primary,#6c8cff) 75%,transparent)}
html:not([data-ba-glass="off"]) .table{--bs-table-bg:transparent}
/* the glass on/off button */
.tl-mode button[data-g],.ba-pmode button[data-g]{border-left:1px solid rgba(128,128,128,.3);border-radius:0 999px 999px 0;margin-left:3px}
.tl-mode button[data-g].on,.ba-pmode button[data-g].on{opacity:1}
/* accessibility + fallbacks */
@media (prefers-reduced-transparency:reduce){html{--gl-blur:0px;--gl-bg:var(--gl-bg2)}html:not([data-ba-glass="off"]) :is(.modal-content,.offcanvas,.dropdown-menu,.popover,.dev-modal-box,.ba-storefront-mobile-bar,.navbar,.admin-sidebar,.dev-sidebar){-webkit-backdrop-filter:none;backdrop-filter:none}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){html{--gl-bg:var(--gl-bg2)}}
@media (max-width:575.98px){html{--gl-blur:12px}}
@media print{html body:not(#ba-g){background-image:none!important}html :is(.card,.pcard,.trust-item,.modal-content,.dropdown-menu,.navbar,.admin-sidebar,.dev-sidebar){background:#fff!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important}}