/* =====================================================================
   SEJURA — Elegant Dark Green Theme
   Layer di atas volt.min.css, mengikuti pendekatan sipema-blue.css pada
   aplikasi abdimas: semua warna diturunkan dari token di :root supaya
   gampang di-tuning satu tempat, plus penyesuaian khusus layar kecil.
   ===================================================================== */

:root {
    /* Merek — hijau tua ke hijau daun */
    --sj-forest-900: #08281B;
    --sj-forest-800: #0D3524;
    --sj-forest-700: #13492F;
    --sj-green-800:  #0B4F27;
    --sj-green-700:  #106733;
    --sj-green-600:  #15803D;
    --sj-green-500:  #22A455;
    --sj-green-400:  #4ADE80;
    --sj-green-100:  #D6F0DF;
    --sj-green-50:   #F1FAF4;

    /* Netral kehijauan */
    --sj-bg:        #F4F7F5;
    --sj-surface:   #FFFFFF;
    --sj-border:    #E4EDE7;
    --sj-text:      #1E2B23;
    --sj-text-soft: #5B6B61;
    --sj-muted:     #8C9A92;

    /* Status */
    --sj-success: #0F9D58;
    --sj-warning: #E9A23B;
    --sj-danger:  #DC3545;
    --sj-info:    var(--sj-green-500);

    /* Elevasi & bentuk */
    --sj-radius:    .75rem;
    --sj-radius-sm: .5rem;
    --sj-shadow-xs: 0 1px 2px rgba(8, 40, 27, .06);
    --sj-shadow-sm: 0 2px 8px rgba(8, 40, 27, .07);
    --sj-shadow-md: 0 6px 20px rgba(8, 40, 27, .10);
    --sj-shadow-lg: 0 14px 40px rgba(8, 40, 27, .16);
    --sj-ring:      0 0 0 .2rem rgba(21, 128, 61, .18);
}

/* ---------------------------------------------------------------------
   Global
   --------------------------------------------------------------------- */

body {
    background-color: var(--sj-bg);
    color: var(--sj-text);
    font-family: Inter, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--sj-forest-900);
    font-weight: 600;
    letter-spacing: -.01em;
}

a { color: var(--sj-green-600); }
a:hover { color: var(--sj-green-700); }

.text-primary, .text-info { color: var(--sj-green-600) !important; }
.text-gray-900, .text-dark { color: var(--sj-text) !important; }
.text-gray-500, .text-gray-600, .text-muted { color: var(--sj-text-soft) !important; }

.bg-primary { background-color: var(--sj-green-600) !important; }
.bg-gray-800 { background-color: var(--sj-forest-900) !important; }
.bg-soft { background-color: var(--sj-green-50) !important; }

.shadow, .shadow-sm { box-shadow: var(--sj-shadow-sm) !important; }
.shadow-lg { box-shadow: var(--sj-shadow-md) !important; }

::selection { background: var(--sj-green-100); color: var(--sj-forest-900); }

