/* Shared optical skin. One clear material per theme, for both staff portals. */
@layer staff-liquid {
body:is(.admin,.merchant,.personal-glass){--staff-glass-face:#ffffff0f!important;--staff-glass-reading:#ffffff24!important;--staff-glass-fade:#ffffff08!important;--staff-glass-reflection:linear-gradient(125deg,#ffffff0d,transparent 32%,transparent 70%,#cfddff08)!important;--staff-glass-edge:.8!important;--staff-glass-shadow:0 3px 5px #28446612,0 12px 24px #2d466b0e!important;--staff-glass-inner:inset 0 1px 0 #ffffff66,inset 1px 0 0 #ffffff24!important;--staff-glass-table:#ffffff38!important;--staff-glass-radius:24px!important}
html[data-theme=dark] body:is(.admin,.merchant,.personal-glass){--staff-glass-face:#101a2e0d!important;--staff-glass-reading:#111b2a26!important;--staff-glass-fade:#111b2a08!important;--staff-glass-reflection:linear-gradient(125deg,#ffffff06,transparent 32%,transparent 70%,#ffffff02)!important;--staff-glass-edge:.34!important;--staff-glass-shadow:0 8px 22px #03081718!important;--staff-glass-inner:inset 0 1px 0 #d9e8ff1c,inset 1px 0 0 #cbdfff08!important;--staff-glass-table:#25314b38!important}
body:is(.admin,.merchant,.personal-glass) .lg-surface{isolation:isolate!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
body:is(.admin,.merchant,.personal-glass) [data-liquid-material=slab]{position:relative;background:var(--staff-glass-face)!important;border:1px solid transparent!important;border-radius:var(--staff-glass-radius)!important;box-shadow:var(--staff-glass-shadow)!important}
body:is(.admin,.merchant,.personal-glass) .modal.lg-surface{position:relative!important}
body:is(.admin,.merchant,.personal-glass) .lg-optic{display:block!important;position:absolute!important;inset:0!important;z-index:-1!important;border-radius:inherit!important;pointer-events:none!important;overflow:hidden!important;background:var(--staff-glass-reflection)!important;box-shadow:var(--staff-glass-inner)!important;transition:transform .26s cubic-bezier(.2,.8,.2,1)!important}
body:is(.admin,.merchant,.personal-glass) .lg-optic:after{content:''!important;position:absolute!important;inset:0!important;border-radius:inherit!important;pointer-events:none!important;background:var(--liquid-rim) 0 0/100% 100%!important;opacity:var(--staff-glass-edge)!important}
body:is(.admin,.merchant,.personal-glass) [data-liquid-material=slab]>.lg-optic:before{content:''!important;position:absolute!important;inset:0!important;border-radius:inherit!important;border:0!important;box-shadow:none!important;background:radial-gradient(ellipse at 50% 46%,var(--staff-glass-reading),var(--staff-glass-fade) 60%,transparent 100%)!important;pointer-events:none!important}
body:is(.admin,.merchant,.personal-glass)[data-liquid-mode=native] .lg-optic{backdrop-filter:var(--liquid-filter) saturate(1.05)!important;-webkit-backdrop-filter:var(--liquid-filter) saturate(1.05)!important}
body:is(.admin,.merchant,.personal-glass)[data-liquid-mode=wallpaper] .lg-optic{background-image:var(--liquid-wallpaper)!important;background-size:var(--liquid-wall-width) var(--liquid-wall-height)!important;background-position:var(--liquid-wall-x) var(--liquid-wall-y)!important;filter:var(--liquid-filter)!important;opacity:.67!important}
body:is(.admin,.merchant,.personal-glass)[data-liquid-mode=native] :is(.modal,.password-keyboard,.auth-form)>.lg-optic{backdrop-filter:var(--liquid-filter) blur(2px)!important;-webkit-backdrop-filter:var(--liquid-filter) blur(2px)!important}
body:is(.admin,.merchant,.personal-glass)[data-liquid-mode=native] [data-liquid-material=bar]>.lg-optic{backdrop-filter:var(--liquid-filter) blur(.35px) saturate(1.05)!important;-webkit-backdrop-filter:var(--liquid-filter) blur(.35px) saturate(1.05)!important}
body:is(.admin,.merchant,.personal-glass) [data-liquid-material=slab] th{background:var(--staff-glass-table)!important}
body:is(.admin,.merchant,.personal-glass) :is(button,a).lg-surface:active:not(:disabled)>.lg-optic{transform:scale(.986)!important}
body:is(.admin,.merchant,.personal-glass) :is(#app,.sidebar,.workspace-section-tabs).lg-surface,body:is(.admin,.merchant,.personal-glass) [data-liquid-material=bar]{background:var(--staff-glass-face)!important}
body.admin .account-directory-tools :is(input,select):focus-visible{outline:2px solid var(--a-focus)!important;outline-offset:2px!important;border-color:var(--a-focus)!important}
/* The outer shell supplies the material; inner text rows never get black tiles. */
body.admin .config-summary>div{background:transparent!important;background-image:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;border-bottom:1px solid var(--a-line)!important;padding:14px 0!important}
body.admin .config-summary>div :is(span,strong){background:transparent!important;box-shadow:none!important}
body:is(.admin,.merchant,.personal-glass) [data-liquid-material=slab] :is(.card,.data-panel,.config-summary){background:transparent!important;box-shadow:none!important}
body.admin .account-directory-tools{margin-bottom:16px!important;border-radius:var(--staff-glass-radius)!important;padding:20px 22px!important}
body.admin .account-directory-tools+.card{border:1px solid transparent!important;border-radius:var(--staff-glass-radius)!important}
body.admin .account-directory-tools .directory-search{background:transparent!important;box-shadow:none!important;margin:0!important}
body.admin .account-directory-tools :is(input,select){background:var(--a-glass-input)!important;border:1px solid var(--a-line)!important;border-radius:11px!important;box-shadow:inset 0 1px 0 #ffffff0a!important;min-height:40px!important}
body.admin .account-directory-tools p{margin-bottom:14px!important}
body.admin .account-directory-tools .btn{min-height:40px!important}
/* Only the edge responds to a pointer; the face and surrounding page stay still. */
body:is(.admin,.merchant,.personal-glass) .lg-glint{display:none!important;position:absolute!important;inset:0!important;width:auto!important;height:auto!important;margin:0!important;box-sizing:border-box!important;border:0!important;border-radius:inherit!important;pointer-events:none!important;opacity:0!important;transition:opacity .24s ease-out!important}
@supports ((-webkit-mask-composite:xor) or (mask-composite:exclude)){
 body:is(.admin,.merchant,.personal-glass) [data-liquid-material]>.lg-optic>.lg-glint{display:block!important;padding:1.3px!important;background:radial-gradient(ellipse 150px 110px at var(--liquid-pointer-x,50%) var(--liquid-pointer-y,0px),#ffffffd9, #e5f0ff66 36%,transparent 78%),conic-gradient(from var(--liquid-light-angle,-35deg),#f3f8ff60 0deg,transparent 46deg,transparent 147deg,#d7e7ff30 180deg,transparent 214deg,transparent 314deg,#f3f8ff60 360deg)!important;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0)!important;mask-composite:exclude!important;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0)!important;-webkit-mask-composite:xor!important}
 body:is(.admin,.merchant,.personal-glass) [data-liquid-material][data-liquid-lit=true]>.lg-optic>.lg-glint{opacity:.8!important}
 html[data-theme=dark] body:is(.admin,.merchant,.personal-glass) [data-liquid-material][data-liquid-lit=true]>.lg-optic>.lg-glint{opacity:.28!important}
}
@media(max-width:900px){body:is(.admin,.merchant,.personal-glass).experience #app>.lg-optic{display:none!important}body.admin .account-directory-tools{padding:18px!important}}
@media(prefers-reduced-motion:reduce){body:is(.admin,.merchant,.personal-glass) .lg-optic{transition:none!important;transform:none!important}}
@media(prefers-reduced-motion:reduce),(prefers-reduced-transparency:reduce){body:is(.admin,.merchant,.personal-glass) [data-liquid-material]>.lg-optic>.lg-glint{display:none!important;transition:none!important}}
@media(prefers-reduced-transparency:reduce){html[data-theme] body:is(.admin,.merchant,.personal-glass){--staff-glass-face:var(--surface,#f9fbff)!important;--staff-glass-reading:var(--surface,#f9fbff)!important}body:is(.admin,.merchant,.personal-glass) .lg-optic{display:none!important}}
body:is(.admin,.merchant,.personal-glass):not([data-liquid-mode]){--staff-glass-face:var(--surface,#f9fbff)!important;--staff-glass-reading:var(--surface,#f9fbff)!important}
/* Mobile wallpaper is a viewport layer, independent of the scrolling document. */
@media(max-width:900px){
 body:is(.admin,.merchant,.personal-glass){isolation:isolate!important;background-image:none!important}
 body:is(.admin,.merchant,.personal-glass):before{content:''!important;position:fixed!important;top:0!important;left:0!important;width:100%!important;height:var(--liquid-wall-height,100vh)!important;z-index:-1!important;pointer-events:none!important;background:var(--liquid-wallpaper,linear-gradient(135deg,#e1ebfa,#e8eaf6)) 0 0/var(--liquid-wall-width,100vw) var(--liquid-wall-height,100vh) no-repeat!important}
 html[data-theme=dark] body:is(.admin,.merchant,.personal-glass):before{background-image:var(--liquid-wallpaper,linear-gradient(135deg,#17223b,#302e50))!important}
}

/* v164: brighten only light mobile drawers; preserve v162 controls and icons. */
@media(max-width:900px){
 html[data-theme=light] body:is(.admin,.merchant,.personal-glass).sidebar-open .sidebar-backdrop{background:#162c4b12!important;backdrop-filter:blur(2px)!important;-webkit-backdrop-filter:blur(2px)!important}
 html[data-theme=light] body:is(.admin,.merchant,.personal-glass) #app>.sidebar.lg-surface{--staff-glass-face:#f6faff26!important;--staff-glass-reading:#ffffff36!important;--staff-glass-edge:.85!important;background:var(--staff-glass-face)!important;box-shadow:10px 0 36px #213b5f20!important;border-right:1px solid transparent!important}
 html[data-theme=light] body:is(.admin,.merchant,.personal-glass) .sidebar>.lg-optic{box-shadow:inset 0 1px 0 #ffffff80,inset -1px 0 0 #ffffff8c,inset 1px 0 0 #ffffff40!important}
 html[data-theme=light] body:is(.admin,.merchant,.personal-glass) .sidebar>.lg-optic:before{content:''!important;position:absolute!important;inset:0!important;border-radius:inherit!important;pointer-events:none!important;background:linear-gradient(110deg,var(--staff-glass-reading),#ffffff16 58%,#ffffff05)!important}
 html[data-theme=light] body:is(.admin,.merchant,.personal-glass)[data-liquid-mode=native] .sidebar>.lg-optic{backdrop-filter:var(--liquid-filter) blur(4px) saturate(1.05)!important;-webkit-backdrop-filter:var(--liquid-filter) blur(4px) saturate(1.05)!important}
 html[data-theme=light] body:is(.admin,.merchant,.personal-glass) .sidebar :is(.brand,.nav-item:not(.active),.sidebar-service,.sidebar-service strong,.sidebar-footer .user-name,.sidebar-footer .muted){color:#233149!important}
 html[data-theme=light] body:is(.admin,.merchant,.personal-glass) .sidebar .nav-item:not(.active){font-weight:500!important}
}

@media(max-width:900px){@media(prefers-reduced-transparency:reduce){html[data-theme=light] body:is(.admin,.merchant,.personal-glass) #app>.sidebar.lg-surface{--staff-glass-face:var(--surface,#fff)!important;--staff-glass-reading:var(--surface,#fff)!important}}}

/* v165: stationary glass shell; only the contained body is a scrollport. */
html.staff-dialog-open{overflow:hidden!important;overscroll-behavior:none!important}
body:is(.admin,.merchant).staff-dialog-open{overflow:hidden!important}
body:is(.admin,.merchant).staff-dialog-open .main{overflow:hidden!important}
body:is(.admin,.merchant) #modal-root .overlay{position:fixed!important;inset:0!important;min-height:0!important;overflow:hidden!important;overscroll-behavior:none!important;padding:16px!important;animation:none!important}
body:is(.admin,.merchant) #modal-root .modal{display:flex!important;flex-direction:column!important;min-height:0!important;min-width:0!important;max-height:calc(100vh - 32px)!important;max-height:calc(100dvh - 32px)!important;overflow:hidden!important;padding:0!important;overscroll-behavior:contain!important}
body:is(.admin,.merchant) #modal-root .modal>.modal-head{flex:0 0 auto!important;min-width:0!important;margin:0!important;padding:20px 24px 16px!important}
body:is(.admin,.merchant) #modal-root .modal>.modal-head h2{min-width:0!important;overflow-wrap:anywhere!important}
body:is(.admin,.merchant) #modal-root .modal>.modal-head .close{flex:none!important}
body:is(.admin,.merchant) #modal-root .modal>.modal-scroll{flex:1 1 auto!important;min-width:0!important;min-height:0!important;max-width:100%!important;overflow:auto!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch;padding:0 24px 24px!important;scrollbar-width:none}
body:is(.admin,.merchant) #modal-root .modal>.modal-scroll:focus-visible{outline:2px solid var(--focus)!important;outline-offset:-3px!important}
body:is(.admin,.merchant) #modal-root .modal.payer-modal>.modal-scroll{padding:0!important}
@media(max-width:900px){body:is(.admin,.merchant).staff-dialog-open{position:fixed!important;top:var(--staff-dialog-scroll-top,0px)!important;left:0!important;right:0!important;width:100%!important}body:is(.admin,.merchant) #modal-root .overlay{padding:12px!important}body:is(.admin,.merchant) #modal-root .modal{max-height:calc(100vh - 24px)!important;max-height:calc(100dvh - 24px)!important}body:is(.admin,.merchant) #modal-root .modal>.modal-head{padding:18px 18px 14px!important}body:is(.admin,.merchant) #modal-root .modal>.modal-scroll{padding:0 18px 20px!important}}

body:is(.admin,.merchant) #modal-root .modal-scroll :is(.payer-qr,#collection-qr,.coupon-qr){background:#fff!important;color:#000!important;filter:none!important;backdrop-filter:none!important;color-scheme:only light}
body:is(.admin,.merchant) #modal-root #collection-qr{padding:24px!important}
body:is(.admin,.merchant) #modal-root .modal-scroll :is(.payer-qr,#collection-qr,.coupon-qr) svg{background:#fff!important;color:#000!important;filter:none!important}

body:is(.admin,.merchant) #modal-root .collection-modal>.pass-close{position:absolute!important;top:16px!important;right:16px!important;z-index:3!important;width:36px!important;height:36px!important;margin:0!important;background:var(--surface,#fff)!important;color:var(--ink)!important;border:1px solid var(--line)!important}
body:is(.admin,.merchant) #modal-root .modal:not(.payer-modal) .modal-scroll .pass-close{display:none!important}

body:is(.admin,.merchant) #modal-root .modal-scroll::-webkit-scrollbar{display:none;width:0;height:0}

/* Finished opacity animations must not retain a backdrop root around data cards. */
body:is(.admin,.merchant,.personal-glass) #view.route-enter{animation-fill-mode:backwards!important}

/* Mobile staff content scrolls independently of the fixed wallpaper/compositor. */
@media(max-width:900px){
 body:is(.admin,.merchant).experience{height:100vh!important;height:100dvh!important;min-height:0!important;overflow:hidden!important}
 body:is(.admin,.merchant).experience #app{height:100%!important;min-height:0!important;overflow:hidden!important;background:transparent!important}
 body:is(.admin,.merchant).experience #app>.main{height:100%!important;min-height:0!important;overflow:auto!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch}
}

}