/* MY ZAIN — unified 2026 WaterGlass theme */
:root{
 --wg-bg1:#eaf4ff;--wg-bg2:#f6efff;--wg-panel:rgba(255,255,255,.68);--wg-soft:rgba(255,255,255,.52);--wg-input:rgba(255,255,255,.72);
 --wg-text:#17253a;--wg-muted:#5f7389;--wg-label:#2d5b83;--wg-line:rgba(255,255,255,.88);--wg-accent:#0b76df;--wg-shadow:rgba(35,67,100,.16)
}
html[data-theme="dark"],body[data-theme="dark"]{
 --wg-bg1:#071521;--wg-bg2:#151126;--wg-panel:rgba(17,29,43,.76);--wg-soft:rgba(255,255,255,.075);--wg-input:rgba(4,12,20,.38);
 --wg-text:#edf5ff;--wg-muted:#a7b8ca;--wg-label:#a9c9e8;--wg-line:rgba(255,255,255,.16);--wg-accent:#61b4ff;--wg-shadow:rgba(0,0,0,.38)
}
html,body{min-height:100%;background:radial-gradient(circle at 8% 0%,#bfe3ff80,transparent 34%),radial-gradient(circle at 92% 5%,#dac9ff80,transparent 32%),linear-gradient(135deg,var(--wg-bg1),var(--wg-bg2))!important;color:var(--wg-text)!important}
body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Arial,sans-serif;background-attachment:fixed}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-2;background:linear-gradient(120deg,#fff2,transparent 40%,#fff1)}
body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(circle at 50% 0%,#fff2,transparent 45%)}
/* Common glass surfaces */
.glass,.card,.panel,.modal-content,.navbar,.sidebar,.table-wrap,.tablebox,.toolbar,.stat,.account,.hero,.dialog,.modal-box,.profile-dialog{background:var(--wg-panel)!important;color:var(--wg-text)!important;border-color:var(--wg-line)!important;box-shadow:0 22px 65px var(--wg-shadow),inset 0 1px #fff2!important;backdrop-filter:blur(28px) saturate(155%);-webkit-backdrop-filter:blur(28px) saturate(155%)}
/* Force readability on legacy dark hard-coded layouts */
body:not([data-theme="dark"]) .sidebar,body:not([data-theme="dark"]) aside{background:rgba(255,255,255,.66)!important}
body:not([data-theme="dark"]) .nav,body:not([data-theme="dark"]) .nav button{color:#526a81!important}
body:not([data-theme="dark"]) .nav.active,body:not([data-theme="dark"]) .nav button.active,body:not([data-theme="dark"]) .nav:hover,body:not([data-theme="dark"]) .nav button:hover{color:#173b60!important;background:rgba(15,116,220,.10)!important}
body:not([data-theme="dark"]) .section,body:not([data-theme="dark"]) .section-title{color:#506a82!important}
body:not([data-theme="dark"]) .title h1,body:not([data-theme="dark"]) .hero h2,body:not([data-theme="dark"]) h1,body:not([data-theme="dark"]) h2,body:not([data-theme="dark"]) h3,body:not([data-theme="dark"]) h4,body:not([data-theme="dark"]) .panel h3{color:#172b45!important}
body:not([data-theme="dark"]) .title p,body:not([data-theme="dark"]) .hero p,body:not([data-theme="dark"]) .muted,body:not([data-theme="dark"]) .count,body:not([data-theme="dark"]) .account small,body:not([data-theme="dark"]) .action span,body:not([data-theme="dark"]) .item small{color:#60758b!important}
body:not([data-theme="dark"]) td,body:not([data-theme="dark"]) .customer{color:#213c58!important}
body:not([data-theme="dark"]) th,body:not([data-theme="dark"]) .stat span{color:#526b83!important}
body:not([data-theme="dark"]) .search,body:not([data-theme="dark"]) select{background:rgba(255,255,255,.72)!important;color:#172b45!important;border-color:#fff!important}
body:not([data-theme="dark"]) input,body:not([data-theme="dark"]) select,body:not([data-theme="dark"]) textarea{color:#172b45!important;background:rgba(255,255,255,.72)!important}
body:not([data-theme="dark"]) input::placeholder,body:not([data-theme="dark"]) textarea::placeholder{color:#71869b!important}
/* Dark mode */
[data-theme="dark"] .profile-dialog,[data-theme="dark"] .dialog,[data-theme="dark"] .modal-box{background:rgba(15,27,41,.86)!important;color:#edf5ff!important}
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{color:#edf5ff!important;background:rgba(2,10,18,.40)!important;border-color:rgba(255,255,255,.18)!important}
[data-theme="dark"] input::placeholder,[data-theme="dark"] textarea::placeholder{color:#8ea4b9!important}
[data-theme="dark"] .profile-tab{color:#bcd0e3!important;background:rgba(255,255,255,.07)!important}
[data-theme="dark"] .profile-tab.active{color:#fff!important;background:var(--wg-accent)!important}
[data-theme="dark"] .field label{color:#a9c9e8!important}
/* Universal buttons */
button,.btn{font:inherit;border-radius:12px!important}
.theme-toggle{position:fixed!important;right:18px!important;top:18px!important;z-index:99999!important;border:1px solid var(--wg-line)!important;background:var(--wg-panel)!important;color:var(--wg-text)!important;backdrop-filter:blur(20px)!important;padding:9px 14px!important;border-radius:14px!important;cursor:pointer!important;box-shadow:0 8px 25px var(--wg-shadow)!important}
table{color:var(--wg-text)}
/* Customers page legacy classes */
.tablebox,.toolbar,.stat,.account{background:var(--wg-panel)!important;color:var(--wg-text)!important}
.search{background:var(--wg-input)!important;color:var(--wg-text)!important;border-color:var(--wg-line)!important}
.badge,.mini,.secondary,.close{color:var(--wg-text)!important;background:var(--wg-soft)!important;border-color:var(--wg-line)!important}
.primary{color:#fff!important}

/* ===== MY ZAIN FINAL GLOBAL THEME REPAIR ===== */
.theme-toggle{
  width:auto!important;
  min-width:0!important;
  max-width:max-content!important;
  height:42px!important;
  min-height:42px!important;
  padding:0 15px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  white-space:nowrap!important;
  font-size:13px!important;
  line-height:1!important;
  font-weight:700!important;
  transform:none!important;
}
.theme-toggle:hover{transform:translateY(-1px)!important}

/* Login / portal pages: remove legacy dark-only styling in LIGHT mode */
html:not([data-theme="dark"]) body:has(.login){
  color:var(--wg-text)!important;
  background:
    radial-gradient(circle at 10% 8%,rgba(122,198,255,.28),transparent 30%),
    radial-gradient(circle at 90% 10%,rgba(207,173,255,.30),transparent 30%),
    linear-gradient(135deg,#eaf5ff,#f8f0ff)!important;
  overflow:auto!important;
}
html:not([data-theme="dark"]) body:has(.login):before{
  background:
    radial-gradient(circle at 75% 20%,rgba(255,210,50,.12),transparent 24%),
    radial-gradient(circle at 18% 80%,rgba(90,130,255,.10),transparent 26%)!important;
}
html:not([data-theme="dark"]) body:has(.login) header{
  background:rgba(255,255,255,.56)!important;
  border-color:rgba(255,255,255,.85)!important;
  color:#182d48!important;
  box-shadow:0 12px 40px rgba(40,70,110,.10)!important;
}
html:not([data-theme="dark"]) body:has(.login) .brand{color:#182d48!important}
html:not([data-theme="dark"]) body:has(.login) .top{color:#60758b!important}
html:not([data-theme="dark"]) body:has(.login) .hero h1,
html:not([data-theme="dark"]) body:has(.login) .hero h2,
html:not([data-theme="dark"]) body:has(.login) .head h2{color:#172b45!important}
html:not([data-theme="dark"]) body:has(.login) .hero p,
html:not([data-theme="dark"]) body:has(.login) .sub{color:#61758b!important}
html:not([data-theme="dark"]) body:has(.login) .pill{
  background:rgba(255,255,255,.48)!important;
  border-color:rgba(255,255,255,.86)!important;
  color:#49657f!important;
}
html:not([data-theme="dark"]) body:has(.login) .glass,
html:not([data-theme="dark"]) body:has(.login) .login{
  background:rgba(255,255,255,.58)!important;
  border-color:rgba(255,255,255,.90)!important;
  box-shadow:0 28px 80px rgba(45,70,110,.17),inset 0 1px rgba(255,255,255,.95)!important;
}
html:not([data-theme="dark"]) body:has(.login) .secure{
  color:#526a82!important;
  border-color:rgba(75,105,135,.18)!important;
  background:rgba(255,255,255,.48)!important;
}
html:not([data-theme="dark"]) body:has(.login) .field label{color:#365c80!important}
html:not([data-theme="dark"]) body:has(.login) .input{
  background:rgba(255,255,255,.72)!important;
  border-color:rgba(95,125,155,.22)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.9)!important;
}
html:not([data-theme="dark"]) body:has(.login) .input input{
  color:#172b45!important;
}
html:not([data-theme="dark"]) body:has(.login) .input input::placeholder{color:#7a8ea3!important}
html:not([data-theme="dark"]) body:has(.login) .eye,
html:not([data-theme="dark"]) body:has(.login) .row{color:#64788d!important}
html:not([data-theme="dark"]) body:has(.login) .request{
  color:#274b6c!important;
  background:rgba(255,255,255,.50)!important;
  border-color:rgba(85,115,145,.20)!important;
}
html:not([data-theme="dark"]) body:has(.login) .divider{color:#708399!important}
html:not([data-theme="dark"]) body:has(.login) .divider:before,
html:not([data-theme="dark"]) body:has(.login) .divider:after{background:rgba(80,110,140,.18)!important}

/* DARK login */
html[data-theme="dark"] body:has(.login){
  background:
    radial-gradient(circle at 75% 20%,rgba(255,214,70,.15),transparent 24%),
    radial-gradient(circle at 18% 80%,rgba(90,130,255,.12),transparent 26%),
    linear-gradient(135deg,#07131f,#111021)!important;
  color:#edf5ff!important;
}
html[data-theme="dark"] body:has(.login) header{
  background:rgba(9,18,29,.58)!important;
  border-color:rgba(255,255,255,.13)!important;
}
html[data-theme="dark"] body:has(.login) .hero h1,
html[data-theme="dark"] body:has(.login) .head h2{color:#edf5ff!important}
html[data-theme="dark"] body:has(.login) .hero p,
html[data-theme="dark"] body:has(.login) .sub{color:#a9b9ca!important}
html[data-theme="dark"] body:has(.login) .glass{
  background:rgba(17,29,43,.76)!important;
  border-color:rgba(255,255,255,.17)!important;
}
html[data-theme="dark"] body:has(.login) .input{
  background:rgba(3,11,19,.42)!important;
  border-color:rgba(255,255,255,.16)!important;
}
html[data-theme="dark"] body:has(.login) .input input{color:#edf5ff!important}
html[data-theme="dark"] body:has(.login) .field label{color:#a9c9e8!important}
html[data-theme="dark"] body:has(.login) .request{
  color:#edf5ff!important;
  background:rgba(255,255,255,.055)!important;
  border-color:rgba(255,255,255,.14)!important;
}

/* Landing/public pages */
html:not([data-theme="dark"]) body:has(.hero-content){
  color:var(--wg-text)!important;
  background:linear-gradient(135deg,#eaf5ff,#f8f0ff)!important;
}
html:not([data-theme="dark"]) body:has(.hero-content):before{
  background:radial-gradient(circle at 76% 10%,rgba(227,189,67,.10),transparent 23%),radial-gradient(circle at 8% 82%,rgba(74,104,180,.12),transparent 26%),#eaf5ff!important;
}
html:not([data-theme="dark"]) body:has(.hero-content) header{
  background:rgba(255,255,255,.58)!important;
  border-color:rgba(255,255,255,.86)!important;
  color:#172b45!important;
}
html:not([data-theme="dark"]) body:has(.hero-content) nav a{color:#49657f!important}
html:not([data-theme="dark"]) body:has(.hero-content) nav a:hover{color:#173b60!important;background:rgba(15,116,220,.08)!important}
html:not([data-theme="dark"]) body:has(.hero-content) .hero{
  background:linear-gradient(rgba(235,245,255,.62),rgba(245,238,255,.80)),url('images/office-bg.jpg') center/cover fixed!important;
}
html:not([data-theme="dark"]) body:has(.hero-content) .hero-content,
html:not([data-theme="dark"]) body:has(.hero-content) .card,
html:not([data-theme="dark"]) body:has(.hero-content) .about-text,
html:not([data-theme="dark"]) body:has(.hero-content) .why-card,
html:not([data-theme="dark"]) body:has(.hero-content) .review-card,
html:not([data-theme="dark"]) body:has(.hero-content) .link-card,
html:not([data-theme="dark"]) body:has(.hero-content) .contact-box{
  background:rgba(255,255,255,.55)!important;
  border-color:rgba(255,255,255,.88)!important;
  color:#172b45!important;
  box-shadow:0 22px 65px rgba(35,67,100,.14),inset 0 1px #fff!important;
}
html:not([data-theme="dark"]) body:has(.hero-content) .hero h1,
html:not([data-theme="dark"]) body:has(.hero-content) .about-text h2,
html:not([data-theme="dark"]) body:has(.hero-content) h2,
html:not([data-theme="dark"]) body:has(.hero-content) h3{color:#172b45!important}
html:not([data-theme="dark"]) body:has(.hero-content) .hero p,
html:not([data-theme="dark"]) body:has(.hero-content) .about-text p,
html:not([data-theme="dark"]) body:has(.hero-content) .card p,
html:not([data-theme="dark"]) body:has(.hero-content) .why-card p,
html:not([data-theme="dark"]) body:has(.hero-content) .review-card p,
html:not([data-theme="dark"]) body:has(.hero-content) .link-card p,
html:not([data-theme="dark"]) body:has(.hero-content) .contact-box p{color:#60758b!important}