/* Scrollbar halus */
* { scrollbar-width: thin; scrollbar-color: #C9E0D2 transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #C9E0D2; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--sj-green-400); }

/* ---------------------------------------------------------------------
   Sidebar
   --------------------------------------------------------------------- */

.sidebar {
    background: linear-gradient(180deg, var(--sj-forest-900) 0%, var(--sj-forest-800) 55%, var(--sj-forest-700) 100%) !important;
    box-shadow: 2px 0 24px rgba(8, 40, 27, .22);
    border-right: 1px solid rgba(255, 255, 255, .05);
}

.sidebar .sidebar-inner { padding-bottom: 2rem; }

.sidebar .nav-item { margin-bottom: .15rem; }

.sidebar .nav-link,
.sidebar .nav-item .nav-link {
    color: #C8DCCF;
    font-size: .9rem;
    font-weight: 500;
    border-radius: var(--sj-radius-sm);
    padding: .55rem .8rem;
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.sidebar .nav-link .sidebar-icon,
.sidebar .nav-link .sidebar-icon svg { color: #93B3A0; transition: color .18s ease; }

.sidebar .nav-item .nav-link:hover,
.sidebar .nav-link:hover {
    background-color: rgba(74, 222, 128, .16);
    color: #FFFFFF;
}

.sidebar .nav-link:hover .sidebar-icon,
.sidebar .nav-link:hover .sidebar-icon svg { color: var(--sj-green-400); }

.sidebar .nav-item.active > .nav-link,
.sidebar .nav-link.active {
    background: linear-gradient(90deg, var(--sj-green-600) 0%, var(--sj-green-500) 100%);
    color: #FFFFFF;
    font-weight: 600;
    box-shadow: 0 6px 16px rgba(21, 128, 61, .38);
}

.sidebar .nav-item.active > .nav-link .sidebar-icon,
.sidebar .nav-item.active > .nav-link .sidebar-icon svg { color: #FFFFFF; }

/* Submenu bertingkat */
.sidebar .multi-level {
    margin: .15rem 0 .35rem .55rem;
    padding-left: .55rem;
    border-left: 1px solid rgba(255, 255, 255, .12);
}

.sidebar .multi-level .nav-link {
    font-size: .84rem;
    color: #A9C6B5;
    padding: .4rem .7rem;
}

.sidebar .multi-level .nav-item.active > .nav-link {
    background: rgba(21, 128, 61, .92);
    box-shadow: none;
}

.sidebar .link-arrow svg { opacity: .7; }

.sidebar .user-card { border-bottom-color: rgba(255, 255, 255, .1); }

.sidebar-heading,
.sidebar .sidebar-text.text-uppercase {
    color: #7FA08D;
    letter-spacing: .08em;
    font-weight: 600;
}

.sidebar hr, .sidebar .dropdown-divider { border-color: rgba(255, 255, 255, .1); }

/* ---------------------------------------------------------------------
   Navbar atas
   --------------------------------------------------------------------- */

.navbar-dashboard {
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border: 1px solid var(--sj-border);
    border-radius: var(--sj-radius);
    box-shadow: var(--sj-shadow-sm);
    margin-top: .85rem;
    /* !important supaya menang atas kelas ps-0 / pe-2 / pb-0 di markup navbar,
       kalau tidak tombol toggle menempel persis di tepi bar. */
    padding: .5rem .9rem !important;
    position: sticky;
    top: .5rem;
    z-index: 60;
}

.navbar-dashboard .sidebar-text {
    color: var(--sj-forest-900);
    font-weight: 600;
    font-size: .98rem;
    letter-spacing: -.01em;
}

.navbar-dashboard .sidebar-toggle {
    color: var(--sj-green-600);
    background: var(--sj-green-50);
    border-radius: var(--sj-radius-sm);
    width: 2.25rem; height: 2.25rem;
    padding: 0;
    flex: 0 0 auto;
    transition: background-color .18s ease, color .18s ease;
}

/* .d-lg-inline-block memakai !important, jadi perlu !important juga supaya
   ikonnya bisa ditengahkan pakai flex. Wajib dikurung media query lg: tanpa
   itu selector ini (0,2,0) mengalahkan .d-none (0,1,0) dan tombolnya ikut
   muncul di mobile, padahal di sana yang dipakai .navbar-toggler. */
@media (min-width: 992px) {
    .navbar-dashboard .sidebar-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }
}

.navbar-dashboard .sidebar-toggle .toggle-icon {
    display: block;
    width: 1.15rem;
    height: 1.15rem;
}

.navbar-dashboard .sidebar-toggle:hover,
.navbar-dashboard .sidebar-toggle:focus {
    background: var(--sj-green-100);
    color: var(--sj-green-700);
    box-shadow: none;
}

.navbar-dashboard .nav-link,
.navbar-dashboard .dropdown-toggle { color: var(--sj-text) !important; }

.navbar-dashboard .avatar {
    border: 2px solid var(--sj-green-100);
    box-shadow: var(--sj-shadow-xs);
    /* Tanpa ini avatar tergencet jadi lonjong di layar sempit: lebarnya
       diatur inline oleh Volt tapi flex boleh menyusutkannya. */
    flex-shrink: 0;
}

/* Navbar mobile (di luar .content) */
.navbar-theme-primary:not(.headroom) {
    background: linear-gradient(90deg, var(--sj-forest-900) 0%, var(--sj-green-700) 100%) !important;
}

/* ---------------------------------------------------------------------
   Card
   --------------------------------------------------------------------- */

.card {
    background-color: var(--sj-surface);
    border: 1px solid var(--sj-border);
    border-radius: var(--sj-radius);
    box-shadow: var(--sj-shadow-sm);
    transition: box-shadow .2s ease;
}

.card.shadow:hover, .card.shadow-lg:hover { box-shadow: var(--sj-shadow-md); }

.card-header {
    background-color: var(--sj-surface);
    border-bottom: 1px solid var(--sj-border);
    color: var(--sj-forest-900);
    font-weight: 600;
    border-top-left-radius: var(--sj-radius);
    border-top-right-radius: var(--sj-radius);
    padding: 1rem 1.5rem;
}

.card-footer {
    background-color: var(--sj-surface);
    border-top: 1px solid var(--sj-border);
    border-bottom-left-radius: var(--sj-radius);
    border-bottom-right-radius: var(--sj-radius);
}

.card .card-title { color: var(--sj-forest-900); }

/* ---------------------------------------------------------------------
   Tombol
   --------------------------------------------------------------------- */

.btn {
    border-radius: var(--sj-radius-sm);
    font-weight: 500;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}

.btn:active { transform: translateY(1px); }

/* .btn-info dipakai luas di sejura sebagai tombol aksi utama, jadi ikut
   dijadikan hijau bersama .btn-primary / .btn-secondary. */
.btn-primary,
.btn-secondary,
.btn-info {
    background: linear-gradient(180deg, var(--sj-green-600) 0%, var(--sj-green-700) 100%);
    border-color: var(--sj-green-700);
    color: #fff;
    box-shadow: 0 2px 6px rgba(21, 128, 61, .25);
}

.btn-primary:hover, .btn-primary:focus,
.btn-secondary:hover, .btn-secondary:focus,
.btn-info:hover, .btn-info:focus {
    background: linear-gradient(180deg, var(--sj-green-700) 0%, var(--sj-green-800) 100%);
    border-color: var(--sj-green-800);
    color: #fff;
    box-shadow: 0 4px 12px rgba(16, 103, 51, .32);
}

.btn-check:focus + .btn-primary, .btn-primary:focus,
.btn-check:focus + .btn-secondary, .btn-secondary:focus,
.btn-check:focus + .btn-info, .btn-info:focus { box-shadow: var(--sj-ring); }

.btn-outline-primary {
    color: var(--sj-green-600);
    border-color: var(--sj-green-500);
    background: transparent;
}
.btn-outline-primary:hover {
    background: var(--sj-green-600);
    border-color: var(--sj-green-600);
    color: #fff;
}

.btn-success { background-color: var(--sj-success); border-color: var(--sj-success); color: #fff; }
.btn-success:hover { background-color: #0C8449; border-color: #0C8449; color: #fff; }

.btn-warning { background-color: var(--sj-warning); border-color: var(--sj-warning); color: #fff; }
.btn-warning:hover { background-color: #D08D28; border-color: #D08D28; color: #fff; }

.btn-danger { background-color: var(--sj-danger); border-color: var(--sj-danger); }

.btn-light, .btn-outline-light {
    background-color: #fff;
    border-color: var(--sj-border);
    color: var(--sj-text);
}
.btn-light:hover, .btn-outline-light:hover {
    background-color: var(--sj-green-50);
    border-color: var(--sj-green-100);
    color: var(--sj-green-700);
}

/* Tombol gelap bawaan Volt (dipakai di tombol Sign in) ikut jadi hijau */
.btn-gray-800 {
    background: linear-gradient(180deg, var(--sj-green-600) 0%, var(--sj-green-700) 100%);
    border-color: var(--sj-green-700);
    color: #fff;
}
.btn-gray-800:hover, .btn-gray-800:focus {
    background: linear-gradient(180deg, var(--sj-green-700) 0%, var(--sj-green-800) 100%);
    border-color: var(--sj-green-800);
    color: #fff;
}

/* ---------------------------------------------------------------------
   Tabel
   --------------------------------------------------------------------- */

.table {
    color: var(--sj-text);
    border-color: var(--sj-border);
}

.table thead th,
.table > thead > tr > th,
.table thead.thead-light th,
.thead-light th {
    background-color: var(--sj-green-50);
    color: var(--sj-green-800);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--sj-border);
    vertical-align: middle;
}

.table > :not(caption) > * > * { border-bottom-color: #EAF4EE; }

/* Bootstrap menutup baris terakhir tiap grup (termasuk <thead>) dengan
   `border-bottom: 2px solid currentColor`, dan selectornya (0,3,0) menang
   atas aturan `.table thead th` di atas — jadi garis bawah header ikut
   sepekat warna teksnya. Ditimpa dengan selector yang sama persis. */
.table > :not(:last-child) > :last-child > * { border-bottom-color: var(--sj-border); }

.table > :not(caption) > * > th,
.table > :not(caption) > * > td { padding: .85rem .9rem; }

.table tbody tr { transition: background-color .15s ease; }

/* Hover sengaja memakai abu-abu kehijauan yang netral, bukan --sj-green-50:
   setelah tema jadi hijau, rona hijau muda nyaris tak terbedakan dari baris
   berstatus .table-success di bawah. */
.table-hover > tbody > tr:hover,
.table-hover tbody tr:hover > * { background-color: #F1F4F2; color: var(--sj-text); }

.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: #F9FDFB; color: var(--sj-text); }

/* Card yang membungkus tabel: sudut tabel ikut membulat */
.card > .table-responsive:last-child,
.card > .table:last-child {
    border-bottom-left-radius: var(--sj-radius);
    border-bottom-right-radius: var(--sj-radius);
    overflow: hidden;
}

/* Kolom/heading sticky dari my_css.css */
.sticky-column { background-color: #fff; box-shadow: 2px 0 6px rgba(8, 40, 27, .10); }
.sticky-header { background-color: var(--sj-green-50); box-shadow: 0 2px 6px rgba(8, 40, 27, .10); }

/* Warna baris berstatus: versi lebih lembut dan selaras dengan tema,
   dengan garis kiri sebagai penanda supaya tetap terbaca bagi yang
   kesulitan membedakan warna. */
.table > :not(caption) > tr.table-success > *,
.table > :not(caption) > * > tr.table-success > * { --bs-table-bg: #E8F6EF; }
.table > :not(caption) > tr.table-warning > *,
.table > :not(caption) > * > tr.table-warning > * { --bs-table-bg: #FDF3E2; }
.table > :not(caption) > tr.table-danger > *,
.table > :not(caption) > * > tr.table-danger > * { --bs-table-bg: #FCEDEF; }

.table tr.table-success > td:first-child { box-shadow: inset .25rem 0 0 var(--sj-success); }
.table tr.table-warning > td:first-child { box-shadow: inset .25rem 0 0 var(--sj-warning); }
.table tr.table-danger  > td:first-child { box-shadow: inset .25rem 0 0 var(--sj-danger); }

.table-hover > tbody > tr.table-success:hover > * { --bs-table-accent-bg: #DCF0E5; }
.table-hover > tbody > tr.table-warning:hover > * { --bs-table-accent-bg: #F8EAD2; }
.table-hover > tbody > tr.table-danger:hover  > * { --bs-table-accent-bg: #F8E0E4; }

/* Petunjuk "masih ada kolom di samping". Lapisan putih memakai
   background-attachment:local sehingga ikut tergeser dan menutup bayangan
   begitu sampai di ujung — jadi petunjuknya hilang sendiri saat tidak
   relevan. Hanya berlaku untuk tabel berlatar transparan. */
.table-responsive {
    -webkit-overflow-scrolling: touch;
    background-image:
        linear-gradient(to right, var(--sj-surface) 30%, rgba(255, 255, 255, 0)),
        linear-gradient(to left,  var(--sj-surface) 30%, rgba(255, 255, 255, 0)),
        linear-gradient(to right, rgba(8, 40, 27, .14), rgba(8, 40, 27, 0)),
        linear-gradient(to left,  rgba(8, 40, 27, .14), rgba(8, 40, 27, 0));
    background-position: 0 0, 100% 0, 0 0, 100% 0;
    background-repeat: no-repeat;
    background-size: 44px 100%, 44px 100%, 15px 100%, 15px 100%;
    background-attachment: local, local, scroll, scroll;
}

/* ---------------------------------------------------------------------
   Form
   --------------------------------------------------------------------- */

.form-control, .form-select {
    border: 1px solid #D5E5DA;
    border-radius: var(--sj-radius-sm);
    color: var(--sj-text);
    background-color: #fff;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.form-control::placeholder { color: var(--sj-muted); }

.form-control:focus, .form-select:focus {
    border-color: var(--sj-green-500);
    box-shadow: var(--sj-ring);
}

.form-control:disabled, .form-control[readonly], .form-select:disabled {
    background-color: #F4F9F6;
    color: var(--sj-text-soft);
}

.form-label, label { color: var(--sj-text); font-weight: 500; }

.input-group-text {
    background-color: var(--sj-green-50);
    border-color: #D5E5DA;
    color: var(--sj-green-600);
    border-radius: var(--sj-radius-sm);
}

.form-check-input:checked { background-color: var(--sj-green-600); border-color: var(--sj-green-600); }
.form-check-input:focus { border-color: var(--sj-green-500); box-shadow: var(--sj-ring); }

/* Choices.js */
.choices__inner { border-radius: var(--sj-radius-sm); border-color: #D5E5DA; background-color: #fff; }
.choices__list--dropdown { border-color: #D5E5DA; border-radius: var(--sj-radius-sm); box-shadow: var(--sj-shadow-md); }
.choices__list--dropdown .choices__item--selectable.is-highlighted { background-color: var(--sj-green-50); }
.choices__list--multiple .choices__item { background-color: var(--sj-green-600); border-color: var(--sj-green-700); border-radius: 999px; }

/* ---------------------------------------------------------------------
   Badge, alert, dropdown, modal, tab, pagination
   --------------------------------------------------------------------- */

.badge {
    border-radius: 999px;
    padding: .38em .75em;
    font-weight: 600;
    letter-spacing: .01em;
}

.badge.bg-primary { background-color: var(--sj-green-600) !important; }
.badge.bg-info { background-color: var(--sj-green-500) !important; }
.badge.bg-secondary { background-color: var(--sj-forest-700) !important; }

.alert {
    border: 1px solid transparent;
    border-radius: var(--sj-radius-sm);
    box-shadow: var(--sj-shadow-xs);
}
.alert-primary { background-color: var(--sj-green-50); border-color: var(--sj-green-100); color: var(--sj-green-800); }
.alert-success { background-color: #E9F7F0; border-color: #C6EBD9; color: #0B6B3D; }
.alert-danger  { background-color: #FDECEE; border-color: #F8CFD5; color: #9B1C2A; }
.alert-warning { background-color: #FDF5E7; border-color: #F7E3BE; color: #8A5A12; }

.dropdown-menu {
    border: 1px solid var(--sj-border);
    border-radius: var(--sj-radius);
    box-shadow: var(--sj-shadow-md);
    padding: .4rem;
}
.dropdown-item { border-radius: var(--sj-radius-sm); font-size: .9rem; color: var(--sj-text); }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--sj-green-50); color: var(--sj-green-700); }

.modal-content {
    border: 0;
    border-radius: var(--sj-radius);
    box-shadow: var(--sj-shadow-lg);
    overflow: hidden;
}
.modal-header {
    background: linear-gradient(90deg, var(--sj-forest-800) 0%, var(--sj-green-600) 100%);
    color: #fff;
    border-bottom: 0;
    padding: 1rem 1.5rem;
}
.modal-header .modal-title, .modal-header h1, .modal-header h2,
.modal-header h3, .modal-header h4, .modal-header h5, .modal-header h6,
.modal-header .h6 { color: #fff; }
.modal-header .btn-close { filter: invert(1) grayscale(1); opacity: .85; }
.modal-footer { border-top: 1px solid var(--sj-border); background-color: #FBFDFC; }

.nav-tabs { border-bottom: 1px solid var(--sj-border); }
.nav-tabs .nav-link {
    color: var(--sj-text-soft);
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font-weight: 500;
}
.nav-tabs .nav-link:hover { color: var(--sj-green-600); border-bottom-color: var(--sj-green-100); }
.nav-tabs .nav-link.active {
    color: var(--sj-green-700);
    background: transparent;
    border-bottom-color: var(--sj-green-600);
    font-weight: 600;
}

.nav-pills .nav-link.active { background-color: var(--sj-green-600); border-radius: var(--sj-radius-sm); }

.page-link { color: var(--sj-green-600); border-color: var(--sj-border); }
.page-link:hover { background-color: var(--sj-green-50); color: var(--sj-green-700); border-color: var(--sj-green-100); }
.page-item.active .page-link { background-color: var(--sj-green-600); border-color: var(--sj-green-600); color: #fff; }

.progress { background-color: #E6F2EA; border-radius: 999px; }
.progress-bar { background-color: var(--sj-green-600); }

.list-group-item { border-color: var(--sj-border); color: var(--sj-text); }
.list-group-item.active { background-color: var(--sj-green-600); border-color: var(--sj-green-600); }

/* Volt/Bootstrap menggambar <hr> dengan `background-color: currentColor` dan
   `opacity: .25`. Menaikkan opacity saja membuat garisnya sekuat warna teks
   (nyaris hitam), jadi warnanya ikut diganti ke warna garis tema. */
hr {
    border: 0;
    background-color: var(--sj-border);
    color: var(--sj-border);
    opacity: 1;
}

.breadcrumb-item + .breadcrumb-item::before { color: var(--sj-muted); }
.breadcrumb-item a { color: var(--sj-green-600); }
.breadcrumb-item.active { color: var(--sj-text-soft); }

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */

footer.bg-white, .footer {
    background-color: var(--sj-surface) !important;
    border: 1px solid var(--sj-border);
    border-radius: var(--sj-radius);
    box-shadow: var(--sj-shadow-xs);
    color: var(--sj-text-soft);
    padding: 1.5rem !important;
}

/* ---------------------------------------------------------------------
   Konten
   --------------------------------------------------------------------- */

.content {
    padding: 0 1.25rem 1.25rem 1.25rem;
    /* Volt memberi .content `overflow:hidden`, dan itu menjadikannya scroll
       container sehingga `position:sticky` pada navbar tidak pernah menempel.
       `overflow:clip` mengunci tampilan yang sama tanpa membuat scroll
       container, jadi sticky-nya bekerja. Deklarasi `hidden` sengaja
       ditinggal di depan sebagai fallback untuk browser lama. */
    overflow: hidden;
    overflow: clip;
}

/* .sticky-header (my_css.css) memakai top:0; beri offset supaya header
   tabelnya berhenti di bawah navbar, bukan tersembunyi. */
.sticky-header { top: 5.75rem; }

/* Utility tambahan yang dipakai tema */
.text-forest { color: var(--sj-forest-900) !important; }
.bg-forest { background-color: var(--sj-forest-900) !important; }

/* =====================================================================
   Branding — sidebar & navbar mobile
   ===================================================================== */

.sidebar-brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .35rem 0 1.1rem;
    margin-bottom: .9rem;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    text-decoration: none;
    overflow: hidden;
    min-width: 0;
}

.sidebar-brand:hover { text-decoration: none; }

.sidebar-brand-logo {
    flex: 0 0 auto;
    width: 2.4rem; height: 2.4rem;
    border-radius: .7rem;
    object-fit: cover;
    background: #fff;
    padding: 2px;
    box-shadow: 0 6px 16px rgba(4, 26, 16, .4);
}

.sidebar-brand-copy { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }

.sidebar-brand-copy .brand-name {
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -.01em;
}

.sidebar-brand-copy .brand-desc {
    color: #93B3A0;
    font-size: .72rem;
    letter-spacing: .02em;
    white-space: nowrap;
}

.sidebar-close {
    flex: 0 0 auto;
    width: 2rem; height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--sj-radius-sm);
    color: #A9C6B5;
    background: rgba(255, 255, 255, .08);
    transition: background-color .18s ease, color .18s ease;
}

.sidebar-close:hover { background: rgba(255, 255, 255, .16); color: #fff; }

/* Saat sidebar diciutkan, .sidebar-text sudah di-opacity:0 oleh Volt —
   rapatkan juga jaraknya supaya logo tetap di tengah kolom sempit. */
.sidebar.contracted .sidebar-brand-row { justify-content: center; }
.sidebar.contracted .sidebar-brand { gap: 0; }

/* Navbar mobile (menggantikan logo bawaan template) */
.navbar-brand-sejura {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding-top: .35rem;
    padding-bottom: .35rem;
}

.navbar-brand-logo {
    width: 2.1rem; height: 2.1rem;
    border-radius: .6rem;
    object-fit: cover;
    background: #fff;
    padding: 2px;
}

.navbar-brand-text {
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: -.01em;
    text-transform: none;
}

.navbar-theme-primary .navbar-toggler {
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: var(--sj-radius-sm);
    padding: .35rem .55rem;
}

.navbar-theme-primary .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .18); }

/* =====================================================================
   Identitas pengguna di navbar
   ===================================================================== */

.navbar-user-name {
    display: block;
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.25;
    color: var(--sj-text);
}

.navbar-user-role {
    display: block;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sj-green-600);
    line-height: 1.2;
}

.navbar-dashboard .dropdown-toggle::after { color: var(--sj-muted); }

.dropdown-user {
    padding: .6rem .75rem;
    margin-bottom: .25rem;
    border-bottom: 1px solid var(--sj-border);
}

.dropdown-user .navbar-user-name { max-width: 12rem; font-weight: 600; font-size: .875rem; }

/* Di bawah lg, judul panjang di navbar putih mengulang brand bar mobile di
   atasnya dan memakan dua baris — sembunyikan, sisakan avatar + dropdown. */
@media (max-width: 991.98px) {
    .navbar-dashboard .sidebar-text { display: none; }
    .navbar-dashboard { justify-content: flex-end; }
    .navbar-dashboard .navbar-user-name { max-width: 11rem; }

    /* Navbar layout publik hanya berisi judul aplikasi, dan judul itu sudah
       disembunyikan aturan di atas — tanpa ini yang tersisa cuma bilah putih
       kosong di atas konten. */
    .navbar-publish { display: none; }
}

@media (max-width: 575.98px) {
    .navbar-dashboard { padding-top: .35rem !important; padding-bottom: .35rem !important; }
    .navbar-dashboard .avatar { width: 2.5rem !important; height: 2.5rem !important; }
    .navbar-dashboard .navbar-user-name { max-width: 9.5rem; font-size: .82rem; }
}

/* =====================================================================
   simple-datatables (halaman berbasis base.html)
   ===================================================================== */

/* Scroll horizontal dipindah ke .dataTable-container supaya kotak pencarian,
   pemilih jumlah baris, dan pagination tetap di tempat saat tabel digeser. */
.dataTable-wrapper .dataTable-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.dataTable-top,
.dataTable-bottom {
    align-items: center;
    gap: .75rem;
    color: var(--sj-text-soft);
    font-size: .875rem;
}

.dataTable-top { padding: 0 1.5rem 1rem; }
.dataTable-bottom { padding: 1.25rem 1.5rem 0; }

.dataTable-selector {
    border: 1px solid #D5E5DA;
    border-radius: var(--sj-radius-sm);
    color: var(--sj-text);
    padding: .45rem 2rem .45rem .85rem;
}

.dataTable-selector:focus {
    border-color: var(--sj-green-500);
    box-shadow: var(--sj-ring);
    outline: 0;
}

.dataTable-input {
    border: 1px solid #D5E5DA;
    border-radius: var(--sj-radius-sm);
    color: var(--sj-text);
    padding: .45rem .85rem;
    min-width: 15rem;
}

.dataTable-input:focus {
    border-color: var(--sj-green-500);
    box-shadow: var(--sj-ring);
    outline: 0;
}

.dataTable-input::placeholder { color: var(--sj-muted); }

.dataTable-info { color: var(--sj-text-soft); }

.dataTable-pagination a {
    color: var(--sj-green-600);
    border-color: var(--sj-border);
    background-color: #fff;
}

.dataTable-pagination a:hover { background-color: var(--sj-green-50); color: var(--sj-green-700); }

.dataTable-pagination > li.active a {
    background-color: var(--sj-green-600);
    border-color: var(--sj-green-600);
    color: #fff;
}

.dataTable-pagination > li.disabled a { color: var(--sj-muted); background-color: #F8FCFA; }

.dataTable-sorter { color: inherit; }

/* =====================================================================
   jQuery DataTables 1.10 (halaman berbasis base2.html)
   ===================================================================== */

.dataTables_wrapper { color: var(--sj-text-soft); font-size: .875rem; }

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid #D5E5DA;
    border-radius: var(--sj-radius-sm);
    color: var(--sj-text);
    padding: .4rem .75rem;
    margin-left: .5rem;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--sj-green-500);
    box-shadow: var(--sj-ring);
    outline: 0;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--sj-radius-sm) !important;
    border: 1px solid var(--sj-border) !important;
    color: var(--sj-green-600) !important;
    background: #fff !important;
    margin-left: .2rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--sj-green-50) !important;
    color: var(--sj-green-700) !important;
    border-color: var(--sj-green-100) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--sj-green-600) !important;
    border-color: var(--sj-green-600) !important;
    color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled { color: var(--sj-muted) !important; }

/* =====================================================================
   Halaman Auth (login) — .sejura-auth
   ===================================================================== */

.sejura-auth {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background:
        radial-gradient(1100px 620px at 12% -10%, rgba(74, 222, 128, .34) 0%, transparent 60%),
        radial-gradient(900px 560px at 92% 108%, rgba(21, 128, 61, .40) 0%, transparent 62%),
        linear-gradient(140deg, #041A10 0%, var(--sj-forest-900) 45%, var(--sj-forest-700) 100%);
    overflow: hidden;
}

/* Grid halus sebagai tekstur latar */
.sejura-auth::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 0%, transparent 78%);
    mask-image: radial-gradient(circle at 50% 45%, #000 0%, transparent 78%);
    pointer-events: none;
}

.sejura-auth-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 62rem;
    background: var(--sj-surface);
    border-radius: 1.25rem;
    box-shadow: 0 30px 70px rgba(4, 26, 16, .5);
    overflow: hidden;
}

/* --- Panel kiri (branding) --- */

.sejura-auth-brand {
    position: relative;
    background: linear-gradient(160deg, var(--sj-forest-800) 0%, var(--sj-forest-700) 55%, var(--sj-green-700) 100%);
    color: #DFF0E6;
    padding: 3rem 2.75rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.sejura-auth-brand::after {
    content: "";
    position: absolute;
    right: -5rem; bottom: -7rem;
    width: 20rem; height: 20rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(74, 222, 128, .34) 0%, transparent 68%);
    pointer-events: none;
}

.sejura-auth-brand > * { position: relative; z-index: 1; }

.sejura-auth-logo {
    width: 3.25rem; height: 3.25rem;
    border-radius: .875rem;
    object-fit: cover;
    background: #fff;
    padding: .25rem;
    box-shadow: 0 8px 20px rgba(4, 26, 16, .4);
}

.sejura-auth-brand .sejura-wordmark {
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: #fff;
    margin: 1.5rem 0 .4rem;
    line-height: 1.15;
}

.sejura-auth-brand .sejura-tagline {
    font-size: .95rem;
    line-height: 1.65;
    color: #A7C4B3;
    margin-bottom: 2rem;
}

.sejura-auth-points { list-style: none; padding: 0; margin: 0; }

.sejura-auth-points li {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    font-size: .9rem;
    color: #D2E7DA;
    margin-bottom: .85rem;
}

.sejura-auth-points li:last-child { margin-bottom: 0; }

.sejura-auth-points .tick {
    flex: 0 0 auto;
    width: 1.4rem; height: 1.4rem;
    border-radius: 50%;
    background: rgba(74, 222, 128, .22);
    color: #86EFAC;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: .05rem;
}

.sejura-auth-points .tick svg { width: .8rem; height: .8rem; }

/* --- Panel kanan (form) --- */

.sejura-auth-form { padding: 3rem 2.75rem; }

.sejura-auth-form .auth-title {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--sj-forest-900);
    margin-bottom: .35rem;
    letter-spacing: -.02em;
}

.sejura-auth-form .auth-subtitle {
    color: var(--sj-text-soft);
    font-size: .92rem;
    margin-bottom: 1.9rem;
}

.sejura-auth-form .form-label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--sj-text-soft);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .45rem;
}

.sejura-auth-form .input-group-text {
    background: #fff;
    border-right: 0;
    color: var(--sj-green-500);
    padding-left: .9rem;
    padding-right: .6rem;
}

.sejura-auth-form .input-group .form-control {
    border-left: 0;
    padding-left: 0;
    height: 3rem;
}

.sejura-auth-form .input-group:focus-within .input-group-text,
.sejura-auth-form .input-group:focus-within .form-control {
    border-color: var(--sj-green-500);
    box-shadow: none;
}

.sejura-auth-form .input-group:focus-within {
    border-radius: var(--sj-radius-sm);
    box-shadow: var(--sj-ring);
}

.sejura-auth-form .btn-signin {
    height: 3rem;
    font-weight: 600;
    letter-spacing: .01em;
    border-radius: var(--sj-radius-sm);
}

.sejura-auth-form .auth-foot {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--sj-border);
    text-align: center;
    font-size: .82rem;
    color: var(--sj-muted);
}

/* Header ringkas untuk layar kecil (panel kiri disembunyikan) */
.sejura-auth-mobile-head {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin-bottom: 2rem;
}

.sejura-auth-mobile-head img { width: 2.75rem; height: 2.75rem; border-radius: .75rem; object-fit: cover; }
.sejura-auth-mobile-head .name { font-weight: 700; color: var(--sj-forest-900); line-height: 1.2; }
.sejura-auth-mobile-head .desc { font-size: .78rem; color: var(--sj-text-soft); }

@media (min-width: 992px) { .sejura-auth-mobile-head { display: none; } }

@media (max-width: 575.98px) {
    .sejura-auth { padding: 1rem .75rem; }
    .sejura-auth-form { padding: 2rem 1.5rem; }
    .sejura-auth-card { border-radius: 1rem; }
}

/* =====================================================================
   Hero sambutan (dashboard)
   ===================================================================== */

.sejura-hero {
    position: relative;
    border-radius: var(--sj-radius);
    padding: 1.75rem 1.9rem;
    color: #DFF0E6;
    background:
        radial-gradient(700px 380px at 88% -30%, rgba(74, 222, 128, .35) 0%, transparent 62%),
        linear-gradient(120deg, var(--sj-forest-900) 0%, var(--sj-forest-700) 62%, var(--sj-green-600) 100%);
    box-shadow: var(--sj-shadow-md);
    overflow: hidden;
}

.sejura-hero .hero-eyebrow {
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #86EFAC;
    margin-bottom: .4rem;
}

.sejura-hero .hero-name {
    font-size: 1.45rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.02em;
    margin-bottom: .35rem;
}

.sejura-hero .hero-desc { color: #A7C4B3; font-size: .92rem; margin-bottom: 0; }

/* =====================================================================
   Kepala halaman & daftar info ringkas
   ===================================================================== */

/* Kepala halaman bergaya panel gelap — mengikuti .sipasi-page-head pada
   aplikasi publikasi-ppm: label kecil, judul, deretan chip penyaring aktif,
   dan tombol aksi utama di sisi kanan. */
.sejura-page-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.1rem 1.5rem;
    margin: 1rem 0 1.25rem;
    border-radius: var(--sj-radius);
    color: #E1F3E8;
    background:
        radial-gradient(640px 340px at 92% -20%, rgba(74, 222, 128, .30) 0%, transparent 62%),
        linear-gradient(120deg, var(--sj-forest-900) 0%, var(--sj-forest-700) 62%, var(--sj-green-700) 100%);
    box-shadow: var(--sj-shadow-md);
    overflow: hidden;
}

/* Cincin dekoratif di pojok kanan atas */
.sejura-page-head::after {
    content: "";
    position: absolute;
    right: -3rem; top: -4.5rem;
    width: 11rem; height: 11rem;
    border-radius: 50%;
    border: 1rem solid rgba(255, 255, 255, .05);
    pointer-events: none;
}

.sejura-page-head > * { position: relative; z-index: 1; }

.sejura-page-head .page-head-label {
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #A9CDB8;
    font-weight: 600;
    margin-bottom: .15rem;
}

.sejura-page-head .page-head-judul,
.sejura-page-head .page-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.02em;
    line-height: 1.3;
    margin: 0 0 .55rem;
}

.sejura-page-head .page-subtitle { color: #A9CDB8; font-size: .85rem; margin: 0; }

.sejura-page-head .page-head-chips { display: flex; flex-wrap: wrap; gap: .4rem; }

.sejura-page-head .page-head-chip {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #E1F3E8;
    border-radius: 999px;
    padding: .2rem .7rem;
    font-size: .72rem;
    font-weight: 600;
}

.sejura-page-head .sejura-page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    flex: 0 0 auto;
}

/* Tombol garis-luar di atas latar gelap kepala halaman */
.btn-outline-terang {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .38);
    color: #E1F3E8;
}

.btn-outline-terang:hover,
.btn-outline-terang:focus {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .55);
    color: #fff;
}

@media (max-width: 767.98px) {
    .sejura-page-head {
        flex-direction: column;
        align-items: stretch;
        gap: .9rem;
        padding: 1rem 1.1rem;
    }
    .sejura-page-head .page-head-judul,
    .sejura-page-head .page-title { font-size: 1.05rem; }
    .sejura-page-head .sejura-page-actions .btn { flex: 1 1 100%; }
}

.sejura-info-list {
    margin: 0;
    border: 1px solid var(--sj-border);
    border-radius: var(--sj-radius);
    overflow: hidden;
    background: #FBFDFC;
}

.sejura-info-list .info-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .85rem 1.1rem;
}

.sejura-info-list .info-row + .info-row { border-top: 1px solid var(--sj-border); }

.sejura-info-list dt {
    /* boleh menyusut: di kartu setengah lebar, basis kaku 16rem membuat
       kolom nilainya tinggal sejengkal dan tiap kata turun satu baris. */
    flex: 0 1 12rem;
    font-weight: 600;
    color: var(--sj-text-soft);
    font-size: .875rem;
    margin: 0;
}

.sejura-info-list dd {
    flex: 1 1 12rem;
    min-width: 0;
    margin: 0;
    color: var(--sj-text);
    font-weight: 500;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

/* Nilai yang belum terisi di dalam .info-row. Tidak memakai .catatan-sel:
   kelas itu blok dengan margin atas, jadi di dalam dd yang flex ia turun
   sendiri dan tidak lagi sebaris dengan tombol di sebelahnya. */
.teks-kosong { color: var(--sj-muted); font-weight: 500; }

/* Chip terang untuk daftar pendek di dalam kartu (mis. bulan terbit),
   pasangan terang dari .page-head-chip yang dipakai di panel gelap. */
.chip-lembut {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: .15rem .65rem;
    background: var(--sj-green-50);
    border: 1px solid var(--sj-green-100);
    color: var(--sj-green-800);
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Daftar dokumen pengajuan: nama berkas di kiri, tombol aksinya di kanan.
   Sebelumnya tiap dokumen adalah satu baris tabel dengan tiga kolom, dan di
   kartu setengah lebar tombolnya turun satu per satu ke bawah. */
.daftar-dokumen {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--sj-border);
    border-radius: var(--sj-radius);
    overflow: hidden;
    background: #FBFDFC;
}

.dokumen-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem 1rem;
    padding: .8rem 1.1rem;
}

.dokumen-item + .dokumen-item { border-top: 1px solid var(--sj-border); }

.dokumen-info { min-width: 0; }
.dokumen-nama { font-weight: 600; color: var(--sj-text); }
.dokumen-status { font-size: .78rem; color: var(--sj-green-600); margin-top: .1rem; }
.dokumen-status.belum { color: var(--sj-muted); }
.dokumen-aksi { display: flex; flex-wrap: wrap; gap: .4rem; }

/* Catatan verifikasi yang hanya dibaca. Dulu dipaksa masuk <textarea readonly>
   sehingga isinya ikut terkirim sebagai field bernama "catatan" jika kelak
   dibungkus form, dan tingginya kaku 5 baris. */
.catatan-tampil {
    margin: 0;
    white-space: pre-wrap;
    background: var(--sj-green-50);
    border: 1px solid var(--sj-border);
    border-radius: var(--sj-radius-sm);
    padding: .85rem 1rem;
    color: var(--sj-text);
}

/* =====================================================================
   Halaman pemilihan artikel (pilih-artikel / pilih-artikel-ketua)
   ===================================================================== */

/* Baris penyaring (program studi). Dulu selectnya dipatok
   `style="width: 20rem"` sehingga meluber keluar kartu di ponsel. */
.sejura-filter {
    display: flex;
    flex-wrap: wrap;
    /* flex-start, bukan flex-end: begitu salah satu field punya keterangan di
       bawahnya, perataan bawah membuat field itu lebih tinggi sehingga label
       dan kotak isian antar-kolom tidak lagi sebaris. */
    align-items: flex-start;
    gap: .75rem 1.25rem;
    margin-bottom: 1.25rem;
}

.sejura-filter .filter-field { flex: 0 1 20rem; min-width: 12rem; }
.sejura-filter .filter-field-lebar { flex: 1 1 22rem; }

.sejura-filter .form-label {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sj-text-soft);
    margin-bottom: .35rem;
}

/* Ringkasan angka di atas tabel: informasi yang tadinya hanya ada di dalam
   modal Rekapitulasi, sekarang terbaca tanpa membuka apa pun. */
.sejura-stat-strip { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.25rem; }

.sejura-stat {
    flex: 1 1 9rem;
    border: 1px solid var(--sj-border);
    border-radius: var(--sj-radius);
    background: #FBFDFC;
    padding: .8rem 1rem;
}

.sejura-stat .stat-label {
    display: block;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sj-text-soft);
    margin-bottom: .15rem;
}

.sejura-stat .stat-value {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--sj-forest-900);
    line-height: 1.2;
}

.sejura-stat .stat-unit { font-size: .82rem; font-weight: 500; color: var(--sj-text-soft); }

/* Nilai berupa teks, bukan angka. Ukurannya diturunkan supaya isi panjang
   seperti "Tidak Terindeks SINTA" tidak memakan tiga baris di ponsel. */
.sejura-stat .stat-value.stat-teks { font-size: 1.05rem; line-height: 1.3; }

/* Deret tombol aksi di atas tabel */
.sejura-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1rem;
}

.sejura-toolbar .toolbar-group { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Kolom teks panjang di dalam tabel. Sebelumnya dipatok `width: 15rem` /
   `20rem` lewat <div> di dalam sel, jadi kolomnya kaku dan tetap selebar itu
   sekalipun isinya pendek. */
.kolom-nomor { width: 3.5rem; text-align: center; }
.kolom-penulis { min-width: 11rem; max-width: 16rem; }
.kolom-judul { min-width: 15rem; max-width: 26rem; }
.sel-tengah { text-align: center; }
.sel-kanan { text-align: right; }

/* Kolom nama orang di dalam tabel */
.kolom-orang { min-width: 10rem; max-width: 15rem; }
.table td.kolom-orang { white-space: normal; overflow-wrap: anywhere; }

/* Kolom kontak, unit kerja, dan jabatan pada tabel Data Dosen. Isinya
   kalimat pendek, bukan satu kata, jadi harus boleh membungkus. */
.kolom-kontak { white-space: normal; }
.table .kolom-kontak { width: 1%; }
.kolom-unit { min-width: 10rem; max-width: 15rem; }
.kolom-status { min-width: 12rem; max-width: 14rem; }
.table td.kolom-unit,
.table td.kolom-status { white-space: normal; overflow-wrap: anywhere; }

/* Alamat surel: satu untai tanpa spasi yang melebarkan kolomnya. */
.pecah-kata { overflow-wrap: anywhere; word-break: break-word; }

/* Baris "tidak ada data" di dalam tbody */
.baris-kosong { text-align: center; color: var(--sj-muted); font-style: italic; }

/* Daftar hasil panjang: tinggi dibatasi dan kepala tabel menempel di atas. */
.tabel-gulir-tinggi { max-height: 31rem; overflow-y: auto; }
.tabel-gulir-tinggi thead th { position: sticky; top: 0; z-index: 3; background: var(--sj-green-50); }

/* Nomor surat/SK: satu untai panjang tanpa spasi, jadi kolomnya melebar dan
   mendorong kolom lain keluar layar di ponsel. Dibolehkan patah — untaian
   itu sendiri sudah tersegmen oleh garis miring. */
.kolom-nosk { min-width: 8rem; }
.table td.kolom-nosk { white-space: normal; overflow-wrap: anywhere; }

/* Catatan reviewer di dalam sel tabel — dulu <div style="width: 40rem">. */
.kolom-catatan { min-width: 16rem; max-width: 34rem; }
.table td.kolom-catatan { white-space: normal; overflow-wrap: anywhere; }

/* Daftar anggota redaktur di dalam sel tabel — dulu dirangkai dengan <br>. */
.daftar-anggota { margin: 0; padding-left: 1.1rem; }
.daftar-anggota li { font-size: .88rem; margin-bottom: .15rem; }
.daftar-anggota li:last-child { margin-bottom: 0; }

/* Daftar bulan terbit dirangkai satu baris dipisah koma; boleh membungkus. */
.kolom-bulan { min-width: 10rem; max-width: 16rem; }
.table td.kolom-bulan { white-space: normal; }

/* Selectornya harus selengkap ini: `white-space: normal` pada `.kolom-judul`
   saja (0,1,0) kalah dari aturan Volt `.table td, .table th { white-space:
   nowrap }` (0,1,1). Akibatnya sel tidak boleh turun baris, isinya melewati
   max-width, dan teksnya menumpuk ke kolom sebelahnya. Varian ber-`.table td`
   (0,2,1) inilah yang benar-benar berlaku. */
.table td.kolom-penulis,
.table td.kolom-judul {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Sel keputusan redaktur: dulu ditulis sebagai <th> di dalam <tbody>. */
.sel-keputusan { text-align: center; font-weight: 400; }

.ikon-setuju { width: 1.15rem; height: 1.15rem; color: var(--sj-success); }

/* Kotak centang di kolom keputusan ketua. Sengaja TIDAK memakai .d-flex:
   utility itu memasang `display: flex !important` sehingga menang atas
   `style="display: none"` di markup, dan kotaknya ikut tampak di mode baca.
   Perataannya diatur di sini, display-nya tetap milik markup + jQuery. */
.cek-tengah { justify-content: center; padding-left: 0; }
.cek-tengah .form-check-input { float: none; margin-left: 0; }

.tautan-pdf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem; height: 2rem;
    border-radius: var(--sj-radius-sm);
    color: var(--sj-green-600);
    background: var(--sj-green-50);
    transition: background-color .18s ease, color .18s ease;
}

.tautan-pdf:hover { background: var(--sj-green-100); color: var(--sj-green-700); }

/* Tabel rekap di dalam modal: hanya tiga kolom, tapi nama prodi dan judul
   kolomnya panjang. Dengan nowrap bawaan Volt kolom ketiga terpotong di
   ponsel, padahal isinya cuma angka. */
.table.tabel-rekap th,
.table.tabel-rekap td:first-child { white-space: normal; }

@media (max-width: 575.98px) {
    .table.tabel-rekap > :not(caption) > * > * { padding: .6rem .5rem; }

    .sejura-filter .filter-field { flex: 1 1 100%; }
    .sejura-toolbar { align-items: stretch; }
    .sejura-toolbar .toolbar-group { width: 100%; }
    .sejura-toolbar .toolbar-group .btn { flex: 1 1 8rem; }
    .kolom-penulis { min-width: 10rem; }
    .kolom-judul { min-width: 13rem; }
}

/* =====================================================================
   Halaman akreditasi SINTA
   ===================================================================== */

/* Tombol ikon keterangan. Menggantikan .coffeeButton dari my_css.css yang
   hanya menghapus border/background sehingga tampil sebagai SVG telanjang
   tanpa area sentuh yang jelas. */
.tombol-info {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem; height: 1.85rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--sj-green-50);
    color: var(--sj-green-600);
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}

.tombol-info:hover { background: var(--sj-green-100); color: var(--sj-green-700); }
.tombol-info svg { width: 1.05rem; height: 1.05rem; margin: 0; }

/* Daftar kriteria penilaian — pengganti tabel berisi kelompok radio.
   Sebagai tabel, kolom indikatornya dipatok 30rem dan barisnya jauh lebih
   lebar dari layar ponsel; sebagai daftar, tiap kriteria membaca ke bawah
   dan tidak perlu digeser sama sekali. */
.sejura-kriteria {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--sj-border);
    border-radius: var(--sj-radius);
    overflow: hidden;
}

.sejura-kriteria .kriteria-unsur {
    background: var(--sj-green-50);
    color: var(--sj-green-800);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .6rem 1.1rem;
    border-bottom: 1px solid var(--sj-border);
}

.sejura-kriteria .kriteria-item {
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--sj-border);
}

.sejura-kriteria .kriteria-item:last-child { border-bottom: 0; }

.kriteria-head { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: .8rem; }

.kriteria-no {
    flex: 0 0 auto;
    width: 1.6rem; height: 1.6rem;
    border-radius: .5rem;
    background: #EDF5F0;
    color: var(--sj-text-soft);
    font-size: .78rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.kriteria-judul { flex: 1 1 auto; min-width: 0; font-weight: 600; color: var(--sj-forest-900); }

.kriteria-nilai {
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--sj-green-600);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    padding: .2rem .6rem;
    line-height: 1.4;
}

/* Diisi oleh skrip halaman; selama belum ada pilihan, pilnya disembunyikan
   supaya tidak tampil sebagai gelembung kosong. */
.kriteria-nilai:empty { display: none; }

.kriteria-opsi { padding-left: 2.2rem; display: flex; flex-direction: column; gap: .4rem; }
.kriteria-opsi .form-check { margin: 0; min-height: 0; }
.kriteria-opsi .form-check-label { color: var(--sj-text-soft); font-size: .9rem; }
.kriteria-opsi .form-check-input:checked + .form-check-label { color: var(--sj-text); font-weight: 500; }
.kriteria-opsi .form-check-input:disabled + .form-check-label { color: var(--sj-muted); }

/* Kolom sub-unsur di tabel rekap: dulu <div style="width: 10rem"> di dalam sel. */
.kolom-subunsur { min-width: 11rem; max-width: 20rem; }
.table td.kolom-subunsur { white-space: normal; overflow-wrap: anywhere; }

/* Baris judul unsur di dalam tabel rekap */
.table tr.baris-unsur > td {
    background: var(--sj-green-50);
    color: var(--sj-green-800);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Kepala kartu ringkasan yang memuat tombol keterangan */
.sejura-stat .stat-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }

/* Keadaan kosong. Varian panjangnya (ikon + judul + penjelasan) dipakai
   halaman yang tabelnya baru terisi setelah pengguna mengetik pencarian. */
.sejura-empty { text-align: center; padding: 2.5rem 1rem; color: var(--sj-muted); }
.sejura-empty svg { width: 2.75rem; height: 2.75rem; color: var(--sj-green-500); margin-bottom: .85rem; }
.sejura-empty .judul { font-weight: 600; color: var(--sj-text); margin-bottom: .25rem; }
.sejura-empty p { color: var(--sj-text-soft); }

/* Pilihan putusan (valid / tidak valid, disetujui / tidak) — dulu digambar
   sebagai tabel satu baris dengan dua kolom radio tanpa label teks, jadi
   artinya hanya terbaca dari judul kolom di atasnya. */
.pilihan-putusan { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.pilihan-putusan .form-check { margin: 0; }

/* Keterangan kecil di bawah field, menggantikan <p style="font-size: 14px"> */
.keterangan-field { font-size: .8rem; color: var(--sj-text-soft); margin-top: .35rem; }

/* Pemilih bulan terbit. Dulu `row row-cols-3` dengan `max-width: 30rem` inline:
   tetap tiga kolom sampai layar 375px sehingga nama bulan panjang terpotong. */
.pilihan-bulan {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: .5rem 1rem;
}

.pilihan-bulan .form-check { margin: 0; }

@media (max-width: 575.98px) {
    .sejura-kriteria .kriteria-item { padding: .9rem .85rem; }
    .kriteria-opsi { padding-left: 0; }
}

/* =====================================================================
   Halaman Electronic Copyright Form (dibuka penulis lewat tautan publik)
   ===================================================================== */

/* Naskah pernyataan. Sebelumnya tiap <p> dan <li> dipatok
   `style="font-size: 14px"` satu per satu. */
.ecf-pernyataan { font-size: .9rem; line-height: 1.7; color: var(--sj-text); }
.ecf-pernyataan ol { padding-left: 1.2rem; margin-bottom: 1rem; }
.ecf-pernyataan li { margin-bottom: .4rem; }

/* Blok tanda tangan setelah formulir diisi */
.ecf-tandatangan {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 3rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--sj-border);
    border-radius: var(--sj-radius);
    background: #FBFDFC;
}

.ecf-tandatangan .ttd-item { display: flex; flex-direction: column; gap: .15rem; }

.ecf-tandatangan .ttd-label {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sj-text-soft);
}

