/* ==========================================================================
   Layout menu atas + gaya skeuomorphism (tombol & card)
   Warna mengikuti tema yang sudah ada (custom.css / bootstrap.min.css)
   ========================================================================== */

:root{
    --skeuo-green: #28a382;
    --skeuo-green-dark: #1f8268;
    --skeuo-green-soft: #ebfff6;
    --skeuo-orange: #f7b86d;
    --skeuo-bg: #f4f7f9;
    --skeuo-border: #dde3e9;
    --skeuo-text: #495057;
    --skeuo-topbar-height: 70px;
}

/* --------------------------------------------------------------------------
   Layout: sidebar dihilangkan, konten penuh
   -------------------------------------------------------------------------- */
.vertical-menu{
    display: none !important;
}
.main-content,
.vertical-collpsed .main-content{
    margin-left: 0 !important;
}
.page-content{
    padding-top: 1.25rem !important;
    /* bawaan tema 60px (untuk footer fixed); footer di sini ikut alur halaman */
    padding-bottom: .5rem !important;
}
#page-topbar,
body.vertical-collpsed #page-topbar{
    left: 0 !important;
    display: flex;
    align-items: center;
    background: linear-gradient(to bottom, #ffffff 0%, #f6f8fa 100%);
    border-bottom: 1px solid var(--skeuo-border);
    box-shadow: inset 0 -1px 0 #ffffff, 0 1px 3px rgba(15, 34, 58, .06);
}
#page-topbar .navbar-brand-box,
.vertical-collpsed #page-topbar .navbar-brand-box{
    position: relative;
    width: auto !important;
    padding: 0 1.25rem;
    background: transparent;
    display: block;
}
#page-topbar .navbar-brand-box .logo-light{
    display: none;
}
#page-topbar .navbar-brand-box .logo-dark span.logo-lg,
.vertical-collpsed #page-topbar .navbar-brand-box .logo-dark span.logo-lg{
    display: inline-block;
}
#page-topbar .navbar-brand-box .logo-dark span.logo-sm,
.vertical-collpsed #page-topbar .navbar-brand-box .logo-dark span.logo-sm{
    display: none;
}
/* tinggi header dikunci supaya tidak menimpa menu atas */
#page-topbar{
    height: var(--skeuo-topbar-height);
}
#page-topbar .navbar-brand-box,
#page-topbar .navbar-brand-box .logo{
    height: var(--skeuo-topbar-height);
    line-height: normal;
}
#page-topbar .navbar-brand-box .logo-dark{
    display: flex;
    align-items: center;
}
#page-topbar .navbar-brand-box .logo-dark span.logo-lg{
    align-items: center;
    gap: 12px;
    line-height: 1;
}
#page-topbar .navbar-brand-box .logo-dark span.logo-lg img{
    max-height: 50px;
    width: auto;
}
.vertical-collpsed #page-topbar .navbar-brand-box .logo-dark span.logo-lg,
#page-topbar .navbar-brand-box .logo-dark span.logo-lg{
    display: inline-flex;
}
#page-topbar .logo-title{
    padding-left: 12px;
    border-left: 2px solid var(--skeuo-border);
    color: var(--skeuo-green-dark);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .5px;
    white-space: nowrap;
    text-shadow: 0 1px 0 #ffffff;
}
@media (max-width: 575.98px){
    #page-topbar .logo-title{
        font-size: 14px;
        padding-left: 8px;
    }
}
#page-topbar .navbar-header{
    flex: 1;
    margin: 0;
}
/* tombol hamburger hanya dipakai di mobile untuk buka menu */
.list-menu-custom{
    display: none !important;
}
.floating-div,
.vertical-collpsed .floating-div{
    left: 45px;
    right: 45px !important;
    width: auto !important;
}

/* --------------------------------------------------------------------------
   Menu atas
   -------------------------------------------------------------------------- */
