/**
 * Theme: Deep Teal & Warm Sand (KBM Sarsel Custom Theme)
 * Two-Tone Palette:
 *  - Primary: Deep Teal (#0d9488 / rgb(13, 148, 136))
 *  - Primary Hover: Dark Teal (#0f766e)
 *  - Primary Active/Text: Deepest Teal (#115e59)
 *  - Primary Subtle Bg: Soft Aqua Mint (#e6fffa / #ccfbf1)
 *  - Primary Subtle Border: #99f6e4
 *
 *  - Accent / Sand: Warm Sand / Desert Gold (#d97706 / rgb(217, 119, 6))
 *  - Sand Hover: Rich Amber (#b45309)
 *  - Sand Subtle Bg: Warm Parchment Sand (#fef3c7 / #fffdf5)
 *  - Sand Subtle Border: Golden Sand (#fde68a)
 *  - Sand Text Emphasis: #92400e
 */

:root,
[data-bs-theme="light"],
html {
    /* 1. Deep Teal Primary Variables */
    --bs-primary: #0d9488 !important;
    --bs-primary-rgb: 13, 148, 136 !important;
    --bs-primary-text-emphasis: #0f766e !important;
    --bs-primary-bg-subtle: #e6fffa !important;
    --bs-primary-border-subtle: #99f6e4 !important;
    --bs-link-color: #0d9488 !important;
    --bs-link-hover-color: #0f766e !important;

    /* 2. Warm Sand / Amber Variables */
    --bs-warning: #d97706 !important;
    --bs-warning-rgb: 217, 119, 6 !important;
    --bs-warning-text-emphasis: #92400e !important;
    --bs-warning-bg-subtle: #fef3c7 !important;
    --bs-warning-border-subtle: #fde68a !important;

    /* Sneat Menu Overrides */
    --bs-menu-active-bg: #e6fffa !important;
    --bs-menu-active-color: #0d9488 !important;
    --bs-menu-sub-active-bg: #e6fffa !important;
    --bs-menu-sub-active-color: #0d9488 !important;
}

/* ================== TYPOGRAPHY & BRAND ================== */
.menu .app-brand.demo {
    height: auto !important;
    min-height: 68px !important;
    margin-top: 4px !important;
    margin-bottom: 6px !important;
}

.app-brand .app-brand-text,
.app-brand-text.demo {
    font-size: 1rem !important;
    letter-spacing: normal !important;
}

.app-brand .brand-kbm {
    color: #d97706 !important; /* Warm Sand Amber */
    font-weight: 800 !important;
    letter-spacing: 0.5px;
    line-height: 1.1;
    display: block;
}

.app-brand .brand-sarakan {
    color: #0d9488 !important; /* Deep Teal */
    font-weight: 700 !important;
    letter-spacing: 0.3px;
    line-height: 1.2;
    display: block;
    white-space: nowrap;
}

/* Sidebar collapsed state */
.layout-menu-collapsed:not(.layout-menu-hover) .layout-menu .app-brand-text,
.menu-collapsed:not(:hover) .app-brand .app-brand-text {
    opacity: 0 !important;
    display: none !important;
}

.text-primary {
    color: #0d9488 !important;
}

.text-warning,
.text-sand {
    color: #d97706 !important;
}

a {
    color: #0d9488;
}
a:hover {
    color: #0f766e;
}

/* ================== BUTTONS ================== */
.btn-primary {
    background-color: #0d9488 !important;
    border-color: #0d9488 !important;
    color: #ffffff !important;
    box-shadow: 0 0.125rem 0.25rem 0 rgba(13, 148, 136, 0.4) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    background-color: #0f766e !important;
    border-color: #0f766e !important;
    color: #ffffff !important;
    box-shadow: 0 0.25rem 0.5rem 0 rgba(13, 148, 136, 0.45) !important;
}

