*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Segoe UI',sans-serif;
}

body{
  background:var(--light);
}

/* ===== Layout ===== */
.wrapper{
  display:flex;
  min-height:100vh;
}

/* ===== Sidebar ===== */
.sidebar{
  width:260px;
  background:var(--primary);
  color:#fff;
  position:fixed;
  top:0;
  left:0;
  bottom:0;
}

.sidebar h2{
  text-align:center;
  padding:20px;
  background:#091f33;
  font-size:18px;
  letter-spacing:1px;
}

.sidebar ul{
  list-style:none;
  padding:10px 0;
}

.sidebar ul li{
  padding:12px 20px;
}

.sidebar ul li a{
  color:#ddd;
  text-decoration:none;
  display:block;
  border-radius:6px;
}

.sidebar ul li a:hover{
  background:var(--secondary);
  color:#fff;
}

/* ===== Content ===== */
.main{
  margin-left:260px;
  width:100%;
}

/* ===== Topbar ===== */
.topbar{
  background:#fff;
  padding:15px 25px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid #ddd;
}

.topbar h3{
  color:var(--dark);
}

/* ===== Cards ===== */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;
  padding:20px;
}

.card{
  background:#fff;
  padding:20px;
  border-radius:10px;
  box-shadow:0 5px 15px rgba(0,0,0,0.08);
}

.card h4{
  color:#666;
  font-size:14px;
}

.card h2{
  margin-top:10px;
  color:var(--primary);
}

/* ===== Buttons ===== */
.btn{
  padding:8px 16px;
  border:none;
  border-radius:6px;
  cursor:pointer;
}

.btn-primary{
  background:var(--secondary);
  color:#FF9933;
}

.btn-primary:hover{
  opacity:.9;
}
.input{
  width:100%;
  padding:10px;
  border:1px solid #ccc;
  border-radius:6px;
}
table tr:hover{
  background:#f9f9f9;
}
/* ===== Mobile Sidebar ===== */
.menu-toggle{
  display:none;
  font-size:22px;
  cursor:pointer;
  color:var(--primary);
}

/* Mobile view */
@media(max-width:768px){

  .sidebar{
    left:-260px;
    transition:.3s;
    z-index:1000;
  }

  .sidebar.active{
    left:0;
  }

  .main{
    margin-left:0;
  }

  .menu-toggle{
    display:block;
  }

  .topbar{
    padding:15px;
  }
}
.table{
  width:100%;
  border-collapse:collapse;
}
.table th,.table td{
  padding:12px;
  border-bottom:1px solid #eee;
  text-align:left;
}
.table th{
  background:#f5f7fa;
  color:#333;
}
.table tr:hover{
  background:#fafafa;
}
.badge{
  padding:4px 10px;
  border-radius:20px;
  font-size:12px;
}
.badge.active{background:#1abc9c;color:#fff;padding:4px 10px;border-radius:20px;}
.badge.inactive{background:#e74c3c;color:#fff;padding:4px 10px;border-radius:20px;}
.badge.approved{background:#2ecc71;color:#fff;padding:4px 10px;border-radius:20px;}
.badge.pending{background:#f1c40f;color:#000;padding:4px 10px;border-radius:20px;}
.badge.cancelled{background:#e74c3c;color:#fff;padding:4px 10px;border-radius:20px;}
.action a{
  margin-right:6px;
  text-decoration:none;
}
.action .edit{color:#2980b9;}
.action .del{color:#e74c3c;}
.action .toggle{color:#27ae60;}