/* Final shared refinement layer. Keep page-specific identity while enforcing one UI system. */
:root{
  --zvx-page: #030609;
  --zvx-surface: #0a1017;
  --zvx-surface-raised: #0e1620;
  --zvx-line: rgba(148,163,184,.18);
  --zvx-line-strong: rgba(148,163,184,.3);
  --zvx-text: #f4f7f9;
  --zvx-muted: #8b9bab;
  --zvx-cyan: #69d9fa;
  --zvx-mint: #5de0b0;
  --zvx-danger: #fb7185;
  --zvx-warning: #f4c46a;
  --zvx-radius: 14px;
  --zvx-shadow: 0 24px 70px rgba(0,0,0,.28);
  --zvx-content: 1480px;
}

/* Keep the browser canvas dark so native edge bounce never reveals white.
   Do not constrain overscroll here: some mobile webviews interpret it as a
   scroll lock, so explicitly preserve vertical document scrolling instead. */
html{
  background-color:var(--zvx-page)!important;
  scroll-padding-top:92px;
  height:auto;
  overflow-y:auto;
}
body{
  height:auto;
  overflow-y:auto;
  touch-action:pan-y;
}
body:not(.public-mode){background:var(--zvx-page)!important;color:var(--zvx-text)!important}
body:not(.public-mode) .content-wrapper{width:min(100%,var(--zvx-content))!important;margin-inline:auto!important;padding:30px clamp(18px,2.7vw,42px) 58px!important}

