/* ---------- Shared styles ---------- */
:root{
  --purple:#5A2D82;
  --gold:#D9A441;
  --black:#0B0B0B;
  --white:#F6F6F6;
}

html {
  scrollbar-gutter: stable;
}

body {
  overflow-y: scroll;
}
*{box-sizing:border-box}

/* 🔒 HARD VIEWPORT LOCK (CRITICAL FIX) */
html, body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

/* Background fixed & working */
body{
  margin:0;
  font-family:Arial, sans-serif;
  background: linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.08)), url("images/logo1.jpg");
  background-size:cover;
  background-position:center;
  filter:brightness(1.08);
  min-height:100vh;
  color:#111;
}

/* ---------- Snow (STABILIZED) ---------- */
.snow-container{
  pointer-events:none;
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  z-index:9999;
  overflow:hidden;
}

.snowflake{
  position:absolute;
  top:-20px;
  color:white;
  font-size:18px;
  opacity:0.85;
  animation: fall 14s linear infinite;
  will-change: transform;
  transform: translateZ(0);
}

/* More snowflakes + safe horizontal bounds */
.snowflake:nth-child(1){left:3%; animation-delay:0s;}
.snowflake:nth-child(2){left:8%; animation-delay:2s;}
.snowflake:nth-child(3){left:13%; animation-delay:4s;}
.snowflake:nth-child(4){left:18%; animation-delay:1s;}
.snowflake:nth-child(5){left:23%; animation-delay:3s;}
.snowflake:nth-child(6){left:28%; animation-delay:5s;}
.snowflake:nth-child(7){left:33%; animation-delay:2s;}
.snowflake:nth-child(8){left:38%; animation-delay:6s;}
.snowflake:nth-child(9){left:43%; animation-delay:1s;}
.snowflake:nth-child(10){left:48%; animation-delay:4s;}
.snowflake:nth-child(11){left:53%; animation-delay:0s;}
.snowflake:nth-child(12){left:58%; animation-delay:3s;}
.snowflake:nth-child(13){left:63%; animation-delay:5s;}
.snowflake:nth-child(14){left:68%; animation-delay:2s;}
.snowflake:nth-child(15){left:73%; animation-delay:6s;}
.snowflake:nth-child(16){left:78%; animation-delay:1s;}
.snowflake:nth-child(17){left:83%; animation-delay:4s;}
.snowflake:nth-child(18){left:88%; animation-delay:2s;}
.snowflake:nth-child(19){left:92%; animation-delay:5s;}
.snowflake:nth-child(20){left:96%; animation-delay:0s;}

@keyframes fall{
  0%{transform:translateY(-20px) rotate(0deg);}
  100%{transform:translateY(110vh) rotate(360deg);}
}

/* Top rotating E */
.top-logo{
  position:absolute;
  top:28px;
  width:100%;
  text-align:center;
  z-index:1000;
}
.rotating-e{
  font-size:82px;
  font-weight:800;
  color:var(--purple);
  animation:spin 6s linear infinite;
  text-shadow:0 0 12px rgba(90,45,130,0.25);
}
@keyframes spin{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}
.company-name{
  font-size:20px;
  color:var(--gold);
  margin-top:-8px;
}

/* Shared auth box */
.auth-container{
  width:100%;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
}
.form-box{
  width:340px;
  padding:30px;
  border-radius:14px;
  background:rgba(0,0,0,0.55);
  color:white;
  text-align:center;
  backdrop-filter:blur(6px);
  box-shadow:0 0 24px rgba(0,0,0,0.28);
}
.form-box h2{color:var(--gold);margin-bottom:18px}
input,select{
  width:100%;
  padding:12px;
  margin:8px 0;
  border-radius:8px;
  border:none;
  background:rgba(255,255,255,0.9);
  font-size:14px;
}
.btn{
  width:100%;
  padding:12px;
  border-radius:8px;
  border:0;
  background:var(--purple);
  color:white;
  font-weight:700;
  cursor:pointer;
}
.switch-text{margin-top:12px}
.switch-text span{color:var(--gold);cursor:pointer}
.footer-slogan{
  position:fixed;
  bottom:18px;
  width:100%;
  text-align:center;
  color:var(--gold);
  font-weight:600;
}

/* ---------- Dashboard layout ---------- */
.topbar{
  height:64px;
  background:rgba(255,255,255,0.9);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
  position:sticky;
  top:0;
  z-index:800;
  box-shadow:0 6px 20px rgba(0,0,0,0.06);
}
.topbar .brand{font-weight:700}
.topbar .muted{color:#666;margin-left:8px}
.top-actions{display:flex;gap:12px;align-items:center}

.sidebar{
  position:fixed;
  left:0;
  top:64px;
  width:220px;
  height:calc(100% - 64px);
  background:rgba(11,11,11,0.85);
  color:white;
  padding:18px;
}
.sidebar ul{list-style:none;padding:0;margin:0}
.sidebar ul li{
  padding:10px 8px;
  border-radius:8px;
  cursor:pointer;
  margin-bottom:6px;
}
.sidebar ul li.active,
.sidebar ul li:hover{
  background:linear-gradient(90deg,var(--purple),#7b399f);
}

/* Main area */
.main{margin-left:240px;padding:22px}

/* Responsive */
@media(max-width:900px){
  .sidebar{display:none}
  .main{margin-left:0;padding:14px}
}