/*=========== Dashboard css ===========*/
body {
  background: #f0ecec9c;
  font-family: 'Segoe UI', sans-serif;
}
.sidebar {
  width: 260px;
  height: 100vh;
  position: fixed;
  background: linear-gradient(180deg,#72716f,#2035bd);
  color: #fff;
  z-index: 1000;
}
.sidebar h4 {
  padding: 20px;
  text-align: center;
  background-color: #1d13af00;
  border-bottom: 2px solid #03034267 ;
  margin: 8px 0px 0px 8px;
}
.sidebar a {
  display: block;
  padding: 12px 20px;
  color: #f5f5f7;
  text-decoration: none;
  font-weight: bolder;
  font-size: 15px;
}
.sidebar a:hover {
  background: #2b2a4000;
  color: #19f3dd;
}


.topbar {
  background: #ffffff;
  position: fixed;
  top: 0;
  left: 250px;                 /* sidebar width */
  width: calc(100% - 250px);   /* remaining space */
  padding: 15px 25px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  z-index: 1100;
}

.main {
  margin-left: 260px;
  padding: 60px 25px 25px; /* topbar height adjust */
}


@media (max-width: 991px){

  .sidebar{
    top: 70px !important;              /* header ke niche start */
    height: calc(100vh - 70px);        /* full remaining height */
  }

}

/* ================= GLASS TOP CARDS ================= */
.glass-card{
  min-height:130px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-radius:22px;
  padding:30px;
  color:#fff;
  position:relative;
  overflow:hidden;
  transition:0.4s ease;
  backdrop-filter: blur(12px);
  box-shadow:0 10px 30px rgba(0,0,0,0.15);
}

.glass-card:hover{
  transform:translateY(-8px);
}

.glass-card h6{
  font-weight:700;
}

.glass-card h2{
  font-size:32px;
  font-weight:700;
}

/* Shine Effect */
.glass-card::before{
  content:"";
  position:absolute;
  top:0;
  left:-80%;
  width:60%;
  height:100%;
  background:rgba(255,255,255,0.3);
  transform:skewX(-25deg);
}

.glass-card:hover::before{
  animation:shine 1s ease forwards;
}

@keyframes shine{
  100%{ left:130%; }
}

/* Gradient Colors */
.bg-purple{background:linear-gradient(135deg,#6a11cb,#2575fc);}
.bg-green{background:linear-gradient(135deg,#11998e,#38ef7d);}
.bg-red{background:linear-gradient(135deg,#ff416c,#ff4b2b);}
.bg-yellow{background:linear-gradient(135deg,#f7971e,#ffd200);}

/* ================= BOTTOM TILES ================= */

.dashboard-tile{
  background:#ffffffcc;
  backdrop-filter: blur(8px);
  border-radius:20px;
  padding:30px;
  text-align:center;
  transition:0.4s ease;
  box-shadow:0 8px 20px rgba(11, 11, 144, 0.753);
  color:#333;
}

.dashboard-tile i{
  font-size:35px;
  color: #2963e0;
  margin-bottom:12px;
}
.dashboard-tile i:hover{
  color: #ef9d04;
}
.dashboard-tile:hover{
  transform:translateY(-10px);
}

/* Different Tile Colors */
.tile1{border-top:5px solid #6a11cb;}
.tile2{border-top:5px solid #11998e;}
.tile3{border-top:5px solid #ff416c;}
.tile4{border-top:5px solid #f7971e;}
.tile5{border-top:5px solid #0072ff;}
.tile6{border-top:5px solid #ff6a00;}
.tile7{border-top:5px solid #7f00ff;}
.tile8{border-top:5px solid #185a9d;}
.tile9{border-top:5px solid #0e097d;}
.tile10{border-top:5px solid #d8b803;}
.tile11{border-top:5px solid #2f445a;}
.tile12{border-top:5px solid #8f0b81;}
.tile13{border-top:5px solid #8309cf;}
.tile14{border-top:5px solid #185a9d;}
.tile15{border-top:5px solid #a84905;}
.tile16{border-top:5px solid #d80513;}



/*-- sidebar scrolling --*/
.sidebar{
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;          /* full screen height */
    width: 250px;           /* jo bhi tumhari sidebar width ho */
    overflow-y: auto;       /* 👈 scroll enable */
    overflow-x: hidden;
    padding-bottom: 20px;   /* last item cut na ho */
}
.sidebar{
    scrollbar-width: thin;              /* Firefox */
    scrollbar-color: #f8f5f500 transparent;
}
.sidebar::-webkit-scrollbar{
    width: 6px;
}
.sidebar::-webkit-scrollbar-thumb{
    background: #640606;
    border-radius: 1px;
}


/* ---------- RESPONSIVE ---------- */

@media (max-width: 991px) {
  .sidebar {
    left: -260px;
    transition: all 0.3s ease;
    z-index: 999;
  }
  .sidebar.active {
    left: 0;
  }
  .main {
    margin-left: 0;
    padding: 15px;
  }
  .topbar {
    flex-direction: row;
  }
}

@media (max-width: 991px) {
  .topbar {
    left: 0;
    width: 100%;
  }
}

@media (max-width: 991px) {
  .main {
    margin-left: 0;
    padding: 80px 15px 15px;
  }
}

@media (max-width: 576px) {
  .card-box h2 {
    font-size: 26px;
  }
}

/* Mobile Sidebar */
@media (max-width: 991px) {
  .sidebar {
    left: -260px;
    position: fixed;
    top: 0;
    transition: left 0.3s ease;
    z-index: 1000;
  }
  .sidebar.active {
    left: 0;
  }
}
.main{
    margin-left: 250px;   /* sidebar width ke barabar */
}

@media(max-width: 991px){
    .main{
        margin-left: 0;
    }
}

@media (max-width: 576px) {
  .topbar strong {
    font-size: 14px;
  }
  .topbar i {
    font-size: 18px;
  }
}

/*=========== Login page css ===========*/
.main-login{
  background-color:rgba(224, 205, 109, 0.22);
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
.login-box{
  width:750px;
  background:#fff;
  border: 1px solid #2035bd;
  border-radius:15px;
  overflow:hidden;
  box-shadow:0 20px 40px rgba(4, 30, 146, 0.752);
}
.left{
  background:linear-gradient(135deg,#1d7ff2,#1aa3ff);
  color:#fff;
  padding:50px;
  border-right: 1px solid #2035bd;
  box-shadow:0 20px 40px rgba(41, 72, 207, 0.752);
}
.left h2{font-weight:700;}
.left p{opacity:.9;}
.right{
  padding: 35px 25px;
}
.left .right{
  display: flex;
  justify-content: center;
  align-items: center;
}
.form-control{
  border-radius:8px;
  height:45px;
}
.buttons{
  align-items: center;
  justify-content: center;
}

.btn-primary{
  margin:0px 10px;
  background:#1d7ff2;
  border:none;
  border-radius:8px;
  height:45px;
  width: 120px;
}
.btn-primary a{
  color: white;
}

.password-wrapper{
  position:relative;
}
.password-wrapper .input{
  width:100%;
  padding:14px 45px 14px 14px; /* right padding icon ke liye */
  border-radius:8px;
  height:45px;
  border:1px solid #ddd;
  
}
.password-wrapper .eye{
  position:absolute;
  right:15px;
  top:50%;
  transform:translateY(-50%);
  cursor:pointer;
  font-size:18px;
  color:#666;
  user-select:none;
}

@media(max-width:768px){
  .left{display:none;}
  .login-box{width:100%;}
  
}

/* =====Form Mobile Responsive Fix ===== */
@media (max-width: 767px){

  .main{
    padding: 10px !important;
  }

  .card{
    padding: 15px !important;
  }

  label{
    font-size: 14px;
    font-weight: 500;
  }

  h4{
    font-size: 18px;
  }

  h6{
    font-size: 13px;
  }
}
@media (max-width: 991px){
  .main{
    margin-left: 0 !important;
  }
}