/* VAREX CENTRAL THEME */
:root{
--varex-navy:#172554;
--varex-dark:#0f1d43;
--varex-sidebar-width:240px;
--varex-brand-height:170px;
--varex-footer-height:54px;
--varex-topbar-height:78px;
--varex-nav-item-height:48px;
--varex-nav-gap:5px;
--varex-radius:10px;
}

html{
width:100%;
min-height:100%;
overflow-y:scroll;
scrollbar-gutter:stable;
scroll-behavior:auto!important;
}

body{
width:100%;
min-height:100vh;
font-family:Arial,Tahoma,sans-serif!important;
overflow-x:hidden;
animation:none!important;
transform:none!important;
translate:none!important;
transition:none!important;
}

/* Keep business pages hidden for the few milliseconds needed to finish the
   saved language direction, shared header and sidebar. This prevents the
   visible RTL/LTR and legacy-header jump between pages. */
html:not([data-varex-nav-ready]) body:has(.sidebar),
html:not([data-varex-i18n-ready]) body:has(.sidebar){
visibility:hidden!important;
}

html[data-varex-nav-ready][data-varex-i18n-ready] body:has(.sidebar){
visibility:visible!important;
}

/* English UI: taps stay visually fixed instead of pressing/moving cards. */
html[dir="ltr"] button:active,
html[dir="ltr"] a:active,
html[dir="ltr"] [role="button"]:active,
html[dir="ltr"] .module:active,
html[dir="ltr"] .card:active,
html[dir="ltr"] .panel:active,
html[dir="ltr"] .stat:active{
transform:none!important;
translate:none!important;
}

@media(min-width:821px){
html[dir="ltr"] .main{
width:calc(100% - var(--varex-sidebar-width))!important;
max-width:calc(100% - var(--varex-sidebar-width))!important;
margin-left:var(--varex-sidebar-width)!important;
margin-right:0!important;
}
}