body:not(.public-mode) nav.navbar.neo-nav,
body.cp-mode nav.navbar.neo-nav{
  min-height:76px!important;padding:11px clamp(18px,2.5vw,38px)!important;
  border-bottom:1px solid var(--zvx-line)!important;background:rgba(3,6,9,.94)!important;
  box-shadow:0 12px 35px rgba(0,0,0,.2)!important;backdrop-filter:blur(18px)!important
}
body:not(.public-mode) nav.navbar.neo-nav .container-fluid{max-width:1600px;margin:auto;padding:0!important}
body:not(.public-mode) nav.navbar.neo-nav .brand-logo{width:174px!important;height:auto!important;max-height:48px!important;object-fit:contain!important}
body:not(.public-mode) nav.navbar.neo-nav .nav-link{
  min-height:38px;display:flex!important;align-items:center;gap:5px;padding:9px 11px!important;
  border:1px solid transparent!important;border-radius:9px!important;color:#93a2b1!important;
  font-size:11px!important;line-height:1!important;letter-spacing:.075em!important;white-space:nowrap
}
body:not(.public-mode) nav.navbar.neo-nav .nav-link:hover{border-color:var(--zvx-line)!important;background:rgba(255,255,255,.035)!important;color:#fff!important}
body:not(.public-mode) nav.navbar.neo-nav .nav-link.active{border-color:rgba(105,217,250,.25)!important;background:rgba(105,217,250,.075)!important;color:#dff8ff!important}

body:not(.public-mode) h1,body:not(.public-mode) h2,body:not(.public-mode) h3,body:not(.public-mode) h4{
  color:var(--zvx-text)!important;letter-spacing:.065em!important;text-wrap:balance
}
body:not(.public-mode) h1{font-size:clamp(34px,4vw,58px)!important;line-height:.98!important}
body:not(.public-mode) p,body:not(.public-mode) small,body:not(.public-mode) .text-muted{color:var(--zvx-muted)!important}

body:not(.public-mode) :is(.glass,.panel,.card,.surface,.metric-card,.status-card,.tool-card){
  border:1px solid var(--zvx-line)!important;border-radius:var(--zvx-radius)!important;
  background:linear-gradient(145deg,rgba(14,22,32,.96),rgba(7,12,18,.98))!important;
  box-shadow:none!important
}
body:not(.public-mode) :is(.glass,.panel,.card,.surface)::before,
body:not(.public-mode) :is(.glass,.panel,.card,.surface)::after{pointer-events:none!important}
body:not(.public-mode) :is(.panel-header,.card-header){padding:20px 22px!important;border-bottom:1px solid var(--zvx-line)!important;background:transparent!important}
body:not(.public-mode) :is(.panel-body,.card-body){padding:22px!important}

body:not(.public-mode) .btn{
  min-height:40px;padding:10px 15px!important;border-radius:9px!important;font-size:10px!important;
  font-weight:800!important;letter-spacing:.085em!important;line-height:1.15!important;text-transform:uppercase!important;
  box-shadow:none!important;transition:border-color .16s ease,background .16s ease,color .16s ease,transform .16s ease!important
}
body:not(.public-mode) .btn:hover{transform:translateY(-1px)}
body:not(.public-mode) .btn-primary{border:1px solid #eafaff!important;background:#edfaff!important;color:#071017!important}
body:not(.public-mode) .btn-primary:hover{border-color:var(--zvx-cyan)!important;background:var(--zvx-cyan)!important;color:#061016!important}
body:not(.public-mode) :is(.btn-outline-light,.btn-secondary){border:1px solid var(--zvx-line-strong)!important;background:rgba(255,255,255,.025)!important;color:#e5edf3!important}
body:not(.public-mode) :is(.btn-outline-light,.btn-secondary):hover{border-color:rgba(255,255,255,.55)!important;background:rgba(255,255,255,.075)!important;color:#fff!important}
body:not(.public-mode) .btn-danger{border-color:rgba(251,113,133,.4)!important;background:rgba(251,113,133,.11)!important;color:#ffb5c0!important}

body:not(.public-mode) :is(.form-control,.form-select,textarea){
  min-height:46px!important;padding:11px 13px!important;border:1px solid var(--zvx-line)!important;
  border-radius:9px!important;background:#050a10!important;color:#edf3f7!important;font-size:14px!important;box-shadow:none!important
}
body:not(.public-mode) :is(.form-control,.form-select,textarea):focus{border-color:rgba(105,217,250,.7)!important;box-shadow:0 0 0 3px rgba(105,217,250,.08)!important}
body:not(.public-mode) :is(.form-control,textarea)::placeholder{color:#526273!important;opacity:1}
body:not(.public-mode) label{color:#a8b5c1!important;font-size:10px!important;font-weight:750!important;letter-spacing:.075em!important}

body:not(.public-mode) .table-responsive{border:1px solid var(--zvx-line)!important;border-radius:11px!important;overflow:auto!important}
body:not(.public-mode) .table{margin:0!important;border-collapse:separate!important;border-spacing:0!important}
body:not(.public-mode) .table thead th{padding:12px 14px!important;border:0!important;border-bottom:1px solid var(--zvx-line)!important;background:#0c131b!important;color:#7f91a2!important;font-size:9px!important;letter-spacing:.11em!important}
body:not(.public-mode) .table tbody td{padding:13px 14px!important;border:0!important;border-bottom:1px solid rgba(148,163,184,.1)!important;background:#080d13!important;color:#dce5eb!important;vertical-align:middle!important}
body:not(.public-mode) .table tbody tr:last-child td{border-bottom:0!important}
body:not(.public-mode) .table tbody tr:hover td{background:#0b121a!important}

body:not(.public-mode) :is(.badge,.pill,.badge-soft,.badge-ghost){border-radius:999px!important;padding:6px 9px!important;font-size:9px!important;line-height:1!important;letter-spacing:.055em!important}
body:not(.public-mode) .alert{border:1px solid var(--zvx-line)!important;border-left-width:3px!important;border-radius:10px!important;background:#0a1017!important;color:#cbd6de!important}
body:not(.public-mode) .dropdown-menu{padding:7px!important;border:1px solid var(--zvx-line)!important;border-radius:11px!important;background:#080e14!important;box-shadow:var(--zvx-shadow)!important}
body:not(.public-mode) .dropdown-item{padding:10px 11px!important;border-radius:7px!important;color:#9dabb8!important;font-size:11px!important}
body:not(.public-mode) .dropdown-item:hover,body:not(.public-mode) .dropdown-item.active{background:rgba(105,217,250,.07)!important;color:#fff!important}

body:not(.public-mode) .modal-content{border:1px solid var(--zvx-line-strong)!important;border-radius:15px!important;background:#080d13!important;box-shadow:0 35px 100px rgba(0,0,0,.65)!important}
body:not(.public-mode) :is(.modal-header,.modal-footer){padding:17px 20px!important;border-color:var(--zvx-line)!important}
body:not(.public-mode) .modal-body{padding:20px!important}

body:not(.public-mode) footer{padding:18px 22px 30px!important}
body:not(.public-mode) footer .glass{max-width:var(--zvx-content)!important;padding:14px 18px!important;background:rgba(8,13,19,.72)!important}
body:not(.public-mode) footer small{font-size:9px!important;line-height:1.65!important;color:#627282!important}

body.public-mode nav.navbar.neo-nav{padding-inline:clamp(18px,4vw,56px)!important}
body.public-mode nav.navbar.neo-nav .container-fluid{max-width:1600px;margin:auto}
body.public-mode footer .glass{border-radius:12px!important}

@media(max-width:991px){
  body:not(.public-mode) nav.navbar.neo-nav .navbar-collapse{margin-top:12px;padding:12px;border:1px solid var(--zvx-line);border-radius:12px;background:#070c12}
  body:not(.public-mode) nav.navbar.neo-nav .nav-link{width:100%;margin:2px 0}
  body:not(.public-mode) .content-wrapper{padding-top:22px!important}
}
@media(max-width:640px){
  body:not(.public-mode) .content-wrapper{padding-inline:14px!important;padding-bottom:42px!important}
  body:not(.public-mode) :is(.panel-header,.card-header,.panel-body,.card-body){padding:17px!important}
  body:not(.public-mode) .btn{white-space:normal!important}
  body:not(.public-mode) .table-responsive{margin-inline:0!important;padding:0!important}
}

/* System-wide responsive safety layer. */
img,svg,video,canvas{max-width:100%;height:auto}
input,select,textarea,button{max-width:100%}
.content-wrapper>*,.row>*{min-width:0}
.table-responsive{-webkit-overflow-scrolling:touch;scrollbar-width:thin}

@media(max-width:767px){
  html{scroll-padding-top:72px;-webkit-text-size-adjust:100%}
  body{min-width:320px}
  body:not(.public-mode) nav.navbar.neo-nav,body.cp-mode nav.navbar.neo-nav{min-height:66px!important;padding:8px 12px!important}
  body:not(.public-mode) nav.navbar.neo-nav .brand-logo{width:min(158px,46vw)!important;max-height:43px!important}
  body:not(.public-mode) nav.navbar.neo-nav .navbar-toggler{min-width:44px;min-height:44px;margin-left:auto}
  body:not(.public-mode) nav.navbar.neo-nav .navbar-collapse{max-height:calc(100dvh - 78px);overflow-y:auto;overscroll-behavior:contain}
  body:not(.public-mode) nav.navbar.neo-nav :is(.nav-cp,.nav-dropdowns,.control-utility,.navbar-nav){width:100%!important;display:grid!important;grid-template-columns:1fr!important;gap:5px!important}
  body:not(.public-mode) nav.navbar.neo-nav :is(.nav-link,.dropdown-toggle,.command-trigger,.notification-trigger,.btn){width:100%!important;min-height:44px!important;justify-content:flex-start!important}
  body:not(.public-mode) nav.navbar.neo-nav .dropdown-menu{position:static!important;width:100%!important;box-shadow:none!important;margin:4px 0!important}
  body:not(.public-mode) .content-wrapper{width:100%!important;padding:18px 12px 38px!important;overflow-x:clip}
  body:not(.public-mode) .flash-wrap{padding-inline:12px!important}
  body:not(.public-mode) h1{font-size:clamp(30px,10vw,43px)!important;overflow-wrap:anywhere}
  body:not(.public-mode) h2{font-size:clamp(23px,7.5vw,32px)!important;overflow-wrap:anywhere}
  body:not(.public-mode) h3{overflow-wrap:anywhere}
  body:not(.public-mode) :is(.container,.container-fluid){max-width:100%}
  body:not(.public-mode) :is(.panel-grid,.kpi-grid,.stats-grid,.metric-grid,.metrics-grid,.dashboard-grid,.form-grid,.detail-grid,.summary-grid,.action-grid,.cards-grid){grid-template-columns:minmax(0,1fr)!important}
  body:not(.public-mode) :is(.d-flex,.panel-header,.card-header,.modal-footer):not(.navbar-brand){max-width:100%;flex-wrap:wrap}
  body:not(.public-mode) :is(.btn-group,.btn-toolbar){display:flex;flex-wrap:wrap;width:100%;gap:7px}
  body:not(.public-mode) :is(.btn-group,.btn-toolbar)>.btn{flex:1 1 140px!important;border-radius:9px!important}
  body:not(.public-mode) .btn{min-height:44px;padding:11px 13px!important}
  body:not(.public-mode) :is(.form-control,.form-select,textarea){min-height:48px!important;font-size:16px!important}
  body:not(.public-mode) input[type="checkbox"],body:not(.public-mode) input[type="radio"]{min-width:20px;min-height:20px}
  body:not(.public-mode) .table-responsive{width:100%!important;border-radius:9px!important}
  body:not(.public-mode) .table{min-width:680px!important;font-size:12px!important}
  body:not(.public-mode) .table :is(th,td){white-space:nowrap}
  body:not(.public-mode) .table .text-wrap{white-space:normal}
  body:not(.public-mode) .modal{padding:0!important}
  body:not(.public-mode) .modal-dialog{width:100%;max-width:none;margin:0;min-height:100dvh;display:flex;align-items:flex-end}
  body:not(.public-mode) .modal-content{width:100%;max-height:94dvh;border-radius:17px 17px 0 0!important;overflow:hidden}
  body:not(.public-mode) .modal-body{overflow-y:auto;-webkit-overflow-scrolling:touch}
  body:not(.public-mode) .modal-footer{display:grid!important;grid-template-columns:1fr!important}
  body:not(.public-mode) .modal-footer .btn{width:100%!important}
  .notification-centre{left:8px!important;right:8px!important;top:8px!important;width:auto!important;max-height:calc(100dvh - 16px)!important}
  .command-dialog .modal-dialog{align-items:stretch!important;min-height:100dvh}
  .command-dialog .modal-content{min-height:100dvh;max-height:100dvh;border-radius:0!important}
  .workplace-emergency{padding:11px 12px!important;flex-wrap:wrap;text-align:center}
  .connection-pill{right:10px;bottom:calc(10px + env(safe-area-inset-bottom));max-width:calc(100vw - 20px)}
  footer{padding-bottom:calc(24px + env(safe-area-inset-bottom))!important}
}

@media(max-width:420px){
  body:not(.public-mode) .content-wrapper{padding-inline:9px!important}
  body:not(.public-mode) :is(.panel-header,.card-header,.panel-body,.card-body,.modal-body){padding:14px!important}
  body:not(.public-mode) .table{min-width:620px!important}
}