/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER
STYLESHEETS. WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR
STYLES IT'S BETTER LIKE THIS.  */

/* ====================================================================================
   DAMAI — TEMA HIJU
   Palet: primary #1e8e3e, dark #156b2e, light rgba(30,142,62,0.12)
   ==================================================================================== */
:root {
    --bs-primary: #1e8e3e;
    --bs-primary-rgb: 30, 142, 62;
}

/* ====================================================================================
   FONT MODERN — Plus Jakarta Sans
   ==================================================================================== */
body,
html,
h1, h2, h3, h4, h5, h6,
p, span, a, li, td, th, label, small,
.form-control, .form-select, .input-group-text,
.btn, .badge, .dropdown-item, .nav-link,
.table, table.dataTable,
.card-title, .card-header {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ---- Buttons ---- */
.btn-primary {
    background-color: #1e8e3e !important;
    background-image: none !important;
    border-color: #1e8e3e !important;
    color: #fff !important;
    box-shadow: none !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus {
    background-color: #156b2e !important;
    background-image: none !important;
    border-color: #156b2e !important;
    color: #fff !important;
}
.btn-primary:active,
.btn-primary.active,
.btn-check:active + .btn-primary,
.btn-check:checked + .btn-primary,
.show > .btn-primary.dropdown-toggle {
    background-color: #156b2e !important;
    border-color: #156b2e !important;
    color: #fff !important;
}
.btn-outline-primary {
    border-color: #1e8e3e !important;
    color: #1e8e3e !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: #1e8e3e !important;
    border-color: #1e8e3e !important;
    color: #fff !important;
}

/* ---- btn-info (scan/detail) ikut tema hijau ---- */
.btn-info {
    background-color: #0f5132 !important;
    background-image: none !important;
    border-color: #0f5132 !important;
    color: #fff !important;
    box-shadow: none !important;
}
.btn-info:hover,
.btn-info:focus,
.btn-info.focus {
    background-color: #0a3622 !important;
    background-image: none !important;
    border-color: #0a3622 !important;
    color: #fff !important;
}
.btn-info:active,
.btn-info.active,
.btn-check:active + .btn-info,
.btn-check:checked + .btn-info,
.show > .btn-info.dropdown-toggle {
    background-color: #0a3622 !important;
    border-color: #0a3622 !important;
    color: #fff !important;
}
.btn-info:focus,
.btn-info:active:focus,
.btn-info.dropdown-toggle.show:focus {
    box-shadow: 0 0 0 0.18rem rgba(15, 81, 50, 0.25) !important;
}

/* ---- Text & background helpers ---- */
.text-primary { color: #1e8e3e !important; }
.bg-primary { background-color: #1e8e3e !important; }
.text-info { color: #1e8e3e !important; }
.bg-info { background-color: rgba(30, 142, 62, 0.12) !important; }
a { color: #1e8e3e; }
a:hover { color: #156b2e; }

/* ---- Form controls ---- */
.form-control:focus,
.form-select:focus,
.input-group:focus-within .form-control {
    border-color: #1e8e3e !important;
    box-shadow: 0 0 0.25rem rgba(30, 142, 62, 0.25) !important;
}
/* Textarea & input native tambahan */
textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input:not([type]):focus {
    border-color: #1e8e3e !important;
    box-shadow: 0 0 0.25rem rgba(30, 142, 62, 0.25) !important;
}

/* ====================================================================================
   FOCUS & INTERAKSI — semua focus-ring / hover ungu Vuexy diubah ke hijau
   ==================================================================================== */
/* Checkbox, radio, switch */
.form-check-input:focus {
    border-color: #1e8e3e !important;
    box-shadow: 0 2px 4px 0 rgba(30, 142, 62, 0.4) !important;
}
.form-check-input:checked,
.form-check-input:indeterminate {
    background-color: #1e8e3e !important;
    border-color: #1e8e3e !important;
    box-shadow: 0 2px 4px 0 rgba(30, 142, 62, 0.4) !important;
}
.form-switch .form-check-input:checked {
    background-color: #1e8e3e !important;
    border-color: #1e8e3e !important;
}

/* Focus-ring tombol generik (Vuexy memakai ungu pada .btn:focus) */
.btn-check:focus + .btn,
.btn:focus,
.btn.focus,
.btn:active:focus,
.btn.active:focus,
.show > .btn.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.18rem rgba(30, 142, 62, 0.25) !important;
}
.btn-outline-primary:focus,
.btn-outline-primary:active:focus,
.btn-outline-primary.dropdown-toggle.show:focus {
    box-shadow: 0 0 0 0.18rem rgba(30, 142, 62, 0.25) !important;
}
.input-group:focus-within .input-group-text {
    border-color: #1e8e3e !important;
}

/* Dropdown hover/focus (sebelumnya ungu) */
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgba(30, 142, 62, 0.12) !important;
    color: #1e8e3e !important;
}

/* Select2 (theme: default) — dropdown search, opsi highlight, pilihan terpilih */
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default .select2-selection:focus {
    border-color: #1e8e3e !important;
    box-shadow: 0 0 0.25rem rgba(30, 142, 62, 0.25) !important;
}
.select2-container--default .select2-search__field:focus {
    border-color: #1e8e3e !important;
    box-shadow: 0 0 0.25rem rgba(30, 142, 62, 0.25) !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
    background-color: rgba(30, 142, 62, 0.12) !important;
    color: #1e8e3e !important;
}
.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: #1e8e3e !important;
    color: #fff !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: rgba(30, 142, 62, 0.12) !important;
    border: 1px solid #1e8e3e !important;
    color: #1e8e3e !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #1e8e3e !important;
    border-right: 1px solid #1e8e3e !important;
}

/* Flatpickr — tanggal terpilih & hover */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange {
    background: #1e8e3e !important;
    border-color: #1e8e3e !important;
    box-shadow: none !important;
}
.flatpickr-day.inRange {
    background: rgba(30, 142, 62, 0.15) !important;
    border-color: rgba(30, 142, 62, 0.15) !important;
    box-shadow: -5px 0 0 rgba(30, 142, 62, 0.15), 5px 0 0 rgba(30, 142, 62, 0.15) !important;
}
.flatpickr-day:focus,
.flatpickr-day:hover {
    background: rgba(30, 142, 62, 0.12) !important;
    border-color: #1e8e3e !important;
}
.flatpickr-day.today {
    border-color: #1e8e3e !important;
}
.flatpickr-day.today:hover {
    background: #1e8e3e !important;
    border-color: #1e8e3e !important;
    color: #fff !important;
}

/* ---- Badges & pills ---- */
.badge.bg-primary { background-color: #1e8e3e !important; }

/* ---- Pagination ---- */
.page-item.active .page-link {
    background-color: #1e8e3e !important;
    border-color: #1e8e3e !important;
    color: #fff !important;
}

/* ---- List & dropdown active ---- */
.list-group-item.active {
    background-color: #1e8e3e !important;
    border-color: #1e8e3e !important;
}
.dropdown-item.active,
.dropdown-item:active {
    background-color: #1e8e3e !important;
    color: #fff !important;
}

/* ---- Nav tabs / pills ---- */
.nav-pills .nav-link.active,
.nav-tabs .nav-link.active {
    color: #1e8e3e !important;
}

/* ---- Avatar light-primary (kartu dashboard) ---- */
.avatar.bg-light-primary {
    background-color: rgba(30, 142, 62, 0.12) !important;
}
.avatar.bg-light-primary .avatar-content {
    color: #1e8e3e !important;
}

/* ---- Scroll-to-top button ---- */
.scroll-top {
    background-color: #1e8e3e !important;
    border-color: #1e8e3e !important;
}

/* ---- Progress bar ---- */
.progress-bar {
    background-color: #1e8e3e !important;
}

/* ====================================================================================
   SIDEBAR (main-menu) — gradient hijau solid menggantikan background image
   Specificity dipaksa melebihi selector Vuexy inti:
   - .vertical-layout.vertical-menu-modern .main-menu              (vertical-menu.css)
   - .main-menu.menu-light / .main-menu.menu-light .navigation     (components.css)
   ==================================================================================== */
.vertical-layout.vertical-menu-modern .main-menu,
.vertical-layout.vertical-menu-modern .main-menu.menu-light,
.vertical-layout.vertical-menu-modern .main-menu.menu-light .navigation,
.vertical-layout.vertical-menu-modern .main-menu .navigation {
    background: linear-gradient(180deg, #1e8e3e 0%, #156b2e 100%) !important;
    background-image: none !important;
    background-color: #1e8e3e !important;
    color: #fff !important;
}
.vertical-layout.vertical-menu-modern .main-menu .navbar-header {
    background: transparent !important;
}
.vertical-layout.vertical-menu-modern .main-menu .brand-text {
    color: #fff !important;
}

/* Label grup menu (DATA MASTER & JADWAL, ABSENSI, dst.) */
.vertical-layout.vertical-menu-modern .main-menu .navigation-header,
.vertical-layout.vertical-menu-modern .main-menu .navigation-header span {
    color: rgba(255, 255, 255, 0.65) !important;
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}

/* Item menu utama */
.vertical-layout.vertical-menu-modern .main-menu .navigation li > a,
.vertical-layout.vertical-menu-modern .main-menu .navigation li > a > i[data-feather],
.vertical-layout.vertical-menu-modern .main-menu .navigation .menu-title,
.vertical-layout.vertical-menu-modern .main-menu .navigation .menu-item {
    color: rgba(255, 255, 255, 0.92) !important;
}
.vertical-layout.vertical-menu-modern .main-menu .navigation li > a:hover {
    background: rgba(255, 255, 255, 0.12) !important;
}
.vertical-layout.vertical-menu-modern .main-menu .navigation li.active > a,
.vertical-layout.vertical-menu-modern .main-menu .navigation li.open > a {
    background: rgba(255, 255, 255, 0.2) !important;
    box-shadow: none !important;
}
.vertical-layout.vertical-menu-modern .main-menu .navigation li.active > a .menu-title,
.vertical-layout.vertical-menu-modern .main-menu .navigation li.open > a .menu-title,
.vertical-layout.vertical-menu-modern .main-menu .navigation li.active > a i,
.vertical-layout.vertical-menu-modern .main-menu .navigation li.open > a i {
    color: #fff !important;
}

/* Sub-menu (dropdown collapse) */
.vertical-layout.vertical-menu-modern .main-menu .navigation .menu-content li > a,
.vertical-layout.vertical-menu-modern .main-menu .navigation .menu-content li > a > i,
.vertical-layout.vertical-menu-modern .main-menu .navigation .menu-content .menu-item {
    color: rgba(255, 255, 255, 0.85) !important;
}
.vertical-layout.vertical-menu-modern .main-menu .navigation .menu-content li > a:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}
.vertical-layout.vertical-menu-modern .main-menu .navigation .menu-content li.active > a {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
}

/* Override gradien & shadow ungu Vuexy pada item sub-menu AKTIF.
   Vuexy: .menu-light .navigation > li ul .active { linear-gradient(#5e71c0, ungu); box-shadow ungu }
   Kelas .active bisa menempel di <li> maupun <a> — keduanya ditimpa ke hijau/putih. */
.vertical-layout.vertical-menu-modern .main-menu .navigation > li ul .active,
.vertical-layout.vertical-menu-modern .main-menu .navigation li ul .active,
.vertical-layout.vertical-menu-modern .main-menu .navigation li ul li.active,
.vertical-layout.vertical-menu-modern .main-menu .navigation li ul a.active,
.vertical-layout.vertical-menu-modern .main-menu .navigation > li ul .active > a,
.vertical-layout.vertical-menu-modern .main-menu .navigation li ul li.active > a,
.vertical-layout.vertical-menu-modern .main-menu .navigation li ul a.active,
.vertical-layout.vertical-menu-modern .main-menu .navigation > li ul .active > a .menu-item,
.vertical-layout.vertical-menu-modern .main-menu .navigation li ul a.active .menu-item {
    background: rgba(255, 255, 255, 0.18) !important;
    background-image: none !important;
    box-shadow: none !important;
    color: #fff !important;
}
/* Indikator titik (i.circle) pada sub-menu aktif tetap putih */
.vertical-layout.vertical-menu-modern .main-menu .navigation li ul .active i,
.vertical-layout.vertical-menu-modern .main-menu .navigation li ul a.active i,
.vertical-layout.vertical-menu-modern .main-menu .navigation li ul li.active > a i {
    color: #fff !important;
}

/* Tombol toggle sidebar (icon collapse) */
.vertical-layout.vertical-menu-modern .main-menu .modern-nav-toggle .toggle-icon,
.vertical-layout.vertical-menu-modern .main-menu .modern-nav-toggle .collapse-toggle-icon {
    color: #fff !important;
}

/* Garis pemisah putih di header sidebar tetap terlihat */