/* =========================================================
   OJS 3.5 - JComSE CUSTOM THEME
   Journal of Computation and Software Engineering

   =========================================================
   CARA MENGUBAH TEMA
   =========================================================
   SEMUA WARNA UTAMA WEBSITE DIATUR DI BAGIAN :root.

   Jika ingin membuat tema baru, cukup ubah warna di :root.
   Tidak perlu mencari warna pada CSS bagian bawah.

   Contoh tema MAROON:
   --primary: #7A1F2B;
   --primary-dark: #4A0F18;
   --primary-light: #9B3442;

   Contoh jika ingin tema BIRU:
   --primary: #1565C0;
   --primary-dark: #0D47A1;
   --primary-light: #42A5F5;
   ========================================================= */


/* =========================================================
   1. THEME CONTROL
   =========================================================
   PUSAT PENGATURAN SELURUH TEMA

   Ubah warna di sini untuk mengubah tampilan keseluruhan
   website.
   ========================================================= */
:root {
    /* -----------------------------------------------------
       WARNA IDENTITAS UTAMA
       -----------------------------------------------------
       primary       = warna utama
       primary-dark  = warna gelap
       primary-light = warna terang
       ----------------------------------------------------- */
    --primary: #2F647A;
    --primary-dark: #234C5D;
    --primary-light: #5F8EA3;

    /* -----------------------------------------------------
       WARNA AKSEN
       -----------------------------------------------------
       Digunakan untuk garis, highlight, active state,
       dan elemen yang ingin ditonjolkan.
       ----------------------------------------------------- */
    --accent: #E5A928;
    --accent-light: #F2C45D;

    /* -----------------------------------------------------
       BACKGROUND
       ----------------------------------------------------- */
    --background: #FFFFFF;
    --surface: #FFFFFF;
    --surface-soft: #F3F3F3;
    --surface-hover: #EAF4F8;

    /* -----------------------------------------------------
       WARNA TEKS
       ----------------------------------------------------- */
    --text: #222222;
    --text-muted: #666666;
    --text-light: #FFFFFF;

    /* -----------------------------------------------------
       LINK
       ----------------------------------------------------- */
    --link: var(--primary);
    --link-hover: var(--primary-dark);

    /* -----------------------------------------------------
       BORDER
       ----------------------------------------------------- */
    --border: #BDBDBD;
    --border-light: #E5E5E5;

    /* -----------------------------------------------------
       NAVBAR
       ----------------------------------------------------- */
    --nav-bg: #B9DDF2;
    --nav-hover: #8FC5E3;
    --nav-active: var(--primary);
    --nav-text: #FFFFFF;

    /* -----------------------------------------------------
       NAVBAR BRAND / NAMA JURNAL
       -----------------------------------------------------
       Digunakan untuk background transparan pada area
       nama jurnal agar tetap terlihat jelas di atas header.
       ----------------------------------------------------- */
    --nav-brand-bg: rgba(47, 100, 122, .65);
    --nav-brand-bg-hover: rgba(35, 76, 93, .80);
    --nav-brand-radius: 3px;
    --nav-brand-padding-x: 12px;

    /* -----------------------------------------------------
       HEADER
       ----------------------------------------------------- */
    --header-overlay: rgba(47, 100, 122, .20);
    --header-overlay-dark: rgba(35, 76, 93, .35);
    /* Warna tulisan nama jurnal */
    --header-brand: #FFFFFF;
    /* Warna saat mouse diarahkan */
    --header-brand-hover: #FFFFFF;
    /* Shadow agar tulisan tetap terlihat di atas gambar */
    --header-brand-shadow: 0 2px 5px rgba(0, 0, 0, .75);

    /* -----------------------------------------------------
       SIDEBAR / HEADING
       ----------------------------------------------------- */
    --sidebar-heading-bg: #FFFFFF;
    --sidebar-heading-text: #222222;

    /* -----------------------------------------------------
       BUTTON
       ----------------------------------------------------- */
    --button-bg: var(--primary);
    --button-hover: var(--primary-dark);
    --button-text: #FFFFFF;

    /* -----------------------------------------------------
       FORM
       ----------------------------------------------------- */
    --input-bg: #FFFFFF;
    --input-text: var(--text);
    --input-border: #AAAAAA;
    --input-focus: var(--primary);

    /* -----------------------------------------------------
       TABLE
       ----------------------------------------------------- */
    --table-heading-bg: var(--primary);
    --table-heading-text: #FFFFFF;
    --table-border: var(--border);

    /* -----------------------------------------------------
       ALERT
       ----------------------------------------------------- */
    --alert-bg: var(--surface-soft);
    --alert-border: #D8C28A;
    --alert-text: #4A4A4A;

    /* -----------------------------------------------------
       FOOTER
       ----------------------------------------------------- */
    --footer-bg: #FFFFFF;
    --footer-text: #333333;
    --footer-link: var(--primary);
    --footer-link-hover: var(--primary-dark);

    /* -----------------------------------------------------
       JOURNAL DESCRIPTION
       -----------------------------------------------------
       Digunakan untuk kotak informasi jurnal:
       Initial, DOI Prefix, Frequency, Editor-in-Chief,
       Publisher, dan informasi lainnya.
       ----------------------------------------------------- */
    --description-overlay: rgba(47, 100, 122, .90);
    --description-overlay-light: rgba(229, 169, 40, .80);
    --description-text: #FFFFFF;
    --description-link: #FFFFFF;

    /* -----------------------------------------------------
       SHADOW
       ----------------------------------------------------- */
    --shadow-sm: 0 1px 4px rgba(0, 0, 0, .08);
    --shadow-md: 0 3px 10px rgba(0, 0, 0, .10);
    --shadow-lg: 0 5px 15px rgba(0, 0, 0, .12);

    /* -----------------------------------------------------
       BENTUK TABEL
       ----------------------------------------------------- */
    --radius: 3px;
    --radius-small: 2px;
    --radius-large: 5px;
    
    /* -----------------------------------------------------
       BACKGROUND IMAGE
       ----------------------------------------------------- */
    --header-image: url("https://journalmipa.ulm.ac.id/index.php/flux/libraryFiles/downloadPublic/21");
    --description-image: url("https://journalmipa.ulm.ac.id/index.php/flux/libraryFiles/downloadPublic/22");
}


