body{
    color: #1a294e;
    background-color: #9a9eb8;
}
span.required, i.required{
    color:red;
}
.break{
    clear: both;
    content: ' ';
    padding: 10px;
}
a.shortcut-item{
    color: #fff;
}
.btn-transparent{
    color: #ffffff;
    font-size: 20px;
}

.table-total{
    background: #ffffe0;
}
.header-table{
    background: #b5bded !important;
}
tr.header-table > th{
    text-align: center !important;
}
.table tr.event{
    background: #ececec;
}
.footer-table{
    background: #cefde7 !important;
}

#show-calculation-report{
	overflow:auto;
    height: 290px;  
    width: 100%; 
	border:#cccccc solid 1px;
	padding:10px;
    background:#eee;
    margin-bottom: 10px;
    font-family: monospace;
    font-size: 120%;
}
.null, .empty{
    color: pink;
}

span.summary{
    font-size: 80%;
}

.table-row{
    height: 100%;
}
.table tr{
    height: 30px;
}
.full{
    width:100%;
}
.v-full{
    height:100%;
}

.overflow-field{
    height:100px;
    overflow:auto;
    padding: 0.625rem 0.75rem;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    background-color: #fff;
    background-clip: padding-box;
    box-shadow: 0 3px 2px rgb(233 236 239 / 5%);
}
.card{
    box-shadow: 15px -9px 2rem 9px rgba(136, 152, 170, .15);
}

/* Footer diselaraskan dengan navigasi.
 *
 * .footer milik Argon hanya menyetel padding dan background — aturan .875rem
 * di sana untuk .col-footer .heading dan .list-unstyled li a, keduanya tidak
 * dipakai footer aplikasi ini. Akibatnya teks footer mewarisi body (1rem) dan
 * menjadi yang TERBESAR di halaman: lebih besar daripada isi tabel (.8125rem)
 * dan menu kiri (.875rem), padahal ia keterangan paling sekunder. */
.footer {
    font-size: .875rem;
}

/* Paginasi diselaraskan dengan sisa antarmuka.
 *
 * 12px membuatnya berdiri sendiri di antara menu kiri (.875rem), footer
 * (.875rem), dan isi tabel (.8125rem) — terlihat sebagai blok asing di bawah
 * setiap daftar. .875rem menyamakannya dengan navigasi lain, yang memang
 * perannya. */
.pagination {
    font-size: .875rem;
    display: flex;
    justify-content: center;
}

/* Teks "Go to page:" dari CLinkPager adalah simpul teks telanjang sebelum
 * <ul>, jadi ia mewarisi ukuran body (1rem) dan tampak lebih besar daripada
 * paginasi di sebelahnya. Disaring lewat :has() agar hanya card-footer yang
 * BERISI paginasi yang terpengaruh — kelas itu dipakai juga di halaman
 * workspace dan jurnal untuk keperluan lain. */
.card-footer:has(.pagination) {
    font-size: .875rem;
}
.pagination li {
    float: left;
    padding: 2px 6px;
    text-decoration: none;
    border: 1px solid #ddd;
}
/* Halaman aktif: latar indigo, teks putih.
 *
 * Sebelumnya #e4e4e4 dengan "color: white" — dan deklarasi warna itu TIDAK
 * PERNAH berlaku, karena teksnya berada di dalam <a> yang menentukan warnanya
 * sendiri. Yang terlihat justru tautan biru di atas abu terang, dan di tema
 * gelap (aturan di bawah dulu memutihkannya penuh) berupa kotak putih menyala
 * di tengah antarmuka gelap. Warnanya kini disetel pada <a>, tempat ia
 * benar-benar berpengaruh. */
.pagination li.selected {
    background-color: #5e72e4;
    border: 1px solid #5e72e4;
}
.pagination li.selected > a {
    color: #fff;
}
/* ".selected", bukan ".active" — kelas itulah yang dipasang CLinkPager
 * (CSS_SELECTED_PAGE). Dengan ".active" penyaringnya tidak pernah cocok,
 * sehingga halaman yang sedang dibuka pun ikut berubah saat disorot. */
