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

body{
  background:linear-gradient(135deg, #eef2f7, #ffffff);
  color:#333;
  min-height:100vh;
  padding:20px;
}

/* ===== LOGIN ===== */
.login-box{
  width:320px;
  margin:100px auto;
  background:white;
  padding:30px;
  border-radius:15px;
  box-shadow:0 10px 25px rgba(0,0,0,0.1);
  text-align:center;
  animation:fadeIn 0.6s ease;
}

.login-box h2{
  margin-bottom:15px;
}

.login-box input{
  width:100%;
  padding:12px;
  margin:10px 0;
  border-radius:8px;
  border:1px solid #ddd;
  transition:0.3s;
}

.login-box input:focus{
  border-color:#2196f3;
  outline:none;
  box-shadow:0 0 5px rgba(33,150,243,0.3);
}

.login-box button{
  width:100%;
  padding:12px;
  margin-top:10px;
  background:linear-gradient(135deg, #2196f3, #21cbf3);
  color:white;
  border:none;
  border-radius:8px;
  cursor:pointer;
  transition:0.3s;
}

.login-box button:hover{
  transform:translateY(-2px);
  box-shadow:0 5px 15px rgba(0,0,0,0.2);
}

#error{
  color:red;
  margin-top:10px;
}

/* ===== TOP BAR ===== */
.top-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
}

.top-bar h2{
  font-weight:600;
}

.action-buttons{
  display:flex;
  gap:10px;
}

.top-bar button{
  padding:8px 18px;
  background:linear-gradient(135deg, #ff4b5c, #ff6b81);
  color:white;
  border:none;
  border-radius:8px;
  cursor:pointer;
  transition:0.3s;
}

.top-bar button:hover{
  transform:scale(1.05);
}

.btn-reset{
  background:red;
}

.btn-reset:hover{
  background:darkred;
}

/* ===== CARD ===== */
.card-container{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:20px;
  margin:20px 0;
}

.card{
  background:white;
  padding:25px;
  border-radius:15px;
  box-shadow:0 10px 20px rgba(0,0,0,0.08);
  text-align:center;
  transition:0.3s;
}

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

.card h3{
  margin-bottom:10px;
  color:#555;
}

.card p{
  font-size:22px;
  font-weight:bold;
  color:#2196f3;
}

/* ===== TABLE ===== */
table{
  width:100%;
  border-collapse:collapse;
  margin-top:15px;
  background:white;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 10px 20px rgba(0,0,0,0.05);
}

/* HEADER */
th{
  background:linear-gradient(135deg, #2196f3, #21cbf3);
  color:white;
  padding:12px;
  text-align:center; /* supaya sejajar */
}

/* ISI */
td{
  padding:12px;
  border-bottom:1px solid #eee;
  text-align:center;      /* semua isi rata tengah */
  vertical-align:middle;  /* sejajar vertikal */
}

/* HOVER */
tr:hover{
  background:#f5f9ff;
}

/* ===== KHUSUS KOLOM PRODUK (BIAR KIRI, BIAR RAPI) ===== */
td:nth-child(2){
  text-align:left;
  padding-left:15px;
}

/* ===== ANIMATION ===== */
@keyframes fadeIn{
  from{
    opacity:0;
    transform:translateY(20px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}
/* ===== FIX REKAP PENJUALAN ===== */
.rekap-table {
  table-layout: fixed;
  width: 100%;
}

/* Kolom Produk */
.rekap-table th:nth-child(1),
.rekap-table td:nth-child(1) {
  width: 70%;
  text-align: left;
  padding-left: 20px;
}

/* Kolom Total Terjual */
.rekap-table th:nth-child(2),
.rekap-table td:nth-child(2) {
  width: 30%;
  text-align: center;
}