/* =========================================================
   2. GLOBAL/BODY
   ========================================================= */
html, body {
    background: var(--background) !important;
    color: var(--text);

    font-family:
        "Inter",
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    font-size: 15px;
    line-height: 1.7;
}

/* Semua link */
a {
    color: var(--link) !important;
    text-decoration: none;

    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease;
}

a:hover {
    color: var(--link-hover) !important;
}


/* =========================================================
   3. HEADER
   ========================================================= */
.pkp_structure_head {
    background:
        linear-gradient(
            135deg,
            var(--primary-dark),
            var(--primary),
            var(--primary-light)
        ) !important;

    border-bottom: 4px solid var(--accent) !important;
    box-shadow: 0 3px 12px rgba(0,0,0,.12);
}


/* Header container */
.pkp_head_wrapper {
    max-width: 1180px;
    margin: 0 auto;

    position: relative;
}


/* Background gambar header */
#headerNavigationContainer > .container-fluid:nth-child(2) {
    padding-left: 0 !important;
    padding-right: 0 !important;

    background-image:
        linear-gradient(
            var(--header-overlay),
            var(--header-overlay)
        ),
        var(--header-image) !important;

    background-size: cover;
    background-position: center;
}


/* Override navbar header */
/* #headerNavigationContainer .navbar-header {
    padding: 20px 80px !important;
} */

/* ---------------------------------------------------------
   Nama jurnal pada navbar/header
   --------------------------------------------------------- */
#headerNavigationContainer .navbar-brand,
#headerNavigationContainer .navbar-default .navbar-brand,
#headerNavigationContainer .header_view .navbar-brand {
    color: var(--header-brand) !important;

    text-shadow: var(--header-brand-shadow) !important;
    font-weight: 600 !important;
    text-decoration: none !important;

    height: auto !important;
    min-height: 50px;

    line-height: 1.3 !important;
    white-space: normal !important;

    padding-top: 12px !important;
    padding-bottom: 12px !important;

    box-sizing: border-box;
}