.ecf-tandatangan .ttd-value { font-size: 1rem; font-weight: 600; color: var(--sj-forest-900); }

/* =====================================================================
   Rekap jurnal — daftar jurnal per peringkat SINTA
   ===================================================================== */

/* Sebagai tabel, kolom "Jurnal" memuat <ol> berisi puluhan nama sehingga
   satu barisnya bisa setinggi layar dan tak terbaca di ponsel. Dijadikan
   daftar bertingkat: kepala peringkat, lalu nama jurnalnya di bawahnya. */
.rekap-peringkat {
    border: 1px solid var(--sj-border);
    border-radius: var(--sj-radius);
    overflow: hidden;
}

.rekap-peringkat .peringkat-item { padding: 1rem 1.1rem; border-bottom: 1px solid var(--sj-border); }
.rekap-peringkat .peringkat-item:last-child { border-bottom: 0; }

.peringkat-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: .6rem;
}

.peringkat-jumlah { font-size: .82rem; color: var(--sj-text-soft); font-weight: 500; }

/* Volt memasang `ol li { font-size: 1rem }`, jadi ukuran di sini perlu
   ditulis eksplisit — dulu ditangani `style="font-size: 14px"` per <li>. */
.daftar-jurnal { margin: 0; padding-left: 1.3rem; columns: 2; column-gap: 2rem; }
.daftar-jurnal li {
    font-size: .88rem;
    color: var(--sj-text);
    margin-bottom: .25rem;
    break-inside: avoid;
    /* Volt memasang `word-wrap: break-word` pada .card dan sifat itu menurun
       ke sini. Akibatnya potongan seperti "(IJAIT)" boleh dipenggal di tengah
       kalau sisa barisnya kurang, sehingga kurung tutupnya turun sendirian.
       `normal` membuat kata utuh pindah ke baris berikutnya. */
    overflow-wrap: normal;
    word-break: normal;
}

