/* VR QA Academy — Light Automation Practice UI 2026
   Final accessibility + layout layer. Purposefully avoids transforms on
   structural lab cards so dropdowns, dialogs, frames and locators remain stable. */
:root{
  --vrqa-bg:#edf4fb;
  --vrqa-surface:#f7fbff;
  --vrqa-card:#ffffff;
  --vrqa-card-soft:#f3f8fd;
  --vrqa-text:#10233f;
  --vrqa-muted:#5c6f87;
  --vrqa-border:#d5e1ef;
  --vrqa-primary:#2563eb;
  --vrqa-cyan:#0ea5e9;
  --vrqa-purple:#7c3aed;
  --vrqa-orange:#f97316;
  --vrqa-shadow:0 14px 36px rgba(30,64,175,.10);
}

html,body{background:linear-gradient(180deg,#f7fbff 0%,#edf4fb 52%,#e8f1fa 100%) !important;color:var(--vrqa-text) !important;}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:
 radial-gradient(circle at 8% 8%,rgba(14,165,233,.11),transparent 28%),
 radial-gradient(circle at 92% 10%,rgba(124,58,237,.10),transparent 24%),
 radial-gradient(circle at 50% 100%,rgba(37,99,235,.08),transparent 30%);}

/* ---------- global layout ---------- */
main,.main,.container,.dashboard{max-width:1440px !important;margin-left:auto !important;margin-right:auto !important;}
.container{padding:26px 26px 40px !important;}
.dashboard{padding:26px 26px 40px !important;}
.grid{gap:22px !important;align-items:start !important;overflow:visible !important;}
.card-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:20px !important;}