/* ---------------------------------------------------------
   Hover nama jurnal
   --------------------------------------------------------- */
#headerNavigationContainer .navbar-brand:hover,
#headerNavigationContainer .navbar-default .navbar-brand:hover,
#headerNavigationContainer .header_view .navbar-brand:hover {
    color: var(--header-brand-hover) !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .55) !important;
}


/* ---------------------------------------------------------
   Tambahan background transparan pada area nama jurnal
   ---------------------------------------------------------
   Tidak wajib digunakan.
   Aktifkan jika tulisan masih kurang jelas.
   --------------------------------------------------------- */
#headerNavigationContainer .navbar-brand {
    padding-left: var(--nav-brand-padding-x) !important;
    padding-right: var(--nav-brand-padding-x) !important;
    border-radius: var(--nav-brand-radius);
    background: var(--nav-brand-bg) !important;
}

/* ---------------------------------------------------------
   Hover area nama jurnal
   --------------------------------------------------------- */
#headerNavigationContainer .navbar-brand:hover {
    background: var(--nav-brand-bg-hover) !important;
}


/* =========================================================
   4. LOGO / NAMA JURNAL
   ========================================================= */
.pkp_site_name {
    padding-top: 35px !important;
    padding-bottom: 35px !important;
}

.pkp_site_name > a {
    display: inline-block;

    padding: 0 !important;
}

.pkp_site_name .is_img img {
    max-height: 95px !important;
    width: auto;

    object-fit: contain;
}


/* =========================================================
   5. LOGIN / REGISTER
   ========================================================= */
.pkp_navigation_user_wrapper {
    top: 18px !important;
    right: 0 !important;
}

.pkp_navigation_user {
    display: flex;
    gap: 8px;
    
    background: transparent !important;
}

.pkp_navigation_user > li {
    background: transparent !important;
}

.pkp_navigation_user > li > a {
    color: var(--nav-text) !important;
    background: transparent !important;

    font-size: 14px;
    font-weight: 500;

    padding: 7px 14px !important;

    border-radius: var(--radius-small);
}

.pkp_navigation_user > li > a:hover {
    color: var(--nav-text) !important;

    background: rgba(255,255,255,.15) !important;
}


/* =========================================================
   6. NAVBAR
   ========================================================= */
#headerNavigationContainer #nav-menu {
    position: relative;
    width: 100%;
    float: none;
    margin: 0;
    padding: 0 200px;

    background: var(--nav-bg) !important;
    background-image: none !important;

    border-top: 1px solid rgba(255,255,255,.08) !important;
    border-bottom: 4px solid var(--accent) !important;
}


/* Backup selector OJS */
.pkp_navigation_primary_wrapper {
    background: var(--nav-bg) !important;

    border-top: 1px solid rgba(255,255,255,.08) !important;
}


/* Navbar list */
#headerNavigationContainer #nav-menu ul,
#headerNavigationContainer #nav-menu li {
    background: transparent !important;
}


/* Navbar link */
#headerNavigationContainer #nav-menu li > a {
    display: block;

    color: var(--nav-text) !important;
    background: transparent !important;

    font-weight: 500;
    padding: 14px 18px !important;
    text-decoration: none;

    transition:
        background-color .2s ease,
        color .2s ease;
}

/* Navbar hover */
#headerNavigationContainer #nav-menu li > a:hover {
    color: var(--nav-text) !important;
    background: var(--nav-hover) !important;
}


/* Navbar active */
#headerNavigationContainer #nav-menu li.active > a,
#headerNavigationContainer #nav-menu li.current > a,
#headerNavigationContainer #nav-menu li.selected > a {
    color: var(--nav-text) !important;
    background: var(--nav-active) !important;
}


/* =========================================================
   7. NAVBAR SEARCH
   ========================================================= */
#headerNavigationContainer #nav-menu button[type="submit"] {
    margin: 0 !important;

    background: var(--accent) !important;
    background-image: none !important;

    border: 1px solid var(--accent) !important;
    border-radius: 0 7px 7px 0 !important;
    color: var(--button-text) !important;
    box-shadow: none !important;
}


