/* --- GLOBAL RESET & ANIMASI --- */

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

@keyframes pageEntry {
from { opacity: 0; transform: translateY(15px); }
to { opacity: 1; transform: translateY(0); }
}

body {
animation: pageEntry 0.7s ease-out forwards;
background: url('../img/background.png') no-repeat center center fixed;
background-size: cover;
min-height: 100vh;
}

/* --- DASHBOARD WRAPPER --- */
.wrapper-dashboard {
background: rgba(255, 255, 255, 0.98);
width: 92%;
max-width: 1200px;
margin: 30px auto;
padding: 40px;
border-radius: 30px;
position: relative;
box-shadow: 0 20px 60px rgba(0,0,0,0.15);
backdrop-filter: blur(10px);
min-height: 80vh;
}

/* --- LOGO GANDA POJOK KIRI --- */
#logo-container-ta {
    position: absolute;
    top: 25px;
    left: 25px;
    display: flex;
    align-items: center; 
    gap: 15px;
}

.logo-item {
    height: 60px; /* Logo laundry tetap 60px */
    width: auto;
    display: block;
}

.pnj-adjust {
    height: 50px; /* KUNCI: Kita naikkan dari 40px ke 50px */
    width: auto;
    display: block;
}

/* --- NAV ACTIONS --- */
.nav-actions {
position: absolute;
top: 35px;
right: 40px;
display: flex;
gap: 12px;
}

.btn-riwayat,
.logout-btn {
padding: 12px 20px;
border-radius: 12px;
text-decoration: none;
font-weight: bold;
font-size: 14px;
color: white !important;
transition: 0.3s;
}

.btn-riwayat {
background: #f39c12;
}

.logout-btn {
background: #FF5E62;
}

.btn-riwayat:hover,
.logout-btn:hover {
transform: translateY(-2px);
opacity: 0.9;
}

/* --- HEADER & STAT CARDS --- */
.dashboard-header {
text-align: center;
margin-top: 60px;
margin-bottom: 40px;
}

.dashboard-header h2 {
font-size: 28px;
font-weight: 800;
color: #2D3436;
}

.dashboard-header p {
color: #636E72;
margin-top: 8px;
}

.box-container-saskia {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
margin-bottom: 30px;
}

.card-stat {
padding: 35px 20px;
border-radius: 20px;
color: white;
text-align: center;
transition: 0.3s;
}

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

.card-stat h3 {
font-size: 30px;
margin-bottom: 8px;
}

.card-stat p {
font-size: 14px;
opacity: 0.9;
}

.c1 {
background: linear-gradient(135deg, #7366FF, #A18CFF);
}

.c2 {
background: linear-gradient(135deg, #2DCE89, #2DCECC);
}

.c3 {
background: linear-gradient(135deg, #5EBBFF, #32AFFF);
}

/* --- SEARCH BAR --- */
.search-container {
margin-bottom: 20px;
text-align: left;
}

.search-input {
padding: 12px 18px;
width: 280px;
border: 2px solid #edf2f7;
border-radius: 12px;
font-size: 14px;
outline: none;
transition: 0.3s;
}

.search-input:focus {
width: 320px;
border-color: #4facfe;
}

/* --- TABEL --- */
.tabel-responsive {
background: #FFFFFF;
border-radius: 15px;
overflow-x: auto;
border: 1px solid #edf2f7;
}

.tabel-saskia {
width: 100%;
border-collapse: collapse;
min-width: 950px;
}

.tabel-saskia th {
background: #F8F9FA;
padding: 18px 15px;
text-align: center;
font-size: 14px;
font-weight: 700;
color: #2D3436;
}

.tabel-saskia td {
padding: 15px 10px;
border-bottom: 1px solid #F1F1F1;
text-align: center;
vertical-align: middle;
font-size: 13px;
}

/* --- TOMBOL AKSI --- */
.btn-struk-biru,
.btn-bayar {
width: 95px;
display: inline-block;
text-align: center;
padding: 8px 10px;
border-radius: 8px;
text-decoration: none;
font-size: 11px;
font-weight: bold;
cursor: pointer;
border: none;
color: white !important;
transition: 0.3s;
box-sizing: border-box;
}

.btn-struk-biru {
background: #5EBBFF;
}

.btn-struk-biru:hover {
background: #32AFFF;
transform: translateY(-2px);
}

.btn-bayar {
background: #2ecc71;
}

.btn-bayar:hover {
background: #27ae60;
transform: translateY(-2px);
}

.btn-cancel {
background: #FF5E62 !important;
}

/* --- STATUS PEMBAYARAN --- */
.status-lunas {
background: #e8f8f0;
color: #2ecc71;
padding: 6px 12px;
border-radius: 20px;
font-weight: bold;
display: inline-block;
font-size: 12px;
}

.status-belum {
background: #f8f9fa;
color: #95a5a6;
padding: 6px 12px;
border-radius: 20px;
font-style: italic;
display: inline-block;
font-size: 12px;
}

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

```
.wrapper-dashboard {
    padding: 20px;
}

.box-container-saskia {
    grid-template-columns: 1fr;
}

.dashboard-header {
    margin-top: 100px;
}

.search-input,
.search-input:focus {
    width: 100%;
}

.nav-actions {
    position: static;
    margin-bottom: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

#logo-container-ta {
    position: static;
    justify-content: center;
    margin-bottom: 20px;
}

/* Styling tambahan untuk Detail & Bayar di Dashboard */
.btn-detail {
    background: #007bff !important; /* Biru Detail */
    width: 95px;
    display: inline-block;
    text-align: center;
    padding: 8px 10px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 11px;
    font-weight: bold;
    color: white !important;
    transition: 0.3s;
}

.btn-detail:hover {
    background: #0056b3 !important;
    transform: translateY(-2px);
}

/* Biar tombol di kolom Aksi kelihatan rapi dan sejajar */
.btn-cancel {
    background: #FF5E62 !important;
    padding: 8px 10px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 11px;
    font-weight: bold;
    color: white !important;
}

/* Memastikan tombol dalam satu kolom tidak terlalu rapat */
.btn-bayar, .btn-cancel, .btn-detail {
    margin: 2px;
    display: inline-block;
}