/* ==========================================================
   THEME SYARIAH - IBS GEN 2.5
   ========================================================== */

/* ==========================================================
   1️⃣ PRIMARY COLORS
   ========================================================== */
.bg-primary {
    background-color: rgba(70, 150, 40, 0.95) !important; /* Deep Emerald */
    color: #ffffff !important;
}

.bg-success {
    background-color: #8AAE38 !important; /* Hijau Syariah */
    color: #ffffff !important;
}

.bg-info {
    background-color: rgba(90, 200, 177, 0.95) !important; /* Aqua Soft */
    color: #ffffff !important;
}
.bg-info:hover {
    background-color: rgba(75, 185, 160, 0.95) !important;
}
.bg-info-light {
    background-color: rgba(120, 220, 197, 0.85) !important; /* Aqua Light */
    color: #2d3a42 !important;
}

.bg-warning {
    background-color: rgba(214, 190, 93, 0.95) !important; /* Olive Gold Soft */
    color: #3a3a3a !important;
}

.bg-danger {
    background-color: rgba(180, 91, 103, 0.95) !important; /* Burgundy Rose */
    color: #ffffff !important;
}
.bg-danger:hover {
    background-color: rgba(160, 80, 92, 0.95) !important;
}

/* ==========================================================
   2️⃣ BUTTONS
   ========================================================== */

