/* ===== CUSTOM COLOR THEME: CREAM & DARK BROWN ===== */
:root {
    --cream-light: #faf3e8;
    --cream: #f5efe6;
    --cream-dark: #e6d5b8;
    --brown-dark: #3a2321;
    --brown-medium: #4b2e2b;
    --brown-light: #5e3e3a;
    --brown-accent: #8b5a2b;
    --brown-soft: #c7b7a3;
    --text-dark: #2d2d2d;
    --text-light: #ffffff;
    --text-muted: #6b4f4a;
}

/* ===== BODY - Background seragam ===== */
body {
    background-color: var(--cream-light) !important;
    color: var(--text-dark) !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ===== HEADER (kekal coklat) ===== */
.w-full.bg-\[\#4b2e2b\] {
    background-color: #4b2e2b !important;
    color: white !important;
}

.w-full.bg-\[\#4b2e2b\] h1 {
    color: white !important;
}

.w-full.bg-\[\#4b2e2b\] p {
    color: #e6d5b8 !important;
}

/* ===== DARK MODE BUTTON (dalam header) ===== */
#toggleDarkMode {
    background-color: var(--cream) !important;
    color: var(--brown-medium) !important;
    border: 2px solid var(--brown-accent) !important;
    font-weight: bold !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
}

#toggleDarkMode:hover {
    background-color: var(--cream-dark) !important;
}

/* ===== SIDEBAR (kekal coklat gelap) ===== */
#sidebar {
    background-color: #3a2321 !important;
    min-width: 250px !important;
    color: white !important;
}

#sidebar h2 {
    color: white !important;
    border-bottom: 2px solid #8b5a2b !important;
}

#sidebar ul li a {
    background-color: #4b2e2b !important;
    color: white !important;
    border: 2px solid #8b5a2b !important;
}

#sidebar ul li a:hover {
    background-color: #5e3e3a !important;
}

#sidebar ul li a[href="logout.php"] {
    background-color: #8b5a2b !important;
}

/* ===== MAIN CONTENT - Background seragam dengan body ===== */
.flex-1 {
    background-color: var(--cream-light) !important;
}

.flex-1.p-6 {
    background-color: var(--cream-light) !important;
}

.flex-1 h2, .flex-1 h3 {
    color: #3a2321 !important;
}

/* ===== FORM - Background putih untuk contrast ===== */
label {
    color: #3a2321 !important;
    font-weight: 600 !important;
}

select, input {
    border: 2px solid #c7b7a3 !important;
    background-color: white !important;
    color: #3a2321 !important;
    border-radius: 8px !important;
}

/* ===== ROOM CARDS - Background putih ===== */
.grid .border.rounded-lg.shadow {
    background-color: white !important;
    border: 2px solid #e6d5b8 !important;
}

.grid .border.rounded-lg.shadow h4 {
    color: #3a2321 !important;
}

/* ===== BUTTONS ===== */
button, [type="submit"], [type="button"] {
    background-color: #4b2e2b !important;
    color: white !important;
    border: 2px solid #8b5a2b !important;
    font-weight: bold !important;
    border-radius: 8px !important;
}

button:hover {
    background-color: #5e3e3a !important;
}

/* Pilih Bilik Button */
.pilih-bilik {
    background-color: #4b2e2b !important;
    color: white !important;
}

.pilih-bilik.bg-\[\#8b5a2b\] {
    background-color: #8b5a2b !important;
}

/* Menu Toggle Button */
#menuToggle {
    background-color: transparent !important;
    border: none !important;
}

#menuToggle span {
    background-color: white !important;
}

/* ===== MODAL ===== */
#tempahanModal .bg-white {
    background-color: white !important;
}

#tempahanModal h2 {
    color: #3a2321 !important;
}

#closeTempahanModal {
    background-color: white !important;
    color: #3a2321 !important;
    border: 2px solid #8b5a2b !important;
}