#headerNavigationContainer #nav-menu button[type="submit"]:hover {
    background: var(--accent-light) !important;
    border-color: var(--accent-light) !important;
    color: var(--primary-dark) !important;
}


/* =========================================================
   8. DROPDOWN
   ========================================================= */
#headerNavigationContainer #nav-menu .dropdown-menu,
.dropdown-menu {
    background: var(--surface) !important;

    border: 1px solid var(--border) !important;
    border-radius: var(--radius-small);
    box-shadow: var(--shadow-md) !important;
}


#headerNavigationContainer #nav-menu .dropdown-menu li,
.dropdown-menu > li {
    background: var(--surface) !important;
}


#headerNavigationContainer #nav-menu .dropdown-menu li > a,
.dropdown-menu > li > a {
    color: var(--primary-dark) !important;
    background: var(--surface) !important;

    padding: 11px 15px !important;
}


#headerNavigationContainer #nav-menu .dropdown-menu li > a:hover,
.dropdown-menu > li > a:hover {
    color: var(--primary) !important;
    background: var(--surface-hover) !important;
}


/* =========================================================
   9. MAIN CONTENT
   ========================================================= */
.pkp_structure_content {
    max-width: 1180px;
    margin: 0 auto;

    background: transparent !important;
}


.pkp_structure_main {
    padding-top: 0;
    padding-bottom: 55px;
}


/* =========================================================
   10. HEADING / JUDUL
   ========================================================= */
h1,h2,h3,h4,h5,h6 {
    color: var(--primary-dark);
}

h1.page_title {
    color: var(--primary-dark) !important;

    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 30px;
}


h1 a,h2 a,h3 a,h4 a,h5 a,h6 a {
    color: var(--link) !important;
}


h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover {
    color: var(--link-hover) !important;
}

.pkp_page_index h2,
.pkp_page_index h3 {
    color: var(--primary-dark);
}


/* =========================================================
   11. JOURNAL LIST
   ========================================================= */
.pkp_page_index .journals {
    max-width: 1050px;
    margin: 0 auto;
}

.pkp_page_index .journals > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 25px;
}


/* =========================================================
   12. JOURNAL CARD
   ========================================================= */
.pkp_page_index .journals > ul > li {
    background: var(--surface) !important;

    border: 1px solid var(--border) !important;
    border-radius: var(--radius);

    padding: 30px;
    min-height: 190px;
    box-sizing: border-box;
    box-shadow: var(--shadow-sm);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}


.pkp_page_index .journals > ul > li:hover {
    transform: translateY(-5px);

    border-color: var(--primary-light) !important;
    box-shadow: var(--shadow-md);
}


/* =========================================================
   13. JOURNAL TITLE
   ========================================================= */
.pkp_page_index .journals > ul > li h3 {
    margin: 0 0 12px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
}

.pkp_page_index .journals > ul > li h3 a {
    color: var(--primary) !important;
}

.pkp_page_index .journals > ul > li h3 a:hover {
    color: var(--primary-light) !important;
}


/* =========================================================
   14. JOURNAL DESCRIPTION
   ========================================================= */
.pkp_page_index .journals .description {
    color: var(--text-muted);

    font-size: 14px;
    margin-bottom: 20px;
}


/* =========================================================
   15. JOURNAL BUTTONS
   ========================================================= */
.pkp_page_index .journals .links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
}


.pkp_page_index .journals .links a {
    display: inline-block;
    padding: 9px 17px;

    background: var(--button-bg) !important;

    border: 1px solid var(--button-bg) !important;
    color: var(--button-text) !important;
    border-radius: var(--radius-small);

    font-size: 13px;
    font-weight: 600;
}


.pkp_page_index .journals .links a:hover {
    background: var(--button-hover) !important;

    border-color: var(--button-hover) !important;
    color: var(--button-text) !important;
}


/* Current Issue */
.pkp_page_index .journals .links a:nth-child(2) {
    background: transparent !important;
    color: var(--primary) !important;

    border: 1px solid var(--primary) !important;
}

.pkp_page_index .journals .links a:nth-child(2):hover {
    background: var(--primary) !important;
    color: var(--button-text) !important;
}