/* ---------- light header ---------- */
.app-header,header.app-header{
  position:sticky !important;top:0 !important;z-index:1000000 !important;
  background:rgba(255,255,255,.93) !important;
  color:var(--vrqa-text) !important;
  border-bottom:1px solid #d7e4f2 !important;
  box-shadow:0 8px 28px rgba(30,64,175,.10) !important;
  backdrop-filter:blur(14px) saturate(120%) !important;
  -webkit-backdrop-filter:blur(14px) saturate(120%) !important;
}
.header-inner{max-width:1480px !important;min-height:72px !important;padding:10px 24px !important;grid-template-columns:auto minmax(320px,1fr) auto !important;gap:20px !important;}
.header-left{gap:16px !important;}
.header-left>a img{height:48px !important;border-radius:10px !important;box-shadow:0 6px 16px rgba(37,99,235,.12) !important;}
.nav-links{gap:6px !important;}
.nav-links>a,.nav-dropbtn{color:#1b3558 !important;background:transparent !important;border:1px solid transparent !important;border-radius:12px !important;font-weight:800 !important;padding:10px 13px !important;}
.nav-links>a:hover,.nav-dropbtn:hover,.nav-dropbtn[aria-expanded="true"]{background:#edf6ff !important;border-color:#cde1f4 !important;color:#174ea6 !important;}

/* ---------- course menu ---------- */
.nav-dropdown{position:relative !important;z-index:1000002 !important;}
.nav-dropdown-content{
  display:none !important;position:absolute !important;left:0 !important;top:calc(100% + 10px) !important;
  width:410px !important;padding:10px !important;grid-template-columns:1fr 1fr !important;gap:8px !important;
  background:rgba(255,255,255,.98) !important;border:1px solid #cbdced !important;border-radius:18px !important;
  box-shadow:0 22px 50px rgba(23,59,108,.18) !important;backdrop-filter:blur(14px) !important;
}
.nav-dropdown.open .nav-dropdown-content{display:grid !important;}
.nav-dropdown-content a{
  display:grid !important;grid-template-columns:34px minmax(0,1fr) !important;align-items:center !important;gap:9px !important;
  padding:10px !important;border-radius:12px !important;color:#173558 !important;background:#f7fbff !important;
  border:1px solid #e0eaf5 !important;text-decoration:none !important;font-weight:750 !important;white-space:normal !important;
}
.nav-dropdown-content a:hover{background:#edf7ff !important;border-color:#b9d9f5 !important;color:#124aa6 !important;}
.vrqa-course-icon{width:28px !important;height:28px !important;object-fit:contain !important;}

/* ---------- search ---------- */
.search-section{display:flex !important;justify-content:center !important;min-width:0 !important;}
.vrqa-search-wrap{position:relative !important;width:min(560px,100%) !important;}
.vrqa-search-icon{left:16px !important;}
.vrqa-search-wrap input{
  height:48px !important;width:100% !important;padding:0 48px !important;border-radius:16px !important;
  border:1px solid #c9d8e8 !important;background:#ffffff !important;color:#163252 !important;
  font-size:.96rem !important;box-shadow:0 8px 22px rgba(30,64,175,.08) !important;
}
.vrqa-search-wrap input::placeholder{color:#7890a9 !important;}
.vrqa-search-wrap input:focus{border-color:#60a5fa !important;box-shadow:0 0 0 4px rgba(37,99,235,.09),0 10px 24px rgba(30,64,175,.10) !important;outline:none !important;}
.vrqa-search-clear{color:#49627d !important;background:#eef5fb !important;border:1px solid #d2e0ed !important;}

/* ---------- user menu ---------- */
.user-menu{position:relative !important;z-index:1000002 !important;}
.btn-home,.header-right .btn-secondary{background:linear-gradient(135deg,#2563eb,#4f46e5) !important;color:#fff !important;border-radius:13px !important;padding:10px 16px !important;box-shadow:0 10px 22px rgba(37,99,235,.20) !important;}
.avatar-btn{border:2px solid #c9dced !important;background:#fff !important;box-shadow:0 5px 14px rgba(30,64,175,.10) !important;}
.user-dropdown{
  display:none !important;opacity:1 !important;visibility:visible !important;pointer-events:none !important;transform:none !important;
  background:rgba(255,255,255,.98) !important;color:#173558 !important;border:1px solid #cbdced !important;
  box-shadow:0 22px 54px rgba(23,59,108,.18) !important;z-index:1000003 !important;
}
.user-dropdown.show{display:block !important;pointer-events:auto !important;}
.user-dropdown a,.user-dropdown button{color:#173558 !important;border-radius:10px !important;}
.user-dropdown a:hover,.user-dropdown button:hover{background:#eef7ff !important;color:#124aa6 !important;}
.user-email{color:#71849a !important;}

/* ---------- practice cards / sections ---------- */
.card,.lab-card,.panel,.section-card,.form-card,.order-card,.product-card,.profile-card,.table-container,.container-card{
  position:relative !important;transform:none !important;overflow:visible !important;
  background:rgba(255,255,255,.97) !important;color:var(--vrqa-text) !important;
  border:1px solid var(--vrqa-border) !important;border-radius:18px !important;
  box-shadow:var(--vrqa-shadow) !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  transition:box-shadow .2s ease,border-color .2s ease,background .2s ease !important;
}
.card:hover,.lab-card:hover,.panel:hover,.section-card:hover,.form-card:hover,.order-card:hover,.product-card:hover,.profile-card:hover{transform:none !important;box-shadow:0 18px 42px rgba(30,64,175,.14) !important;border-color:#bfd5eb !important;}
.card-header{padding:15px 18px !important;border-bottom:1px solid #e6eef6 !important;}
.card-title{color:#1f4fa7 !important;font-size:1.08rem !important;}
.card-body{padding:18px !important;}
.field-label,label,.field-label{color:#35536f !important;}
.kbd{color:#c25c0c !important;background:#fff7ed !important;border-radius:999px !important;padding:4px 8px !important;}

/* ---------- controls ---------- */
.control{background:#f7fbff !important;border:1px solid #cbdceb !important;box-shadow:none !important;}
.control:focus-within{border-color:#60a5fa !important;background:#fff !important;box-shadow:0 0 0 4px rgba(37,99,235,.08) !important;}
input,textarea,select,.shadow-card input,.shadow-card textarea,.shadow-card select{
  color:#183552 !important;background:#fff !important;border:1px solid #c7d8e8 !important;
}
input::placeholder,textarea::placeholder,.shadow-card input::placeholder{color:#8194a9 !important;opacity:1 !important;}
option,optgroup{background:#fff !important;color:#183552 !important;}
input:focus,textarea:focus,select:focus{outline:none !important;border-color:#60a5fa !important;box-shadow:0 0 0 4px rgba(37,99,235,.08) !important;}
.btn{background:#fff !important;color:#24415f !important;border:1px solid #cbdbea !important;box-shadow:none !important;}
.btn:hover{border-color:#7aa9d8 !important;box-shadow:0 8px 18px rgba(30,64,175,.10) !important;}
.btn-primary{background:linear-gradient(135deg,#2563eb,#4f46e5) !important;color:#fff !important;border:none !important;}
.btn-secondary{background:linear-gradient(135deg,#0ea5e9,#2563eb) !important;color:#fff !important;border:none !important;}
.result-box{color:#183552 !important;background:#f7fbff !important;border-color:#cddded !important;}

/* ---------- dropdown stacking FIX ---------- */
.grid > .card{z-index:1 !important;}
.card:has(.searchable-list),.card:has(#searchableSelectList),.card:has(#suggestions),.card:has(.multi-panel){z-index:9000 !important;overflow:visible !important;}
.card:has(.searchable-list.show),.card:has(#searchableSelectList.show),.card:has(#suggestions[style*="display: block"]),.card:has(#suggestions.show),.card:has(.multi-panel.show),.card.vrqa-dropdown-open{z-index:999999 !important;}
.grid > .card + .card{position:relative !important;}
.searchable-list,#searchableSelectList,#suggestions,.multi-panel{
  display:none !important;position:absolute !important;left:0 !important;right:auto !important;top:100% !important;z-index:1000000 !important;
  max-width:min(560px,calc(100vw - 28px)) !important;max-height:320px !important;overflow:auto !important;margin-top:8px !important;
  background:#fff !important;color:#183552 !important;border:1px solid #a9c8e6 !important;border-radius:14px !important;
  box-shadow:0 24px 56px rgba(24,56,95,.20) !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
}
.searchable-list.show,#searchableSelectList.show,#suggestions.show,.multi-panel.show{display:block !important;}
.searchable-list>div,#searchableSelectList>div,#suggestions>div,.multi-panel-body>div{
  color:#173558 !important;background:#fff !important;border-bottom:1px solid #e7eef6 !important;padding:12px 14px !important;cursor:pointer !important;
}
.searchable-list>div:hover,#searchableSelectList>div:hover,#suggestions>div:hover,.multi-panel-body>div:hover{color:#114da8 !important;background:#eef7ff !important;}
.multi-panel-header{background:#f4f8fc !important;color:#173558 !important;border-bottom:1px solid #dbe7f2 !important;}
.multi-placeholder{color:#7890a9 !important;}
.multi-input{background:#f7fbff !important;min-height:56px !important;}

/* ---------- modals / dialogs ---------- */
.modal-backdrop{background:rgba(28,49,77,.34) !important;backdrop-filter:blur(6px) !important;}
.modal-backdrop .modal,#reviewModal .modal{background:#fff !important;color:#183552 !important;border:1px solid #c8d9ea !important;box-shadow:0 30px 80px rgba(24,56,95,.22) !important;}

/* ---------- home ---------- */
.v2-home-hero{background:transparent !important;}
.v2-hero-panel,.v2-hero-visual{background:#ffffff !important;color:#163252 !important;border:1px solid #d0deeb !important;box-shadow:0 22px 52px rgba(30,64,175,.10) !important;}
.v2-eyebrow,.v2-kicker{color:#0284c7 !important;}
.v2-hero-h,.v2-title{color:#183552 !important;}
.v2-hero-p,.v2-sub{color:#5d728b !important;}
.v2-stat{background:#f7fbff !important;border:1px solid #d6e3ef !important;color:#183552 !important;}
.v2-chip{background:#fff !important;color:#35536f !important;border:1px solid #cbdbea !important;}
.banner-wrapper{box-shadow:0 14px 32px rgba(30,64,175,.16) !important;background:#fff !important;}
.banner-nav{background:rgba(37,99,235,.88) !important;}

/* ---------- lab cards on home: keep original icon nodes unchanged ---------- */
.lab-card{padding:22px 18px !important;min-height:195px !important;text-align:center !important;}
.lab-icon{transform:none !important;filter:none !important;color:inherit !important;}
.lab-title{color:#1f4fa7 !important;font-weight:800 !important;}
.lab-desc{color:#5f738b !important;}

/* ---------- footer ---------- */
.site-footer{color:#62758b !important;background:transparent !important;padding:22px 0 28px !important;}

/* ---------- prevent old dark-theme animation/stacking ---------- */
.arena-reveal,.arena-reveal.arena-visible{transform:none !important;}
.v2-hero-panel,.v2-hero-visual,.v2-stat,.lab-card,.card{isolation:auto !important;}

/* ---------- automation-practice readability ---------- */
body[data-modern="1"] :is(h1,h2,h3,h4,h5,h6,p,li,td,th,span){text-shadow:none !important;}
pre,code{background:#f1f6fa !important;color:#183552 !important;border-color:#d6e2ed !important;}

@media(max-width:1200px){
  .card-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
  .header-inner{grid-template-columns:auto minmax(240px,1fr) auto !important;}
}
@media(max-width:900px){
  .header-inner{grid-template-columns:auto auto !important;justify-content:space-between !important;}
  .search-section,.nav-links{display:none !important;}
  .card-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}
@media(max-width:640px){
  .container,.dashboard{padding-left:14px !important;padding-right:14px !important;}
  .card-grid{grid-template-columns:1fr !important;}
  .nav-dropdown-content{width:min(360px,calc(100vw - 24px)) !important;grid-template-columns:1fr !important;}
  .grid{grid-template-columns:1fr !important;}
}