/* Statistik Kinerja - light + dark mode. Tokens from UIUX_STYLE_GUIDE.md. */
*, *::before, *::after { box-sizing: border-box; }

.psk-root {
    --psk-bg:        transparent;
    --psk-surface:   #f2f5f9;
    --psk-text:      #023363;
    --psk-divider:   rgba(4, 54, 102, .18);
    --psk-accent:    #043666;
    --psk-accent-2:  #ffd000;
    --psk-shadow-sm: 0 1px 2px rgba(2, 51, 99, .16);
    --psk-shadow-md: 0 3px 10px rgba(2, 51, 99, .18);

    --psk-neutral-1: #f7f9fb;
    --psk-neutral-2: #eef1f5;
    --psk-neutral-3: #dbe1e9;
    --psk-neutral-5: #6b7a8d;
    --psk-neutral-7: #33465c;

    --psk-space-1: 5px;
    --psk-space-2: 10px;
    --psk-space-3: 15px;
    --psk-space-4: 20px;
    --psk-space-6: 30px;
    --psk-space-8: 40px;

    --psk-radius-sm: 1px;
    --psk-radius-md: 2px;
    --psk-radius-lg: 4px;

    --psk-font: Helvetica, "Helvetica Neue", Arial, sans-serif;

    width: 100%;
    font-family: var(--psk-font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--psk-text);
    background: var(--psk-bg);
}

html.jnews-dark-mode .psk-root,
body.jeg_dark_mode .psk-root,
html.jeg_dark_mode .psk-root {
    --psk-bg:        transparent;
    --psk-surface:   #182634;
    --psk-text:      #e7edf5;
    --psk-divider:   rgba(231, 237, 245, .18);
    --psk-accent:    #7ba3d0;
    --psk-accent-2:  #ffd000;
    --psk-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --psk-shadow-md: 0 3px 10px rgba(0, 0, 0, .4);

    --psk-neutral-1: #202f3f;
    --psk-neutral-2: #263748;
    --psk-neutral-3: #34495e;
    --psk-neutral-5: #93a4b8;
    --psk-neutral-7: #cdd7e2;
}

.psk-root h2, .psk-root h3 { font-weight: 600; margin: 0 0 var(--psk-space-3); }

/* ── Filter bar ── */
.psk-filterbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--psk-space-4);
    padding-bottom: var(--psk-space-4);
    margin-bottom: var(--psk-space-6);
    border-bottom: 1px solid var(--psk-divider);
}
.psk-filter { display: flex; flex-direction: column; gap: var(--psk-space-1); font-size: 12px; color: var(--psk-neutral-5); }
.psk-filter select {
    font: inherit;
    font-size: 14px;
    color: var(--psk-text);
    background: var(--psk-surface);
    border: 1px solid var(--psk-divider);
    border-radius: var(--psk-radius-md);
    padding: var(--psk-space-2) var(--psk-space-8) var(--psk-space-2) var(--psk-space-3);
    min-width: 180px;
    /* Own caret: the native one hugs the border and ignores padding in Safari.
       Gradients (not an SVG) so it takes --psk-text and follows dark mode. */
    -webkit-appearance: none;
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--psk-text) 50%),
        linear-gradient(135deg, var(--psk-text) 50%, transparent 50%);
    background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    cursor: pointer;
}

.psk-page-title { font-size: 22px; color: var(--psk-accent); }

/* ── Stat cards ── */
.psk-stats-row { display: flex; flex-wrap: wrap; gap: var(--psk-space-4); margin-bottom: var(--psk-space-6); }
.psk-stat {
    flex: 1 1 180px;
    background: var(--psk-surface);
    border: 1px solid var(--psk-divider);
    border-radius: var(--psk-radius-md);
    box-shadow: var(--psk-shadow-sm);
    padding: var(--psk-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--psk-space-1);
}
.psk-stat-label { font-size: 12px; letter-spacing: .04em; color: var(--psk-neutral-5); text-transform: uppercase; }
.psk-stat-value { font-size: 28px; font-weight: 600; color: var(--psk-accent); }
.psk-stat-sub { font-size: 12px; color: var(--psk-neutral-5); }

.psk-section-title { font-size: 15px; }

/* ── Bar chart (per-bulan trend) ──
   Each column = track (bar height % is of the track only) + count + label.
   --psk-bar-labels is the height below the track (2 x 14px lines + 2 x 5px
   gaps); the axis and gridlines are inset by it so ticks meet the bars. */