.pagination li:hover:not(.selected) {
    background-color: #ddd;
}
.pagination li:first-child {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}
.pagination li:last-child {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}



/* Dark Mode */
body[data-theme=dark] {
    background-color: #262626;
    color: #ffffff;
}
body[data-theme=dark] a {
    color: #8383ff;
}
body[data-theme=dark] a:hover {
    color: #d4d4fe;
}
body[data-theme=dark] .navbar {
    background-color: #1c1c1c;
    border-bottom: 1px solid #333;
}
body[data-theme=dark] .navbar a {
    color: #ffffff;
}
body[data-theme=dark] .navbar-light .navbar-nav .nav-item:hover > .nav-link {
    color: #ffffff;
}
body[data-theme=dark] .navbar-light .navbar-nav .nav-link {
    color: #959191;
}
body[data-theme=dark] .navbar-light .navbar-nav .nav-link:hover, body[data-theme=dark] .navbar-light .navbar-nav .nav-link:focus {
    color: #ffffff;
}
body[data-theme=dark] .navbar-light .navbar-nav .nav-link .active > .nav-link {
    color: #ffffff;
}
body[data-theme=dark] .nav .nav-item .nav-link.nav-link:not(.active) {
    color: #ffffff;
    background: #292929d6;
}
body[data-theme=dark] .nav .nav-item.active .nav-link.active, 
body[data-theme=dark] .nav .nav-item .nav-link.active{
    color: #ffffff;
}
body[data-theme=dark] .card, body[data-theme=dark] .breadcrumb, 
body[data-theme=dark] .list-group-item, 
body[data-theme=dark] .modal-content, 
body[data-theme=dark] .carousel-bg, body[data-theme=dark] .card-header {
    background-color: #1e1e1e;
    color: #ffffff;
    border: 1px solid #444;
}
body[data-theme=dark] .btn, body[data-theme=dark] .page-link, 
body[data-theme=dark] .btn-neutral:not(:disabled):not(.disabled):active, 
body[data-theme=dark] .btn-neutral:not(:disabled):not(.disabled).active, 
body[data-theme=dark] .show > .btn-neutral.dropdown-toggle {
    background-color: #333;
    color: #ffffff;
}
body[data-theme=dark] .btn:hover, body[data-theme=dark] .page-link:hover {
    background-color: #555;
}

/* Kembalikan warna tombol yang memang diminta secara eksplisit.
 *
 * Aturan .btn di atas menyeragamkan SEMUA tombol jadi #333, termasuk
 * btn-primary dan btn-danger. Akibatnya di tema gelap tidak ada satu pun
 * tombol yang bisa tampil sebagai aksi utama, dan tombol berbahaya kehilangan
 * peringatan warnanya — deretan tombol jadi kotak abu-abu seragam yang hanya
 * dibedakan tulisannya.
 *
 * Yang dikecualikan hanya varian solid yang ditulis sengaja di markup;
 * tombol tanpa varian (termasuk btn-neutral bawaan tema) tetap #333 seperti
 * sebelumnya, jadi tampilan halaman lain tidak berubah. */
