/* ==========================================================================
   COMBINED & FIXED CSS FOR OJS 3.3 (ARUNA JOURNAL)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GLOBAL RESET & BASE STYLES
   -------------------------------------------------------------------------- */
body {
    font-family: 'Segoe UI', Arial, Helvetica, sans-serif !important;
    font-size: 14px;
    line-height: 1.6;
    color: #333333;
    background-color: #f4f6f8 !important;
}

a {
    color: #0056b3;
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover, a:focus {
    color: #003366;
    text-decoration: underline;
}

/* Container Adjustments (Fix Overflow & Clipping) */
.pkp_structure_page {
    max-width: 1100px;
    margin: 20px auto !important;
    margin-bottom: 20px !important;
    padding-bottom: 20px !important;
    background-color: #ffffff;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    overflow: visible !important; /* Mencegah elemen admin/search terpotong */
}

/* --------------------------------------------------------------------------
   2. HEADER & BRANDING (PERBAIKAN LOGO / BANNER & USER MENU)
   -------------------------------------------------------------------------- */
.pkp_structure_head {
    background-color: #d9534f !important; /* Mengikuti warna merah background header Anda */
    border-bottom: 4px solid #003366;
    position: relative;
}

.pkp_site_name_wrapper {
    padding: 10px 15px !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pkp_site_name {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    max-width: 100%;
}

.pkp_site_name > a {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    color: #ffffff !important;
    font-weight: 700;
    display: block;
}

/* Penyesuaian Banner/Logo agar Pas & Tidak Terpotong */
.pkp_site_name .is_img img {
    max-height: 250px !important;
    width: auto !important;
    max-width: 100% !important; /* Mencegah gambar melebihi lebar layar/kontainer */
    height: auto !important;
    object-fit: contain;
    margin: 0 auto;
    display: block;
}

/* Fix Menu Admin / User Navigation Terpotong */
.pkp_navigation_user_wrapper {
    position: relative !important; /* Mengubah dari absolute agar tidak terdorong ke luar */
    top: auto !important;
    right: auto !important;
    padding: 8px 20px !important;
    background-color: rgba(0, 0, 0, 0.15);
    display: flex !important;
    justify-content: flex-end !important;
    z-index: 10;
}

.pkp_navigation_user {
    display: flex !important;
    align-items: center;
}

.pkp_navigation_user li {
    margin-left: 15px;
}

.pkp_navigation_user a {
    color: #ffffff !important;
    font-weight: 600;
    font-size: 13px;
}

/* --------------------------------------------------------------------------
   3. NAVIGATION BAR & SEARCH AREA (FIX SEARCH TERPOTONG)
   -------------------------------------------------------------------------- */
.pkp_navigation_primary_row {
    background-color: #002244 !important;
    border-bottom: 1px solid #001122;
    padding: 0 15px !important;
}

.pkp_navigation_primary_row .pkp_navigation_primary_wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.pkp_navigation_primary a {
    color: #ffffff !important;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pkp_navigation_primary a:hover {
    background-color: #d9534f !important;
    color: #ffffff !important;
    text-decoration: none;
}

/* Search Box Fixing */
.pkp_navigation_primary_row .pkp_search {
    margin-right: 10px !important;
}

.pkp_navigation_primary_row .pkp_search a {
    color: #ffffff !important;
    padding: 10px 15px !important;
    display: inline-block;
}

/* --------------------------------------------------------------------------
   4. SIDEBAR BLOCKS
   -------------------------------------------------------------------------- */
.pkp_structure_sidebar {
    background-color: #f9fbfd;
    border-left: 1px solid #e1e8ed;
}

.pkp_block {
    margin-bottom: 25px !important;
    background-color: #ffffff;
    border: 1px solid #e1e8ed;
    border-radius: 4px;
    padding: 15px !important;
}

.pkp_block .title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #003366 !important;
    border-bottom: 2px solid #003366;
    padding-bottom: 6px;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.pkp_block ul li {
    padding: 6px 0;
    border-bottom: 1px dashed #e1e8ed;
}

.pkp_block ul li:last-child {
    border-bottom: none;
}

/* --------------------------------------------------------------------------
   5. BUTTONS, INPUTS & TABLES
   -------------------------------------------------------------------------- */
input[type="text"], input[type="password"], select, textarea {
    border: 1px solid #cccccc;
    border-radius: 4px;
    padding: 8px 12px;
}

button, .cmp_button, input[type="submit"] {
    background-color: #003366 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 8px 16px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    transition: background-color 0.2s ease;
}

button:hover, .cmp_button:hover, input[type="submit"]:hover {
    background-color: #d9534f !important;
}

/* Tables */
table.pkp_table, table.data {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

table.pkp_table th, table.data th {
    background-color: #003366;
    color: #ffffff;
    padding: 10px;
}

table.pkp_table td, table.data td {
    padding: 10px;
    border-bottom: 1px solid #e1e8ed;
}

/* --------------------------------------------------------------------------
   6. DYNAMIC TEXT ALIGNMENT FOR ADMIN UPLOADS / TINYMCE CONTENT
   -------------------------------------------------------------------------- */
.pkp_structure_main .page,
.pkp_structure_main .description,
.obj_article_details .main_entry {
    color: #333333;
}

/* Alignment Classes */
.pkp_structure_main .mce-content-body [style*="text-align: left"],
.pkp_structure_main [style*="text-align: left"],
.align-left, .text-left {
    text-align: left !important;
}

.pkp_structure_main .mce-content-body [style*="text-align: center"],
.pkp_structure_main [style*="text-align: center"],
.align-center, .text-center {
    text-align: center !important;
}

.pkp_structure_main .mce-content-body [style*="text-align: right"],
.pkp_structure_main [style*="text-align: right"],
.align-right, .text-right {
    text-align: right !important;
}

.pkp_structure_main .mce-content-body [style*="text-align: justify"],
.pkp_structure_main [style*="text-align: justify"],
.align-justify, .text-justify {
    text-align: justify !important;
}

/* Aligning Images */
.pkp_structure_main img.alignleft, 
.pkp_structure_main img[style*="float: left"] {
    float: left;
    margin: 0 15px 15px 0;
}

.pkp_structure_main img.alignright, 
.pkp_structure_main img[style*="float: right"] {
    float: right;
    margin: 0 0 15px 15px;
}

.pkp_structure_main img.aligncenter, 
.pkp_structure_main img[style*="display: block; margin-left: auto; margin-right: auto"] {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* --------------------------------------------------------------------------
   7. FOOTER
   -------------------------------------------------------------------------- */
.pkp_structure_footer_wrapper {
    background-color: #1a252f !important;
    color: #abb6c2 !important;
    padding: 20px 30px;
    font-size: 12px;
    border-top: 3px solid #003366;
    text-align: center;
}

.pkp_structure_footer_wrapper a {
    color: #ffffff !important;
}