/* File: assets/css/style.css */

body {

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    background-color: #f4f6f9;

    margin: 0;

    padding: 0;

    display: flex;

    flex-direction: column;

    height: 100vh;

}



/* Header Atas (Top Bar) */

.top-header {

    background-color: #0f172a; /* Biru Dongker */

    color: white;

    padding: 0 20px;

    height: 60px;

    display: flex;

    align-items: center;

    justify_content: space-between;

    position: fixed;

    width: 100%;

    top: 0;

    z-index: 1000;

    box-sizing: border-box;

}



.top-header h2 {

    margin: 0;

    font-size: 18px;

    font-weight: 600;

}



.logout-btn {

    color: #cbd5e1;

    text-decoration: none;

    font-size: 14px;

    display: flex;

    align-items: center;

    gap: 5px;

}

.logout-btn:hover { color: white; }



/* Layout Utama (Bawah Header) */

.main-wrapper {

    display: flex;

    margin-top: 60px; /* Supaya tidak tertutup header */

    height: calc(100vh - 60px);

}



/* Sidebar (Menu Samping) */

.sidebar {

    width: 250px;

    background-color: #fff;

    border-right: 1px solid #e2e8f0;

    overflow-y: auto;

    flex-shrink: 0; /* Agar sidebar tidak mengecil */

    display: flex;

    flex-direction: column;

    padding-top: 20px;

}



.sidebar a {

    text-decoration: none;

    color: #475569;

    padding: 12px 25px;

    display: flex;

    align-items: center;

    gap: 12px; /* Jarak icon dan teks */

    font-size: 15px;

    transition: 0.2s;

}



.sidebar a:hover {

    background-color: #f1f5f9;

    color: #0f172a;

}



.sidebar a.active {

    background-color: #e0f2fe; /* Biru muda banget */

    color: #0284c7; /* Biru cerah */

    border-right: 3px solid #0284c7;

    font-weight: 600;

}



.sidebar i {

    width: 20px; /* Lebar tetap agar teks rata */

    text-align: center;

}



/* Konten Utama (Sebelah Kanan) */

.content {

    flex-grow: 1;

    padding: 30px;

    overflow-y: auto;

}



/* Kotak Login (Tetap dipakai) */

.login-wrapper {

    display: flex; justify-content: center; align-items: center; height: 100vh;

    margin-top: 0;

}

.login-box {

    background: white; padding: 30px; border-radius: 8px;

    box-shadow: 0 4px 6px rgba(0,0,0,0.1); width: 350px; text-align: center;

}

.form-group { margin-bottom: 15px; text-align: left; }

.form-control { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; }

.btn-primary { background-color: #0f172a; color: white; border: none; padding: 10px 20px; width: 100%; border-radius: 4px; cursor: pointer; }



/* Dashboard Cards */

.card {

    background: white;

    padding: 20px;

    border-radius: 8px;

    box-shadow: 0 1px 3px rgba(0,0,0,0.1);

    margin-bottom: 20px;

}

/* Pastikan ini ada di style.css */

.seat-container {

    display: flex;

    flex-direction: column; /* Baris (A, B, C) disusun ke bawah */

    gap: 8px;

    align-items: center;

    background: #fff;

    padding: 20px;

    overflow-x: auto;

}



.seat-row {

    display: flex; /* Kursi (1, 2, 3) disusun ke samping */

    flex-direction: row;

    gap: 5px;

}



.seat {

    width: 25px;

    height: 25px;

    background-color: #e2e8f0;

    border: 1px solid #cbd5e1;

    font-size: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    border-radius: 4px;

}



.seat-label-left {

    width: 25px;

    font-weight: bold;

    display: flex;

    align-items: center;

}



.seat {

    width: 22px;

    height: 22px;

    background-color: #e2e8f0; /* Default: Abu-abu (Kosong) */

    border: 1px solid #cbd5e1;

    font-size: 8px;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    border-radius: 3px;

    user-select: none;

}



.seat:hover { background-color: #94a3b8; }



/* Warna Status Sesuai Request */

.seat.blocked { background-color: #000 !important; color: white; } /* Hitam */

.seat.vip { border: 2px solid #f59e0b; } /* Contoh tanda VIP */

.seat.paid { background-color: #ef4444 !important; color: white; } /* Merah */

.seat.booked { background-color: #eab308 !important; } /* Kuning */

.seat.selecting { background-color: #86efac !important; } /* Hijau Muda */

.seat.other-selecting { background-color: #7dd3fc !important; } /* Biru Muda */



.stage {

    width: 60%;

    height: 40px;

    background: #475569;

    color: white;

    text-align: center;

    line-height: 40px;

    margin-bottom: 30px;

    border-radius: 0 0 50px 50px;

    font-weight: bold;

}

.gap-right {
    margin-right: 40px !important; /* Jarak lorong, sesuaikan angkanya */
}

/* Opsional: Jika ingin Blok Tengah pas di tengah layar */
.seat-row {
    justify-content: center; /* Pastikan baris kursi rata tengah */
}