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

body{
  background:#042354;
}

/* LOGIN */
.login-page{
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
}

.login-box{
  background:#fff;
  padding:30px;
  width:320px;
  border-radius:8px;
  box-shadow:0 5px 20px rgba(0,0,0,0.1);
}

.login-box h2{
  text-align:center;
  margin-bottom:20px;
}

.login-box input{
  width:100%;
  padding:10px;
  margin:8px 0;
}

.login-box button{
  width:100%;
  padding:10px;
  background:#2c3e50;
  color:#fff;
  border:none;
  cursor:pointer;
}

.error{
  color:red;
  font-size:14px;
  margin-top:5px;
}

/* DASHBOARD */
.dashboard{
  display:none;
}

.sidebar{
  width:230px;
  height:100vh;
  background:#2c3e50;
  color:#fff;
  position:fixed;
  padding:20px;
  transition:0.3s;
  left:0;
}

.sidebar h2{
  margin-bottom:20px;
}

.sidebar ul li{
  list-style:none;
  margin:15px 0;
  cursor:pointer;
}

.main{
  margin-left:230px;
  padding:20px;
  transition:0.3s;
}

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

.topbar button{
  padding:5px 10px;
  cursor:pointer;
}

/* CARDS */
.cards{
  display:flex;
  gap:15px;
  flex-wrap:wrap;
  margin-bottom:20px;
}

.card{
  flex:1 1 200px;
  background:#fff;
  padding:20px;
  border-radius:8px;
  box-shadow:0 2px 10px rgba(0,0,0,0.05);
}

/* FORM */
.form-box{
  background:#fff;
  padding:20px;
  border-radius:8px;
  margin-bottom:20px;
}

.form-box input{
  padding:8px;
  margin-right:10px;
  margin-top:10px;
}

.form-box button{
  padding:8px 12px;
}

/* TABLE */
.table-box{
  background:#fff;
  padding:20px;
  border-radius:8px;
  overflow-x:auto;
  width:100%;
}

table{
  width:100%;
  border-collapse:collapse;
}

th, td{
  padding:10px;
  border:1px solid #ddd;
}

button.edit{
  background:orange;
  border:none;
  padding:5px 10px;
  color:#fff;
}

button.delete{
  background:red;
  border:none;
  padding:5px 10px;
  color:#fff;
}

/* SEARCH */
#search{
  padding:8px;
  margin-bottom:10px;
  width:250px;
}

.close-btn{
  position:absolute;
  top:15px;
  right:20px;
  font-size:22px;
  cursor:pointer;
  display:none;
}

/* MOBILE RESPONSIVE */

@media (max-width:768px){

/* Topbar */
.topbar h3{
  font-size:18px;
}

/* Cards */
.cards{
  flex-direction:column;
}

.card{
  width:100%;
}

/* Form */
.form-box input{
  width:100%;
  margin:8px 0;
}

.form-box button{
  width:100%;
  margin-top:10px;
}

/* Search */
#search{
  width:100%;
}

/* Table */
table{
  font-size:14px;
}

th,td{
  padding:8px;
}

/* Sidebar */
.sidebar{
  left:-230px;
  z-index:1000;
}

.sidebar.active{
  left:0;
}

.main{
  margin-left:0;
}

/* Topbar button */
.topbar button{
  font-size:20px;
}

.close-btn{
  display:block;
  color:white;
}

}