/* =========================================================
   JOURNAL DESCRIPTION BOX
   =========================================================
   Kotak:
   - Initial / Abbreviation
   - DOI Prefix
   - Frequency
   - Editor-in-Chief
   - Publisher
   ========================================================= */
.journal-description {
    position: relative;
    padding: 30px;

    background:
        linear-gradient(
            135deg,
            var(--description-overlay),
            var(--description-overlay-light)
        ),
        var(--description-image);

    background-size: cover;
    background-position: center;

    border: 1px solid rgba(255,255,255,.15);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-lg);

    color: var(--description-text) !important;

    /* WAJIB: supaya konten tidak keluar dari sudut rounded */
    overflow: hidden;
    box-sizing: border-box;
}

/* Tabel dipaksa mengikuti lebar kontainer, tidak melebar sendiri */
.journal-description table {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.journal-description td {
    padding: 14px 12px;
    color: var(--description-text) !important;
    border-bottom: 1px solid rgba(255,255,255,.20);

    /* WAJIB: paksa teks panjang (URL, dsb) turun baris, bukan overflow */
    overflow-wrap: break-word;
    word-break: break-word;
}

.journal-description td:first-child {
    width: 30%;
    font-weight: 700;
}

.journal-description td:nth-child(2) {
    width: 20px;
    text-align: center;
}

.journal-description td:last-child {
    font-weight: 400;
    /* khusus untuk teks tanpa spasi seperti URL panjang */
    word-break: break-all;
}

.journal-description tr:last-child td {
    border-bottom: none;
}


/* Link */
.journal-description a {
    color: var(--description-link) !important;
    font-weight: 500;
}


.journal-description a:hover {
    color: var(--description-text) !important;
    text-decoration: underline;
}


/* =========================================================
   17. ARTICLE CARD
   ========================================================= */
.obj_article_summary {
    background: var(--surface) !important;

    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    padding: 22px;
    margin-bottom: 18px;
    box-shadow: var(--shadow-sm);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}


.obj_article_summary:hover {
    transform: translateY(-2px);

    border-color: var(--primary-light) !important;
    box-shadow: var(--shadow-md);
}

.obj_article_summary h3 {
    font-size: 19px;
    line-height: 1.45;
}

.obj_article_summary h3 a {
    color: var(--primary) !important;
}

.obj_article_summary h3 a:hover {
    color: var(--primary-light) !important;
}


/* =========================================================
   18. ISSUE CARD
   ========================================================= */
.obj_issue_summary {
    background: var(--surface) !important;

    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    padding: 25px;
    box-shadow: var(--shadow-sm);
}


/* =========================================================
   19. SIDEBAR / BLOCK
   =========================================================
   Contoh:
   - Terbitan Terkini
   - Informasi
   - Untuk Pembaca
   - Untuk Penulis
   - Untuk Pustakawan
   ========================================================= */
.pkp_block,
.panel-default {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-sm) !important;
    overflow: hidden;
}


/* =========================================================
   20. SIDEBAR HEADING
   =========================================================
   Mengubah background heading:
   "Terbitan Terkini"
   "Informasi"
   ========================================================= */
.pkp_block .title,
.panel-default > .panel-heading,
.pkp_block .title h2,
.pkp_block h2.title {
    color: var(--sidebar-heading-text) !important;
    background: var(--sidebar-heading-bg) !important;
    background-image: none !important;

    border: none !important;
    border-bottom: 3px solid var(--accent) !important;

    font-weight: 700 !important;
    margin: 0 !important;
}


/* =========================================================
   21. SIDEBAR CONTENT
   ========================================================= */
.pkp_block .content,
.panel-default .panel-body {
    background: var(--surface) !important;
    color: var(--text) !important;
    border: none !important;
}


/* Sidebar link */
.pkp_block a,
.panel-default a {
    color: var(--link) !important;
    text-decoration: none !important;

    transition:
        color .2s ease,
        background-color .2s ease;
}


.pkp_block a:hover,
.panel-default a:hover {
    color: var(--link-hover) !important;
    background: var(--surface-hover) !important;
}


/* Sidebar list */
.pkp_block li,
.panel-default li {
    border-bottom: 1px solid var(--border-light) !important;
}