body[data-theme=dark] .btn.btn-primary { background-color: #5e72e4; border-color: #5e72e4; }
body[data-theme=dark] .btn.btn-success { background-color: #2dce89; border-color: #2dce89; }
body[data-theme=dark] .btn.btn-danger  { background-color: #f5365c; border-color: #f5365c; }
body[data-theme=dark] .btn.btn-warning { background-color: #fb6340; border-color: #fb6340; }
body[data-theme=dark] .btn.btn-info    { background-color: #11cdef; border-color: #11cdef; }

body[data-theme=dark] .btn.btn-primary:hover { background-color: #4d5fd1; border-color: #4d5fd1; }
body[data-theme=dark] .btn.btn-success:hover { background-color: #26b378; border-color: #26b378; }
body[data-theme=dark] .btn.btn-danger:hover  { background-color: #ec0c38; border-color: #ec0c38; }
body[data-theme=dark] .btn.btn-warning:hover { background-color: #fa441c; border-color: #fa441c; }
body[data-theme=dark] .btn.btn-info:hover    { background-color: #0fb2d1; border-color: #0fb2d1; }
body[data-theme=dark] .table {
    background-color: #1e1e1e;
    color: #ffffff;
}
body[data-theme=dark] .table .thead-light td, 
body[data-theme=dark] .table .thead-light th {
    border-color: #444;
    background-color: #444;
}
body[data-theme=dark] .table.table-hover tbody tr:hover {
    color: #ffffff !important;
    background-color: #565656;
}
body[data-theme=dark] input, 
body[data-theme=dark] select, body[data-theme=dark] textarea, 
body[data-theme=dark] .button-dropdown, body[data-theme=dark] .overflow-field {
    background-color: #1e1e1e;
    color: #ffffff;
    border: 1px solid #444;
}
body[data-theme=dark] input::placeholder, body[data-theme=dark] select::placeholder, body[data-theme=dark] textarea::placeholder, body[data-theme=dark] .button-dropdown::placeholder {
    color: #bbb;
}
/* Input terkunci di tema gelap.
 *
 * Bootstrap memberi ".form-control:disabled, .form-control[readonly]" latar
 * #e9ecef, dan spesifisitasnya (0,2,0) MENGALAHKAN aturan gelap di atas
 * ("body[data-theme=dark] input" = (0,1,2)). Akibatnya kolom yang dikunci —
 * mis. Harga Awal dan Biaya Beli pada form aset yang sedang diedit — tampil
 * sebagai kotak abu terang di tengah form yang seluruhnya gelap.
 *
 * Penyaringnya sengaja menyebut .form-control DAN elemennya sekaligus: sebagian
 * kolom di aplikasi ini dirender tanpa kelas Bootstrap. Warnanya dibuat lebih
 * gelap dari input biasa (#1e1e1e) supaya "terkunci" tetap terbaca sebagai
 * keadaan, bukan sekadar kolom biasa. */
body[data-theme=dark] input:disabled,
body[data-theme=dark] input[readonly],
body[data-theme=dark] select:disabled,
body[data-theme=dark] textarea:disabled,
body[data-theme=dark] textarea[readonly],
body[data-theme=dark] .form-control:disabled,
body[data-theme=dark] .form-control[readonly] {
    background-color: #171717;
    color: #9a9a9a;
    border-color: #3a3a3a;
    cursor: not-allowed;
}

body[data-theme=dark] input:focus, body[data-theme=dark] select:focus, body[data-theme=dark] textarea:focus, body[data-theme=dark] .button-dropdown:focus {
    background-color: #292929;
    color: #ffffff;
    border-color: #555;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
}
body[data-theme=dark] input[type=range] {
    border: 0px !important;
}
body[data-theme=dark] .dropdown-menu {
    background-color: #1e1e1e;
    color: #ffffff;
    border: 1px solid #444;
}
body[data-theme=dark] .dropdown-item:hover, body[data-theme=dark] .dropdown-item:focus {
    background-color: #34393e;
    color: #ffffff !important;
}
body[data-theme=dark] .title-page, body[data-theme=dark] .section-title {
    color: #c5c5c5;
}
body[data-theme=dark] .text-main {
    color: #d4d4fe !important;
}
body[data-theme=dark] .text-dark {
    color: white !important;
}
body[data-theme=dark] .well-header {
    background: #3b3b3b;
}
body[data-theme=dark] .point {
    background: #2b2b2b;
}
body[data-theme=dark] .btn-bookmark:hover {
    background: #383838;
}
body[data-theme=dark] .select2-container--default .select2-selection--single, 
body[data-theme=dark] .select2-container--bootstrap4 .select2-selection,
body[data-theme=dark] .select2-container--default .select2-search--dropdown .select2-search__field:focus {
    background-color: #1e1e1e !important;
    color: #ffffff;
    border: 1px solid #444;
}
body[data-theme=dark] .select2-container--default .select2-selection--single .select2-selection__rendered, body[data-theme=dark] .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    color: #ffffff;
}
body[data-theme=dark] .select2-container--default .select2-selection--single .select2-selection__arrow {
    color: #ffffff;
}
body[data-theme=dark] .select2-container--default .select2-dropdown {
    background-color: #1e1e1e !important;
    color: #ffffff;
    border: 1px solid #444;
}
body[data-theme=dark] .select2-container--default .select2-results__option, body[data-theme=dark] .select2-container--bootstrap4 .select2-results > .select2-results__options {
    background-color: #1e1e1e !important;
    color: #ffffff;
}
body[data-theme=dark] .select2-container--default .select2-results__option--highlighted {
    background-color: #444 !important;
    color: #ffffff;
}
body[data-theme=dark] .footer {
    background-color: #151616 !important;
    color: #ffffff !important;
}
body[data-theme=dark] .navbar-vertical.navbar-expand-xs .navbar-nav > .nav-item > .nav-link.active{
    background: #3e3e3e;
}
body[data-theme=dark] .table-striped tbody tr:nth-of-type(odd){
    background: #343434;
}
body[data-theme=dark] h1, body[data-theme=dark] h2, body[data-theme=dark] h3, body[data-theme=dark] h4, body[data-theme=dark] h5, body[data-theme=dark] h6, 
body[data-theme=dark] .h1, body[data-theme=dark] .h2, body[data-theme=dark] .h3, body[data-theme=dark] .h4, body[data-theme=dark] .h5, .h6{
    color: #e6e6e6;
}
body[data-theme=dark] .form-control-label{
    color: #e6e6e6;
}
body[data-theme=dark] .bg-secondary, body[data-theme=dark] .bg-gray{
    background-color: #3c3c3c !important;
}
body[data-theme=dark] .input-group-text{
    background-color: #282828 !important;
    border: 1px solid #505050;
}
body[data-theme=dark] .focused .input-group-text{
    border-color: #666666 !important;
}
body[data-theme=dark] .modal-header{
    border-bottom: 1px solid #4a4a4a;
}
body[data-theme=dark] .modal-footer{
    border-top: 1px solid #4a4a4a;
}
body[data-theme=dark] .dropdown-divider{
    border-top: 1px solid #686868;
}
body[data-theme=dark] hr{
    border-top: 1px solid rgb(189 189 189 / 47%);
}
body[data-theme=dark] .datetimepicker-days .prev > span, 
body[data-theme=dark] .datetimepicker-days .next > span, 
body[data-theme=dark] .datetimepicker-months .prev > span, 
body[data-theme=dark] .datetimepicker-months .next > span, 
body[data-theme=dark] .datetimepicker-hours .prev > span, 
body[data-theme=dark] .datetimepicker-hours .next > span, 
body[data-theme=dark] .datetimepicker-minutes .prev > span, 
body[data-theme=dark] .datetimepicker-minutes .next > span {    
    background-color: #959595;
    color: #0e0e0e;
}
body[data-theme=dark] .btn-transparent{
    border-color: transparent !important;
    background-color: transparent !important;
    font-size: 20px;
}
body[data-theme=dark] .nav-tabs .nav-link.active, 
body[data-theme=dark] .nav-tabs .nav-item.show .nav-link{
    background-color: #12172f;
}
/* Di tema gelap, border #ddd bawaan menyala terlalu terang; #444 dipakai
 * sama seperti .card dan .list-group-item di berkas ini. Halaman aktif
 * memakai indigo yang sama dengan tema terang — bukan putih penuh, yang dulu
 * membuatnya jadi kotak menyala di tengah antarmuka gelap. */
body[data-theme=dark] .pagination li {
    border-color: #444;
}
body[data-theme=dark] .pagination li.selected {
    background-color: #5e72e4;
    border-color: #5e72e4;
}
body[data-theme=dark] .pagination li.selected > a {
    color: #fff;
}
body[data-theme=dark] .pagination li:hover:not(.selected) {
    background-color: #2a2b2b;
}
body[data-theme=dark] .table-total{
    background: #2c2c2c;
}
body[data-theme=dark] .table tr.event{
    background: #3b3b3b;
}
body[data-theme=dark] .header-table{
    background: #010034 !important;
}
body[data-theme=dark] .footer-table{
    background: #0a2501 !important;
}
body[data-theme=dark] .table .bg-blue{
    background: #0e143c !important;
}
body[data-theme=dark] .card-footer{
    background: #2a2b2b !important;
}