/*
 * KlambiBali Luxury Brand Theme
 * Palette extracted from official logo:
 * - Primary Dark Olive: #283023
 * - Secondary Dark Olive: #1e241a
 * - Luxury Champagne Gold: #c2ae79
 * - Gold Hover / Accent: #d6c493
 * - Gold Dark / Border: #a8945f
 * - Neutral Soft Cream: #fbf9f5
 */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;1,400&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
    --kb-dark-olive: #283023;
    --kb-dark-hover: #353e2e;
    --kb-darker: #1b2117;
    --kb-gold: #c2ae79;
    --kb-gold-light: #e0d1aa;
    --kb-gold-dark: #a8945f;
    --kb-gold-rgb: 194, 174, 121;
    --kb-cream: #faf8f5;
    --kb-cream-border: #ede6da;
    
    --bs-primary: #c2ae79;
    --bs-primary-rgb: 194, 174, 121;
    --bs-link-color: #8f7943;
    --bs-link-hover-color: #6b582b;
}

body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--kb-cream);
    color: #2b3327;
}

/* ----------------------------------------------------
 * BRAND HEADER & SIDEBAR
 * ---------------------------------------------------- */
.app-sidebar,
.main-sidebar,
[data-bs-theme="dark"] .app-sidebar,
.sidebar-dark-primary {
    background-color: var(--kb-dark-olive) !important;
    background: linear-gradient(180deg, #242a1f 0%, #283023 50%, #1c2218 100%) !important;
    border-right: 1px solid rgba(194, 174, 121, 0.2) !important;
}

.app-sidebar .sidebar-brand,
.main-sidebar .brand-link {
    background-color: #1e241a !important;
    border-bottom: 1px solid rgba(194, 174, 121, 0.25) !important;
    padding: 0.85rem 1rem !important;
}

.brand-text {
    font-family: 'Playfair Display', serif;
    letter-spacing: 1px;
}

/* Sidebar navigation links */
.sidebar .nav-sidebar .nav-item .nav-link,
.app-sidebar .nav-link {
    color: #dbe2d6 !important;
    border-radius: 6px;
    margin: 2px 8px;
    font-size: 13.5px;
    transition: all 0.2s ease-in-out;
}

.sidebar .nav-sidebar .nav-item .nav-link i,
.app-sidebar .nav-link i {
    color: var(--kb-gold) !important;
    font-size: 1.1rem;
    margin-right: 8px;
}

.sidebar .nav-sidebar .nav-item .nav-link:hover,
.app-sidebar .nav-link:hover {
    background-color: var(--kb-dark-hover) !important;
    color: #ffffff !important;
}

/* Active Nav item */
.sidebar .nav-sidebar .nav-item .nav-link.active,
.app-sidebar .nav-link.active {
    background: linear-gradient(135deg, #c2ae79 0%, #a8945f 100%) !important;
    color: #1b2117 !important;
    font-weight: 700 !important;
    box-shadow: 0 3px 8px rgba(194, 174, 121, 0.35) !important;
}

.sidebar .nav-sidebar .nav-item .nav-link.active i,
.app-sidebar .nav-link.active i {
    color: #1b2117 !important;
}

/* Submenu treeview */
.nav-treeview {
    background-color: rgba(22, 27, 19, 0.6) !important;
    border-left: 2px solid rgba(194, 174, 121, 0.4);
    margin-left: 14px !important;
    border-radius: 0 6px 6px 0;
}

.sidebar .nav-header {
    color: var(--kb-gold-light) !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;
    padding: 1rem 1rem 0.35rem 1rem !important;
    opacity: 0.85;
}

/* ----------------------------------------------------
 * TOP NAVBAR
 * ---------------------------------------------------- */
.app-header,
.main-header.navbar {
    background-color: #ffffff !important;
    border-bottom: 2px solid var(--kb-gold) !important;
    box-shadow: 0 2px 10px rgba(40, 48, 35, 0.05) !important;
}

.main-header.navbar .nav-link {
    color: var(--kb-dark-olive) !important;
    font-weight: 500;
}

.main-header.navbar .nav-link:hover {
    color: var(--kb-gold-dark) !important;
}

/* ----------------------------------------------------
 * BUTTONS & ACCENTS
 * ---------------------------------------------------- */
.btn-primary {
    background: linear-gradient(135deg, #c2ae79 0%, #a8945f 100%) !important;
    border-color: #a8945f !important;
    color: #1b2117 !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 6px rgba(194, 174, 121, 0.3) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, #d6c493 0%, #bca76f 100%) !important;
    border-color: #9c8855 !important;
    color: #141811 !important;
}

.btn-outline-primary {
    border-color: var(--kb-gold-dark) !important;
    color: #7a6635 !important;
    font-weight: 600;
}

.btn-outline-primary:hover {
    background: linear-gradient(135deg, #c2ae79 0%, #a8945f 100%) !important;
    border-color: #a8945f !important;
    color: #1b2117 !important;
}

/* ----------------------------------------------------
 * BADGES & CARD ACCENTS
 * ---------------------------------------------------- */
.badge.bg-primary {
    background-color: var(--kb-gold) !important;
    color: #1b2117 !important;
    font-weight: 700;
}

.badge-gold {
    background: linear-gradient(135deg, #c2ae79 0%, #a8945f 100%) !important;
    color: #1b2117 !important;
    font-weight: 700;
}

.badge-olive {
    background-color: var(--kb-dark-olive) !important;
    color: #ffffff !important;
}

.text-primary {
    color: #8c7641 !important;
}

.border-primary {
    border-color: var(--kb-gold) !important;
}

/* Luxury card styling */
.card {
    border-color: var(--kb-cream-border) !important;
    box-shadow: 0 2px 8px rgba(40, 48, 35, 0.04) !important;
}

.card-header {
    border-bottom-color: var(--kb-cream-border) !important;
}

/* Custom Table Head Styling */
.table thead th {
    background-color: #f5f0e6 !important;
    color: #283023 !important;
    font-weight: 700;
    font-size: 12.5px;
    border-bottom: 2px solid var(--kb-gold) !important;
}