/* ✅ SUCCESS */
.btn-success {
    background-color: #96BF3D !important;
    border-color: #96BF3D !important;
    color: #fff !important;
    font-weight: 600;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active {
    background-color: #88AD36 !important;
    border-color: #88AD36 !important;
}
.btn-success[disabled],
.btn-success.disabled {
    background-color: #b5d77a !important;
    border-color: #b5d77a !important;
    color: #fff !important;
}

/* 💧 INFO */
.btn-info {
    background-color: rgba(90, 200, 177, 0.95) !important; /* Aqua Soft */
    border-color: rgba(47, 161, 142, 1) !important;
    color: #ffffff !important;
    transition: all 0.2s ease-in-out;
}
.btn-info:hover,
.btn-info:focus,
.btn-info:active {
    background-color: rgba(47, 161, 142, 0.95) !important;
    border-color: rgba(37, 130, 114, 1) !important;
}

/* 🌾 WARNING */
.btn-warning {
    background: rgba(193, 165, 46, 0.95) !important; /* Olive Gold */
    border: 1px solid rgba(160, 137, 38, 1) !important;
    color: #fff !important;
}
.btn-warning:hover {
    background: rgba(175, 150, 42, 0.95) !important;
}

/* ❤️ DANGER */
.btn-danger {
    background-color: rgba(180, 91, 103, 0.95) !important; /* Burgundy rose */
    border-color: rgba(160, 70, 80, 1) !important;
    color: #ffffff !important;
    transition: all 0.2s ease-in-out;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    background-color: rgba(160, 70, 80, 0.95) !important;
    border-color: rgba(140, 55, 65, 1) !important;
}

/* ==========================================================
   3️⃣ PANEL & POPUP
   ========================================================== */
.popup-header {
    background-color: #96BF3D !important;
    color: #fff !important;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    font-weight: 600;
    text-align: center;
}
.popup-header::after {
    border-top-color: #96BF3D !important;
}

.panel-success {
    border-color: #96BF3D !important;
}
.panel-success > .panel-heading {
    background-color: #96BF3D !important;
    border-color: #96BF3D !important;
    color: #fff !important;
    font-weight: 600;
}
.panel-success > .panel-body {
    background-color: #f8fbf3;
}
.panel-success:hover {
    box-shadow: 0 2px 8px rgba(150, 191, 61, 0.3);
    transition: all .25s ease-in-out;
}

/* ==========================================================
   4️⃣ NAVIGATION (Sidebar & Tabs)
   ========================================================== */

/* Sidebar Active */
.navigation > li.active:focus > a,
.navigation > li.active:hover > a,
.navigation > li.active > a {
    background-color: #6C9832 !important;
    color: #fff !important;
    border-left: 3px solid rgba(255, 255, 255, 0.3);
}
.navigation > li.active > a:hover {
    background-color: #7FAE3B !important;
}
.navigation > li.active > a i {
    color: #fff !important;
}

/* Tabs */
.nav-tabs {
    border-bottom: 2px solid #96BF3D !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus,
.toolbar-tabs > li.active > a {
    background-color: #96BF3D !important;
    color: #fff !important;
    border: 1px solid #96BF3D !important;
    border-bottom-color: transparent !important;
    font-weight: 600;
}
.nav-tabs > li > a {
    color: #555 !important;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    transition: all 0.2s ease-in-out;
}
.nav-tabs > li > a:hover {
    background-color: #A8D152 !important;
    color: #fff !important;
    border: 1px solid #A8D152 !important;
}
.toolbar-tabs > li > a:hover,
.toolbar-tabs > li.active > a {
    background-color: #88AD36 !important;
    color: #fff !important;
    border-color: #88AD36 !important;
}

/* ==========================================================
   5️⃣ LABELS
   ========================================================== */
.label.label-success {
    background-color: #96BF3D !important;
    color: #ffffff !important;
}
.label.label-info {
    background-color: rgba(90, 200, 177, 0.95) !important;
    color: #ffffff !important;
}
.label.label-warning {
    background-color: rgba(193, 165, 46, 0.95) !important;
    color: #ffffff !important;
}
.label.label-danger {
    background-color: rgba(180, 91, 103, 0.95) !important;
    color: #ffffff !important;
}

/* ==========================================================
   6️⃣ JGROWL NOTIFICATIONS
   ========================================================== */
.jGrowl { z-index: 9999 !important; }

.jGrowl-notification {
    background: rgba(150, 191, 61, 0.95) !important; /* hijau utama IBSGen2 */
    border: 1px solid rgba(150, 191, 61, 0.85) !important;
    color: #fff !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    font-weight: 500;
    border-radius: 6px !important;
    backdrop-filter: blur(4px);
}
.jGrowl-notification .jGrowl-header {
    font-weight: 600;
    color: #fff !important;
    margin-bottom: 3px;
}
.jGrowl-notification .jGrowl-message {
    color: #fff !important;
}
.jGrowl-notification.growl-success,
.jGrowl-notification.ui-state-highlight {
    background: linear-gradient(90deg, #88AD36, #96BF3D) !important;
    border-color: #88AD36 !important;
}
.jGrowl-notification.growl-info {
    background: rgba(90, 200, 177, 0.95) !important;
    border: 1px solid rgba(47, 161, 142, 1);
}
.jGrowl-notification.growl-danger {
    background: rgba(180, 91, 103, 0.95) !important;
    border: 1px solid rgba(160, 70, 80, 1);
}
.jGrowl-notification.growl-warning {
    background: #E6B839 !important;
}
.jGrowl-notification.growl-warning .jGrowl-header {
    color: #8B0000 !important; /* dark red */
}

.jGrowl-notification.growl-warning .jGrowl-message {
    color: #B00000 !important; /* red */
}
.jGrowl-notification.growl-error {
    background: #C43B3B !important;
}
.jGrowl-notification .ui-icon {
    color: #fff !important;
    opacity: 0.8;
}
.jGrowl-notification .ui-icon:hover {
    opacity: 1;
}

/* ==========================================================
   7️⃣ DATEPICKER
   ========================================================== */
.ui-datepicker-header {
    background-color: #8AAE38 !important;
    color: #fff !important;
    border: none !important;
}
.ui-datepicker-title {
    color: #fff !important;
    font-weight: 600;
}
.ui-datepicker-prev, .ui-datepicker-next {
    background-color: #A6C63D !important;
    border-radius: 4px;
}
.ui-datepicker-prev:hover, .ui-datepicker-next:hover {
    background-color: #7FA12E !important;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
a.ui-state-default {
    background: #F5F8F2 !important;
    color: #3E4E1F !important;
    border: 1px solid #C5D5A8 !important;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
a.ui-state-hover {
    background: #D4E7B3 !important;
    color: #2E4523 !important;
    border-color: #BFD99A !important;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-state-active {
    background: #8AAE38 !important;
    color: #fff !important;
    border-color: #7FA12E !important;
}
.ui-datepicker-other-month .ui-state-default {
    color: #B0B0B0 !important;
    background: #F9F9F9 !important;
}
.ui-state-focus {
    outline: none !important;
    box-shadow: none !important;
}

/* ==========================================================
   TEXT UTILITIES — THEME SYARIAH
   (darker tones for better readability on light backgrounds)
   ========================================================== */

/* ✅ Success (Green Leaf Deep) */
.text-success {
    color: #6C9832 !important;
}

/* 💧 Info (Tosca Deep) */
.text-info {
    color: #2FA18E !important; /* se-nuansa dengan Aqua Soft, tapi lebih gelap */
}

/* 🌾 Warning (Olive Gold Deep) */
.text-warning {
    color: #C1A52E !important;
}

/* ❤️ Danger (Burgundy Rose Deep) */
.text-danger {
    color: #B45B67 !important;
}

/* (Optional) Link hover states agar ada feedback visual */
a.text-success:hover  { color: #5E882B !important; }
a.text-info:hover     { color: #278F7E !important; }
a.text-warning:hover  { color: #AC932A !important; }
a.text-danger:hover   { color: #9E4C59 !important; }

/* Checkbox success hijau Syariah */
.checkbox-success input[type="checkbox"]:checked + label::before,
.checkbox-success .checker span.checked::before {
    background-color: #96BF3D !important;
    border-color: #96BF3D !important;
}

/* Untuk uniform plugin (kalau pakai Uniform.js atau jQuery Uniform) */
.checkbox-success .checker span {
    border: 2px solid #96BF3D !important;
}

.checkbox-success .checker span.checked {
    background-color: #96BF3D !important;
}

/* Label warna teks juga bisa ikut hijau */
.checkbox-success label {
    color: #4C8C2B !important; /* opsional, biar lebih soft dari hijau tua */
}

.swal2-confirm.swal2-styled {
    background: linear-gradient(90deg, #88AD36, #96BF3D) !important;
    border: 1px solid #88AD36 !important;
    color: #fff !important;
    box-shadow: none !important;
}

.swal2-confirm.swal2-styled:focus {
    box-shadow: 0 0 0 3px rgba(136, 173, 54, 0.5) !important;
}