.btn-outline-primary {
    color: #0d9488 !important;
    border-color: #0d9488 !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active,
.show > .btn-outline-primary.dropdown-toggle,
.btn-check:checked + .btn-outline-primary {
    background-color: #0d9488 !important;
    border-color: #0d9488 !important;
    color: #ffffff !important;
    box-shadow: 0 0.125rem 0.25rem 0 rgba(13, 148, 136, 0.35) !important;
}

/* Tombol Aksen Warm Sand */
.btn-warning,
.btn-sand {
    background-color: #d97706 !important;
    border-color: #d97706 !important;
    color: #ffffff !important;
    box-shadow: 0 0.125rem 0.25rem 0 rgba(217, 119, 6, 0.4) !important;
}
.btn-warning:hover,
.btn-sand:hover,
.btn-warning:focus,
.btn-sand:focus {
    background-color: #b45309 !important;
    border-color: #b45309 !important;
    color: #ffffff !important;
    box-shadow: 0 0.25rem 0.5rem 0 rgba(217, 119, 6, 0.45) !important;
}

.btn-outline-warning,
.btn-outline-sand {
    color: #d97706 !important;
    border-color: #d97706 !important;
}
.btn-outline-warning:hover,
.btn-outline-sand:hover,
.btn-check:checked + .btn-outline-warning {
    background-color: #d97706 !important;
    border-color: #d97706 !important;
    color: #ffffff !important;
    box-shadow: 0 0.125rem 0.25rem 0 rgba(217, 119, 6, 0.35) !important;
}

/* ================== BADGES & LABELS ================== */
.bg-primary {
    background-color: #0d9488 !important;
    color: #ffffff !important;
}

.bg-label-primary {
    background-color: #e6fffa !important;
    color: #0d9488 !important;
    border: 1px solid rgba(13, 148, 136, 0.2);
}

.badge.bg-primary {
    background-color: #0d9488 !important;
    color: #ffffff !important;
}

.badge.bg-label-primary {
    background-color: #e6fffa !important;
    color: #0f766e !important;
    border: 1px solid rgba(13, 148, 136, 0.2);
}

/* Warm Sand Badges */
.bg-warning,
.bg-sand {
    background-color: #d97706 !important;
    color: #ffffff !important;
}

.bg-label-warning,
.bg-label-sand {
    background-color: #fef3c7 !important;
    color: #b45309 !important;
    border: 1px solid #fde68a !important;
}

.badge.bg-warning,
.badge.bg-sand {
    background-color: #d97706 !important;
    color: #ffffff !important;
}

.badge.bg-label-warning,
.badge.bg-label-sand {
    background-color: #fef3c7 !important;
    color: #92400e !important;
    border: 1px solid #fde68a !important;
    font-weight: 600;
}

/* ================== SIDEBAR NAVIGATION ================== */
.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) {
    background: linear-gradient(72.47deg, #0d9488 22.16%, #14b8a6 76.47%) !important;
    box-shadow: 0px 2px 6px rgba(13, 148, 136, 0.45) !important;
    color: #ffffff !important;
}

.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) .menu-icon {
    color: #ffffff !important;
}

.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) div {
    color: #ffffff !important;
    font-weight: 600;
}

.menu-vertical .menu-link:hover {
    color: #0d9488 !important;
}

.menu-vertical .menu-link:hover .menu-icon {
    color: #0d9488 !important;
}

/* Kartu Status Peran Aktif di Sidebar (dengan aksen Warm Sand Gold) */
.sidebar-active-role-card {
    background-color: #fef3c7 !important;
    border-left: 4px solid #d97706 !important;
    border-radius: 0.375rem;
}
.sidebar-active-role-card .role-title {
    color: #92400e !important;
}
.sidebar-active-role-card i {
    color: #d97706 !important;
}

/* ================== FORM CONTROLS ================== */
.form-control:focus,
.form-select:focus {
    border-color: #0d9488 !important;
    box-shadow: 0 0 0 0.2rem rgba(13, 148, 136, 0.2) !important;
}

.form-check-input:checked {
    background-color: #0d9488 !important;
    border-color: #0d9488 !important;
    box-shadow: 0 2px 4px 0 rgba(13, 148, 136, 0.4) !important;
}

.form-switch .form-check-input:checked {
    background-color: #0d9488 !important;
    border-color: #0d9488 !important;
}

/* ================== NAVS, TABS & PILLS ================== */
.nav-pills .nav-link.active,
.nav-pills .nav-link.active:hover,
.nav-pills .nav-link.active:focus {
    background-color: #0d9488 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 4px 0 rgba(13, 148, 136, 0.4) !important;
}

.nav-tabs .nav-link.active {
    color: #0d9488 !important;
    border-color: #d9dee3 #d9dee3 #0d9488 !important;
    border-bottom: 2px solid #0d9488 !important;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: rgba(13, 148, 136, 0.12) !important;
    color: #0f766e !important;
    font-weight: 600;
}

/* ================== PAGINATION ================== */
.pagination .page-item.active .page-link {
    background-color: #0d9488 !important;
    border-color: #0d9488 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 4px rgba(13, 148, 136, 0.4) !important;
}

.pagination .page-item .page-link:hover {
    color: #0d9488 !important;
    background-color: #e6fffa !important;
}

/* ================== AVATAR & ICONS ================== */
.avatar-initial.bg-label-primary {
    background-color: #e6fffa !important;
    color: #0f766e !important;
}

.avatar-initial.bg-primary {
    background-color: #0d9488 !important;
    color: #ffffff !important;
}

.avatar-initial.bg-label-warning {
    background-color: #fef3c7 !important;
    color: #b45309 !important;
}

.avatar-initial.bg-warning {
    background-color: #d97706 !important;
    color: #ffffff !important;
}

/* ================== PROGRESS BARS & ALERTS ================== */
.progress-bar {
    background-color: #0d9488;
}

.alert-warning {
    background-color: #fffbeb !important;
    border-color: #fde68a !important;
    color: #92400e !important;
}

/* ================== DUA NADA (TEAL & WARM SAND) CARDS ================== */
.border-primary {
    border-color: #0d9488 !important;
}

.border-warning,
.border-sand {
    border-color: #fde68a !important;
}

.bg-teal-gradient {
    background: linear-gradient(135deg, #0d9488 0%, #115e59 100%) !important;
}

.bg-sand-gradient {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
}

/* Kotak Sorotan / Parchment Sand (Posisi Bacaan & Catatan) */
.box-warm-sand {
    background-color: #fffdf5 !important;
    border: 1px solid #f6e3c5 !important;
    border-left: 4px solid #d97706 !important;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
}