.dash{
  padding:100px 1rem 4rem;
  min-height:100vh;
  background:rgba(0,0,0,.6);
}

.dash-inner{
  max-width:1500px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.bcard.pending {
  border-color: rgba(209, 30, 23, 0.6);
}

.dash-head{
  width:100%;
  margin-bottom:18px;
}

.dash-head h1{
  font-size:2.6rem;
  margin-bottom:6px;
}

.sub{
  color:#ccc;
  font-weight:700;
}

.row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
  
}


.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

background: #29183f;
    filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.26));
    color: #fff;    border-radius: 18px;
border: none; 
 border-radius:999px;

  padding:10px 16px;
  color:#fff;
  font-weight:900;
  text-decoration:none;

  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, transform .12s ease;
}

.pill:hover{
opacity: 0.8;  transform:translateY(-1px);
}

.pill:active{
  transform:translateY(0);
}


.grid{
  width:100%;
  display:grid;
  
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px;
}

.card{
 border-radius: 18px;
    padding: 1.25rem 1.4rem 1.1rem;
    color: #fff;
    text-align: center;
    background: linear-gradient(rgba(25, 15, 39, 0.959), rgb(25, 15, 39)), url(../imgs/blendycity.png);
    background-size: cover;
    background-position: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .03);
    transition: transform .25s ease, box-shadow .25s ease;
}

.card h2{
  font-size:1.25rem;
}

.card-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}

.form{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.field{
  display:flex;
  flex-direction:column;
  gap:8px;
}

label{
  color:#ddd;
  font-weight:900;
}
input,
select{
  display:flex;
  align-items:center;
  gap:4px;
background: #29183f;
    filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.26));
    color: #fff;  padding:14px 44px 14px 14px;
  font-family:Poppins;
  font-weight:bold;
  border-radius:16px;
  color:white;
  border:none;
  outline:none;
}

select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:26px;
}


input:focus, select:focus{
  border-color:#d11e17;
}

.two{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.mini{
  height:44px;
  border-radius:14px;
  border:0;
background: #3d245f;
    filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.26));
    color: #fff;
  padding:0 14px;
  font-weight:900;
  cursor:pointer;
}

.mini:hover{
  opacity:.95;
  transform:translateY(-1px);
}

.err{
  margin-top:10px;
  color:#ffb4b4;
  font-weight:900;
  min-height:20px;
}

.ok{
  margin-top:6px;
  color:#b7ffcf;
  font-weight:900;
  min-height:20px;
}

.bookings{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.bcard{
background: #29183f;
    filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.26));
    color: #fff;  border-radius:16px;
  padding:12px;
}

.btop{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  margin-bottom:8px;
}

.btime{
  font-weight:900;
}

.bname{
  color:#ddd;
  font-weight:900;
}

.bmeta{
  color:#ccc;
  font-weight:700;
  font-size:.95rem;
}

.bsvc{
  margin-top:8px;
  color:#ddd;
  font-weight:800;
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* ===== STATS ===== */
.big{
  font-size:2.4rem;
  font-weight:900;
  margin:10px 0;
}

/* ===== DASHBOARD LAYOUT ===== */
.dash-layout{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:18px;
}

.dash-main{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.dash-side{
  position:sticky;
  top:120px;
  height:fit-content;
}

/* ===== MOBILE ===== */
@media (max-width:900px){
  .grid{
width: 100%  }

  .dash-layout{
width: 100%;  }

  .dash-side{
    position:static;
  }
}
.dropdown{
  position:relative;
  width:100%;
}

.dropdown-btn{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
background: #29183f;
    filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.26));
    color: #fff;  padding:14px;
  border-radius:16px;
  border:none;
  outline:none;
  color:white;
  font-family:Poppins;
  font-weight:900;
  cursor:pointer;
}

.dropdown-btn i{
  transition:transform .15s ease;
}

.dropdown.open .dropdown-btn i{
  transform:rotate(180deg);
}

.dropdown-menu{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  width:100%;
background: #29183f;
    filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.26));
    border: none;
  border-radius:16px;
  padding:6px;
  display:none;
  z-index:20;
  box-shadow:0 12px 30px rgba(0,0,0,.45);
}

.dropdown.open .dropdown-menu{
  display:block;
}

.dropdown-item{
  padding:12px 14px;
  border-radius:12px;
  color:white;
  font-weight:900;
  cursor:pointer;
}

.dropdown-item:hover{
background: #361e55;
    filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.26));}
@media (max-width: 900px){
  .dash{
    min-height:100svh;
  }

  .dash-layout{
    display:flex;
    flex-direction:column;
    gap:16px;
  }

  .dash-side{
    order:1;
    position:relative;
    top:auto;
  }

  .dash-main{
    order:2;
    gap:16px;
  }

  .dash-main .grid{
    display:flex;
    flex-direction:column;
    gap:16px;
  }

  .dash-main .grid > section:nth-child(1){
    order:1;
  }

  .dash-main .grid > section:nth-child(2){
    order:3;
  }

  .dash-side .card{
    padding:18px;
  }

  .dash-main .card{
    padding:18px;
  }

  .grid{
    grid-template-columns:1fr;
  }

  .bcard{
    padding:14px;
  }

  .btop{
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
  }

  .bname{
    font-size:1.05rem;
  }

  .bmeta{
    font-size:.95rem;
    line-height:1.4;
  }

  .bsvc{
    line-height:1.4;
    word-break:break-word;
  }

  .mini,
  .pill,
  .dropdown-btn{
    min-height:48px;
  }

  input,
  select{
    font-size:16px;
  }

  .dropdown-menu{
    max-height:240px;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }



  .dash-head h1{
    font-size:2rem;
  }
}

@media (hover: none){
  .pill:hover,
  .mini:hover{
    transform:none;
    background:#181818;
  }
}
@media (max-width: 600px){
  .two{
    grid-template-columns:1fr;
  }
}
@media (max-width: 600px){
  .row{
    gap:6px;
  }

  .pill{
    padding:8px 12px;
    font-size:.85rem;
    min-height:40px;
  }
}