.pkp_block li:last-child,
.panel-default li:last-child {
    border-bottom: none !important;
}


/* RSS / Atom */
.pkp_block .content a img {
    vertical-align: middle;
}


/* =========================================================
   22. GENERAL BUTTON
   =========================================================
   Tombol OJS dan Bootstrap.
   ========================================================= */
.cmp_button,
.cmp_form .buttons button,
.page_lost_password .buttons button,
.page_search .submit button,
.block_make_submission a {
    display: inline-block;
    padding: 0 1em;
    background: var(--button-bg) !important;
    background-image: none !important;

    border: 1px solid var(--button-bg) !important;
    border-radius: var(--radius-small) !important;
    box-shadow: none !important;

    font-size: .93rem;
    line-height: calc(2.143rem - 2px);
    font-weight: 700;
    color: var(--button-text) !important;
    text-decoration: none;
}


.cmp_button:hover,
.cmp_form .buttons button:hover,
.page_lost_password .buttons button:hover,
.page_search .submit button:hover,
.block_make_submission a:hover {
    background: var(--button-hover) !important;
    border-color: var(--button-hover) !important;
    color: var(--button-text) !important;

    box-shadow: none !important;
}


/* =========================================================
   23. ALERT
   ========================================================= */
.alert-info {
    color: var(--alert-text) !important;
    background: var(--alert-bg) !important;

    border: 1px solid var(--alert-border) !important;
    border-radius: var(--radius) !important;
}


/* =========================================================
   24. FORM
   ========================================================= */
input,
textarea,
select,
.form-control {
    background: var(--input-bg) !important;
    border: 1px solid var(--input-border) !important;
    border-radius: var(--radius-small) !important;
    color: var(--input-text) !important;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus {
    border-color: var(--input-focus) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(122,31,43,.10) !important;
}


/* =========================================================
   25. SEARCH
   ========================================================= */
.pkp_search {
    border-radius: var(--radius-small);
}


.pkp_search input {
    background: var(--input-bg) !important;
    border: 1px solid var(--input-border) !important;
    border-radius: var(--radius-small);

    color: var(--input-text) !important;
    padding: 10px 14px;
}


.pkp_search input:focus {
    border-color: var(--input-focus) !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(122,31,43,.10) !important;
}


/* =========================================================
   26. BREADCRUMB
   ========================================================= */
.pkp_breadcrumb {
    margin-bottom: 25px;
    font-size: 13px;
}


.pkp_breadcrumb a {
    color: var(--link) !important;
}


.pkp_breadcrumb a:hover {
    color: var(--link-hover) !important;
}


/* =========================================================
   27. PAGINATION
   ========================================================= */
.pagination > li > a,
.pagination > li > span {
    color: var(--primary) !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
}


.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > .active > a,
.pagination > .active > span {
    color: var(--button-text) !important;
    background: var(--primary) !important;
    border-color: var(--primary) !important;
}


/* =========================================================
   28. TABLE
   ========================================================= */
table {
    border-color: var(--table-border);
}

table th {
    background: var(--table-heading-bg) !important;
    color: var(--table-heading-text) !important;
    border-color: var(--table-border) !important;
}


table td {
    border-color: var(--table-border) !important;
    color: var(--text);
}


.table > thead > tr > th {
    background: var(--table-heading-bg) !important;
    color: var(--table-heading-text) !important;
    border-color: var(--table-border) !important;
}


/* =========================================================
   29. LABEL / BADGE
   ========================================================= */
.label-primary {
    background: var(--primary) !important;
}


.label-info {
    background: var(--primary-light) !important;
}


.label-warning {
    background: var(--accent) !important;
    color: var(--primary-dark) !important;
}


/* =========================================================
   30. FOOTER
   ========================================================= */
footer.footer {
    background-color: var(--footer-bg) !important;
    color: var(--footer-text) !important;
    border-top: 4px solid var(--accent) !important;

    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

footer.footer a {
    color: var(--footer-link) !important;
}

footer.footer a:hover {
    color: var(--footer-link-hover) !important;
}

/* =========================================================
   INDEXING LOGOS
   ========================================================= */
.journal-footer-indexing {
    width: 100%;
    margin-bottom: 30px;
}

.journal-footer-title {
    display: block;
    margin-bottom: 18px;

    color: #FFFFFF !important;
    font-size: 16px;
    font-weight: 700;
}


/* Container logo */
.journal-indexing-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;

    gap: 18px;

    width: 100%;
}


/* Semua logo indexing */
.journal-indexing-logos img {
    display: block;

    width: auto !important;
    max-width: 120px !important;
    height: 45px !important;

    object-fit: contain;

    margin: 0 !important;
    padding: 5px;

    background: #FFFFFF;
    border-radius: 5px;

    box-sizing: border-box;
}


/* Logo yang bentuknya terlalu lebar */
.journal-indexing-logos img.logo-doaj {
    width: 120px !important;
    height: 45px !important;
}


/* =========================================================
   CREATIVE COMMONS
   ========================================================= */
.journal-footer-license {
    display: flex;
    align-items: center;
    gap: 15px;

    margin-top: 25px;
    padding-top: 20px;

    border-top: 1px solid rgba(255,255,255,.20);
}

.journal-footer-license img {
    width: 88px !important;
    height: 31px !important;

    max-width: none !important;
    object-fit: contain;
}

.journal-footer-license-text {
    color: var(--footer-text);
    font-size: 13px;
    line-height: 1.6;
}

.journal-footer-license-text a {
    color: var(--footer-link) !important;
}

/* =========================================================
   HILANGKAN BRANDING OJS / PKP
   ========================================================= */
html body footer.footer .col-md-2[role="complementary"] {
    display: none !important;
}

html body footer.footer img[src*="ojs_brand.png"] {
    display: none !important;
}

html body footer.footer .col-md-10 {
    width: 100% !important;
    float: none !important;
}


/* =========================================================
   31. SELECTION
   ========================================================= */
::selection {
    background: var(--primary);
    color: var(--text-light);
}


/* =========================================================
   32. FOCUS
   ========================================================= */
:focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: 2px;
}

