/*
 * Tema SIPGN: mengganti warna utama biru bawaan Bootstrap (dipakai SIPLah) menjadi
 * gradien biru ke biru langit dengan aksen amber.
 * Dimuat setelah semua stylesheet lain. Untuk mengganti tema cukup ubah variabel di :root.
 */
:root {
	--tema: #2563EB;
	--tema-hover: #1D4ED8;
	--tema-gelap: #1E3A8A;
	--tema-lembut: #EFF6FF;
	--tema-garis: #BFDBFE;
	--tema-fokus: rgba(37,99,235, .25);
	--tema-aksen: #F59E0B;
	--tema-2: #0EA5E9;
	--tema-gradien: linear-gradient(90deg, #2563EB 0%, #0EA5E9 100%);

	--primary: #2563EB;
	--blue: #2563EB;
}

a { color: var(--tema); }
a:hover { color: var(--tema-hover); }

.text-primary { color: var(--tema) !important; }
a.text-primary:hover, a.text-primary:focus { color: var(--tema-hover) !important; }
.bg-primary { background-color: var(--tema) !important; }
a.bg-primary:hover, a.bg-primary:focus, button.bg-primary:hover, button.bg-primary:focus { background-color: var(--tema-hover) !important; }
.border-primary { border-color: var(--tema) !important; }

.btn-primary { color: #fff; background-color: var(--tema); border-color: var(--tema); }
.btn-primary:hover { color: #fff; background-color: var(--tema-hover); border-color: var(--tema-hover); }
.btn-primary:focus, .btn-primary.focus { box-shadow: 0 0 0 .2rem var(--tema-fokus); }
.btn-primary.disabled, .btn-primary:disabled { color: #fff; background-color: var(--tema); border-color: var(--tema); }
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle { color: #fff; background-color: var(--tema-gelap); border-color: var(--tema-gelap); }
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus { box-shadow: 0 0 0 .2rem var(--tema-fokus); }

.btn-outline-primary { color: var(--tema); border-color: var(--tema); }
.btn-outline-primary:hover { color: #fff; background-color: var(--tema); border-color: var(--tema); }
.btn-outline-primary:focus, .btn-outline-primary.focus { box-shadow: 0 0 0 .2rem var(--tema-fokus); }
.btn-outline-primary.disabled, .btn-outline-primary:disabled { color: var(--tema); background-color: transparent; }
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle { color: #fff; background-color: var(--tema); border-color: var(--tema); }
.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-primary.dropdown-toggle:focus { box-shadow: 0 0 0 .2rem var(--tema-fokus); }

.btn-link { color: var(--tema); }
.btn-link:hover { color: var(--tema-hover); }
.btn:focus, .btn.focus { box-shadow: 0 0 0 .2rem var(--tema-fokus); }

.badge-primary { color: #fff; background-color: var(--tema); }
a.badge-primary:hover, a.badge-primary:focus { color: #fff; background-color: var(--tema-hover); }

.alert-primary { color: var(--tema-gelap); background-color: var(--tema-lembut); border-color: var(--tema-garis); }
.alert-primary .alert-link { color: var(--tema-gelap); }
.table-primary, .table-primary > th, .table-primary > td { background-color: var(--tema-lembut); }

.form-control:focus, .custom-select:focus { border-color: #93C5FD; box-shadow: 0 0 0 .2rem var(--tema-fokus); }
.custom-control-input:checked ~ .custom-control-label::before { color: #fff; border-color: var(--tema); background-color: var(--tema); }
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 .2rem var(--tema-fokus); }
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before { border-color: #93C5FD; }
.custom-control-input:not(:disabled):active ~ .custom-control-label::before { background-color: var(--tema-garis); border-color: var(--tema-garis); }
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before { border-color: var(--tema); background-color: var(--tema); }
.custom-file-input:focus ~ .custom-file-label { border-color: #93C5FD; box-shadow: 0 0 0 .2rem var(--tema-fokus); }
.custom-range::-webkit-slider-thumb { background-color: var(--tema); }
.custom-range::-moz-range-thumb { background-color: var(--tema); }

.dropdown-item.active, .dropdown-item:active { color: #fff; background-color: var(--tema); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { color: #fff; background-color: var(--tema); }
.list-group-item.active { color: #fff; background-color: var(--tema); border-color: var(--tema); }
.list-group-item-primary { color: var(--tema-gelap); background-color: var(--tema-lembut); }

.page-link { color: var(--tema); }
.page-link:hover { color: var(--tema-hover); }
.page-link:focus { box-shadow: 0 0 0 .2rem var(--tema-fokus); }
.page-item.active .page-link { color: #fff; background-color: var(--tema); border-color: var(--tema); }

.progress-bar { background-color: var(--tema); }
.spinner-border.text-primary, .spinner-grow.text-primary { color: var(--tema) !important; }

/* Plugin pihak ketiga yang membawa biru sendiri */
.select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--tema); }
.datepicker table tr td.active, .datepicker table tr td.active:hover,
.datepicker table tr td.active.active, .datepicker table tr td.active.highlighted,
.datepicker table tr td span.active, .datepicker table tr td span.active:hover { background-color: var(--tema) !important; background-image: none !important; border-color: var(--tema-hover) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current { border-color: var(--tema) !important; }
.swal2-styled.swal2-confirm { background-color: var(--tema) !important; }
.swal2-styled:focus { box-shadow: 0 0 0 3px var(--tema-fokus) !important; }
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border-color: var(--tema); background: var(--tema); }

/* Gradien biru pada bidang utama */
header.navbar,
footer.footer-wrapper,
.bg-primary { background-image: var(--tema-gradien) !important; }
.btn-primary,
.badge-primary,
.page-item.active .page-link,
.nav-pills .nav-link.active,
.progress-bar { background-image: var(--tema-gradien); border-color: transparent; }
.btn-primary:hover { background-image: linear-gradient(90deg, #1D4ED8 0%, #2563EB 100%); border-color: transparent; }
.btn-primary:not(:disabled):not(.disabled):active { background-image: none; }

/* Aksen amber */
#btn-search-query { background-color: var(--tema-aksen) !important; border-color: var(--tema-aksen) !important; color: #1f2937; }

/* Tombol membulat penuh; tombol di dalam input-group dan btn-group mengikuti bentuk grupnya */
.btn { border-radius: 999px; }
.input-group .btn, .btn-group > .btn, .btn-group-vertical > .btn { border-radius: .25rem; }
.input-group > .input-group-prepend > .btn, .btn-group > .btn:not(:last-child):not(.dropdown-toggle) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .input-group-append > .btn, .btn-group > .btn:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }