/* Custom CSS overrides - File permanen yang tidak akan ter-overwrite */

/* Additional custom styles can be added here */
/* Enlarge all comboboxes in settings and admin areas */
select {
    min-width: 400px !important;
    max-width: 100% !important;
    height: 40px !important;
    padding: 8px 12px !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    background-color: #fff !important;
    border: 1px solid #ccc !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
}

/* Ensure comboboxes in forms are properly sized */
.cmp_form select,
.pkp_form select,
.pkp_management select,
.pkp_page_admin select,
.settings select,
.admin select,
#admin select,
.plugins_themes_custom_CustomThemePlugin select,
[class*="theme"] select,
[class*="custom"] select {
    min-width: 400px !important;
    max-width: 100% !important;
    height: 40px !important;
}

/* Adjust for mobile responsiveness */
@media (max-width: 768px) {
    select {
        min-width: 280px !important;
        font-size: 16px !important;
        height: 44px !important;
    }
    
    .cmp_form select,
    .pkp_form select,
    .pkp_management select,
    .pkp_page_admin select,
    .settings select,
    .admin select,
    #admin select,
    .plugins_themes_custom_CustomThemePlugin select,
    [class*="theme"] select,
    [class*="custom"] select {
        min-width: 280px !important;
        height: 44px !important;
    }
}

/* Tab active styling - additional override for maximum specificity */
.pkp_tab.active > a,
.pkp_tab.active > a span,
.tabs .active > a,
.tabs .active > a span,
.nav-tabs .active > a,
.nav-tabs .active > a span,
.nav-tabs .active > a:hover,
.nav-tabs .active > a:hover span,
.ui-tabs-active > a,
.ui-tabs-active > a span,
.ui-state-active > a,
.ui-state-active > a span,
.ui-tabs-active > a:hover,
.ui-tabs-active > a:hover span,
.ui-state-active > a:hover,
.ui-state-active > a:hover span,
.pkp_navigation_primary .active > a,
.pkp_navigation_primary .active > a span,
.pkp_navigation_primary .active > a:hover,
.pkp_navigation_primary .active > a:hover span {
    background-color: var(--tab-active-background-color, #057B90) !important;
    color: var(--tab-active-font-color, #EDFF60) !important;
}

/* Khusus untuk tab buttons di halaman index journal - override maksimum */
#tabs-id ul li a.text-white {
    background-color: var(--tab-active-background-color, #057B90) !important;
    color: var(--tab-active-font-color, #EDFF60) !important;
}

/* Style untuk tab non-aktif */
#tabs-id ul li a.announcement-noble {
    background-color: transparent !important;
    color: var(--tab-inactive-font-color, #000000) !important;
}

/* Hover effect untuk tab non-aktif */
#tabs-id ul li a.announcement-noble:hover {
    background-color: rgba(30, 98, 146, 0.1) !important;
    color: var(--tab-active-background-color, #057B90) !important;
}

/* SVG Icon Styles */
.icon {
    display: inline-block !important;
    vertical-align: middle;
    visibility: visible !important;
}

.icon svg {
    width: 100% !important;
    height: 100% !important;
    fill: currentColor;
    display: block !important;
    visibility: visible !important;
}

/* Force display of SVG icons */
.icon.glyph {
    display: inline-block !important;
    width: 15px !important;
    height: 15px !important;
    visibility: visible !important;
}

.icon.glyph svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    visibility: visible !important;
}

/* FontAwesome Icon Styles */
.fa,
.fa-fw,
.fa-ad {
    display: inline-block !important;
    font-size: inherit !important;
    line-height: 1 !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    visibility: visible !important;
}

/* Ensure all icon containers are visible */
.pdf_count,
.galley_stat,
.article_stat {
    display: flex !important;
    align-items: center !important;
    visibility: visible !important;
}

/* General icon visibility fixes */
[class*="icon"],
[class*="fa"],
[class*="glyph"] {
    display: inline-block !important;
    visibility: visible !important;
}

/* Fix for hvr-icon class */
.hvr-icon {
    display: inline-block !important;
    visibility: visible !important;
}