/* -----------------------------------------------------
   ADDITIONAL MENU / SIDEBAR LINKS
   ----------------------------------------------------- */
.additional-menu {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.additional-menu-title {
    color: #FFFFFF !important;

    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;

    border-bottom: 1px solid var(--border-light);
}

/* Link menu */
.pkp_block .content .additional-menu a.additional-menu-item {
    display: block;
    width: 100%;

    background: var(--primary);
    color: #FFFFFF !important;

    padding: 10px 10px;

    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;

    text-transform: uppercase;
    text-decoration: none !important;

    border-bottom: 1px solid var(--border-light);

    transition: all .2s ease;
}

/* Link yang sudah pernah dikunjungi */
.pkp_block .content .additional-menu a.additional-menu-item:visited {
    color: #FFFFFF !important;
}

/* Hover */
.pkp_block .content .additional-menu a.additional-menu-item:hover,
.pkp_block .content .additional-menu a.additional-menu-item:focus {
    background: var(--primary-light);
    color: var(--primary) !important;

    text-decoration: none !important;
    padding-left: 14px;
}

/* Link terakhir */
.pkp_block .content .additional-menu a.additional-menu-item:last-child {
    border-bottom: none;
}


/* =========================================================
   33. MOBILE
   ========================================================= */

@media (max-width: 768px) {

    /* -----------------------------------------------------
       HEADER / WRAPPER
       ----------------------------------------------------- */

    .pkp_head_wrapper {
        padding-left: 20px;
        padding-right: 20px;
    }


    /* -----------------------------------------------------
       NAVBAR BRAND / NAMA JURNAL
       Tinggi otomatis mengikuti jumlah baris
       ----------------------------------------------------- */

    #headerNavigationContainer .navbar-brand,
    #headerNavigationContainer .navbar-default .navbar-brand,
    #headerNavigationContainer .header_view .navbar-brand {
        height: auto !important;
        min-height: 50px;

        max-width: calc(100% - 70px);

        line-height: 1.35 !important;
        white-space: normal !important;

        display: inline-block !important;
        vertical-align: middle;

        box-sizing: border-box;

        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }


    /* -----------------------------------------------------
       TOMBOL HAMBURGER
       Tidak mengubah posisi/style bawaan
       ----------------------------------------------------- */

    #headerNavigationContainer .navbar-toggle {
        z-index: 1001;
    }


    /* -----------------------------------------------------
       SITE NAME / LOGO
       ----------------------------------------------------- */

    .pkp_site_name {
        padding-top: 55px !important;
        padding-bottom: 25px !important;
        text-align: center;
    }

    .pkp_site_name .is_img img {
        max-width: 85%;
        max-height: 75px !important;
    }


    /* -----------------------------------------------------
       USER NAVIGATION
       ----------------------------------------------------- */

    .pkp_navigation_user_wrapper {
        top: 8px !important;
        right: 15px !important;
    }


    /* -----------------------------------------------------
       MAIN NAVIGATION
       ----------------------------------------------------- */

    #headerNavigationContainer #nav-menu {
        padding: 0 20px;
    }

    #headerNavigationContainer #nav-menu ul,
    #headerNavigationContainer #nav-menu li {
        width: 100%;
    }

    #headerNavigationContainer #nav-menu li > a {
        box-sizing: border-box;
        padding: 11px 15px !important;
    }


    /* -----------------------------------------------------
       JOURNAL LIST
       ----------------------------------------------------- */

    .pkp_page_index .journals > ul {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .pkp_page_index .journals > ul > li {
        padding: 24px;
        min-height: auto;
    }


    /* -----------------------------------------------------
       MAIN CONTENT
       ----------------------------------------------------- */

    .pkp_structure_main {
        padding: 30px 18px 40px;
    }

    h1.page_title {
        font-size: 26px;
    }


    /* -----------------------------------------------------
       JOURNAL DESCRIPTION
       ----------------------------------------------------- */

    .journal-description {
        padding: 20px !important;
        border-radius: 14px !important;
    }

    .journal-description td {
        padding: 11px 8px !important;
        font-size: 14px;
    }

    .journal-description td:first-child {
        width: 30%;
    }


    /* -----------------------------------------------------
       INDEXING LOGOS
       ----------------------------------------------------- */

    .journal-indexing-logos {
        justify-content: center;
        gap: 12px;
    }

    .journal-indexing-logos img {
        max-width: 100px !important;
        height: 40px !important;
    }


    /* -----------------------------------------------------
       FOOTER
       ----------------------------------------------------- */

    .journal-footer-title {
        text-align: center;
    }

    .journal-footer-license {
        flex-direction: column;
        text-align: center;
    }

    .journal-footer-license-text {
        font-size: 12px;
    }

}