.psk-chart { margin-bottom: var(--psk-space-6); --psk-bar-labels: 38px; --psk-chart-h: 200px; }
.psk-chart-body { display: flex; align-items: flex-start; gap: var(--psk-space-2); }
.psk-chart-scale {
    position: relative;
    flex-shrink: 0;
    height: var(--psk-chart-h);
    margin-top: calc(var(--psk-space-2) + 1px); /* scroll box border + padding */
    font-size: 11px;
    line-height: 1;
    color: var(--psk-neutral-5);
    text-align: right;
}
.psk-scale-sizer { visibility: hidden; display: block; white-space: nowrap; } /* gives the column its width */
.psk-scale-track { position: absolute; top: 0; right: 0; left: 0; bottom: var(--psk-bar-labels); }
.psk-scale-track span { position: absolute; right: 0; transform: translateY(50%); white-space: nowrap; }
.psk-bars-scroll {
    flex: 1;
    min-width: 0;
    overflow-x: auto; /* long periods scroll inside the chart, not the page */
    padding: var(--psk-space-2);
    background: var(--psk-surface);
    border: 1px solid var(--psk-divider);
    border-radius: var(--psk-radius-md);
}
.psk-bars {
    position: relative;
    display: flex;
    gap: var(--psk-space-2);
    height: var(--psk-chart-h);
    width: max-content;
    min-width: 100%;
}
.psk-gridlines { position: absolute; top: 0; right: 0; left: 0; bottom: var(--psk-bar-labels); }
.psk-gridlines i { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--psk-divider); }
.psk-bar-col { position: relative; flex: 1 0 36px; display: flex; flex-direction: column; gap: var(--psk-space-1); }
.psk-bar-track { flex: 1; min-height: 0; display: flex; align-items: flex-end; justify-content: center; }
.psk-bar { width: 60%; min-height: 2px; background: var(--psk-accent); border-radius: var(--psk-radius-sm) var(--psk-radius-sm) 0 0; }
.psk-bar-count, .psk-bar-label { font-size: 10px; line-height: 14px; height: 14px; color: var(--psk-neutral-5); text-align: center; white-space: nowrap; }

/* ── Composition bar ── */
.psk-composition { margin-bottom: var(--psk-space-6); }
.psk-comp-bar { display: flex; height: 20px; border-radius: var(--psk-radius-sm); overflow: hidden; border: 1px solid var(--psk-divider); }
.psk-comp-seg-0 { background: var(--psk-accent); }
.psk-comp-seg-1 { background: var(--psk-accent-2); }
.psk-comp-seg-2 { background: var(--psk-neutral-5); }
.psk-comp-seg-3 { background: var(--psk-neutral-3); }
.psk-comp-legend { list-style: none; display: flex; flex-wrap: wrap; gap: var(--psk-space-4); margin: var(--psk-space-2) 0 0; padding: 0; font-size: 13px; }
.psk-comp-legend li { display: flex; align-items: center; gap: var(--psk-space-1); }
.psk-comp-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* ── Top 10 ── */
.psk-top10 { margin-bottom: var(--psk-space-6); }
.psk-top10-list { list-style: none; margin: 0; padding: 0; counter-reset: psk-rank; }
.psk-top10-list li {
    counter-increment: psk-rank;
    display: flex;
    justify-content: space-between;
    padding: var(--psk-space-2) 0;
    border-bottom: 1px solid var(--psk-divider);
}
.psk-top10-list li::before {
    content: counter(psk-rank, decimal-leading-zero);
    color: var(--psk-neutral-5);
    margin-right: var(--psk-space-2);
}
.psk-top10-value { font-weight: 600; }

/* ── Detail table ── */
.psk-detail { margin-bottom: var(--psk-space-6); }
.psk-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.psk-table th, .psk-table td { padding: var(--psk-space-2) var(--psk-space-3); text-align: left; border-bottom: 1px solid var(--psk-divider); }
.psk-table th { background: var(--psk-surface); color: var(--psk-neutral-7); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.psk-table td:last-child, .psk-table th:last-child { text-align: right; }
.psk-table tbody tr:nth-child(even) { background: var(--psk-neutral-1); }
.psk-table tfoot td { font-weight: 600; border-top: 2px solid var(--psk-accent); border-bottom: none; }

/* ── Export bar (Download Excel / PDF), one per section ── */
.psk-export-bar { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--psk-space-2); margin-bottom: var(--psk-space-6); }
.psk-btn-export {
    display: inline-flex;
    align-items: center;
    gap: var(--psk-space-2);
    padding: var(--psk-space-2) var(--psk-space-4);
    font: inherit;
    font-weight: 600;
    color: #fff;
    background: var(--psk-accent);
    border: 1px solid var(--psk-accent);
    border-radius: var(--psk-radius-md);
    box-shadow: var(--psk-shadow-sm);
    cursor: pointer;
}
.psk-btn-export:hover { box-shadow: var(--psk-shadow-md); }
.psk-btn-export:focus-visible { outline: 2px solid var(--psk-accent-2); outline-offset: 2px; }
.psk-btn-export-alt { color: var(--psk-accent); background: transparent; }
html.jnews-dark-mode .psk-btn-export:not(.psk-btn-export-alt),
body.jeg_dark_mode .psk-btn-export:not(.psk-btn-export-alt),
html.jeg_dark_mode .psk-btn-export:not(.psk-btn-export-alt) { color: #0d1824; }

/* ── "Belum ada data untuk: ..." (months in the period without data) ── */
.psk-notice {
    margin: 0 0 var(--psk-space-4);
    padding: var(--psk-space-2) var(--psk-space-3);
    background: var(--psk-surface);
    border-left: 3px solid var(--psk-accent-2);
    border-radius: var(--psk-radius-sm);
}

/* ── Unavailable state ── */
.psk-unavailable {
    border: 1px dashed var(--psk-divider);
    border-radius: var(--psk-radius-md);
    padding: var(--psk-space-6);
    color: var(--psk-neutral-5);
}
.psk-empty { color: var(--psk-neutral-5); font-style: italic; }