/**
 * plugins/generic/viewcounter/css/viewcounter.css
 *
 * Copyright (c) 2024-2026 OJSBR (https://ojsbr.com)
 * Distributed under the GNU GPL v3. For full terms see the file docs/COPYING.
 *
 * The badge is rendered at the hook location (end of the article summary /
 * inside the article main entry). viewcounter.js moves it next to the title
 * when the expected markup exists; these rules cover both positions.
 */
.viewcounter-stats {
	display: inline-flex;
	flex: 0 0 auto;
	gap: 14px;
	align-items: center;
	color: #6b7280;
	font-size: 14px;
	font-weight: normal;
	line-height: 1.6;
	white-space: nowrap;
}
.viewcounter-stats--summary {
	font-size: 13px;
}
.viewcounter-stats > .viewcounter-count,
.viewcounter-count > .viewcounter-visible {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	cursor: default;
}
.viewcounter-stats svg {
	flex: 0 0 auto;
}

/* Title as host (after relocation by viewcounter.js).
   Only two children ever sit here: the wrapper holding the title's own
   content, and the badge. The title's inline content -- <em>, <sub>, the
   <mjx-container> of a MathJax formula -- stays inside the wrapper, where it
   keeps laying out inline instead of each becoming a flex item of its own. */
.viewcounter-title-host {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}
.viewcounter-title-host > .viewcounter-title-text,
.viewcounter-title-host > a {
	flex: 1 1 auto;
	min-width: 0;
}

/* Fallback position: hook location, as a small line of its own. */
.obj_article_summary > .viewcounter-stats,
.main_entry > .viewcounter-stats {
	display: flex;
	margin: 0.5em 0;
}

/* Read by screen readers only: the "Views: 12" text of each count, and the
   badge itself once viewcounter.js has put its visible copy in the title. */
.viewcounter-sr,
.viewcounter-stats.viewcounter-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* new

/* JURPAI Metrics - Exactly 2 Lines */

.obj_article_summary .viewcounter-stats {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 6px !important;
    margin-top: 8px !important;
}

.obj_article_summary .viewcounter-stats .viewcounter-count {
    display: flex !important;
    flex: 0 0 112px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 112px !important;
    height: 48px !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
    padding: 5px 7px !important;
    overflow: hidden !important;
    background: #dce7ed !important;
    border-radius: 3px !important;
}

/* Line 1: number */
.obj_article_summary .viewcounter-stats .viewcounter-visible {
    display: block !important;
    height: 15px !important;
    min-height: 15px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 15px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #0879c9 !important;
}

.obj_article_summary .viewcounter-stats .viewcounter-visible svg {
    display: none !important;
}

/* Line 2: label, never wrap */
.obj_article_summary .viewcounter-stats .viewcounter-count:nth-child(1)::after {
    content: "Full Text Views";
}

.obj_article_summary .viewcounter-stats .viewcounter-count:nth-child(2)::after {
    content: "PDF Downloads";
}

.obj_article_summary .viewcounter-stats .viewcounter-count::after {
    display: block !important;
    width: 100% !important;
    margin-top: 2px !important;
    padding: 0 !important;
    white-space: nowrap !important;
    font-size: 10px !important;
    line-height: 13px !important;
    font-weight: 400 !important;
    color: #0879c9 !important;
}

/*new 2


/* Final spacing refinement - JURPAI */

.obj_article_summary .viewcounter-stats {
    gap: 5px !important;
    margin-top: 8px !important;
}

.obj_article_summary .viewcounter-stats .viewcounter-count {
    flex: 0 0 112px !important;
    width: 112px !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 5px 7px !important;
    border-radius: 3px !important;
}

.obj_article_summary .viewcounter-stats .viewcounter-visible {
    font-size: 12px !important;
    line-height: 15px !important;
}

.obj_article_summary .viewcounter-stats .viewcounter-count::after {
    margin-top: 1px !important;
    font-size: 10px !important;
    line-height: 12px !important;
}

/*new 3 details


/* ==========================================
   JURPAI - Article Detail Metrics
   OJS 3.5.0.5
   ========================================== */

.obj_article_details .viewcounter-stats {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 5px !important;

    position: static !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    box-sizing: border-box !important;

    margin: 12px 0 16px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

/* Metric card */
.obj_article_details .viewcounter-stats .viewcounter-count {
    display: flex !important;
    flex: 0 0 112px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;

    width: 112px !important;
    height: 46px !important;
    min-height: 46px !important;
    box-sizing: border-box !important;

    margin: 0 !important;
    padding: 5px 7px !important;

    background: #dce7ed !important;
    border: 0 !important;
    border-radius: 3px !important;
    color: #0879c9 !important;
}

/* Number */
.obj_article_details .viewcounter-stats .viewcounter-visible {
    display: block !important;
    height: 15px !important;
    min-height: 15px !important;
    margin: 0 !important;
    padding: 0 !important;

    color: #0879c9 !important;
    font: 700 12px/15px Arial, Helvetica, sans-serif !important;
}

/* Hide original icons */
.obj_article_details .viewcounter-stats .viewcounter-visible svg {
    display: none !important;
}

/* Labels */
.obj_article_details .viewcounter-stats .viewcounter-count:nth-child(1)::after {
    content: "Full Text Views";
}

.obj_article_details .viewcounter-stats .viewcounter-count:nth-child(2)::after {
    content: "PDF Downloads";
}

.obj_article_details .viewcounter-stats .viewcounter-count::after {
    display: block !important;
    width: 100% !important;
    margin: 1px 0 0 !important;
    padding: 0 !important;

    color: #0879c9 !important;
    font: 400 10px/12px Arial, Helvetica, sans-serif !important;
    white-space: nowrap !important;
}

/* Mobile */
@media (max-width: 480px) {
    .obj_article_details .viewcounter-stats .viewcounter-count {
        flex-basis: 105px !important;
        width: 105px !important;
    }
}

/* rata kiri

/* Align article metrics with abstract and References text */
.obj_article_details .viewcounter-stats {
    margin-left: 30px !important;
    padding-left: 0 !important;
    width: calc(100% - 30px) !important;
    box-sizing: border-box !important;
}

/* Preserve compact card layout */
.obj_article_details .viewcounter-stats .viewcounter-count {
    flex: 0 0 112px !important;
    width: 112px !important;
    height: 46px !important;
    min-height: 46px !important;
}

/*details

/* Dimensions Badge - Article Details */
.article-dimensions-badge {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    margin: 12px 0 16px;
    padding: 0;
}

.article-dimensions-badge .dimensions-label {
    color: #333;
    font-size: 13px;
    font-weight: 600;
}