.sidebar{
position:fixed!important;
top:0!important;
right:0!important;
bottom:0!important;
width:var(--varex-sidebar-width)!important;
min-width:var(--varex-sidebar-width)!important;
max-width:var(--varex-sidebar-width)!important;
height:100vh!important;
height:100dvh!important;
margin:0!important;
padding:0!important;
display:flex!important;
flex-direction:column!important;
overflow:hidden!important;
z-index:1000!important;
background:linear-gradient(180deg,#172554,#13234f 48%,#0f1d43)!important;
transform:none!important;
translate:none!important;
animation:none!important;
transition:none!important;
contain:layout paint;
}

.sidebar .brand{
width:100%!important;
height:var(--varex-brand-height)!important;
min-height:var(--varex-brand-height)!important;
max-height:var(--varex-brand-height)!important;
margin:0!important;
padding:0!important;
display:flex!important;
flex:none!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
overflow:hidden!important;
transform:none!important;
animation:none!important;
transition:none!important;
}

.sidebar .logo{
width:100%!important;
min-height:36px!important;
margin:0!important;
padding:0!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
font-family:Arial,Tahoma,sans-serif!important;
font-size:30px!important;
font-weight:800!important;
line-height:36px!important;
letter-spacing:4px!important;
white-space:nowrap!important;
direction:ltr!important;
transform:none!important;
animation:none!important;
transition:none!important;
}

.sidebar .brand-small{
width:100%!important;
height:14px!important;
min-height:14px!important;
margin:11px 0 0!important;
padding:0!important;
font-family:Arial,Tahoma,sans-serif!important;
font-size:10px!important;
line-height:14px!important;
text-align:center!important;
white-space:nowrap!important;
direction:ltr!important;
}

.sidebar .system-status{
height:15px!important;
min-height:15px!important;
margin:16px 0 0!important;
padding:0!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:7px!important;
font-family:Arial,Tahoma,sans-serif!important;
font-size:10px!important;
line-height:15px!important;
white-space:nowrap!important;
}

.sidebar .system-status .dot{
width:7px!important;
height:7px!important;
min-width:7px!important;
min-height:7px!important;
border-radius:50%!important;
flex:none!important;
}

.sidebar .nav{
width:100%!important;
min-width:100%!important;
min-height:0!important;
margin:0!important;
padding:16px 12px!important;
flex:1 1 auto!important;
overflow-x:hidden!important;
overflow-y:scroll!important;
overscroll-behavior:contain!important;
scrollbar-gutter:stable!important;
-webkit-overflow-scrolling:touch;
transform:none!important;
animation:none!important;
transition:none!important;
}

.sidebar .nav::-webkit-scrollbar{
width:5px!important;
}

.sidebar .nav::-webkit-scrollbar-track{
background:transparent!important;
}

.sidebar .nav::-webkit-scrollbar-thumb{
background:rgba(255,255,255,.22)!important;
border-radius:10px!important;
}

.sidebar .nav a{
position:relative!important;
width:100%!important;
height:var(--varex-nav-item-height)!important;
min-height:var(--varex-nav-item-height)!important;
max-height:var(--varex-nav-item-height)!important;
margin:0 0 var(--varex-nav-gap)!important;
padding:0 14px!important;
border:0!important;
border-radius:var(--varex-radius)!important;
display:flex!important;
flex:none!important;
align-items:center!important;
justify-content:flex-start!important;
gap:11px!important;
font-family:Arial,Tahoma,sans-serif!important;
font-size:13px!important;
font-weight:600!important;
line-height:1!important;
white-space:nowrap!important;
text-decoration:none!important;
box-shadow:none!important;
transform:none!important;
translate:none!important;
animation:none!important;
transition:none!important;
}

.sidebar .nav a .nav-icon{
width:25px!important;
min-width:25px!important;
max-width:25px!important;
height:25px!important;
min-height:25px!important;
max-height:25px!important;
margin:0!important;
padding:0!important;
display:flex!important;
flex:0 0 25px!important;
align-items:center!important;
justify-content:center!important;
font-size:18px!important;
line-height:25px!important;
text-align:center!important;
overflow:hidden!important;
transform:none!important;
translate:none!important;
animation:none!important;
transition:none!important;
backface-visibility:hidden!important;
}

.sidebar .nav a:hover,
.sidebar .nav a:focus,
.sidebar .nav a:active{
transform:none!important;
translate:none!important;
}

.sidebar .nav a.active{
height:var(--varex-nav-item-height)!important;
min-height:var(--varex-nav-item-height)!important;
max-height:var(--varex-nav-item-height)!important;
margin:0 0 var(--varex-nav-gap)!important;
padding:0 14px!important;
border:0!important;
background:#fff!important;
color:#172554!important;
box-shadow:none!important;
transform:none!important;
}

.sidebar .nav a span,
.sidebar .nav a i,
.sidebar .nav a svg{
flex:none!important;
transform:none!important;
animation:none!important;
transition:none!important;
}

.sidebar .nav a svg{
width:18px!important;
height:18px!important;
min-width:18px!important;
min-height:18px!important;
}

.sidebar .sidebar-footer{
width:100%!important;
height:var(--varex-footer-height)!important;
min-height:var(--varex-footer-height)!important;
max-height:var(--varex-footer-height)!important;
margin:0!important;
padding:0!important;
display:flex!important;
flex:none!important;
align-items:center!important;
justify-content:center!important;
font-family:Arial,Tahoma,sans-serif!important;
font-size:9px!important;
line-height:1!important;
white-space:nowrap!important;
transform:none!important;
animation:none!important;
transition:none!important;
}

.main{
width:auto!important;
min-width:0!important;
min-height:100vh!important;
margin:0 var(--varex-sidebar-width) 0 0!important;
padding:0!important;
transform:none!important;
animation:none!important;
transition:none!important;
}

.topbar{
width:100%!important;
height:var(--varex-topbar-height)!important;
min-height:var(--varex-topbar-height)!important;
max-height:var(--varex-topbar-height)!important;
margin:0!important;
padding:0 28px!important;
display:flex!important;
align-items:center!important;
flex:none!important;
transform:none!important;
animation:none!important;
transition:none!important;
}

.page-name{
min-width:0!important;
height:100%!important;
display:flex!important;
align-items:center!important;
gap:12px!important;
}

.page-icon{
width:44px!important;
height:44px!important;
min-width:44px!important;
min-height:44px!important;
max-width:44px!important;
max-height:44px!important;
display:flex!important;
flex:none!important;
align-items:center!important;
justify-content:center!important;
font-size:20px!important;
line-height:1!important;
transform:none!important;
translate:none!important;
animation:none!important;
transition:none!important;
overflow:hidden!important;
backface-visibility:hidden!important;
}

.page-name h1,
.page-name h2{
margin:0!important;
font-family:Arial,Tahoma,sans-serif!important;
font-size:19px!important;
line-height:24px!important;
white-space:nowrap!important;
}

.page-name small{
height:14px!important;
margin:0!important;
font-family:Arial,Tahoma,sans-serif!important;
font-size:11px!important;
line-height:14px!important;
white-space:nowrap!important;
}

.top-info{
min-height:40px!important;
display:flex!important;
align-items:center!important;
gap:10px!important;
flex:none!important;
}

.varex-feedback-controls{
height:42px!important;
display:flex!important;
align-items:center!important;
gap:7px!important;
flex:0 0 auto!important;
direction:ltr!important;
}

.varex-feedback-button{
position:relative!important;
width:42px!important;
min-width:42px!important;
max-width:42px!important;
height:42px!important;
min-height:42px!important;
max-height:42px!important;
margin:0!important;
padding:0!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
border:1px solid #d8e0ec!important;
border-radius:10px!important;
background:#f8fafc!important;
color:#64748b!important;
box-shadow:0 3px 0 #d8e0ec,0 6px 12px rgba(15,23,42,.08)!important;
cursor:pointer!important;
transform:none!important;
transition:background-color .15s ease,color .15s ease,border-color .15s ease!important;
}

.varex-feedback-button.is-enabled{
border-color:#172554!important;
background:#172554!important;
color:#fff!important;
box-shadow:0 4px 0 #0f1d43,0 7px 13px rgba(23,37,84,.16)!important;
}

.varex-feedback-button svg{
width:21px!important;
height:21px!important;
display:block!important;
fill:none!important;
stroke:currentColor!important;
stroke-width:1.8!important;
stroke-linecap:round!important;
stroke-linejoin:round!important;
pointer-events:none!important;
}

.varex-feedback-state{
position:absolute!important;
top:5px!important;
left:5px!important;
width:6px!important;
height:6px!important;
border:1px solid #fff!important;
border-radius:50%!important;
background:#94a3b8!important;
pointer-events:none!important;
}

.varex-feedback-button.is-enabled .varex-feedback-state{
background:#4ade80!important;
box-shadow:0 0 0 2px rgba(74,222,128,.18)!important;
}

body.varex-dark .varex-feedback-button,
html[data-theme="dark"] .varex-feedback-button,
html[data-varex-theme="dark"] .varex-feedback-button{
border-color:#35506e!important;
background:#10233d!important;
color:#cbd5e1!important;
box-shadow:0 3px 0 #071424,0 7px 14px rgba(0,0,0,.22)!important;
}

body.varex-dark .varex-feedback-button.is-enabled,
html[data-theme="dark"] .varex-feedback-button.is-enabled,
html[data-varex-theme="dark"] .varex-feedback-button.is-enabled{
border-color:#fff!important;
background:#fff!important;
color:#172554!important;
box-shadow:0 4px 0 #94a3b8,0 8px 15px rgba(0,0,0,.28)!important;
}

.top-info .chip{
height:40px!important;
min-height:40px!important;
margin:0!important;
padding:8px 13px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
font-family:Arial,Tahoma,sans-serif!important;
font-size:11px!important;
line-height:1!important;
white-space:nowrap!important;
transform:none!important;
animation:none!important;
transition:none!important;
}

/* Unified date and time cards across every VAREX page. */
html .topbar .top-info.varex-mobile-top-info>.varex-mobile-clock-chip{
width:112px!important;
min-width:112px!important;
max-width:112px!important;
height:40px!important;
min-height:40px!important;
max-height:40px!important;
padding:0 10px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
text-align:center!important;
direction:ltr!important;
font-family:Arial,Tahoma,sans-serif!important;
font-size:11px!important;
font-weight:800!important;
font-variant-numeric:tabular-nums!important;
line-height:40px!important;
white-space:nowrap!important;
overflow:hidden!important;
transform:none!important;
translate:none!important;
animation:none!important;
transition:none!important;
backface-visibility:hidden!important;
}

/* Stabilize legacy clock cards before JavaScript assigns shared classes. */
html .topbar .top-info>:has(> #currentDate),
html .topbar .top-info>:has(> #currentTime){
width:112px!important;
min-width:112px!important;
max-width:112px!important;
height:40px!important;
min-height:40px!important;
max-height:40px!important;
margin:0!important;
padding:0 10px!important;
display:flex!important;
flex:0 0 112px!important;
align-items:center!important;
justify-content:center!important;
overflow:hidden!important;
transform:none!important;
translate:none!important;
animation:none!important;
transition:none!important;
}

html .topbar .top-info>:has(> #currentDate)>#currentDate,
html .topbar .top-info>:has(> #currentTime)>#currentTime{
width:100%!important;
min-width:0!important;
max-width:100%!important;
height:100%!important;
margin:0!important;
padding:0!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
font-variant-numeric:tabular-nums!important;
text-align:center!important;
line-height:1!important;
transform:none!important;
animation:none!important;
transition:none!important;
}

html .topbar .top-info.varex-mobile-top-info>.varex-mobile-clock-wrapper{
font-size:0!important;
}

html .topbar .top-info.varex-mobile-top-info>.varex-mobile-clock-wrapper #currentDate,
html .topbar .top-info.varex-mobile-top-info>.varex-mobile-clock-wrapper #currentTime{
width:100%!important;
height:100%!important;
margin:0!important;
padding:0!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
text-align:center!important;
direction:ltr!important;
font-size:11px!important;
font-weight:800!important;
font-variant-numeric:tabular-nums!important;
line-height:1!important;
color:inherit!important;
}

.content{
min-width:0!important;
transform:none!important;
animation:none!important;
}

.sidebar,
.sidebar *,
.topbar,
.topbar *{
box-sizing:border-box!important;
}

@media(max-width:750px){
.top-info{display:none!important}
}

@media(prefers-reduced-motion:reduce){
*,
*::before,
*::after{
scroll-behavior:auto!important;
animation-duration:.01ms!important;
animation-iteration-count:1!important;
transition-duration:.01ms!important;
}
}
/* VAREX SIDEBAR SCROLL FIX */
.sidebar .nav{
overflow-y:auto!important;
overflow-x:hidden!important;
min-height:0!important;
flex:1 1 0!important;
-webkit-overflow-scrolling:touch!important;
}
.sidebar .sidebar-footer{
flex:0 0 var(--varex-footer-height)!important;
}

/* =========================================================
   VAREX MOBILE APP SHELL
   قائمة جانبية قابلة للفتح + مساحات آمنة للأجهزة الحديثة
========================================================= */
.varex-mobile-menu-button,
.varex-mobile-backdrop{
display:none;
}

@media(max-width:820px){
:root{
--varex-mobile-topbar-height:64px;
}

html{
overflow-y:auto!important;
scrollbar-gutter:auto!important;
}

body{
min-height:100dvh!important;
padding-bottom:env(safe-area-inset-bottom,0px)!important;
}

body.varex-menu-open{
overflow:hidden!important;
touch-action:none!important;
}

.sidebar{
right:0!important;
left:auto!important;
width:min(86vw,320px)!important;
min-width:min(86vw,320px)!important;
max-width:min(86vw,320px)!important;
padding-top:env(safe-area-inset-top,0px)!important;
padding-bottom:env(safe-area-inset-bottom,0px)!important;
z-index:20020!important;
contain:none!important;
transform:translateX(110%)!important;
transition:transform .22s ease!important;
box-shadow:-18px 0 45px rgba(15,23,42,.24)!important;
}

body.varex-menu-open .sidebar{
transform:translateX(0)!important;
}

.sidebar .brand{
height:145px!important;
min-height:145px!important;
max-height:145px!important;
}

.sidebar .nav{
padding:11px 12px!important;
scrollbar-gutter:auto!important;
}

.sidebar .nav a,
.sidebar .nav a.active{
height:46px!important;
min-height:46px!important;
max-height:46px!important;
}

.main{
width:100%!important;
max-width:100%!important;
min-height:100dvh!important;
margin:0!important;
padding:0!important;
}

.topbar{
position:sticky!important;
top:0!important;
height:calc(var(--varex-mobile-topbar-height) + env(safe-area-inset-top,0px))!important;
min-height:calc(var(--varex-mobile-topbar-height) + env(safe-area-inset-top,0px))!important;
max-height:calc(var(--varex-mobile-topbar-height) + env(safe-area-inset-top,0px))!important;
padding:env(safe-area-inset-top,0px) 62px 0 14px!important;
z-index:20000!important;
box-shadow:0 2px 12px rgba(15,23,42,.06)!important;
display:flex!important;
align-items:center!important;
gap:8px!important;
overflow:hidden!important;
}

.varex-mobile-menu-button{
position:absolute!important;
right:12px!important;
top:calc(env(safe-area-inset-top,0px) + 11px)!important;
width:42px!important;
height:42px!important;
min-width:42px!important;
min-height:42px!important;
padding:0!important;
border:1px solid #dbe3ef!important;
border-radius:11px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
background:#fff!important;
color:#172554!important;
font-family:Arial,Tahoma,sans-serif!important;
font-size:22px!important;
font-weight:800!important;
line-height:1!important;
box-shadow:0 4px 12px rgba(15,23,42,.08)!important;
cursor:pointer!important;
z-index:2!important;
}

.varex-mobile-backdrop{
position:fixed!important;
inset:0!important;
display:block!important;
background:rgba(15,23,42,.52)!important;
opacity:0!important;
visibility:hidden!important;
pointer-events:none!important;
z-index:20010!important;
transition:opacity .2s ease,visibility .2s ease!important;
}

body.varex-menu-open .varex-mobile-backdrop{
opacity:1!important;
visibility:visible!important;
pointer-events:auto!important;
}

.page-name{
width:auto!important;
min-width:0!important;
flex:1 1 auto!important;
gap:9px!important;
overflow:hidden!important;
}

.page-icon{
width:40px!important;
height:40px!important;
min-width:40px!important;
min-height:40px!important;
max-width:40px!important;
max-height:40px!important;
font-size:18px!important;
}

.page-name>div:last-child{
min-width:0!important;
overflow:hidden!important;
}

.page-name h1,
.page-name h2{
max-width:100%!important;
font-size:16px!important;
line-height:21px!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
white-space:nowrap!important;
}

.page-name small{
max-width:100%!important;
font-size:9px!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
white-space:nowrap!important;
}

html .topbar .top-info.varex-mobile-top-info{
width:auto!important;
min-width:0!important;
flex:0 0 auto!important;
display:flex!important;
align-items:center!important;
gap:4px!important;
margin:0!important;
padding:0!important;
visibility:visible!important;
opacity:1!important;
overflow:visible!important;
}

html .topbar .top-info.varex-mobile-top-info>*{
display:none!important;
}

html .topbar .top-info.varex-mobile-top-info>.varex-feedback-controls{
height:34px!important;
display:flex!important;
gap:4px!important;
}

html .topbar .top-info.varex-mobile-top-info>.varex-feedback-controls .varex-feedback-button{
width:34px!important;
min-width:34px!important;
max-width:34px!important;
height:34px!important;
min-height:34px!important;
max-height:34px!important;
border-radius:9px!important;
box-shadow:none!important;
}

html .topbar .top-info.varex-mobile-top-info>.varex-feedback-controls .varex-feedback-button svg{
width:18px!important;
height:18px!important;
}

html .topbar .top-info.varex-mobile-top-info>.varex-mobile-clock-chip{
width:92px!important;
min-width:92px!important;
max-width:92px!important;
height:34px!important;
min-height:34px!important;
max-height:34px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:0!important;
margin:0!important;
padding:0 6px!important;
border:1px solid #e2e8f0!important;
border-radius:9px!important;
background:#f8fafc!important;
box-shadow:none!important;
color:#475569!important;
font-size:10px!important;
font-weight:800!important;
font-variant-numeric:tabular-nums!important;
line-height:34px!important;
text-align:center!important;
direction:ltr!important;
white-space:nowrap!important;
}

html .topbar .top-info.varex-mobile-top-info>.varex-mobile-clock-wrapper{
font-size:0!important;
}

html .topbar .top-info.varex-mobile-top-info>.varex-mobile-clock-wrapper #currentDate,
html .topbar .top-info.varex-mobile-top-info>.varex-mobile-clock-wrapper #currentTime{
font-size:10px!important;
margin:0!important;
color:inherit!important;
}

html .topbar .top-info>:has(> #currentDate),
html .topbar .top-info>:has(> #currentTime){
width:92px!important;
min-width:92px!important;
max-width:92px!important;
height:34px!important;
min-height:34px!important;
max-height:34px!important;
padding:0 6px!important;
flex-basis:92px!important;
line-height:34px!important;
}

body.varex-dark .topbar .top-info.varex-mobile-top-info>.varex-mobile-clock-chip{
background:#10233d!important;
border-color:#29415f!important;
color:#e2e8f0!important;
}

.content{
width:100%!important;
max-width:100%!important;
margin:0!important;
padding:16px 12px calc(86px + env(safe-area-inset-bottom,0px))!important;
}

.quick-stats,
.stats,
.stat-grid,
.summary-grid,
.kpi-grid,
.cards-grid,
.dashboard-grid{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:10px!important;
}

.modules,
.modules-grid{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:10px!important;
}

.filters,
.filter-grid,
.form-grid,
.lower-grid{
grid-template-columns:1fr!important;
}

.table-wrap,
.table-container,
.table-responsive,
.data-table-wrap,
.list-table{
width:100%!important;
max-width:100%!important;
overflow-x:auto!important;
overscroll-behavior-x:contain!important;
-webkit-overflow-scrolling:touch!important;
}

.modal,
.modal-card,
.dialog,
.dialog-card{
max-width:calc(100vw - 24px)!important;
max-height:calc(100dvh - 24px)!important;
}

button,
.btn,
input,
select{
min-height:44px;
}
}

@media(max-width:480px){
.varex-feedback-controls{
display:none!important;
}

.page-name small{
display:none!important;
}

.page-name h1,
.page-name h2{
font-size:14px!important;
}

.content{
padding-right:10px!important;
padding-left:10px!important;
}

.quick-stats,
.stats,
.stat-grid,
.summary-grid,
.kpi-grid,
.cards-grid,
.dashboard-grid,
.modules,
.modules-grid{
grid-template-columns:1fr!important;
}
}

@media(max-width:390px){
.topbar{
padding-left:9px!important;
}

.page-icon{
display:none!important;
}

html .topbar .top-info.varex-mobile-top-info>.varex-mobile-clock-chip{
width:84px!important;
min-width:84px!important;
max-width:84px!important;
padding-right:4px!important;
padding-left:4px!important;
font-size:9px!important;
}

html .topbar .top-info.varex-mobile-top-info>.varex-mobile-clock-wrapper #currentDate,
html .topbar .top-info.varex-mobile-top-info>.varex-mobile-clock-wrapper #currentTime{
font-size:9px!important;
}

html .topbar .top-info>:has(> #currentDate),
html .topbar .top-info>:has(> #currentTime){
width:84px!important;
min-width:84px!important;
max-width:84px!important;
flex-basis:84px!important;
padding-right:4px!important;
padding-left:4px!important;
}
}

/* =========================================================
   VAREX TABLET WEB HEADER — shared by every business page
   Order: time, date, system, switch user, language, vibration, sound
========================================================= */
@media(min-width:821px){
:root{
--varex-topbar-height:96px;
}

.topbar{
height:var(--varex-topbar-height)!important;
min-height:var(--varex-topbar-height)!important;
max-height:var(--varex-topbar-height)!important;
padding:0 22px!important;
overflow:visible!important;
}

.page-name h1,
.page-name h2{
font-size:21px!important;
line-height:27px!important;
}

.page-name small{
height:auto!important;
font-size:13px!important;
line-height:17px!important;
}

.topbar .top-info.varex-unified-header{
height:48px!important;
min-height:48px!important;
display:flex!important;
align-items:center!important;
justify-content:flex-start!important;
gap:8px!important;
direction:ltr!important;
overflow:visible!important;
}

/* One shared header palette in both appearance modes. */
.topbar .top-info.varex-unified-header>.info-chip,
.topbar .top-info.varex-unified-header>.varex-header-language>.language-button,
.topbar .top-info.varex-unified-header>.varex-feedback-controls .varex-feedback-button{
border:1px solid #172554!important;
background:#172554!important;
color:#fff!important;
box-shadow:0 4px 0 #0f1d43,0 8px 15px rgba(23,37,84,.18)!important;
}

body.varex-dark .topbar .top-info.varex-unified-header>.info-chip,
html[data-theme="dark"] .topbar .top-info.varex-unified-header>.info-chip,
html[data-varex-theme="dark"] .topbar .top-info.varex-unified-header>.info-chip,
body.varex-dark .topbar .top-info.varex-unified-header>.varex-header-language>.language-button,
html[data-theme="dark"] .topbar .top-info.varex-unified-header>.varex-header-language>.language-button,
html[data-varex-theme="dark"] .topbar .top-info.varex-unified-header>.varex-header-language>.language-button,
body.varex-dark .topbar .top-info.varex-unified-header>.varex-feedback-controls .varex-feedback-button,
html[data-theme="dark"] .topbar .top-info.varex-unified-header>.varex-feedback-controls .varex-feedback-button,
html[data-varex-theme="dark"] .topbar .top-info.varex-unified-header>.varex-feedback-controls .varex-feedback-button{
border-color:#fff!important;
background:#fff!important;
color:#172554!important;
box-shadow:0 4px 0 #94a3b8,0 8px 15px rgba(0,0,0,.26)!important;
}

.topbar .top-info.varex-unified-header>.info-chip,
.topbar .top-info.varex-unified-header>.language-selector,
.topbar .top-info.varex-unified-header>.varex-feedback-controls{
flex:0 0 auto!important;
}

.topbar .top-info.varex-unified-header>.info-chip{
height:44px!important;
min-height:44px!important;
max-height:44px!important;
margin:0!important;
padding:0 11px!important;
border-radius:10px!important;
font-size:13px!important;
line-height:44px!important;
text-decoration:none!important;
direction:inherit!important;
transform:none!important;
translate:none!important;
transition:none!important;
}

html .topbar .top-info.varex-mobile-top-info.varex-unified-header>.varex-mobile-clock-chip,
html .topbar .top-info.varex-unified-header>.varex-header-clock{
height:44px!important;
min-height:44px!important;
max-height:44px!important;
padding:0 8px!important;
font-size:12px!important;
font-weight:800!important;
line-height:44px!important;
font-variant-numeric:tabular-nums!important;
direction:ltr!important;
}

html .topbar .top-info.varex-unified-header>.varex-header-time{
width:94px!important;
min-width:94px!important;
max-width:94px!important;
}

html .topbar .top-info.varex-unified-header>.varex-header-date{
width:104px!important;
min-width:104px!important;
max-width:104px!important;
}

.varex-header-action{
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:7px!important;
font-family:Arial,Tahoma,sans-serif!important;
cursor:pointer!important;
white-space:nowrap!important;
}

.varex-header-system{
min-width:96px!important;
}

.varex-top-switch-user{
min-width:126px!important;
}

.varex-switch-icon,
.varex-power-icon{
width:30px!important;
height:30px!important;
min-width:30px!important;
max-width:30px!important;
flex:0 0 30px!important;
display:grid!important;
place-items:center!important;
border-radius:50%!important;
line-height:0!important;
transform:none!important;
translate:none!important;
}

.varex-switch-icon{
background:#eef2ff!important;
color:#172554!important;
border:1px solid #cbd5e1!important;
}

.varex-power-icon{
background:linear-gradient(145deg,#ff4d4f,#dc2626)!important;
color:#fff!important;
border:2px solid #fecaca!important;
box-shadow:0 2px 7px rgba(220,38,38,.28)!important;
}

.varex-switch-icon svg,
.varex-power-icon svg{
width:18px!important;
height:18px!important;
display:block!important;
fill:none!important;
stroke:currentColor!important;
stroke-width:2.25!important;
stroke-linecap:round!important;
stroke-linejoin:round!important;
transform:none!important;
}

.varex-header-language,
.varex-header-language .language-button{
width:132px!important;
min-width:132px!important;
max-width:132px!important;
height:44px!important;
min-height:44px!important;
max-height:44px!important;
}

.varex-header-language{
position:relative!important;
display:block!important;
margin:0!important;
overflow:visible!important;
}

.varex-header-language .language-button{
margin:0!important;
padding:0 10px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:7px!important;
border-radius:10px!important;
font-family:Arial,Tahoma,sans-serif!important;
font-size:13px!important;
font-weight:800!important;
line-height:1!important;
white-space:nowrap!important;
cursor:pointer!important;
transform:none!important;
translate:none!important;
transition:none!important;
}

.varex-header-language .language-arrow{
margin:0!important;
font-size:9px!important;
line-height:1!important;
pointer-events:none!important;
}

.varex-header-language .language-menu{
position:absolute!important;
top:52px!important;
left:0!important;
right:auto!important;
z-index:10060!important;
width:190px!important;
margin:0!important;
padding:7px!important;
display:none!important;
border:1px solid #dbe3ef!important;
border-radius:11px!important;
background:#fff!important;
box-shadow:0 14px 35px rgba(15,23,42,.16)!important;
direction:ltr!important;
}

.varex-header-language.open .language-menu{
display:block!important;
}

.varex-header-language .language-option{
width:100%!important;
min-height:42px!important;
height:42px!important;
margin:0!important;
padding:9px 11px!important;
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
gap:12px!important;
border:0!important;
border-radius:8px!important;
background:#fff!important;
color:#334155!important;
box-shadow:none!important;
font-family:Arial,Tahoma,sans-serif!important;
font-size:13px!important;
font-weight:700!important;
line-height:1!important;
text-align:left!important;
white-space:nowrap!important;
transform:none!important;
translate:none!important;
transition:none!important;
cursor:pointer!important;
}

.varex-header-language .language-option:hover,
.varex-header-language .language-option.active{
background:#eef2ff!important;
color:#172554!important;
}

.varex-header-language .language-code{
margin:0!important;
color:#94a3b8!important;
font-size:10px!important;
font-weight:800!important;
line-height:1!important;
}

body.varex-dark .varex-header-language .language-menu,
html[data-theme="dark"] .varex-header-language .language-menu,
html[data-varex-theme="dark"] .varex-header-language .language-menu{
border-color:#29415f!important;
background:#132641!important;
}

body.varex-dark .varex-header-language .language-option,
html[data-theme="dark"] .varex-header-language .language-option,
html[data-varex-theme="dark"] .varex-header-language .language-option{
background:#132641!important;
color:#e2e8f0!important;
}

body.varex-dark .varex-header-language .language-option:hover,
body.varex-dark .varex-header-language .language-option.active,
html[data-theme="dark"] .varex-header-language .language-option:hover,
html[data-theme="dark"] .varex-header-language .language-option.active,
html[data-varex-theme="dark"] .varex-header-language .language-option:hover,
html[data-varex-theme="dark"] .varex-header-language .language-option.active{
background:#1b3455!important;
color:#fff!important;
}

.varex-header-legacy-users{
display:none!important;
}

.topbar .varex-feedback-controls{
height:44px!important;
gap:8px!important;
overflow:visible!important;
}

.varex-feedback-selector{
position:relative!important;
width:48px!important;
height:44px!important;
flex:0 0 48px!important;
}

.varex-feedback-button{
width:48px!important;
min-width:48px!important;
max-width:48px!important;
height:44px!important;
min-height:44px!important;
max-height:44px!important;
overflow:hidden!important;
}

.varex-feedback-button svg{
width:20px!important;
height:20px!important;
margin-left:-7px!important;
}

.varex-feedback-level{
position:absolute!important;
right:5px!important;
bottom:4px!important;
min-width:14px!important;
height:14px!important;
padding:0 2px!important;
border-radius:5px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
background:rgba(255,255,255,.18)!important;
font-size:8px!important;
font-weight:900!important;
line-height:1!important;
}

.varex-feedback-arrow{
position:absolute!important;
right:4px!important;
top:1px!important;
font-size:10px!important;
line-height:1!important;
}

.varex-feedback-menu{
position:absolute!important;
top:52px!important;
right:0!important;
z-index:10050!important;
width:166px!important;
padding:7px!important;
display:none!important;
border:1px solid #dbe3ef!important;
border-radius:11px!important;
background:#fff!important;
box-shadow:0 14px 35px rgba(15,23,42,.16)!important;
direction:ltr!important;
}

.varex-feedback-selector.open .varex-feedback-menu{
display:block!important;
}

.varex-feedback-option{
width:100%!important;
min-height:40px!important;
margin:0!important;
padding:8px 10px!important;
border:0!important;
border-radius:8px!important;
display:block!important;
background:#fff!important;
color:#334155!important;
font-family:Arial,Tahoma,sans-serif!important;
font-size:12px!important;
font-weight:700!important;
text-align:left!important;
box-shadow:none!important;
transform:none!important;
transition:none!important;
}

.varex-feedback-option:hover,
.varex-feedback-option.is-selected{
background:#eef2ff!important;
color:#172554!important;
}

body.varex-dark .varex-feedback-menu,
html[data-theme="dark"] .varex-feedback-menu,
html[data-varex-theme="dark"] .varex-feedback-menu{
border-color:#29415f!important;
background:#132641!important;
}

body.varex-dark .varex-feedback-option,
html[data-theme="dark"] .varex-feedback-option,
html[data-varex-theme="dark"] .varex-feedback-option{
background:#132641!important;
color:#e2e8f0!important;
}

body.varex-dark .varex-feedback-option:hover,
body.varex-dark .varex-feedback-option.is-selected,
html[data-theme="dark"] .varex-feedback-option:hover,
html[data-theme="dark"] .varex-feedback-option.is-selected{
background:#1b3455!important;
color:#fff!important;
}

/* Increase primary and supporting system text by two points. */
.hero h1{font-size:27px!important}
.hero p{font-size:15px!important}
.section-header h3,
.section-title,
.section-title h2,
.panel-head h3,
.panel-header h3,
.section-head h3,
.panel>h2{font-size:18px!important}
.module h3{font-size:16px!important}
.module p,
.stat-small,
.panel-head span,
.panel-header span,
.section-head span{font-size:12px!important}
.stat-label,
.field label,
.form-group label{font-size:12px!important}
input,
select,
textarea,
button{font-size:13px}

/* Settings appearance cards stay centered in both directions. */
.theme-options{
align-items:stretch!important;
}
.theme-option,
.theme-option .theme-name,
.theme-option .theme-desc{
text-align:center!important;
}
.theme-option{
min-height:140px!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
gap:5px!important;
transform:none!important;
translate:none!important;
transition:none!important;
}
.theme-option .theme-icon{
width:100%!important;
min-height:38px!important;
margin:0 auto 5px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
font-size:30px!important;
line-height:38px!important;
text-align:center!important;
}
.theme-option .theme-name{
width:100%!important;
font-size:14px!important;
line-height:20px!important;
}
.theme-option .theme-desc{
width:100%!important;
margin:0!important;
font-size:11px!important;
line-height:17px!important;
}
}

@media(min-width:821px) and (max-width:1200px){
:root{--varex-topbar-height:126px}
.topbar{
flex-wrap:wrap!important;
align-content:center!important;
gap:4px 14px!important;
padding-top:8px!important;
padding-bottom:8px!important;
}
.page-name{
width:100%!important;
height:46px!important;
justify-content:center!important;
}
.topbar .top-info.varex-unified-header{
width:100%!important;
justify-content:center!important;
}
.topbar .top-info:not(.varex-unified-header){
width:100%!important;
min-height:48px!important;
visibility:hidden!important;
}
}

/* No visual jump when pressing or navigating between cards/pages. */
html body a:active,
html body button:active,
html body [role="button"]:active,
html body .module:active,
html body .card:active,
html body .panel:active,
html body .stat:active{
transform:none!important;
translate:none!important;
scale:1!important;
}

.main,
.content,
.topbar,
.top-info,
.page-name,
.sidebar,
.sidebar .brand,
.sidebar .sidebar-footer,
.sidebar .nav,
.sidebar .nav a,
.hero,
.quick-stats,
.modules,
.grid,
.stats,
.filter-panel,
.module,
.card,
.panel,
.stat,
.page-icon{
animation:none!important;
transform:none!important;
translate:none!important;
transition:none!important;
}

/* Touch hover/press states must never move the tablet layout. */
html,
body,
.main,
.content{
overflow-anchor:none!important;
}

.sidebar .nav a,
.sidebar .nav a:hover,
.sidebar .nav a:focus,
.sidebar .nav a:active,
.module,
.module:hover,
.module:focus,
.module:active,
.card,
.card:hover,
.card:focus,
.card:active,
.stat,
.stat:hover,
.stat:focus,
.stat:active,
.theme-option,
.theme-option:hover,
.theme-option:focus,
.theme-option:active{
transform:none!important;
translate:none!important;
scale:1!important;
animation:none!important;
transition:none!important;
filter:none!important;
}

a,
button,
[role="button"]{
-webkit-tap-highlight-color:transparent!important;
}

/* =========================================================
   VAREX READABLE TYPE + SCREEN SIZE CONTROLS
   Default 100%; selectable 90, 80, 70, 60 and 50 percent.
========================================================= */
body:has(.sidebar){
font-weight:700!important;
}

body:has(.sidebar) .content :where(h1,h2,h3,h4,h5,h6,p,small,label,button,input,select,textarea,th,td,li,a,strong,b){
font-weight:700!important;
}

.sidebar .logo{font-size:32px!important;font-weight:800!important}
.sidebar .brand-small{font-size:12px!important;font-weight:700!important}
.sidebar .system-status,
.sidebar .store-status{font-size:12px!important;font-weight:700!important}
.sidebar .nav a{font-size:15px!important;font-weight:700!important}
.sidebar .sidebar-footer{font-size:11px!important;font-weight:700!important}

.page-name h1,
.page-name h2{font-size:23px!important;line-height:29px!important;font-weight:800!important}
.page-name small{font-size:15px!important;line-height:19px!important;font-weight:700!important}

body:has(.sidebar) .content .hero h1{font-size:29px!important;font-weight:800!important}
body:has(.sidebar) .content .hero p{font-size:17px!important;font-weight:700!important}
body:has(.sidebar) .content :is(.section-header h3,.section-title,.section-title h2,.panel-head h3,.panel-header h3,.section-head h3,.panel>h2){font-size:20px!important;font-weight:800!important}
body:has(.sidebar) .content .module h3{font-size:18px!important;font-weight:800!important}
body:has(.sidebar) .content :is(.module p,.stat-small,.panel-head span,.panel-header span,.section-head span){font-size:14px!important;font-weight:700!important}
body:has(.sidebar) .content :is(.stat-label,.field label,.form-group label){font-size:14px!important;font-weight:700!important}
body:has(.sidebar) .content :is(input,select,textarea,button){font-size:15px!important;font-weight:700!important}
body:has(.sidebar) .content :is(th,td){font-weight:700!important}

.varex-display-controls{
height:44px!important;
display:flex!important;
align-items:center!important;
gap:7px!important;
flex:0 0 auto!important;
direction:ltr!important;
overflow:visible!important;
}

.varex-display-selector{
position:relative!important;
width:84px!important;
height:44px!important;
flex:0 0 84px!important;
}

.varex-display-zoom-button,
.varex-display-fullscreen-button{
height:44px!important;
min-height:44px!important;
max-height:44px!important;
margin:0!important;
padding:0!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
border:1px solid #172554!important;
border-radius:10px!important;
background:#172554!important;
color:#fff!important;
box-shadow:0 4px 0 #0f1d43,0 8px 15px rgba(23,37,84,.18)!important;
font-family:Arial,Tahoma,sans-serif!important;
font-size:13px!important;
font-weight:800!important;
line-height:1!important;
cursor:pointer!important;
transform:none!important;
translate:none!important;
transition:none!important;
}

.varex-display-zoom-button{
position:relative!important;
width:84px!important;
min-width:84px!important;
max-width:84px!important;
gap:7px!important;
padding-right:17px!important;
}

.varex-display-fullscreen-button{
width:44px!important;
min-width:44px!important;
max-width:44px!important;
}

.varex-display-zoom-button svg,
.varex-display-fullscreen-button svg{
width:20px!important;
height:20px!important;
display:block!important;
fill:none!important;
stroke:currentColor!important;
stroke-width:1.9!important;
stroke-linecap:round!important;
stroke-linejoin:round!important;
pointer-events:none!important;
}

.varex-display-arrow{
position:absolute!important;
right:5px!important;
top:2px!important;
font-size:10px!important;
line-height:1!important;
pointer-events:none!important;
}

.varex-display-fullscreen-button.is-active{
background:#2563eb!important;
border-color:#2563eb!important;
box-shadow:0 4px 0 #1e40af,0 8px 15px rgba(37,99,235,.22)!important;
}

.varex-display-menu{
position:absolute!important;
top:52px!important;
right:0!important;
z-index:10070!important;
width:134px!important;
margin:0!important;
padding:7px!important;
display:none!important;
border:1px solid #dbe3ef!important;
border-radius:11px!important;
background:#fff!important;
box-shadow:0 14px 35px rgba(15,23,42,.16)!important;
direction:ltr!important;
}

.varex-display-selector.open .varex-display-menu{
display:block!important;
}

.varex-display-option{
width:100%!important;
height:39px!important;
min-height:39px!important;
margin:0!important;
padding:0 10px!important;
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
gap:8px!important;
border:0!important;
border-radius:8px!important;
background:#fff!important;
color:#334155!important;
box-shadow:none!important;
font-family:Arial,Tahoma,sans-serif!important;
font-size:14px!important;
font-weight:800!important;
line-height:1!important;
text-align:left!important;
cursor:pointer!important;
transform:none!important;
translate:none!important;
transition:none!important;
}

.varex-display-option small{
color:#94a3b8!important;
font:800 8px/1 Arial,Tahoma,sans-serif!important;
letter-spacing:.7px!important;
}

.varex-display-option:hover,
.varex-display-option.is-selected{
background:#eef2ff!important;
color:#172554!important;
}

.varex-display-option.is-selected::after{
content:"✓";
color:#2563eb!important;
font-size:12px!important;
font-weight:900!important;
}

body.varex-dark .varex-display-zoom-button,
body.varex-dark .varex-display-fullscreen-button,
html[data-theme="dark"] .varex-display-zoom-button,
html[data-theme="dark"] .varex-display-fullscreen-button,
html[data-varex-theme="dark"] .varex-display-zoom-button,
html[data-varex-theme="dark"] .varex-display-fullscreen-button{
border-color:#fff!important;
background:#fff!important;
color:#172554!important;
box-shadow:0 4px 0 #94a3b8,0 8px 15px rgba(0,0,0,.26)!important;
}

body.varex-dark .varex-display-menu,
html[data-theme="dark"] .varex-display-menu,
html[data-varex-theme="dark"] .varex-display-menu{
border-color:#29415f!important;
background:#132641!important;
}

body.varex-dark .varex-display-option,
html[data-theme="dark"] .varex-display-option,
html[data-varex-theme="dark"] .varex-display-option{
background:#132641!important;
color:#e2e8f0!important;
}

body.varex-dark .varex-display-option:hover,
body.varex-dark .varex-display-option.is-selected,
html[data-theme="dark"] .varex-display-option:hover,
html[data-theme="dark"] .varex-display-option.is-selected,
html[data-varex-theme="dark"] .varex-display-option:hover,
html[data-varex-theme="dark"] .varex-display-option.is-selected{
background:#1b3455!important;
color:#fff!important;
}

@media(min-width:821px) and (max-width:1380px){
:root{--varex-topbar-height:126px}
.topbar{
flex-wrap:wrap!important;
align-content:center!important;
gap:4px 14px!important;
padding-top:8px!important;
padding-bottom:8px!important;
}
.page-name{
width:100%!important;
height:46px!important;
justify-content:center!important;
}
.topbar .top-info.varex-unified-header{
width:100%!important;
justify-content:center!important;
gap:5px!important;
}
html .topbar .top-info.varex-unified-header>.varex-header-time{
width:86px!important;
min-width:86px!important;
max-width:86px!important;
}
html .topbar .top-info.varex-unified-header>.varex-header-date{
width:96px!important;
min-width:96px!important;
max-width:96px!important;
}
.varex-header-system{min-width:88px!important}
.varex-top-switch-user{min-width:116px!important}
.varex-header-language,
.varex-header-language .language-button{
width:120px!important;
min-width:120px!important;
max-width:120px!important;
}
.varex-display-controls{gap:4px!important}
.varex-display-selector,
.varex-display-zoom-button{
width:70px!important;
min-width:70px!important;
max-width:70px!important;
flex-basis:70px!important;
}
.varex-display-fullscreen-button{
width:40px!important;
min-width:40px!important;
max-width:40px!important;
}
}

@media(min-width:821px) and (max-width:1000px){
:root{--varex-topbar-height:176px}
.topbar .top-info.varex-unified-header{
height:98px!important;
min-height:98px!important;
align-content:center!important;
flex-wrap:wrap!important;
row-gap:8px!important;
}
}

@media(max-width:820px){
.page-name h1,
.page-name h2{font-size:18px!important;line-height:23px!important}
.page-name small{font-size:11px!important;line-height:14px!important}
html .topbar .top-info.varex-mobile-top-info>.varex-display-controls{
height:34px!important;
display:flex!important;
gap:4px!important;
}
html .topbar .top-info.varex-mobile-top-info>.varex-display-controls .varex-display-selector,
html .topbar .top-info.varex-mobile-top-info>.varex-display-controls .varex-display-zoom-button{
width:62px!important;
min-width:62px!important;
max-width:62px!important;
height:34px!important;
min-height:34px!important;
max-height:34px!important;
flex-basis:62px!important;
border-radius:9px!important;
box-shadow:none!important;
font-size:11px!important;
}
html .topbar .top-info.varex-mobile-top-info>.varex-display-controls .varex-display-fullscreen-button{
width:34px!important;
min-width:34px!important;
max-width:34px!important;
height:34px!important;
min-height:34px!important;
max-height:34px!important;
border-radius:9px!important;
box-shadow:none!important;
}
html .topbar .top-info.varex-mobile-top-info>.varex-display-controls svg{
width:17px!important;
height:17px!important;
}
.varex-display-menu{
top:40px!important;
right:0!important;
}
}

@media(max-width:480px){
.page-name h1,
.page-name h2{font-size:16px!important}
html .topbar .top-info.varex-mobile-top-info>.varex-display-controls .varex-display-selector,
html .topbar .top-info.varex-mobile-top-info>.varex-display-controls .varex-display-zoom-button{
width:58px!important;
min-width:58px!important;
max-width:58px!important;
flex-basis:58px!important;
}
}

/* =========================================================
   VAREX ANDROID / CAPACITOR SHELL
   The Android WebView can report a tablet width above the normal mobile
   breakpoint. Keep the navigation off-canvas and the shared controls tidy
   at every native viewport size.
========================================================= */
html.varex-native-app{
overflow-y:auto!important;
scrollbar-gutter:auto!important;
}

html.varex-native-app body{
min-height:100dvh!important;
padding-bottom:env(safe-area-inset-bottom,0px)!important;
}

html.varex-native-app body.varex-menu-open{
overflow:hidden!important;
touch-action:none!important;
}

html.varex-native-app .sidebar{
right:0!important;
left:auto!important;
width:min(84vw,340px)!important;
min-width:min(84vw,340px)!important;
max-width:min(84vw,340px)!important;
padding-top:env(safe-area-inset-top,0px)!important;
padding-bottom:env(safe-area-inset-bottom,0px)!important;
z-index:20020!important;
contain:none!important;
transform:translateX(110%)!important;
transition:transform .22s ease!important;
box-shadow:-18px 0 45px rgba(15,23,42,.24)!important;
}

html.varex-native-app body.varex-menu-open .sidebar{
transform:translateX(0)!important;
}

html.varex-native-app .main{
width:100%!important;
max-width:100%!important;
min-height:100dvh!important;
margin:0!important;
padding:0!important;
}

html.varex-native-app .topbar{
z-index:20000!important;
overflow:visible!important;
}

html.varex-native-app .varex-mobile-menu-button{
position:absolute!important;
right:12px!important;
top:calc(env(safe-area-inset-top,0px) + 11px)!important;
width:42px!important;
height:42px!important;
min-width:42px!important;
min-height:42px!important;
padding:0!important;
border:1px solid #dbe3ef!important;
border-radius:11px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
background:#fff!important;
color:#172554!important;
font-family:Arial,Tahoma,sans-serif!important;
font-size:22px!important;
font-weight:800!important;
line-height:1!important;
box-shadow:0 4px 12px rgba(15,23,42,.08)!important;
cursor:pointer!important;
z-index:2!important;
}

html.varex-native-app .varex-mobile-backdrop{
position:fixed!important;
inset:0!important;
display:block!important;
background:rgba(15,23,42,.52)!important;
opacity:0!important;
visibility:hidden!important;
pointer-events:none!important;
z-index:20010!important;
transition:opacity .2s ease,visibility .2s ease!important;
}

html.varex-native-app body.varex-menu-open .varex-mobile-backdrop{
opacity:1!important;
visibility:visible!important;
pointer-events:auto!important;
}

/* Menus stay closed until their own compact button is pressed. */
html.varex-native-app .varex-feedback-menu,
html.varex-native-app .varex-display-menu,
html.varex-native-app .varex-header-language .language-menu{
display:none!important;
}

html.varex-native-app .varex-feedback-selector.open>.varex-feedback-menu,
html.varex-native-app .varex-display-selector.open>.varex-display-menu,
html.varex-native-app .varex-header-language.open>.language-menu{
display:block!important;
}

@media(min-width:821px){
html.varex-native-app{
--varex-topbar-height:126px;
}

html.varex-native-app .topbar{
height:var(--varex-topbar-height)!important;
min-height:var(--varex-topbar-height)!important;
max-height:var(--varex-topbar-height)!important;
padding:8px 66px 8px 18px!important;
display:flex!important;
flex-wrap:wrap!important;
align-content:center!important;
align-items:center!important;
gap:4px 12px!important;
}

html.varex-native-app .page-name{
width:100%!important;
height:46px!important;
min-width:0!important;
justify-content:center!important;
}

html.varex-native-app .topbar .top-info.varex-unified-header{
width:100%!important;
height:48px!important;
min-height:48px!important;
display:flex!important;
flex-wrap:nowrap!important;
align-items:center!important;
justify-content:center!important;
gap:5px!important;
overflow:visible!important;
}

html.varex-native-app .topbar .top-info.varex-unified-header>.varex-header-system{
display:none!important;
}
}

@media(max-width:820px){
html.varex-native-app .topbar{
overflow:visible!important;
}

html.varex-native-app .topbar .top-info.varex-mobile-top-info>.varex-header-time{
display:flex!important;
}
}

@media(max-width:600px){
html.varex-native-app .topbar .top-info.varex-mobile-top-info>.varex-header-date{
display:flex!important;
}
}


/* =========================================================
   CASHIER HEADER CONTROLS
   One fixed high sound button, zoom percentages, and a paired
   date/time row on compact native screens.
========================================================= */
.varex-display-fullscreen-button{
display:none!important;
}

.varex-feedback-controls{
gap:0!important;
}

.varex-sound-button{
cursor:pointer!important;
}

.varex-sound-button .varex-feedback-level,
.varex-sound-button .varex-feedback-arrow{
display:none!important;
}

@media(max-width:820px){
html.varex-native-app{
--varex-mobile-topbar-height:112px;
}

html.varex-native-app .topbar{
height:calc(var(--varex-mobile-topbar-height) + env(safe-area-inset-top,0px))!important;
min-height:calc(var(--varex-mobile-topbar-height) + env(safe-area-inset-top,0px))!important;
max-height:calc(var(--varex-mobile-topbar-height) + env(safe-area-inset-top,0px))!important;
padding:env(safe-area-inset-top,0px) 6px 4px!important;
display:flex!important;
flex-wrap:wrap!important;
align-content:center!important;
align-items:center!important;
gap:2px!important;
overflow:visible!important;
}

html.varex-native-app .page-name{
width:100%!important;
height:46px!important;
min-height:46px!important;
max-height:46px!important;
padding:0 54px!important;
flex:0 0 46px!important;
justify-content:center!important;
}

html.varex-native-app .topbar .top-info.varex-mobile-top-info{
width:100%!important;
height:40px!important;
min-height:40px!important;
max-height:40px!important;
flex:0 0 40px!important;
justify-content:center!important;
gap:4px!important;
overflow:visible!important;
}

html.varex-native-app .topbar .top-info.varex-mobile-top-info>.varex-header-date,
html.varex-native-app .topbar .top-info.varex-mobile-top-info>.varex-header-time,
html.varex-native-app .topbar .top-info.varex-mobile-top-info>.varex-feedback-controls{
display:flex!important;
}
}

@media(max-width:480px){
html .topbar .top-info.varex-mobile-top-info>.varex-feedback-controls{
display:flex!important;
}
}