/* ===== Primary brand color ===== */
:root {
    --primary: #2F5A99; /* base */
    --primary-contrast: #ffffff; /* teks di atas primary */
    --primary-hover: #284f88; /* ~10% lebih gelap */
    --primary-active: #224372; /* ~20% lebih gelap */
    --primary-light: #3a6ab3; /* ~10% lebih terang (untuk gradient) */
    --primary-focus-ring: rgba(47, 90, 153, 0.5);
}

/* ===== Buttons ===== */
.btn-primary {
    color: var(--primary-contrast) !important;
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    color: var(--primary-contrast) !important;
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}

.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    color: var(--primary-contrast) !important;
    background-color: var(--primary-active) !important;
    border-color: var(--primary-active) !important;
}

.btn-primary:focus,
.btn-primary.focus {
    box-shadow: 0 0 0 .2rem var(--primary-focus-ring) !important;
}

/* Outline */
.btn-outline-primary {
    color: var(--primary) !important;
    border-color: var(--primary) !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    color: var(--primary-contrast) !important;
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

/* Flat variant (AdminLTE) */
.btn-flat.btn-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--primary-contrast) !important;
}

/* ===== Backgrounds / Text / Border ===== */
.bg-primary,
.small-box.bg-primary,
.info-box.bg-primary,
.card.bg-primary,
.callout.callout-primary,
.alert-primary {
    background-color: var(--primary) !important;
    color: var(--primary-contrast) !important;
}

.bg-gradient-primary {
    background: linear-gradient(180deg, var(--primary-light), var(--primary)) !important;
    color: var(--primary-contrast) !important;
}

.text-primary {
    color: var(--primary) !important;
}

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

/* ===== Badges ===== */
.badge-primary,
.badge.bg-primary {
    background-color: var(--primary) !important;
    color: var(--primary-contrast) !important;
}

/* ===== Cards / Outlines ===== */
.card-outline.card-primary {
    border-top: 3px solid var(--primary) !important;
}

/*!* ===== Nav / Tabs / Pills ===== *!
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--primary) !important;
    color: var(--primary-contrast) !important;
}*/

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--primary) !important;
    border-color: var(--primary) var(--primary) transparent !important;
}

/* ===== Pagination ===== */
.page-item.active .page-link {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--primary-contrast) !important;
}

/* ===== Sidebar skins ===== */
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-light-primary .nav-sidebar > .nav-item > .nav-link.active {
    background-color: var(--primary) !important;
    color: var(--primary-contrast) !important;
}

/* ===== Progress / Misc ===== */
.progress-bar.bg-primary {
    background-color: var(--primary) !important;
}

.direct-chat-primary .right > .direct-chat-text,
.direct-chat-text.bg-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--primary-contrast) !important;
}

/* ===== Forms focus (ring warna primary) ===== */
.custom-control-input:focus ~ .custom-control-label::before,
.form-control:focus,
.custom-select:focus {
    box-shadow: 0 0 0 .2rem var(--primary-focus-ring) !important;
    border-color: var(--primary) !important;
}

/* ===== Links utilitas (opsional) ===== */
a.text-primary:hover,
a.text-primary:focus {
    color: var(--primary-active) !important;
}

/* ===== Utilities tambahan yang sering muncul ===== */
.timeline > li > .timeline-item > .time.text-primary {
    color: var(--primary) !important;
}

.page-link {
    color: var(--primary);
}

.page-link:hover {
    color: var(--primary-active);
}

label.required::after {
    content:'*';
    color: red;
}