.topnav-skeuo{
    position: sticky;
    top: var(--skeuo-topbar-height);
    z-index: 1001;
    margin-top: var(--skeuo-topbar-height);
    padding: 8px calc(1.25rem / 2);
    background: linear-gradient(to bottom, #2fb892 0%, var(--skeuo-green) 55%, var(--skeuo-green-dark) 100%);
    border-top: 1px solid rgba(255, 255, 255, .35);
    border-bottom: 1px solid #186a54;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 2px 4px rgba(15, 34, 58, .10);
}
.topnav-skeuo-list,
.topnav-skeuo-dropdown{
    list-style: none;
    margin: 0;
    padding: 0;
}
.topnav-skeuo-list{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.topnav-skeuo-item{
    position: relative;
}
.topnav-skeuo-link{
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    border-radius: 8px;
    border: 1px solid transparent;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .15);
    transition: background .15s ease, box-shadow .15s ease;
}
.topnav-skeuo-link i{
    font-size: 16px;
}
.topnav-skeuo-link .topnav-skeuo-arrow{
    font-size: 14px;
    opacity: .8;
}
.topnav-skeuo-item:hover > .topnav-skeuo-link,
.topnav-skeuo-item.open > .topnav-skeuo-link{
    background: linear-gradient(to bottom, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .08) 100%);
    border-color: rgba(255, 255, 255, .25);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 1px rgba(0, 0, 0, .08);
}
.topnav-skeuo-item.active > .topnav-skeuo-link{
    color: var(--skeuo-green-dark) !important;
    text-shadow: 0 1px 0 #ffffff;
    background: linear-gradient(to bottom, #ffffff 0%, var(--skeuo-green-soft) 100%);
    border-color: #186a54;
    box-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 rgba(40, 163, 130, .20), 0 1px 2px rgba(0, 0, 0, .12);
}

/* dropdown */
.topnav-skeuo-dropdown{
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1003;
    min-width: 230px;
    margin-top: 6px;
    padding: 6px;
    background: linear-gradient(to bottom, #ffffff 0%, #f5f8fa 100%);
    border: 1px solid var(--skeuo-border);
    border-radius: 10px;
    box-shadow: inset 0 1px 0 #ffffff, 0 6px 14px -6px rgba(15, 34, 58, .18);
    visibility: hidden;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
/* jembatan hover supaya dropdown tidak tertutup saat kursor turun */
.topnav-skeuo-dropdown::before{
    content: "";
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
}
.topnav-skeuo-dropdown > li{
    position: relative;
}
.topnav-skeuo-dropdown-link{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    color: var(--skeuo-text) !important;
    font-size: 13px;
    border-radius: 6px;
    border: 1px solid transparent;
}
.topnav-skeuo-dropdown > li:hover > .topnav-skeuo-dropdown-link{
    color: var(--skeuo-green) !important;
    background: linear-gradient(to bottom, #ffffff 0%, var(--skeuo-green-soft) 100%);
    border-color: #cdeee2;
    box-shadow: inset 0 1px 0 #ffffff, 0 1px 1px rgba(15, 34, 58, .05);
}
.topnav-skeuo-dropdown > li.active > .topnav-skeuo-dropdown-link{
    color: #ffffff !important;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
    background: linear-gradient(to bottom, #2fb892 0%, var(--skeuo-green-dark) 100%);
    border-color: #186a54;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .10);
}
.topnav-skeuo-dropdown-sub{
    top: -7px;
    left: 100%;
    margin-top: 0;
    margin-left: 6px;
}
.topnav-skeuo-dropdown-sub::before{
    top: 0;
    bottom: 0;
    left: -8px;
    right: auto;
    width: 8px;
    height: auto;
}
.has-sub.flip > .topnav-skeuo-dropdown{
    left: auto;
    right: 0;
}
.has-sub.flip > .topnav-skeuo-dropdown-sub{
    right: 100%;
    margin-left: 0;
    margin-right: 6px;
}

@media (min-width: 992px){
    .topnav-skeuo-item.has-sub:hover > .topnav-skeuo-dropdown,
    .topnav-skeuo-item.has-sub:focus-within > .topnav-skeuo-dropdown,
    .topnav-skeuo-dropdown > li.has-sub:hover > .topnav-skeuo-dropdown,
    .topnav-skeuo-dropdown > li.has-sub:focus-within > .topnav-skeuo-dropdown{
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
    }
}

/* mobile: menu jadi daftar yang dibuka dari tombol hamburger */
/* tombol "Menu" khusus mobile, di desktop disembunyikan */
.topnav-skeuo-toggle{
    display: none;
}

/* mobile: bar "Menu" selalu tampil, daftar menu dibuka dengan klik */
@media (max-width: 991.98px){
    :root{
        --skeuo-toggle-height: 48px;
    }
    .page-content{
        padding-top: calc(var(--skeuo-topbar-height) + var(--skeuo-toggle-height) + 1.25rem) !important;
    }
    .topnav-skeuo{
        position: fixed;
        top: var(--skeuo-topbar-height);
        left: 0;
        right: 0;
        margin-top: 0;
        padding: 6px 12px;
    }
    .topnav-skeuo-toggle{
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        height: 36px;
        padding: 0 12px;
        color: #ffffff;
        font-size: 14px;
        font-weight: 600;
        background: linear-gradient(to bottom, rgba(255, 255, 255, .20) 0%, rgba(255, 255, 255, .06) 100%);
        border: 1px solid rgba(255, 255, 255, .25);
        border-radius: 8px;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, .15);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 1px rgba(0, 0, 0, .08);
    }
    .topnav-skeuo-toggle i{
        font-size: 20px;
    }
    .topnav-skeuo-toggle .topnav-skeuo-arrow{
        margin-left: auto;
        transition: transform .15s ease;
    }
    .topnav-skeuo.open .topnav-skeuo-toggle .topnav-skeuo-arrow{
        transform: rotate(180deg);
    }
    .topnav-skeuo-nav{
        display: none;
        max-height: calc(100vh - var(--skeuo-topbar-height) - var(--skeuo-toggle-height) - 10px);
        overflow-y: auto;
        padding-top: 6px;
    }
    .topnav-skeuo.open .topnav-skeuo-nav{
        display: block;
    }
    .topnav-skeuo-list{
        flex-direction: column;
        gap: 4px;
    }
    .topnav-skeuo-link{
        justify-content: flex-start;
        white-space: normal;
    }
    .topnav-skeuo-link .topnav-skeuo-arrow{
        margin-left: auto;
    }
    .topnav-skeuo-dropdown,
    .topnav-skeuo-dropdown-sub{
        position: static;
        display: none;
        min-width: 0;
        margin: 4px 0 4px 12px;
        visibility: visible;
        opacity: 1;
        transform: none;
    }
    .has-sub.open > .topnav-skeuo-dropdown{
        display: block;
    }
    /* header: logo & judul boleh menyusut supaya ikon kanan tetap terlihat */
    #page-topbar .navbar-brand-box{
        min-width: 0;
        flex-shrink: 1;
        padding: 0 10px;
    }
    #page-topbar .logo-title{
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #page-topbar .navbar-header{
        flex-shrink: 0;
        flex-grow: 0;
        margin-left: auto;
    }
}

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */
.card{
    background: linear-gradient(to bottom, #ffffff 0%, #fbfcfd 60%, #f3f6f8 100%);
    border: 1px solid var(--skeuo-border) !important;
    border-radius: 10px !important;
    box-shadow:
        inset 0 1px 0 #ffffff,
        0 1px 1px rgba(15, 34, 58, .04),
        0 4px 10px -6px rgba(15, 34, 58, .10);
}
.card-header{
    background: linear-gradient(to bottom, #ffffff 0%, #eef2f5 100%);
    border-bottom: 1px solid var(--skeuo-border);
    box-shadow: inset 0 1px 0 #ffffff;
}
.card-header:first-child{
    border-radius: 10px 10px 0 0 !important;
}
.card-footer{
    background: linear-gradient(to bottom, #f3f6f8 0%, #eaeff3 100%);
    border-top: 1px solid var(--skeuo-border);
}

/* --------------------------------------------------------------------------
   Tombol
   -------------------------------------------------------------------------- */
.btn{
    position: relative;
    border-radius: 8px;
    border-width: 1px;
    transition: box-shadow .12s ease, transform .12s ease, filter .12s ease;
}
.btn-primary,
.btn-secondary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger,
.btn-dark,
.btn-light,
.btn-default{
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .25),
        inset 0 -1px 0 rgba(0, 0, 0, .08),
        0 1px 2px rgba(15, 34, 58, .10);
}
.btn-primary,
.btn-secondary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger,
.btn-dark{
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .12);
}
.btn-primary:hover,
.btn-secondary:hover,
.btn-success:hover,
.btn-info:hover,
.btn-warning:hover,
.btn-danger:hover,
.btn-dark:hover,
.btn-light:hover,
.btn-default:hover{
    filter: brightness(1.05);
}
.btn-primary:active, .btn-primary.active,
.btn-secondary:active, .btn-secondary.active,
.btn-success:active, .btn-success.active,
.btn-info:active, .btn-info.active,
.btn-warning:active, .btn-warning.active,
.btn-danger:active, .btn-danger.active,
.btn-dark:active, .btn-dark.active,
.btn-light:active, .btn-light.active,
.btn-default:active, .btn-default.active{
    transform: translateY(1px);
    filter: brightness(.96);
    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, .15),
        0 0 0 rgba(15, 34, 58, 0);
}

.btn-primary{
    background: linear-gradient(to bottom, #7d90ee 0%, #5b73e8 55%, #4a62d6 100%) !important;
    border-color: #3f55c2 !important;
}
.btn-secondary{
    background: linear-gradient(to bottom, #8d91a4 0%, #74788d 55%, #63677b 100%) !important;
    border-color: #575b6e !important;
}
.btn.btn-success{
    background: linear-gradient(to bottom, #3cc19c 0%, #28a382 55%, #1f8a6d 100%) !important;
    border-color: #1a7a60 !important;
}
.btn-info{
    background: linear-gradient(to bottom, #73b8f4 0%, #50a5f1 55%, #3b92e0 100%) !important;
    border-color: #3283cc !important;
}
.btn-warning{
    background: linear-gradient(to bottom, #f5c878 0%, #f1b44c 55%, #e0a138 100%) !important;
    border-color: #cc9230 !important;
}
.btn-danger{
    background: linear-gradient(to bottom, #f78b8b 0%, #f46a6a 55%, #e25555 100%) !important;
    border-color: #cf4b4b !important;
}
.btn-dark{
    background: linear-gradient(to bottom, #4d545b 0%, #343a40 55%, #272c31 100%) !important;
    border-color: #1f2327 !important;
}
.btn-light,
.btn-default{
    color: var(--skeuo-text);
    background: linear-gradient(to bottom, #ffffff 0%, #f5f6f8 55%, #e9ecef 100%) !important;
    border-color: #cfd5db !important;
    text-shadow: 0 1px 0 #ffffff;
}
.btn:disabled,
.btn.disabled{
    filter: grayscale(.2);
    box-shadow: none;
    transform: none;
}

/* --------------------------------------------------------------------------
   Tabel: usahakan muat di layar tanpa scroll ke samping
   - teks boleh turun baris (menimpa .table-nowrap bawaan tema)
   - angka/nominal tidak dipotong karena tidak ada spasi di dalamnya
   - kolom aksi (berisi tombol) tetap satu baris
   - .table-responsive tetap jadi cadangan kalau kolomnya memang terlalu banyak
   -------------------------------------------------------------------------- */
.table-responsive > .table,
.table-responsive > table{
    width: 100%;
}
.table.table-nowrap th,
.table.table-nowrap td,
.table-responsive .table th,
.table-responsive .table td{
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
}
.table > :not(caption) > * > th,
.table > :not(caption) > * > td{
    padding: .55rem .6rem;
}
/* ukuran teks header = ukuran teks isi tabel */
.table th,
.table td{
    font-size: .8125rem;
}
.table th{
    line-height: 1.35;
    vertical-align: middle;
}
.table td:has(> .btn),
.table td:has(> a.btn),
.table td:has(> .btn-group),
.table td:has(> .dropdown){
    white-space: nowrap;
}
.table .select2-container,
.table select.form-control,
.table select.form-select{
    max-width: 100%;
}

/* --------------------------------------------------------------------------
   Aksi di tabel (<a class="px-2 text-..."><i class="uil ..."></i></a>)
   ditampilkan sebagai tombol ikon skeuomorphism, warna mengikuti class text-*
   -------------------------------------------------------------------------- */
.table a.px-2.text-primary,
.table a.px-2.text-secondary,
.table a.px-2.text-success,
.table a.px-2.text-info,
.table a.px-2.text-warning,
.table a.px-2.text-danger{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0 !important;
    margin: 2px 0;
    color: #ffffff !important;
    border: 1px solid transparent;
    border-radius: 8px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .12);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .25),
        inset 0 -1px 0 rgba(0, 0, 0, .08),
        0 1px 2px rgba(15, 34, 58, .10);
    transition: box-shadow .12s ease, transform .12s ease, filter .12s ease;
    vertical-align: middle;
}
.table a.px-2.text-primary i,
.table a.px-2.text-secondary i,
.table a.px-2.text-success i,
.table a.px-2.text-info i,
.table a.px-2.text-warning i,
.table a.px-2.text-danger i{
    color: #ffffff !important;
    font-size: 16px !important;
    line-height: 1;
}
.table a.px-2.dropdown-toggle::after{
    display: none;
}
.table a.px-2.text-primary:hover,
.table a.px-2.text-secondary:hover,
.table a.px-2.text-success:hover,
.table a.px-2.text-info:hover,
.table a.px-2.text-warning:hover,
.table a.px-2.text-danger:hover{
    filter: brightness(1.06);
}
.table a.px-2.text-primary:active,
.table a.px-2.text-secondary:active,
.table a.px-2.text-success:active,
.table a.px-2.text-info:active,
.table a.px-2.text-warning:active,
.table a.px-2.text-danger:active,
.table a.px-2.show{
    transform: translateY(1px);
    filter: brightness(.96);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .15);
}
.table a.px-2.text-primary{
    background: linear-gradient(to bottom, #7d90ee 0%, #5b73e8 55%, #4a62d6 100%);
    border-color: #3f55c2;
}
.table a.px-2.text-secondary{
    background: linear-gradient(to bottom, #8d91a4 0%, #74788d 55%, #63677b 100%);
    border-color: #575b6e;
}
.table a.px-2.text-success{
    background: linear-gradient(to bottom, #3cc19c 0%, #28a382 55%, #1f8a6d 100%);
    border-color: #1a7a60;
}
.table a.px-2.text-info{
    background: linear-gradient(to bottom, #73b8f4 0%, #50a5f1 55%, #3b92e0 100%);
    border-color: #3283cc;
}
.table a.px-2.text-warning{
    background: linear-gradient(to bottom, #f5c878 0%, #f1b44c 55%, #e0a138 100%);
    border-color: #cc9230;
}
.table a.px-2.text-danger{
    background: linear-gradient(to bottom, #f78b8b 0%, #f46a6a 55%, #e25555 100%);
    border-color: #cf4b4b;
}
.table .list-inline-item:not(:last-child){
    margin-right: 4px;
}
/* kolom aksi tetap satu baris */
.table td:has(a.px-2[class*="text-"]){
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Ukuran tombol konsisten (patokan: tombol filter ikon)
   - semua .btn ukuran normal tingginya sama, isi (ikon/teks) di tengah
   - .btn-default / .btn-icon (ikon saja atau teks) ikut tinggi yang sama
   - .btn-sm tetap kecil; tombol di tabel menyesuaikan tombol aksi (32px)
   -------------------------------------------------------------------------- */
:root{
    --skeuo-btn-height: 40px;
}
.btn:not(.btn-sm):not(.btn-lg):not(.btn-link):not(.dropdown-item){
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: var(--skeuo-btn-height);
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.2;
    vertical-align: middle;
}
.btn.btn-default,
.btn.btn-icon{
    padding: 0 15px !important;
}
.btn.btn-default i,
.btn.btn-icon i{
    font-size: 20px;
    line-height: 1;
}
.btn i{
    line-height: 1;
}
.btn.d-none{
    display: none !important;
}
.btn-group > .btn:not(.btn-sm):not(.btn-lg){
    min-height: var(--skeuo-btn-height);
}
/* tombol menempel di input mengikuti tinggi input */
.input-group > .btn:not(.btn-sm):not(.btn-lg){
    min-height: 0 !important;
    padding-top: .47rem;
    padding-bottom: .47rem;
}
/* tombol di dalam tabel setinggi tombol aksi */
.table .btn:not(.btn-sm):not(.btn-lg){
    min-height: 32px !important;
}
.table .btn.btn-default,
.table .btn.btn-icon{
    padding: 0 10px !important;
}
.table .btn.btn-default i,
.table .btn.btn-icon i{
    font-size: 16px;
}

/* --------------------------------------------------------------------------
   Header tabel: hijau muda sesuai tema supaya beda dengan baris data
   -------------------------------------------------------------------------- */
.table > thead > tr > th,
.table > thead > tr > td{
    --bs-table-accent-bg: transparent;
    color: #1f6e59 !important;
    font-weight: 600;
    background: linear-gradient(to bottom, #f3fcf8 0%, #dff3ea 100%) !important;
    border-color: #c9e6d9 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}
.table > thead > tr:last-child > th,
.table > thead > tr:last-child > td{
    border-bottom: 2px solid #a9d8c4 !important;
}
.table > thead a{
    color: #1f6e59 !important;
}
/* sub-header di dalam body (mis. detail realisasi anggaran) ikut senada tapi lebih muda */
.table > tbody > tr.sub-header-row > th{
    color: #1f6e59 !important;
    background: #f3fcf8 !important;
    border-color: #d9eee4 !important;
}

/* nomor dokumen/ref yang ditampilkan di bawah keterangan */
.badge.badge-ref{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 4px 9px;
    color: #1f6e59;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    background: linear-gradient(to bottom, #f3fcf8 0%, #dff3ea 100%);
    border: 1px solid #c9e6d9;
    border-radius: 6px;
    box-shadow: inset 0 1px 0 #ffffff, 0 1px 1px rgba(15, 34, 58, .05);
}
.badge.badge-ref i{
    font-size: 13px;
}

/* --------------------------------------------------------------------------
   Badge filter (ringkasan filter aktif di atas tabel)
   tinggi seragam, dengan/tanpa tombol hapus
   -------------------------------------------------------------------------- */
.badge-filter{
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    max-width: 100%;
    padding: 4px 14px !important;
    color: var(--skeuo-text);
    font-size: 12.5px;
    line-height: 1.2;
    vertical-align: middle;
    background: linear-gradient(to bottom, #ffffff 0%, #f3f6f8 100%);
    border: 1px solid var(--skeuo-border);
    border-radius: 8px !important;
    box-shadow: inset 0 1px 0 #ffffff, 0 1px 2px rgba(15, 34, 58, .07);
}
.badge-filter b{
    color: #1f6e59;
    font-weight: 600;
}
/* badge yang bisa dihapus: model input group (teks | tombol hapus) */
.badge-filter:has(> a){
    align-items: stretch;
    gap: 0;
    padding: 0 !important;
    overflow: hidden;
}
.badge-filter:has(> a) > span{
    display: flex;
    align-items: center;
    padding: 4px 12px 4px 14px;
}
.badge-filter > a{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    align-self: stretch;
    background: linear-gradient(to bottom, #f7f9fa 0%, #e6ebef 100%);
    border-left: 1px solid var(--skeuo-border);
    box-shadow: inset 0 1px 0 #ffffff;
    transition: background .12s ease;
}
.badge-filter > a i{
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1;
    color: #8a929a !important;
}
.badge-filter > a:hover{
    background: linear-gradient(to bottom, #f78b8b 0%, #e25555 100%);
    border-left-color: #cf4b4b;
}
.badge-filter > a:hover i{
    color: #ffffff !important;
}
.badge-filter > a:active{
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, .18);
}

/* tombol (ikon + teks) tidak turun baris */
.btn{
    white-space: nowrap;
}
.btn > i,
.btn > span{
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Tombol btn-soft-* (dipakai di dashboard: tambah/edit/hapus card)
   disamakan dengan tombol skeuomorphism lain
   -------------------------------------------------------------------------- */
.btn[class*="btn-soft-"]{
    color: #ffffff !important;
    border: 1px solid transparent;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .12);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .25),
        inset 0 -1px 0 rgba(0, 0, 0, .08),
        0 1px 2px rgba(15, 34, 58, .10);
}
.btn[class*="btn-soft-"] i{
    color: #ffffff !important;
    line-height: 1;
}
.btn[class*="btn-soft-"]:hover{
    filter: brightness(1.06);
}
.btn[class*="btn-soft-"]:active{
    transform: translateY(1px);
    filter: brightness(.96);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .15);
}
.btn.btn-soft-primary{
    background: linear-gradient(to bottom, #7d90ee 0%, #5b73e8 55%, #4a62d6 100%) !important;
    border-color: #3f55c2 !important;
}
.btn.btn-soft-info{
    background: linear-gradient(to bottom, #73b8f4 0%, #50a5f1 55%, #3b92e0 100%) !important;
    border-color: #3283cc !important;
}
.btn.btn-soft-danger{
    background: linear-gradient(to bottom, #f78b8b 0%, #f46a6a 55%, #e25555 100%) !important;
    border-color: #cf4b4b !important;
}
.btn.btn-soft-success{
    background: linear-gradient(to bottom, #3cc19c 0%, #28a382 55%, #1f8a6d 100%) !important;
    border-color: #1a7a60 !important;
}
.btn.btn-soft-warning{
    background: linear-gradient(to bottom, #f5c878 0%, #f1b44c 55%, #e0a138 100%) !important;
    border-color: #cc9230 !important;
}
/* tombol ikon kecil (edit/hapus di card dashboard), ukuran small */
.btn[class*="btn-soft-"].p-1{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 26px;
    /* !important: kalahkan min-height 40px aturan umum .btn:not(...) */
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 !important;
    border-radius: 6px;
}
.btn[class*="btn-soft-"].p-1 i{
    font-size: 13px !important;
}
/* tombol tambah di card kosong, ukuran small */
.btn.btn-add{
    display: flex !important;
    width: 32px;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    border-radius: 6px;
}
.btn.btn-add i{
    font-size: 16px !important;
}
/* judul card dashboard diperbesar */
.card[class*="card-slot-"] .card-body p.font-size-13{
    font-size: 15px !important;
    font-weight: 600;
    color: #343a40 !important;
    line-height: 1.3;
}

/* --------------------------------------------------------------------------
   Pagination: tombol kecil skeuomorphism, aktif = hijau tema
   -------------------------------------------------------------------------- */
.pagination{
    flex-wrap: wrap;
    gap: 5px;
}
.pagination .page-item:not(:first-child) .page-link{
    margin-left: 0;
}
.pagination .page-item:empty{
    display: none;
}
.pagination .page-link{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    color: var(--skeuo-text);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1;
    background: linear-gradient(to bottom, #ffffff 0%, #f5f6f8 55%, #e9ecef 100%);
    border: 1px solid #cfd5db;
    border-radius: 8px !important;
    text-shadow: 0 1px 0 #ffffff;
    box-shadow:
        inset 0 1px 0 #ffffff,
        inset 0 -1px 0 rgba(0, 0, 0, .05),
        0 1px 2px rgba(15, 34, 58, .08);
    transition: background .12s ease, box-shadow .12s ease, transform .12s ease;
}
.pagination .page-link i{
    font-size: 16px;
    line-height: 1;
}
.pagination .page-link:hover{
    color: var(--skeuo-green);
    background: linear-gradient(to bottom, #ffffff 0%, var(--skeuo-green-soft) 100%);
    border-color: #bfe5d6;
}
.pagination .page-link:active{
    transform: translateY(1px);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .12);
}
.pagination .page-link:focus{
    box-shadow:
        inset 0 1px 0 #ffffff,
        0 0 0 3px rgba(40, 163, 130, .18);
}
.pagination .page-item.active .page-link{
    color: #ffffff;
    font-weight: 600;
    background: linear-gradient(to bottom, #3cc19c 0%, #28a382 55%, #1f8a6d 100%);
    border-color: #1a7a60;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .12);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .25),
        inset 0 -1px 0 rgba(0, 0, 0, .08),
        0 1px 2px rgba(15, 34, 58, .10);
    cursor: default;
}
.pagination .page-item.disabled .page-link{
    color: #adb5bd;
    background: #f5f6f8;
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   Tombol outline: dasar terang timbul, teks & garis berwarna,
   hover/aktif terisi gradasi warnanya
   -------------------------------------------------------------------------- */
.btn[class*="btn-outline-"]{
    --skeuo-o-color: #74788d;
    --skeuo-o-top: #8d91a4;
    --skeuo-o-bottom: #63677b;
    --skeuo-o-border: #575b6e;
    color: var(--skeuo-o-color) !important;
    background: linear-gradient(to bottom, #ffffff 0%, #f5f6f8 55%, #eceff2 100%) !important;
    border: 1px solid var(--skeuo-o-color) !important;
    text-shadow: 0 1px 0 #ffffff;
    box-shadow:
        inset 0 1px 0 #ffffff,
        inset 0 -1px 0 rgba(0, 0, 0, .05),
        0 1px 2px rgba(15, 34, 58, .08);
}
.btn[class*="btn-outline-"] i{
    color: inherit !important;
}
.btn[class*="btn-outline-"]:hover,
.btn[class*="btn-outline-"].active,
.btn[class*="btn-outline-"]:active{
    color: #ffffff !important;
    background: linear-gradient(to bottom, var(--skeuo-o-top) 0%, var(--skeuo-o-color) 55%, var(--skeuo-o-bottom) 100%) !important;
    border-color: var(--skeuo-o-border) !important;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .12);
}
.btn[class*="btn-outline-"]:active{
    transform: translateY(1px);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .15);
}
.btn.btn-outline-primary{
    --skeuo-o-color: #5b73e8;
    --skeuo-o-top: #7d90ee;
    --skeuo-o-bottom: #4a62d6;
    --skeuo-o-border: #3f55c2;
}
.btn.btn-outline-secondary{
    --skeuo-o-color: #74788d;
    --skeuo-o-top: #8d91a4;
    --skeuo-o-bottom: #63677b;
    --skeuo-o-border: #575b6e;
}
.btn.btn-outline-success{
    --skeuo-o-color: #28a382;
    --skeuo-o-top: #3cc19c;
    --skeuo-o-bottom: #1f8a6d;
    --skeuo-o-border: #1a7a60;
}
.btn.btn-outline-info{
    --skeuo-o-color: #50a5f1;
    --skeuo-o-top: #73b8f4;
    --skeuo-o-bottom: #3b92e0;
    --skeuo-o-border: #3283cc;
}
.btn.btn-outline-warning{
    --skeuo-o-color: #e0a138;
    --skeuo-o-top: #f5c878;
    --skeuo-o-bottom: #d18f25;
    --skeuo-o-border: #cc9230;
}
.btn.btn-outline-danger{
    --skeuo-o-color: #f46a6a;
    --skeuo-o-top: #f78b8b;
    --skeuo-o-bottom: #e25555;
    --skeuo-o-border: #cf4b4b;
}
/* tombol "tambah baris" bergaris putus-putus */
.btn.dashed-border{
    border-style: dashed !important;
}
.btn.dashed-border:hover{
    border-style: solid !important;
}

/* --------------------------------------------------------------------------
   Badge status (badge bg-* dan badge bg-soft-*)
   bentuk/ukuran seragam + efek timbul tipis, warna tetap sesuai artinya
   -------------------------------------------------------------------------- */
.badge[class*="bg-"]{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: .38em .7em;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .2px;
    vertical-align: middle;
    border: 1px solid transparent;
    border-radius: 6px;
}
.badge.rounded-pill[class*="bg-"]{
    border-radius: 50rem;
}
/* ukuran teks seragam, kecuali view sudah menentukan font-size-* sendiri */
.badge[class*="bg-"]:not([class*="font-size-"]){
    font-size: 11.5px;
}

/* badge solid */
.badge.bg-primary,
.badge.bg-secondary,
.badge.bg-success,
.badge.bg-info,
.badge.bg-warning,
.badge.bg-danger,
.badge.bg-dark{
    color: #ffffff !important;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .15);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .25),
        0 1px 1px rgba(15, 34, 58, .10);
}
.badge.bg-primary{
    background: linear-gradient(to bottom, #7d90ee 0%, #5b73e8 60%, #4a62d6 100%) !important;
    border-color: #3f55c2;
}
.badge.bg-secondary{
    background: linear-gradient(to bottom, #8d91a4 0%, #74788d 60%, #63677b 100%) !important;
    border-color: #575b6e;
}
.badge.bg-success{
    background: linear-gradient(to bottom, #3cc19c 0%, #28a382 60%, #1f8a6d 100%) !important;
    border-color: #1a7a60;
}
.badge.bg-info{
    background: linear-gradient(to bottom, #73b8f4 0%, #50a5f1 60%, #3b92e0 100%) !important;
    border-color: #3283cc;
}
.badge.bg-warning{
    background: linear-gradient(to bottom, #f5c878 0%, #f1b44c 60%, #e0a138 100%) !important;
    border-color: #cc9230;
}
.badge.bg-warning.text-dark{
    color: #5c4210 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
}
.badge.bg-danger{
    background: linear-gradient(to bottom, #f78b8b 0%, #f46a6a 60%, #e25555 100%) !important;
    border-color: #cf4b4b;
}
.badge.bg-dark{
    background: linear-gradient(to bottom, #4d545b 0%, #343a40 60%, #272c31 100%) !important;
    border-color: #1f2327;
}
.badge.bg-light{
    color: var(--skeuo-text) !important;
    background: linear-gradient(to bottom, #ffffff 0%, #eef1f4 100%) !important;
    border-color: #d3d9df;
    box-shadow: inset 0 1px 0 #ffffff, 0 1px 1px rgba(15, 34, 58, .06);
}

/* badge soft: latar muda, teks & garis berwarna */
.badge[class*="bg-soft-"]{
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 1px 1px rgba(15, 34, 58, .05);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}
.badge.bg-soft-primary{
    color: #3f55c2 !important;
    background: linear-gradient(to bottom, #f3f5fe 0%, #e2e7fb 100%) !important;
    border-color: #c9d1f6;
}
.badge.bg-soft-secondary{
    color: #575b6e !important;
    background: linear-gradient(to bottom, #f6f7f9 0%, #e8e9ee 100%) !important;
    border-color: #d5d7df;
}
.badge.bg-soft-success{
    color: #1f6e59 !important;
    background: linear-gradient(to bottom, #f3fcf8 0%, #dff3ea 100%) !important;
    border-color: #c9e6d9;
}
.badge.bg-soft-info{
    color: #2a78bd !important;
    background: linear-gradient(to bottom, #f2f8fe 0%, #dfeefc 100%) !important;
    border-color: #c4e0f9;
}
.badge.bg-soft-warning{
    color: #a06d14 !important;
    background: linear-gradient(to bottom, #fefaf2 0%, #fcefd5 100%) !important;
    border-color: #f6dca8;
}
.badge.bg-soft-danger{
    color: #c03e3e !important;
    background: linear-gradient(to bottom, #fef5f5 0%, #fde2e2 100%) !important;
    border-color: #f8c6c6;
}

/* kolom keterangan (manual jurnal / sinkron jurnal): lebar dibatasi di desktop */
@media (min-width: 992px){
    .table th.col-keterangan,
    .table td.col-keterangan{
        width: 360px;
        min-width: 240px;
        max-width: 360px;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

/* --------------------------------------------------------------------------
   Dropdown (avatar header, tombol cetak, aksi tabel, dll)
   disamakan dengan dropdown menu atas
   -------------------------------------------------------------------------- */
.dropdown-menu:not(.datepicker){
    padding: 6px;
    background: linear-gradient(to bottom, #ffffff 0%, #f5f8fa 100%);
    border: 1px solid var(--skeuo-border);
    border-radius: 10px;
    box-shadow: inset 0 1px 0 #ffffff, 0 6px 14px -6px rgba(15, 34, 58, .18);
}
.dropdown-menu .dropdown-item{
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    color: var(--skeuo-text);
    font-size: 13px;
    border: 1px solid transparent;
    border-radius: 6px;
}
.dropdown-menu .dropdown-item i{
    color: inherit !important;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus{
    color: var(--skeuo-green);
    background: linear-gradient(to bottom, #ffffff 0%, var(--skeuo-green-soft) 100%);
    border-color: #cdeee2;
    box-shadow: inset 0 1px 0 #ffffff, 0 1px 1px rgba(15, 34, 58, .05);
}
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active{
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .15);
    background: linear-gradient(to bottom, #2fb892 0%, var(--skeuo-green-dark) 100%);
    border-color: #186a54;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .10);
}
.dropdown-menu .dropdown-item.disabled,
.dropdown-menu .dropdown-item:disabled{
    color: #adb5bd;
    background: transparent;
    box-shadow: none;
}
.dropdown-menu .dropdown-divider{
    margin: 4px 2px;
    border-top-color: var(--skeuo-border);
}
.dropdown-menu .dropdown-header{
    padding: 6px 12px;
    color: #1f6e59;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
}

/* menu avatar: baris nama user dibuat seperti judul, bukan item yang bisa diklik */
#page-topbar .dropdown-menu .dropdown-item[href="javascript:;"]{
    color: #1f6e59;
    font-weight: 600;
    cursor: default;
    background: none;
    border-color: transparent;
    box-shadow: none;
    border-bottom: 1px solid var(--skeuo-border);
    border-radius: 6px 6px 0 0;
    margin-bottom: 4px;
}
/* item logout merah saat disorot */
#page-topbar .dropdown-menu .dropdown-item[href$="welcome/logout"]:hover{
    color: #c03e3e;
    background: linear-gradient(to bottom, #ffffff 0%, #fde2e2 100%);
    border-color: #f8c6c6;
}

/* avatar header ikut timbul */
#page-topbar .header-profile-user{
    padding: 2px;
    background: linear-gradient(to bottom, #ffffff 0%, #e9edf1 100%);
    border: 1px solid #d3d9df;
    box-shadow: inset 0 1px 0 #ffffff, 0 1px 2px rgba(15, 34, 58, .10);
}

/* --------------------------------------------------------------------------
   Kotak pencarian di toolbar atas tabel (dipindah oleh layout.js)
   -------------------------------------------------------------------------- */
.toolbar-dengan-pencarian{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}
.toolbar-dengan-pencarian > *{
    margin-bottom: 0 !important;
}
.toolbar-dengan-pencarian .btn{
    margin-bottom: 0 !important;
}
.search-box.search-box-toolbar{
    flex: 0 1 260px;
}
.search-box.search-box-toolbar .form-control{
    height: var(--skeuo-btn-height);
    padding-left: 38px;
    background: linear-gradient(to bottom, #f3f6f8 0%, #ffffff 100%) !important;
    border: 1px solid var(--skeuo-border) !important;
    border-radius: 8px !important;
    box-shadow: inset 0 1px 2px rgba(15, 34, 58, .08);
}
.search-box.search-box-toolbar .form-control:focus{
    border-color: #a9d8c4 !important;
    box-shadow: inset 0 1px 2px rgba(15, 34, 58, .08), 0 0 0 3px rgba(40, 163, 130, .15);
}
.search-box.search-box-toolbar .search-icon{
    left: 13px;
    line-height: var(--skeuo-btn-height);
    color: #8a929a;
}
@media (max-width: 767.98px){
    .toolbar-dengan-pencarian{
        justify-content: flex-start;
        margin-top: 10px;
    }
    .search-box.search-box-toolbar{
        flex: 1 1 100%;
    }
}

/* --------------------------------------------------------------------------
   Input form: gaya menjorok (inset) seragam, disamakan dengan kotak pencarian
   -------------------------------------------------------------------------- */
:root{
    --skeuo-input-bg: linear-gradient(to bottom, #f3f6f8 0%, #ffffff 100%);
    --skeuo-input-shadow: inset 0 1px 2px rgba(15, 34, 58, .08);
    --skeuo-input-focus: inset 0 1px 2px rgba(15, 34, 58, .08), 0 0 0 3px rgba(40, 163, 130, .15);
}
.form-control,
.form-select{
    color: #343a40;
    background-color: #ffffff;
    background-image: var(--skeuo-input-bg);
    border: 1px solid var(--skeuo-border);
    border-radius: 8px !important;
    box-shadow: var(--skeuo-input-shadow);
    transition: border-color .15s ease, box-shadow .15s ease;
}
/* form-select tetap menampilkan panah bawaan bootstrap di atas gradasi */
.form-select{
    background-image:
        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23495057' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"),
        var(--skeuo-input-bg);
    background-repeat: no-repeat, no-repeat;
    background-position: right .75rem center, 0 0;
    background-size: 16px 12px, 100% 100%;
}
.form-control:not(textarea):not(.form-control-sm):not(.form-control-lg):not([type="file"]):not([type="color"]),
.form-select:not(.form-select-sm):not(.form-select-lg){
    min-height: var(--skeuo-btn-height);
}
.form-control::placeholder{
    color: #a6adb4;
}
.form-control:focus,
.form-select:focus{
    border-color: #a9d8c4;
    box-shadow: var(--skeuo-input-focus);
}
.form-control:disabled,
.form-control[readonly],
.form-select:disabled{
    color: #6c757d;
    background-image: none;
    background-color: #eef1f4;
    box-shadow: inset 0 1px 2px rgba(15, 34, 58, .05);
}
/* input berkelas bg-white/bg-light/border-0 bawaan view ikut seragam */
.form-control.bg-white,
.form-control.bg-light{
    background-image: var(--skeuo-input-bg) !important;
}
.form-control.border-0{
    border: 1px solid var(--skeuo-border) !important;
}
.form-control.is-invalid,
.form-select.is-invalid{
    border-color: #f46a6a;
}
.form-control.is-valid,
.form-select.is-valid{
    border-color: #28a382;
}

/* input group */
.input-group-text{
    color: var(--skeuo-text);
    background: linear-gradient(to bottom, #ffffff 0%, #eef1f4 100%);
    border: 1px solid var(--skeuo-border);
    box-shadow: inset 0 1px 0 #ffffff;
}
.input-group > .form-control:not(:last-child),
.input-group > .form-select:not(:last-child){
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.input-group > .form-control:not(:first-child),
.input-group > .form-select:not(:first-child){
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
.input-group > .input-group-text:first-child,
.input-group > .btn:first-child{
    border-radius: 8px 0 0 8px !important;
}
.input-group > .input-group-text:last-child,
.input-group > .btn:last-child{
    border-radius: 0 8px 8px 0 !important;
}

/* select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple{
    min-height: var(--skeuo-btn-height);
    background-color: #ffffff;
    background-image: var(--skeuo-input-bg);
    border: 1px solid var(--skeuo-border) !important;
    border-radius: 8px !important;
    box-shadow: var(--skeuo-input-shadow);
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
    line-height: calc(var(--skeuo-btn-height) - 2px);
    padding-left: 12px;
    color: #343a40;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{
    height: calc(var(--skeuo-btn-height) - 2px);
    right: 6px;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple{
    border-color: #a9d8c4 !important;
    box-shadow: var(--skeuo-input-focus);
}
.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple{
    background-image: none;
    background-color: #eef1f4;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice{
    color: #1f6e59;
    background: linear-gradient(to bottom, #f3fcf8 0%, #dff3ea 100%);
    border: 1px solid #c9e6d9;
    border-radius: 6px;
}
.select2-dropdown{
    border: 1px solid var(--skeuo-border) !important;
    border-radius: 8px !important;
    overflow: hidden;
}
.select2-container--default .select2-search--dropdown .select2-search__field{
    background-image: var(--skeuo-input-bg);
    border: 1px solid var(--skeuo-border);
    border-radius: 6px;
    box-shadow: var(--skeuo-input-shadow);
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{
    color: #ffffff;
    background: linear-gradient(to bottom, #2fb892 0%, var(--skeuo-green-dark) 100%);
}
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option--selected{
    color: #1f6e59;
    background: var(--skeuo-green-soft);
}

/* checkbox & radio */
.form-check-input{
    background-color: #ffffff;
    border: 1px solid #c3cbd2;
    box-shadow: inset 0 1px 2px rgba(15, 34, 58, .10);
}
.form-check-input:checked{
    background-color: var(--skeuo-green);
    border-color: #1a7a60;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 1px rgba(15, 34, 58, .10);
}
.form-check-input:focus{
    border-color: #a9d8c4;
    box-shadow: 0 0 0 3px rgba(40, 163, 130, .15);
}

/* --------------------------------------------------------------------------
   Baris atas tabel: "Tampil N entri" + badge filter dalam satu baris
   -------------------------------------------------------------------------- */
.toolbar-tabel{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 12px;
}
.toolbar-tabel > .mb-3{
    margin-bottom: 0 !important;
}
.toolbar-tabel-filter{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.toolbar-tabel-filter:empty{
    display: none;
}
.toolbar-tabel-filter .badge-filter{
    margin: 0 !important;
}
/* pilihan jumlah entri setinggi badge filter */
.toolbar-tabel #limit{
    min-height: 34px;
    height: 34px;
    padding-top: 0;
    padding-bottom: 0;
}

/* --------------------------------------------------------------------------
   Tab (nav-pills / nav-tabs): wadah menjorok, tab aktif timbul hijau
   -------------------------------------------------------------------------- */
.nav-pills,
.nav-tabs{
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    background: linear-gradient(to bottom, #e9edf1 0%, #f3f6f8 100%);
    border: 1px solid var(--skeuo-border);
    border-radius: 10px;
    box-shadow: inset 0 1px 3px rgba(15, 34, 58, .10);
}
.nav-pills .nav-item,
.nav-tabs .nav-item{
    margin: 0;
}
.nav-pills .nav-link,
.nav-tabs .nav-link{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    color: var(--skeuo-text);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 7px;
    transition: background .15s ease, box-shadow .15s ease, color .15s ease;
}
.nav-pills .nav-link:hover,
.nav-tabs .nav-link:hover{
    color: var(--skeuo-green);
    background: linear-gradient(to bottom, #ffffff 0%, #f5f8fa 100%);
    border-color: var(--skeuo-border);
    box-shadow: inset 0 1px 0 #ffffff, 0 1px 1px rgba(15, 34, 58, .06);
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link{
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .15);
    background: linear-gradient(to bottom, #3cc19c 0%, #28a382 55%, #1f8a6d 100%);
    border-color: #1a7a60;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(15, 34, 58, .12);
}
.nav-pills .nav-link i,
.nav-tabs .nav-link i{
    font-size: 15px;
    line-height: 1;
}
/* tab kecil (mis. pilihan Grafik/Tabel di dashboard) */
.nav-pills .nav-link.btn-sm{
    padding: 4px 12px;
    font-size: 12px;
}
@media (max-width: 575.98px){
    .nav-pills,
    .nav-tabs{
        display: flex;
    }
    .nav-pills .nav-item,
    .nav-tabs .nav-item{
        flex: 1 1 auto;
    }
    .nav-pills .nav-link,
    .nav-tabs .nav-link{
        justify-content: center;
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   Tinggi halaman: footer menempel di bawah tanpa ruang kosong berlebih.
   custom.css memberi .main-content min-height 100vh, padahal menu atas
   (header + topnav) ada di luar .main-content -> halaman selalu lebih
   tinggi dari layar. Tinggi minimal dipindah ke #layout-wrapper.
   -------------------------------------------------------------------------- */
#layout-wrapper{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
#layout-wrapper > .topnav-skeuo{
    flex-shrink: 0;
}
#layout-wrapper > .main-content{
    flex: 1 0 auto;
    min-height: 0 !important;
}

/* --------------------------------------------------------------------------
   Breadcrumb: teks polos ringkas (ikon home, pemisah panah, halaman aktif tebal)
   (menimpa gaya chip bertumpuk di custom.css)
   -------------------------------------------------------------------------- */
.page-title-box{
    padding-bottom: .75rem;
}
.page-title-box .breadcrumb{
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}
.breadcrumb-item,
.breadcrumb-item.active{
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 14px;
    line-height: 1;
    text-align: left;
    background: none !important;
    border-radius: 0;
    box-shadow: none !important;
    z-index: auto;
}
.breadcrumb-item + .breadcrumb-item::before{
    content: "\F0142";
    float: none;
    padding: 0 8px;
    color: #b5bcc3;
    font-family: "Material Design Icons";
    font-size: 17px;
}
.breadcrumb-item > a{
    color: #74788d !important;
}
.breadcrumb-item > a:hover{
    color: var(--skeuo-green) !important;
}
.breadcrumb-item.active{
    color: #1f6e59;
    font-weight: 600;
    text-shadow: none;
}
.breadcrumb-item.home{
    width: auto;
    border: 0;
    border-radius: 0;
}
.breadcrumb-item.home a{
    display: inline-flex;
    color: var(--skeuo-green) !important;
    font-size: 20px;
    line-height: 1;
}
.breadcrumb-item.home a:hover{
    color: var(--skeuo-green-dark) !important;
}

/* --------------------------------------------------------------------------
   Panel daftar aplikasi (tombol grid di header -> .right-bar)
   disamakan dengan dropdown lain
   -------------------------------------------------------------------------- */
.right-bar{
    background: linear-gradient(to bottom, #ffffff 0%, #f5f8fa 100%);
    border: 1px solid var(--skeuo-border);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 #ffffff, 0 10px 24px -8px rgba(15, 34, 58, .25);
}
.right-bar-enabled .right-bar{
    width: 340px;
}
/* panah kecil di atas panel */
.right-bar:before{
    top: -8px;
    width: 14px;
    height: 14px;
    background: #ffffff;
    border-top: 1px solid var(--skeuo-border);
    border-left: 1px solid var(--skeuo-border);
    border-radius: 3px 0 0 0;
}
.right-bar .simplebar-content-wrapper,
.right-bar [data-simplebar]{
    border-radius: 12px;
}
.right-bar .rightbar-title{
    padding: 14px 18px 10px !important;
    border-bottom: 1px solid var(--skeuo-border);
}
.right-bar .rightbar-title h5{
    color: #1f6e59 !important;
    font-size: 14px;
    font-weight: 600;
}
.right-bar .rightbar-title + div{
    padding: 14px !important;
}
.right-bar .row{
    --bs-gutter-x: 10px;
    row-gap: 10px;
}
.right-bar .row > [class*="col-"]{
    margin-bottom: 0 !important;
}
/* tile aplikasi */
.right-bar .hover-apps{
    height: 100%;
    padding: 14px 8px 10px;
    background: linear-gradient(to bottom, #ffffff 0%, #f3f6f8 100%);
    border: 1px solid var(--skeuo-border);
    border-radius: 10px;
    box-shadow: inset 0 1px 0 #ffffff, 0 1px 2px rgba(15, 34, 58, .06);
    transition: background .15s ease, box-shadow .15s ease, transform .12s ease;
}
.right-bar .hover-apps img{
    width: 40px;
    height: 40px;
    object-fit: contain;
    filter: drop-shadow(0 1px 1px rgba(15, 34, 58, .15));
}
.right-bar .hover-apps p{
    color: var(--skeuo-text) !important;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
}
.right-bar .hover-apps:hover{
    background: linear-gradient(to bottom, #ffffff 0%, var(--skeuo-green-soft) 100%);
    border-color: #bfe5d6;
    box-shadow: inset 0 1px 0 #ffffff, 0 2px 4px rgba(15, 34, 58, .08);
}
.right-bar .hover-apps:hover p{
    color: var(--skeuo-green) !important;
}
.right-bar .hover-apps:active{
    transform: translateY(1px);
    box-shadow: inset 0 1px 3px rgba(15, 34, 58, .12);
}
/* latar belakang saat panel terbuka dibuat lebih tipis */
.rightbar-overlay{
    background-color: rgba(15, 34, 58, .18) !important;
}
@media (max-width: 575.98px){
    .right-bar-enabled .right-bar{
        width: calc(100vw - 24px);
        right: 12px;
    }
}

/* --------------------------------------------------------------------------
   Status + tombol batalkan di bawahnya (pengganti split-dropdown di tabel)
   -------------------------------------------------------------------------- */
.status-dengan-batal{
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
.btn-batal-status{
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    color: #c03e3e !important;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    background: linear-gradient(to bottom, #ffffff 0%, #fdeeee 100%);
    border: 1px solid #f3c2c2;
    border-radius: 6px;
    box-shadow: inset 0 1px 0 #ffffff, 0 1px 1px rgba(15, 34, 58, .05);
    transition: background .12s ease, color .12s ease;
}
.btn-batal-status i{
    font-size: 13px;
    line-height: 1;
}
.btn-batal-status:hover{
    color: #ffffff !important;
    background: linear-gradient(to bottom, #f78b8b 0%, #e25555 100%);
    border-color: #cf4b4b;
}
.btn-batal-status:active{
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .15);
}

/* pembungkus isi kolom status (diisi ulang via JS) selalu rata tengah */
.layout-status{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.layout-status > .dropdown{
    margin-top: 0 !important;
}


/* label unit kerja di bawah tanggal (manual jurnal / sinkron jurnal) */
.badge.badge-unit{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    margin-top: 6px;
    padding: 4px 9px;
    color: #3f55c2;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.25;
    white-space: normal;
    text-align: left;
    background: linear-gradient(to bottom, #f3f5fe 0%, #e2e7fb 100%);
    border: 1px solid #c9d1f6;
    border-radius: 6px;
    box-shadow: inset 0 1px 0 #ffffff, 0 1px 1px rgba(15, 34, 58, .05);
}
.badge.badge-unit i{
    font-size: 13px;
}

/* badge dengan <br> (mis. "Menunggu<br>Persetujuan") tampil 2 baris rata tengah */
.badge:has(br){
    display: inline-block !important;
    text-align: center;
    line-height: 1.35;
}

/* badge status di tabel manual jurnal / sinkron jurnal: teks dibungkus per kata, rata tengah */
.table-badge-wrap .badge[class*="bg-"]{
    width: min-content;
    white-space: normal;
    text-align: center;
    justify-content: center;
    line-height: 1.35;
}