/* =========================================================
   VR QA ACADEMY — 2026 UI SYSTEM
   Final interaction-safe visual layer.
   Keeps existing application logic untouched.
   ========================================================= */
:root{
  --ui-bg:#040713;
  --ui-bg2:#081126;
  --ui-panel:rgba(10,18,42,.86);
  --ui-panel2:rgba(15,27,58,.92);
  --ui-border:rgba(104,155,255,.24);
  --ui-border-strong:rgba(48,197,255,.45);
  --ui-text:#f5f8ff;
  --ui-muted:#9eadd0;
  --ui-cyan:#20d9ff;
  --ui-blue:#4f8cff;
  --ui-purple:#8b5cf6;
  --ui-pink:#ef4ca8;
  --ui-green:#29d7a3;
  --ui-orange:#ff9b3d;
  --ui-shadow:0 24px 70px rgba(0,0,0,.42);
}

/* ---------- page ---------- */
html,body{min-height:100%;background:var(--ui-bg)!important;color:var(--ui-text)!important}
body{
  background:
    radial-gradient(900px 600px at 8% -8%,rgba(32,217,255,.15),transparent 62%),
    radial-gradient(850px 620px at 96% 0%,rgba(139,92,246,.18),transparent 60%),
    radial-gradient(800px 600px at 52% 110%,rgba(239,76,168,.08),transparent 65%),
    linear-gradient(145deg,#02040c,#071127 52%,#040713)!important;
}

/* ---------- universal readable text ---------- */
body[data-modern="1"] :is(h1,h2,h3,h4,h5,h6,p,label,li,td,th,span){text-shadow:none}
body[data-modern="1"] .muted,
body[data-modern="1"] small{color:var(--ui-muted)!important}

/* ---------- header ---------- */
body[data-modern="1"] .app-header,
body[data-modern="1"] .site-header,
body[data-modern="1"] header{
  z-index:100000!important;
  background:rgba(3,7,20,.88)!important;
  border-bottom:1px solid rgba(69,145,255,.28)!important;
  box-shadow:0 12px 45px rgba(0,0,0,.42)!important;
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
}
body[data-modern="1"] .nav-links a,
body[data-modern="1"] .nav-dropbtn,
body[data-modern="1"] .header-left,
body[data-modern="1"] .header-right,
body[data-modern="1"] .brand,
body[data-modern="1"] .brand-text{color:#f5f8ff!important}

/* ---------- nav menus ---------- */
body[data-modern="1"] .nav-dropdown-content,
body[data-modern="1"] .user-dropdown{
  z-index:200000!important;
  background:linear-gradient(145deg,rgba(13,24,53,.98),rgba(4,10,27,.98))!important;
  border:1px solid rgba(74,154,255,.38)!important;
  box-shadow:0 24px 70px rgba(0,0,0,.62),0 0 28px rgba(32,217,255,.12)!important;
  color:#f5f8ff!important;
  backdrop-filter:blur(18px) saturate(150%);
}
body[data-modern="1"] .nav-dropdown-content a,
body[data-modern="1"] .user-dropdown a,
body[data-modern="1"] .user-dropdown button{color:#eaf4ff!important}
body[data-modern="1"] .nav-dropdown-content a:hover,
body[data-modern="1"] .user-dropdown a:hover,
body[data-modern="1"] .user-dropdown button:hover{background:linear-gradient(90deg,rgba(32,217,255,.14),rgba(139,92,246,.16))!important;color:#fff!important}

/* ---------- cards / panels ---------- */
body[data-modern="1"] :is(.card,.panel,.section-card,.lab-card,.form-card,.order-card,.product-card,.profile-card,.table-container,.container-card){
  background:linear-gradient(145deg,rgba(14,25,57,.9),rgba(4,10,28,.84))!important;
  color:var(--ui-text)!important;
  border:1px solid var(--ui-border)!important;
  box-shadow:var(--ui-shadow),inset 0 1px 0 rgba(255,255,255,.055)!important;
}
body[data-modern="1"] :is(.card,.panel,.lab-card,.form-card,.order-card,.product-card,.profile-card){
  transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease,border-color .28s ease!important;
}
body[data-modern="1"] :is(.card,.panel,.lab-card,.form-card,.order-card,.product-card,.profile-card):hover{
  border-color:rgba(32,217,255,.38)!important;
  box-shadow:0 28px 75px rgba(0,0,0,.48),0 0 30px rgba(32,217,255,.09),inset 0 1px 0 rgba(255,255,255,.07)!important;
}

/* ---------- buttons ---------- */
body[data-modern="1"] .btn,
body[data-modern="1"] button.btn{
  border:1px solid rgba(121,170,255,.28)!important;
  color:#fff!important;
  background:linear-gradient(135deg,#147bd8,#5b39e8)!important;
  box-shadow:0 10px 28px rgba(43,105,230,.24)!important;
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease!important;
}
body[data-modern="1"] .btn:hover,
body[data-modern="1"] button.btn:hover{transform:translateY(-2px)!important;filter:saturate(1.12);box-shadow:0 16px 34px rgba(43,105,230,.34),0 0 22px rgba(32,217,255,.13)!important}
body[data-modern="1"] .btn:active{transform:translateY(0) scale(.98)!important}
body[data-modern="1"] .btn.ghost,
body[data-modern="1"] .btn-secondary{background:rgba(19,31,64,.85)!important;color:#dfeaff!important}

/* ---------- form controls ---------- */
body[data-modern="1"] :is(input,textarea,select){
  color:#f4f8ff!important;
  background:rgba(8,16,37,.9)!important;
  border:1px solid rgba(111,153,231,.34)!important;
  border-radius:12px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03)!important;
}
body[data-modern="1"] :is(input,textarea,select):focus{
  border-color:rgba(32,217,255,.72)!important;
  outline:none!important;
  box-shadow:0 0 0 3px rgba(32,217,255,.11),0 0 22px rgba(32,217,255,.09)!important;
}
body[data-modern="1"] :is(input,textarea)::placeholder{color:#7586aa!important}
body[data-modern="1"] option{background:#0a1430!important;color:#f2f7ff!important}

/* ---------- custom dropdowns ---------- */
body[data-modern="1"] :is(.searchable-list,#suggestions,.multi-panel){
  z-index:500000!important;
  isolation:isolate!important;
  background:linear-gradient(145deg,rgba(12,24,52,.99),rgba(4,10,27,.99))!important;
  color:#eef7ff!important;
  border:1px solid rgba(32,217,255,.42)!important;
  border-radius:14px!important;
  box-shadow:0 28px 80px rgba(0,0,0,.72),0 0 30px rgba(32,217,255,.13)!important;
  backdrop-filter:blur(20px) saturate(150%)!important;
  -webkit-backdrop-filter:blur(20px) saturate(150%)!important;
}
body[data-modern="1"] :is(.searchable-item,#suggestions>div,.multi-panel-body>div){color:#eef7ff!important;background:transparent!important}
body[data-modern="1"] :is(.searchable-item,#suggestions>div,.multi-panel-body>div):hover{background:linear-gradient(90deg,rgba(32,217,255,.16),rgba(139,92,246,.18))!important;color:#fff!important}
body[data-modern="1"] :is(.card:has(.searchable-list),.card:has(.multi-panel),.card:has(#suggestions)){transform:none!important;overflow:visible!important}
body[data-modern="1"] :is(.card:has(.searchable-list),.card:has(.multi-panel),.card:has(#suggestions)){position:relative;z-index:2000!important}

/* ---------- TOAST ---------- */
body[data-modern="1"] :is(.toast-container,.toast-top){z-index:900000!important;pointer-events:none!important}
body[data-modern="1"] .toast{
  color:#fff!important;
  background:linear-gradient(135deg,rgba(12,28,60,.97),rgba(17,12,48,.97))!important;
  border:1px solid rgba(79,140,255,.34)!important;
  box-shadow:0 18px 50px rgba(0,0,0,.55),0 0 22px rgba(32,217,255,.10)!important;
  backdrop-filter:blur(16px)!important;
}
body[data-modern="1"] .toast.success{border-color:rgba(41,215,163,.45)!important}
body[data-modern="1"] .toast.error{border-color:rgba(255,91,119,.5)!important}

/* =========================================================
   MODAL SYSTEM — highest priority, never affected by cards
   ========================================================= */
body[data-modern="1"] .modal-backdrop{
  position:fixed!important;
  inset:0!important;
  z-index:1000000!important;
  display:none!important;
  align-items:center!important;
  justify-content:center!important;
  padding:24px!important;
  background:rgba(1,4,14,.72)!important;
  backdrop-filter:blur(12px) saturate(125%)!important;
  -webkit-backdrop-filter:blur(12px) saturate(125%)!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
body[data-modern="1"] .modal-backdrop.show{
  display:flex!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  animation:vrqaModalFade .18s ease-out both!important;
}
body[data-modern="1"] .modal-backdrop .modal{
  position:relative!important;
  z-index:1000001!important;
  width:min(560px,calc(100vw - 32px))!important;
  max-height:min(82vh,720px)!important;
  overflow:auto!important;
  margin:auto!important;
  padding:0!important;
  border:1px solid rgba(77,164,255,.48)!important;
  border-radius:22px!important;
  background:linear-gradient(145deg,rgba(17,30,65,.985),rgba(5,11,29,.985))!important;
  color:#f5f8ff!important;
  box-shadow:0 40px 110px rgba(0,0,0,.72),0 0 50px rgba(32,217,255,.13),inset 0 1px 0 rgba(255,255,255,.07)!important;
  transform:none!important;
  animation:vrqaModalIn .24s cubic-bezier(.2,.8,.2,1) both!important;
}
body[data-modern="1"] .modal-header{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  padding:18px 22px!important;
  border-bottom:1px solid rgba(105,145,220,.18)!important;
  background:linear-gradient(90deg,rgba(32,217,255,.07),rgba(139,92,246,.08))!important;
}
body[data-modern="1"] .modal-header h3,
body[data-modern="1"] .modal h3{color:#fff!important;margin:0!important}
body[data-modern="1"] .modal-body{padding:22px!important;color:#dbe8ff!important}
body[data-modern="1"] .modal-footer,
body[data-modern="1"] .modal-actions{
  display:flex!important;justify-content:flex-end!important;align-items:center!important;gap:10px!important;
  padding:16px 22px!important;
  border-top:1px solid rgba(105,145,220,.18)!important;
}
body[data-modern="1"] .modal-close{color:#b7c7e8!important;font-size:18px!important;cursor:pointer!important;padding:6px 9px;border-radius:10px}
body[data-modern="1"] .modal-close:hover{background:rgba(255,255,255,.07)!important;color:#fff!important}
body[data-modern="1"] .modal-input{background:rgba(6,14,32,.9)!important;color:#fff!important;border-color:rgba(91,151,255,.38)!important}

@keyframes vrqaModalFade{from{opacity:0}to{opacity:1}}
@keyframes vrqaModalIn{from{opacity:0;transform:translateY(14px) scale(.97)!important}to{opacity:1;transform:none!important}}

/* ---------- shopping/login ---------- */
body.login-page{
  min-height:100vh!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:32px 18px!important;
}
body[data-modern="1"] .login-container{
  width:min(460px,100%)!important;
  background:linear-gradient(145deg,rgba(15,27,59,.95),rgba(5,11,29,.94))!important;
  border:1px solid rgba(86,157,255,.34)!important;
  border-radius:28px!important;
  padding:34px!important;
  color:#f5f8ff!important;
  box-shadow:0 35px 100px rgba(0,0,0,.58),0 0 40px rgba(32,217,255,.09)!important;
}
body[data-modern="1"] .login-container h1{color:#fff!important;text-shadow:0 0 28px rgba(32,217,255,.15)}
body[data-modern="1"] .login-container .login-brand img{filter:drop-shadow(0 10px 24px rgba(32,217,255,.16));max-width:190px}
body[data-modern="1"] .login-info{background:rgba(32,217,255,.055)!important;border:1px solid rgba(32,217,255,.14)!important;color:#aebedf!important;border-radius:14px!important;padding:10px!important}
body[data-modern="1"] .auth-links a{color:#78dfff!important}
body[data-modern="1"] .prod-card{
  background:linear-gradient(145deg,rgba(15,27,59,.95),rgba(5,11,29,.9))!important;
  color:#f5f8ff!important;
  border:1px solid rgba(104,155,255,.24)!important;
}
body[data-modern="1"] .prod-thumb{background:linear-gradient(180deg,rgba(22,34,67,.9),rgba(6,13,30,.9))!important}
body[data-modern="1"] .prod-title,
body[data-modern="1"] .prod-price{color:#eaf6ff!important}
body[data-modern="1"] .prod-meta{color:#9eadd0!important}
body[data-modern="1"] .cart-row,
body[data-modern="1"] .checkout-form,
body[data-modern="1"] .order-summary,
body[data-modern="1"] .order-placed{
  background:linear-gradient(145deg,rgba(14,25,57,.92),rgba(4,10,28,.9))!important;
  color:#f5f8ff!important;
  border:1px solid rgba(104,155,255,.24)!important;
  box-shadow:0 24px 70px rgba(0,0,0,.42)!important;
}
body[data-modern="1"] .cart-thumb{background:rgba(9,18,39,.85)!important}
body[data-modern="1"] .inventory-top .filters{background:rgba(10,20,43,.9)!important;border:1px solid rgba(104,155,255,.22)!important;box-shadow:0 20px 55px rgba(0,0,0,.34)!important}

/* checkout's inline white modal must be overridden too */
body[data-modern="1"] #reviewModal .modal{background:linear-gradient(145deg,rgba(17,30,65,.985),rgba(5,11,29,.985))!important;color:#f5f8ff!important}
body[data-modern="1"] #reviewModal #reviewContent{color:#dce9ff!important}

/* ---------- loader ---------- */
body[data-modern="1"] .global-loader{z-index:950000!important;background:rgba(1,4,14,.72)!important;backdrop-filter:blur(8px)!important}
body[data-modern="1"] .spinner{border-color:rgba(255,255,255,.12)!important;border-top-color:var(--ui-cyan)!important;box-shadow:0 0 25px rgba(32,217,255,.22)}

/* ---------- footer / navigation ---------- */
body[data-modern="1"] .site-footer{color:#7385a9!important}
body[data-modern="1"] .lab-nav-footer{position:relative;z-index:2}

/* ---------- mobile ---------- */
@media(max-width:700px){
  body[data-modern="1"] .modal-backdrop{padding:14px!important}
  body[data-modern="1"] .modal-backdrop .modal{width:calc(100vw - 28px)!important;border-radius:18px!important;max-height:88vh!important}
  body[data-modern="1"] .modal-header{padding:15px 17px!important}
  body[data-modern="1"] .modal-body{padding:17px!important}
  body[data-modern="1"] .modal-footer,.modal-actions{padding:13px 17px!important}
  body[data-modern="1"] .login-container{padding:24px 18px!important;border-radius:22px!important}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* =========================================================
   FINAL CROSS-PAGE COMPATIBILITY OVERRIDES
   One consistent header + safe interactive controls.
   ========================================================= */

/* Header must look identical on every page, regardless of body JS timing. */
.app-header,
.site-header,
header.app-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 100000 !important;
  background:
    linear-gradient(180deg, rgba(5,10,27,.97), rgba(4,8,22,.94)) !important;
  color: #f5f8ff !important;
  border-bottom: 1px solid rgba(58, 164, 255, .34) !important;
  box-shadow:
    0 10px 35px rgba(0,0,0,.42),
    0 1px 0 rgba(36,214,255,.08) inset !important;
  backdrop-filter: blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
}
.app-header .header-inner,
.app-header .header-left,
.app-header .header-right,
.app-header .nav-links,
.app-header .search-section {
  color: #f5f8ff !important;
}
.app-header .nav-links a,
.app-header .nav-dropbtn,
.app-header .hamburger,
.app-header .brand,
.app-header .brand-text {
  color: #eef6ff !important;
  opacity: 1 !important;
}
.app-header .nav-links a:hover,
.app-header .nav-dropbtn:hover,
.app-header .hamburger:hover {
  color: #50ddff !important;
}
.app-header .search-section input,
.app-header .mobile-nav input {
  color: #f4f8ff !important;
  background: rgba(8,16,37,.94) !important;
  border: 1px solid rgba(100,153,237,.34) !important;
}
.app-header .search-section input::placeholder,
.app-header .mobile-nav input::placeholder {
  color: #8fa2c5 !important;
}
.app-header .btn-home {
  color: #fff !important;
  background: linear-gradient(135deg,#116fd0,#633be7) !important;
  border: 1px solid rgba(96,177,255,.30) !important;
  box-shadow: 0 10px 26px rgba(54,92,230,.24) !important;
}
.app-header .avatar-btn {
  border-color: rgba(32,217,255,.72) !important;
  box-shadow: 0 0 20px rgba(32,217,255,.12) !important;
}
.app-header .nav-dropdown-content,
.app-header .user-dropdown,
.app-header .mobile-nav {
  background: linear-gradient(145deg, rgba(13,25,55,.99), rgba(4,9,24,.99)) !important;
  color: #eef7ff !important;
  border-color: rgba(80,157,255,.34) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.68), 0 0 30px rgba(32,217,255,.11) !important;
}
.app-header .nav-dropdown-content a,
.app-header .user-dropdown a,
.app-header .user-dropdown button,
.app-header .mobile-nav a,
.app-header .mobile-nav strong {
  color: #eaf4ff !important;
}

/* Shadow DOM lab: inputs/results must remain readable. */
.shadow-card input,
.shadow-card textarea,
.shadow-card select,
.shadow-card button,
.shadow-card .result-box,
.shadow-card .field-label,
.shadow-card label,
.shadow-card p,
.shadow-card span,
.result-box {
  color: #f2f7ff !important;
}
.shadow-card input,
.shadow-card textarea,
.shadow-card select {
  background: rgba(8,16,37,.96) !important;
  border-color: rgba(94,154,245,.36) !important;
}
.shadow-card input::placeholder,
.shadow-card textarea::placeholder {
  color: #8498bd !important;
}

/* Dropdowns: deterministic stacking order and readable text. */
.card:has(.searchable-list),
.card:has(#searchableSelectList),
.card:has(.multi-panel),
.card:has(#suggestions) {
  position: relative !important;
  overflow: visible !important;
  transform: none !important;
  z-index: 12000 !important;
}
.card:has(.multi-panel) { z-index: 11000 !important; }
.card:has(#suggestions) { z-index: 10000 !important; }
.container .grid > .card:not(:has(.searchable-list)):not(:has(#searchableSelectList)):not(:has(.multi-panel)):not(:has(#suggestions)) {
  position: relative;
  z-index: 1;
}

.searchable-list,
#searchableSelectList,
#suggestions,
.multi-panel {
  position: absolute !important;
  z-index: 999999 !important;
  color: #eef7ff !important;
  background: linear-gradient(145deg, rgba(9,19,42,.995), rgba(2,8,22,.995)) !important;
  border: 1px solid rgba(54,184,255,.52) !important;
  box-shadow: 0 28px 85px rgba(0,0,0,.78), 0 0 34px rgba(32,217,255,.16) !important;
  opacity: 1 !important;
  isolation: isolate !important;
  backdrop-filter: blur(22px) saturate(155%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(155%) !important;
}

.searchable-list > div,
#searchableSelectList > div,
#suggestions > div,
.multi-panel-body > div,
.searchable-item {
  color: #eef7ff !important;
  background: rgba(4,10,27,.84) !important;
  border-color: rgba(109,142,207,.18) !important;
}
.searchable-list > div:hover,
#searchableSelectList > div:hover,
#suggestions > div:hover,
.multi-panel-body > div:hover,
.searchable-item:hover,
.searchable-item[aria-selected="true"] {
  color: #ffffff !important;
  background: linear-gradient(90deg, rgba(32,217,255,.18), rgba(139,92,246,.22)) !important;
}

/* Prevent animation transforms from creating stacking contexts around dropdowns. */
.card:has(.searchable-list) .arena-reveal,
.card:has(#searchableSelectList) .arena-reveal,
.card:has(.multi-panel) .arena-reveal,
.card:has(#suggestions) .arena-reveal {
  transform: none !important;
  opacity: 1 !important;
}

/* Native option list readability where the browser honors styling. */
select,
select option,
select optgroup {
  color: #f1f6ff !important;
  background-color: #0b1530 !important;
}

/* Footer/nav controls keep the same visual language. */
.lab-nav-footer a,
.lab-nav-footer button {
  color: #eef7ff !important;
}

/* =========================================================
   FINAL DROPDOWN PORTAL SAFETY
   Custom dropdown panels are portaled to body by vrqa-overlay-fix.js.
   These rules ensure the page never clips or creates a competing layer.
   ========================================================= */
body[data-modern="1"] .searchable-list[data-vrqa-portaled="1"],
body[data-modern="1"] .multi-panel[data-vrqa-portaled="1"],
body[data-modern="1"] #suggestions[data-vrqa-portaled="1"] {
  position: fixed !important;
  z-index: 2147483000 !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
  overflow: auto !important;
  isolation: auto !important;
  color: #eef6ff !important;
  background: linear-gradient(145deg, #0d1835 0%, #050b1d 100%) !important;
  border: 1px solid rgba(32,217,255,.72) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.78), 0 0 28px rgba(32,217,255,.18) !important;
}

body[data-modern="1"] .searchable-list[data-vrqa-portaled="1"] > div,
body[data-modern="1"] #suggestions[data-vrqa-portaled="1"] > div,
body[data-modern="1"] .multi-panel[data-vrqa-portaled="1"] .multi-panel-body > div {
  color: #f5f8ff !important;
  background: transparent !important;
  opacity: 1 !important;
}

body[data-modern="1"] .searchable-list[data-vrqa-portaled="1"] > div:hover,
body[data-modern="1"] #suggestions[data-vrqa-portaled="1"] > div:hover,
body[data-modern="1"] .multi-panel[data-vrqa-portaled="1"] .multi-panel-body > div:hover {
  color: #ffffff !important;
  background: linear-gradient(90deg, rgba(32,217,255,.20), rgba(139,92,246,.22)) !important;
}

/* Grid/section layers are intentionally neutral; overlays must win. */
body[data-modern="1"] .container,
body[data-modern="1"] .container .grid,
body[data-modern="1"] .grid {
  overflow: visible !important;
}