.tanpa-data { color: var(--sj-muted); font-style: italic; font-size: .88rem; margin: 0; }

@media (max-width: 767.98px) {
    .daftar-jurnal { columns: 1; }
    .rekap-peringkat .peringkat-item { padding: .9rem .85rem; }
}

/* =====================================================================
   Data jurnal — peringkat SINTA, catatan sel, tombol aksi baris
   ===================================================================== */

/* Peringkat SINTA. Sebelumnya latar selnya diwarnai langsung dengan warna
   neon (#FF4C33 … #64FF33) lewat style inline: mencolok, teksnya sulit
   dibaca, dan tidak nyambung dengan palet mana pun. Diganti pil bertingkat
   dari merah (peringkat rendah) ke hijau (peringkat tinggi). */
.badge-sinta {
    display: inline-block;
    border-radius: 999px;
    padding: .3em .7em;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap;
}

.badge-sinta a { color: inherit; text-decoration: underline; }

.badge-sinta-s1 { background: #D6F0DF; color: #0B4F27; }
.badge-sinta-s2 { background: #E4F6E9; color: #15803D; }
.badge-sinta-s3 { background: #FEF3C7; color: #8A5A12; }
.badge-sinta-s4 { background: #FDEBD0; color: #A1611A; }
.badge-sinta-s5 { background: #FDE2E2; color: #B42318; }
.badge-sinta-s6 { background: #FBD5D2; color: #912018; }
.badge-sinta-non { background: #EEF2EF; color: var(--sj-text-soft); }

/* Catatan kecil di dalam sel, mis. "Pengajuan (12/03/2026)".
   Dulu ditulis `<span style="color: blue">`. */
.catatan-sel {
    display: block;
    margin-top: .3rem;
    font-size: .75rem;
    line-height: 1.35;
    color: var(--sj-text-soft);
}

/* Kelas status Bootstrap di sini dipasang pada <td>, bukan <tr>, sehingga
   aturan bernuansa lembut di bagian Tabel tidak kena. Disamakan di sini. */
.table > :not(caption) > * > td.table-success { --bs-table-bg: #E8F6EF; }
.table > :not(caption) > * > td.table-warning { --bs-table-bg: #FDF3E2; }
.table > :not(caption) > * > td.table-danger  { --bs-table-bg: #FCEDEF; }
.table > :not(caption) > * > td.table-info    { --bs-table-bg: #E8F1FB; }

/* Tombol ikon aksi di dalam baris tabel (ubah / hapus) */
.aksi-baris { display: inline-flex; gap: .35rem; }

.tombol-aksi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem; height: 1.9rem;
    padding: 0;
    border: 1px solid var(--sj-border);
    border-radius: var(--sj-radius-sm);
    background: #fff;
    color: var(--sj-text-soft);
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.tombol-aksi svg { width: 1rem; height: 1rem; margin: 0; }
.tombol-aksi:hover { background: var(--sj-green-50); color: var(--sj-green-700); border-color: var(--sj-green-100); }
.tombol-aksi.aksi-hapus:hover { background: #FDECEE; color: #9B1C2A; border-color: #F8CFD5; }

/* =====================================================================
   Monitoring terbitan — matriks warna per jurnal
   ===================================================================== */

/* Tabel yang bergulir di dalam wadahnya sendiri. Kepala tabelnya memakai
   .sticky-header, dan offset 5.75rem di bagian Konten hanya benar untuk
   tabel yang ikut menggulung bersama halaman — di dalam wadah begini
   kepalanya harus menempel di 0. */
.tabel-gulir { max-height: 70vh; overflow: auto; }
.tabel-gulir .sticky-header { top: 0; }

.legenda-monitoring { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-bottom: 1rem; }

.legenda-monitoring .legenda-item {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    color: var(--sj-text-soft);
}

.legenda-monitoring .legenda-kotak {
    width: 1rem; height: 1rem;
    border: 1px solid var(--sj-border);
    border-radius: 3px;
    flex: 0 0 auto;
}

/* Sel matriks: kotak warna tanpa teks, jadi lebarnya perlu dipatok supaya
   tidak menyusut jadi garis tipis saat kolomnya banyak. */
.table td.sel-monitoring { min-width: 2.1rem; padding: .5rem .35rem; }

/* =====================================================================
   Penyesuaian layar kecil (mobile adaptive)
   ===================================================================== */

@media (max-width: 991.98px) {
    .content { padding: 0 1rem 1rem; }
    .card-body { padding: 1.1rem; }
    .card-header { padding: .9rem 1.1rem; }
    footer.bg-white, .footer { padding: 1.15rem !important; }
    /* Bar brand mobile bukan bagian .content, jadi jaraknya diatur di sini */
    .navbar-theme-primary { padding-top: .5rem; padding-bottom: .5rem; }
}

@media (max-width: 767.98px) {
    /* Kontrol datatables ditumpuk supaya tidak berdesakan */
    .dataTable-top,
    .dataTable-bottom { align-items: stretch; padding-left: 1rem; padding-right: 1rem; }
    .dataTable-top .dataTable-dropdown,
    .dataTable-top .dataTable-search { width: 100%; }
    .dataTable-top .dataTable-search { margin-top: .75rem; }
    .dataTable-input { width: 100%; min-width: 0; }
    .dataTable-bottom .dataTable-info { margin-bottom: .75rem; text-align: center; }
    .dataTable-pagination { justify-content: center; flex-wrap: wrap; row-gap: .35rem; }

    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length { float: none; text-align: left; margin-bottom: .5rem; }
    .dataTables_wrapper .dataTables_filter input { width: 100%; margin-left: 0; margin-top: .35rem; }
    .dataTables_wrapper .dataTables_paginate { float: none; text-align: center; padding-top: .75rem; }

    .table > :not(caption) > * > th,
    .table > :not(caption) > * > td { padding: .7rem .75rem; }

    /* Basis flex harus dinolkan pada KEDUA sisi: begitu arahnya kolom,
       `flex-basis: 12rem` tidak lagi berarti lebar melainkan TINGGI, dan
       tiap baris jadi setinggi 12rem dengan jarak menganga di dalamnya. */
    /* Tabel Data Dosen berubah jadi kartu: lima kolom mustahil dibaca di
       375px, dan menggulirnya mendatar membuat nama dosennya hilang dari
       layar begitu kolom kontak terlihat. */
    .tabel-kartu thead { display: none; }
    .tabel-kartu,
    .tabel-kartu tbody,
    .tabel-kartu tr,
    .tabel-kartu td { display: block; width: 100%; }

    .tabel-kartu tr {
        border: 1px solid var(--sj-border);
        border-radius: var(--sj-radius);
        background: var(--sj-surface);
        box-shadow: var(--sj-shadow-xs);
        margin-bottom: .85rem;
        padding: .35rem 0;
    }

    .table.tabel-kartu > :not(caption) > * > td { border: 0; padding: .45rem 1rem; white-space: normal; }

    .tabel-kartu td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: .68rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--sj-muted);
        margin-bottom: .15rem;
    }

    .tabel-kartu td.kolom-nomor { display: none; }

    .tabel-kartu td.kolom-orang {
        font-weight: 700;
        color: var(--sj-green-800);
        border-bottom: 1px solid var(--sj-border) !important;
        padding-bottom: .5rem;
        margin-bottom: .25rem;
    }

    .tabel-kartu .kolom-orang,
    .tabel-kartu .kolom-unit,
    .tabel-kartu .kolom-status { min-width: 0; max-width: none; }
    .table.tabel-kartu .kolom-nomor,
    .table.tabel-kartu .kolom-kontak { width: auto; }
    .tabel-gulir-tinggi { max-height: none; }
    .tabel-kartu-bungkus { overflow-x: visible; }

    .sejura-info-list .info-row { flex-direction: column; align-items: flex-start; gap: .35rem; }
    .sejura-info-list dt { flex: 0 0 auto; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
    .sejura-info-list dd { flex: 0 0 auto; }

}

@media (max-width: 575.98px) {
    .content { padding: 0 .75rem 1rem; }
    .card { border-radius: var(--sj-radius-sm); }
    .card-body { padding: 1rem; }
    .modal-dialog { margin: .6rem; }
    .modal-header { padding: .85rem 1.1rem; }

    .sejura-hero { padding: 1.35rem 1.25rem; }
    .sejura-hero .hero-name { font-size: 1.2rem; }

    /* Tombol aksi: penuh di ponsel supaya mudah disentuh */
    .sejura-page-actions,
    .sejura-page-actions > div,
    .sejura-page-actions .btn { width: 100%; }

    /* Baris tombol yang didorong ke kanan jadi menumpuk rapi, bukan meluber */
    .d-flex.justify-content-end { flex-wrap: wrap; gap: .5rem; }

    h1, .h1 { font-size: 1.5rem; }
    h2, .h2 { font-size: 1.25rem; }
}