*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial;
}

body{
  background:#0d0d0d;
  color:#fff;
}

/* LOGIN */

.login-body{
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
}

.login-container{
  width:100%;
  display:flex;
  justify-content:center;
}

.login-box{
  background:#161616;
  padding:50px;
  width:400px;
  border-radius:20px;
}

.login-box h1{
  color:#d4a443;
  margin-bottom:10px;
}

.login-box p{
  margin-bottom:30px;
  color:#aaa;
}

.input-group{
  margin-bottom:20px;
}

.input-group label{
  display:block;
  margin-bottom:8px;
}

.input-group input{
  width:100%;
  padding:14px;
  border:none;
  border-radius:10px;
  background:#222;
  color:#fff;
}

.login-box button{
  width:100%;
  padding:15px;
  border:none;
  background:#d4a443;
  color:#000;
  font-weight:bold;
  border-radius:10px;
  cursor:pointer;
}

/* DASHBOARD */

.dashboard{
  display:flex;
}

/* SIDEBAR */

.sidebar{
  width:260px;
  height:100vh;
  background:#111;
  padding:30px;
  position:fixed;
}

.sidebar-logo{
  font-size:2rem;
  font-weight:bold;
  color:#d4a443;
  margin-bottom:50px;
}

.sidebar ul{
  list-style:none;
}

.sidebar li{
  padding:16px;
  margin-bottom:15px;
  border-radius:10px;
  cursor:pointer;
  transition:.3s;
}

.sidebar li:hover,
.sidebar .active{
  background:#d4a443;
  color:#000;
}

/* MAIN */

.main-content{
  margin-left:260px;
  padding:40px;
  width:100%;
}

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:40px;
}

.topbar button{
  background:#d4a443;
  border:none;
  padding:14px 20px;
  border-radius:10px;
  font-weight:bold;
  cursor:pointer;
}

/* CARDS */

.stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:20px;
  margin-bottom:40px;
}

.stats-card{
  background:#161616;
  padding:30px;
  border-radius:20px;
}

.stats-card span{
  color:#aaa;
}

.stats-card h2{
  margin-top:15px;
  font-size:2.5rem;
}

/* HORÁRIOS */

.schedule-section{
  margin-bottom:40px;
}

.hours-grid{
  display:flex;
  flex-wrap:wrap;
  gap:15px;
  margin-top:20px;
}

.hour{
  background:#1f1f1f;
  padding:15px 20px;
  border-radius:10px;
}

.occupied{
  display:none;
}

/* TABELA */

.table-section{
  background:#161616;
  padding:30px;
  border-radius:20px;
}

table{
  width:100%;
  border-collapse:collapse;
  margin-top:20px;
}

th,
td{
  padding:16px;
  text-align:left;
}

th{
  color:#d4a443;
}

tr{
  border-bottom:1px solid #2a2a2a;
}

.status{
  padding:8px 12px;
  border-radius:20px;
  font-size:.9rem;
}

.confirmado{
  background:#1e8f4d;
}

.pendente{
  background:#d89a00;
}

.cancelado{
  background:#c0392b;
}

/* BOTÕES */

.action-btn{
  padding:10px 14px;
  border:none;
  border-radius:8px;
  cursor:pointer;
  margin-right:10px;
}

.whatsapp{
  background:#25d366;
  color:#fff;
}

.delete{
  background:#c0392b;
  color:#fff;
}

/* MODAL */

.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.7);
  display:none;
  justify-content:center;
  align-items:center;
}

.modal-content{
  background:#161616;
  padding:40px;
  width:450px;
  border-radius:20px;
}

.modal-header{
  display:flex;
  justify-content:space-between;
  margin-bottom:30px;
}

.modal-header span{
  cursor:pointer;
  font-size:2rem;
}

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

.modal input,
.modal select{
  padding:15px;
  border:none;
  border-radius:10px;
  background:#222;
  color:#fff;
}

.modal button{
  padding:15px;
  border:none;
  background:#d4a443;
  color:#000;
  font-weight:bold;
  border-radius:10px;
  cursor:pointer;
}

/* TOAST */

.toast{
  position:fixed;
  bottom:30px;
  right:30px;
  background:#1e8f4d;
  padding:16px 24px;
  border-radius:10px;
  opacity:0;
  transition:.4s;
}

.toast.show{
  opacity:1;
}

/* CLIENT PAGE */

.client-page{
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
}

.client-container{
  background:#161616;
  padding:50px;
  border-radius:20px;
  width:450px;
}

.client-container h1{
  color:#d4a443;
  margin-bottom:10px;
}

.client-container p{
  color:#aaa;
  margin-bottom:30px;
}

.client-container form{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.client-container input,
.client-container select{
  padding:15px;
  border:none;
  border-radius:10px;
  background:#222;
  color:#fff;
}

.client-container button{
  padding:15px;
  border:none;
  border-radius:10px;
  background:#d4a443;
  color:#000;
  font-weight:bold;
  cursor:pointer;
}

.client-link{
  display:block;
  text-align:center;
  margin-top:20px;
  color:#d4a443;
  text-decoration:none;
}

.demo-access{
  background:#1f1f1f;
  padding:16px;
  border-radius:12px;
  margin-bottom:25px;
  border:1px solid #2d2d2d;
}

.demo-access span{
  display:block;
  color:#d4a443;
  font-weight:bold;
  margin-bottom:10px;
}

.demo-access p{
  color:#ccc;
  margin-bottom:5px;
  font-size:.95rem;
}