/* =========================================================
   34. SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    /* -----------------------------------------------------
       NAVBAR BRAND / NAMA JURNAL
       Lebih fleksibel pada layar kecil
       ----------------------------------------------------- */

    #headerNavigationContainer .navbar-brand,
    #headerNavigationContainer .navbar-default .navbar-brand,
    #headerNavigationContainer .header_view .navbar-brand {
        height: auto !important;
        min-height: 50px;

        max-width: calc(100% - 60px);

        line-height: 1.3 !important;
        white-space: normal !important;

        padding-top: 12px !important;
        padding-bottom: 12px !important;

        box-sizing: border-box;
    }


    /* -----------------------------------------------------
       USER NAVIGATION
       ----------------------------------------------------- */

    .pkp_navigation_user > li > a {
        font-size: 12px;
        padding: 5px 8px !important;
    }


    /* -----------------------------------------------------
       JOURNAL LIST
       ----------------------------------------------------- */

    .pkp_page_index .journals > ul > li h3 {
        font-size: 19px;
    }

    .pkp_page_index .journals .links {
        flex-direction: column;
    }

    .pkp_page_index .journals .links a {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }


    /* -----------------------------------------------------
       JOURNAL DESCRIPTION
       ----------------------------------------------------- */

    .journal-description {
        padding: 16px !important;
        border-radius: 12px !important;
    }

    .journal-description td {
        padding: 9px 6px !important;
        font-size: 13px;
    }

    .journal-description td:first-child {
        width: 32%;
    }

}