/* RPD V2 — dashboard weekly report.
   Mengikuti bahasa visual V1: glassmorphism putih kebiruan dengan aksen biru,
   ditambah aksen sekunder terbatas untuk membedakan bagian. */

:root {
    --rp-env: #16a394;
    --rp-env-soft: rgba(22, 163, 148, 0.14);
    --rp-pme: #3988ff;
    --rp-pme-soft: rgba(57, 136, 255, 0.14);
    --rp-gaa: #6c5ce7;
    --rp-gaa-soft: rgba(108, 92, 231, 0.14);
    --rp-mec: #e8590c;
    --rp-mec-soft: rgba(232, 89, 12, 0.14);
    --rp-adf: #c2255c;
    --rp-adf-soft: rgba(194, 37, 92, 0.14);
    --rp-accent: var(--rp-pme);
    --rp-accent-soft: var(--rp-pme-soft);
}

/* ------------------------------------------------------------------ navigasi TV */

/* Header perlu berada di atas panggung agar tooltip menu tidak tertutup. */
.tv-header {
    position: relative;
    z-index: 20;
}

.tv-nav {
    display: flex;
    align-items: center;
    gap: 1vmin;
    flex: 1;
    justify-content: center;
    min-width: 0;
    flex-wrap: nowrap;
    /* Tooltip menggantung di luar nav, jadi tidak boleh dipotong. */
    overflow: visible;
}

.tv-nav-item {
    position: relative;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Ikon berbentuk lingkaran agar lima bagian tetap muat di header, dengan
       area klik yang nyaman untuk mouse, sentuh, maupun remote. */
    width: clamp(34px, 4.6vmin, 64px);
    height: clamp(34px, 4.6vmin, 64px);
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.62);
    color: var(--muted);
    font: inherit;
    border-radius: 999px;
    cursor: pointer;
    transform: scale(1);
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease,
                transform 0.18s var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

.tv-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tv-nav-svg {
    width: clamp(18px, 2.5vmin, 34px);
    height: clamp(18px, 2.5vmin, 34px);
    display: block;
}

.tv-nav-item:hover {
    color: var(--text);
    background: #fff;
    transform: translateY(-0.2vmin) scale(1);
}

/* Ikon bagian yang sedang tampil sedikit lebih besar, sehingga menu menegaskan
   perpindahan yang baru saja terjadi di panggung. Transform ditulis utuh pada
   tiap keadaan agar kombinasi hover dan aktif tidak saling menimpa. */
.tv-nav-item.is-active {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0.8vmin 2vmin rgba(57, 136, 255, 0.32);
    transform: scale(1.08);
}

.tv-nav-item.is-active:hover {
    transform: translateY(-0.2vmin) scale(1.08);
}

.tv-nav-item--environment.is-active {
    background: linear-gradient(135deg, #1fb9a8, var(--rp-env));
    box-shadow: 0 0.8vmin 2vmin rgba(22, 163, 148, 0.32);
}

.tv-nav-item--process_me.is-active {
    background: linear-gradient(135deg, #6aa6ff, var(--rp-pme));
    box-shadow: 0 0.8vmin 2vmin rgba(57, 136, 255, 0.32);
}

.tv-nav-item--mechanical.is-active {
    background: linear-gradient(135deg, #fd9843, var(--rp-mec));
    box-shadow: 0 0.8vmin 2vmin rgba(232, 89, 12, 0.32);
}

.tv-nav-item--admin_finance.is-active {
    background: linear-gradient(135deg, #e64980, var(--rp-adf));
    box-shadow: 0 0.8vmin 2vmin rgba(194, 37, 92, 0.32);
}

.tv-nav-item--ga_adm.is-active {
    background: linear-gradient(135deg, #8b7cf0, var(--rp-gaa));
    box-shadow: 0 0.8vmin 2vmin rgba(108, 92, 231, 0.32);
}

.tv-nav-item:focus-visible {
    outline: 3px solid rgba(57, 136, 255, 0.5);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------ tooltip menu */

/* Keterangan bagian muncul saat kursor diarahkan ke ikon, dan juga saat tombol
   menerima fokus keyboard/remote sehingga menu tetap terbaca tanpa mouse. */
.tv-nav-tip {
    position: absolute;
    top: calc(100% + 1vmin);
    left: 50%;
    transform: translate(-50%, -0.4vmin);
    padding: 0.7vmin 1.3vmin;
    border-radius: 0.9vmin;
    background: rgba(17, 30, 48, 0.94);
    color: #fff;
    font-weight: 600;
    font-size: clamp(11px, 1.45vmin, 20px);
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    z-index: 30;
    box-shadow: 0 1vmin 2.4vmin rgba(23, 38, 60, 0.28);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}

/* Ekor kecil yang mengarah ke ikon. */
.tv-nav-tip::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 0.7vmin solid transparent;
    border-bottom-color: rgba(17, 30, 48, 0.94);
}

.tv-nav-item:hover .tv-nav-tip,
.tv-nav-item:focus-visible .tv-nav-tip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

/* Tooltip pertama dan terakhir dijaga agar tidak keluar dari tepi layar. */
.tv-nav-item:first-child .tv-nav-tip {
    left: 0;
    transform: translate(0, -0.4vmin);
}

.tv-nav-item:first-child:hover .tv-nav-tip,
.tv-nav-item:first-child:focus-visible .tv-nav-tip {
    transform: translate(0, 0);
}

.tv-nav-item:first-child .tv-nav-tip::before {
    left: clamp(17px, 2.3vmin, 32px);
}

.tv-nav-item:last-child .tv-nav-tip {
    left: auto;
    right: 0;
    transform: translate(0, -0.4vmin);
}

.tv-nav-item:last-child:hover .tv-nav-tip,
.tv-nav-item:last-child:focus-visible .tv-nav-tip {
    transform: translate(0, 0);
}

.tv-nav-item:last-child .tv-nav-tip::before {
    left: auto;
    right: clamp(17px, 2.3vmin, 32px);
    transform: translateX(50%);
}

/* Layar yang tidak bisa hover (TV/kiosk tanpa mouse) tidak perlu tooltip. */
@media (hover: none) {
    .tv-nav-tip {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tv-nav-item,
    .tv-nav-tip {
        transition: none;
    }

    /* Angkatan hover dilepas, tetapi pembesaran ikon aktif dipertahankan —
       itu penanda keadaan, bukan gerak. */
    .tv-nav-item:hover {
        transform: scale(1);
    }

    .tv-nav-item.is-active,
    .tv-nav-item.is-active:hover {
        transform: scale(1.08);
    }

    /* Isi dashboard tetap pudar masuk, tanpa geseran ke atas. */
    .rp-dashboard > * {
        animation-name: rp-fade;
        animation-delay: 0ms;
    }
}

@keyframes rp-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.tv-stage--report {
    display: block;
}

/* ------------------------------------------------------------------ kerangka dashboard */

.rp-dashboard {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 1.4vmin;
}

/* Isi dashboard naik lembut dan bertahap saat report dirender: setelah pindah
   menu, saat carousel berganti report, dan saat admin menerbitkan perubahan.
   Bertingkat 55ms supaya mata mengikuti urutan baca, bukan menerima semuanya
   sekaligus. Dipakai animation, bukan transition, karena elemennya baru dibuat
   dan tidak punya keadaan awal untuk ditransisikan. */
@keyframes rp-rise {
    from {
        opacity: 0;
        transform: translateY(1.6vmin);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.rp-dashboard > * {
    animation: rp-rise var(--view-enter, 320ms)
               var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)) both;
}

.rp-dashboard > *:nth-child(2) { animation-delay: 55ms; }
.rp-dashboard > *:nth-child(3) { animation-delay: 110ms; }
.rp-dashboard > *:nth-child(4) { animation-delay: 165ms; }

/* ------------------------------------------------------------------ pop-up rincian */

/* Item Progress yang punya Uraian Pekerjaan atau Tindak Lanjut dapat dibuka.
   Item tanpa keduanya sengaja tidak mendapat kelas ini, sehingga tidak
   terlihat seperti bisa diklik. */
.rp-progress-item--openable {
    cursor: pointer;
    border-radius: 1.1vmin;
    transition: background 0.16s ease;
}

.rp-progress-item--openable:hover,
.rp-progress-item--openable:focus-visible {
    background: var(--rp-accent-soft, rgba(57, 136, 255, 0.12));
    outline: none;
}

.rp-open-hint {
    flex: none;
    /* Didorong ke ujung kanan judul sejak status pindah ke baris keterangan. */
    margin-left: auto;
    padding: 0.2vmin 0.8vmin;
    border-radius: 999px;
    border: 1px solid var(--rp-accent, #3988ff);
    color: var(--rp-accent, #3988ff);
    font-size: clamp(9px, 1.1vmin, 15px);
    font-weight: 700;
    opacity: 0.75;
}

@keyframes rp-popup-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes rp-popup-card-in {
    from { opacity: 0; transform: translateY(2vmin) scale(0.97); }
    to   { opacity: 1; transform: none; }
}

.rp-popup {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: 6vmin;
    background: rgba(12, 22, 38, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: rp-popup-in 0.2s var(--ease-out, ease) both;
}

.rp-popup.is-closing {
    animation: rp-popup-in 0.18s var(--ease-out, ease) reverse both;
}

.rp-popup-card {
    width: min(86vw, 108vmin);
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    gap: 1.6vmin;
    padding: 3.4vmin 3.8vmin;
    border-radius: 2.2vmin;
    background: #fff;
    box-shadow: 0 4vmin 9vmin rgba(12, 22, 38, 0.35);
    animation: rp-popup-card-in 0.26s var(--ease-out, ease) both;
}

/* Hanya isi yang bergulir. min-height:0 wajib, tanpanya item flex tidak boleh
   menyusut di bawah tinggi isinya dan kartu akan melewati batas 82vh. */
.rp-popup-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: grid;
    gap: 1.6vmin;
    padding-right: 1vmin;
    margin-right: -1vmin;
    scrollbar-width: thin;
    scrollbar-color: rgba(23, 38, 60, 0.25) transparent;
}

.rp-popup-body::-webkit-scrollbar {
    width: 0.9vmin;
    min-width: 6px;
}

.rp-popup-body::-webkit-scrollbar-track {
    background: transparent;
}

.rp-popup-body::-webkit-scrollbar-thumb {
    background: rgba(23, 38, 60, 0.22);
    border-radius: 999px;
}

.rp-popup-head,
.rp-popup-close {
    flex: none;
}

.rp-popup.is-closing .rp-popup-card {
    animation: rp-popup-card-in 0.16s var(--ease-out, ease) reverse both;
}

.rp-popup-head {
    display: flex;
    align-items: baseline;
    gap: 1.2vmin;
    flex-wrap: wrap;
}

.rp-popup-title {
    margin: 0;
    flex: 1;
    min-width: 0;
    font-size: clamp(17px, 3vmin, 42px);
    line-height: 1.25;
}

.rp-popup-status {
    flex: none;
    padding: 0.4vmin 1.2vmin;
    border-radius: 999px;
    background: var(--rp-accent-soft, rgba(57, 136, 255, 0.14));
    color: var(--rp-accent, #2274e8);
    font-size: clamp(11px, 1.5vmin, 20px);
    font-weight: 700;
}

.rp-popup-progress {
    color: var(--muted);
    font-size: clamp(12px, 1.7vmin, 24px);
    font-weight: 600;
}

.rp-popup-block {
    display: grid;
    gap: 0.6vmin;
    padding: 1.8vmin 2vmin;
    border-radius: 1.4vmin;
    background: rgba(23, 38, 60, 0.04);
    border-left: 0.5vmin solid var(--rp-accent, #3988ff);
}

/* Tindak Lanjut dibedakan warnanya supaya tidak tertukar dengan uraian. */
.rp-popup-block--follow {
    border-left-color: var(--warning, #d9a828);
    background: rgba(217, 168, 40, 0.08);
}

.rp-popup-label {
    margin: 0;
    font-size: clamp(11px, 1.5vmin, 20px);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.rp-popup-text {
    margin: 0;
    font-size: clamp(13px, 2vmin, 28px);
    line-height: 1.55;
    white-space: pre-wrap;
}

/* Poin yang ditulis sebagai "- " atau "1. " dirender menjadi daftar sungguhan,
   sehingga terbaca rapi dari jarak jauh. */
.rp-popup-list {
    margin: 0;
    padding-left: 3vmin;
    display: grid;
    gap: 0.5vmin;
}

.rp-popup-li {
    font-size: clamp(13px, 2vmin, 28px);
    line-height: 1.5;
}

.rp-popup-li::marker {
    color: var(--rp-accent, #3988ff);
    font-weight: 700;
}

.rp-popup-block--follow .rp-popup-li::marker {
    color: var(--warning, #d9a828);
}

/* Paragraf dan daftar yang berurutan tetap punya jarak baca. */
.rp-popup-text + .rp-popup-list,
.rp-popup-list + .rp-popup-text {
    margin-top: 0.8vmin;
}

.rp-popup-close {
    justify-self: end;
    appearance: none;
    border: 0;
    padding: 1vmin 2.6vmin;
    border-radius: 999px;
    background: var(--primary, #3988ff);
    color: #fff;
    font: inherit;
    font-size: clamp(12px, 1.7vmin, 24px);
    font-weight: 700;
    cursor: pointer;
    transition: background 0.16s ease;
}

.rp-popup-close:hover {
    background: var(--primary-dark, #2274e8);
}

@media (prefers-reduced-motion: reduce) {
    .rp-popup,
    .rp-popup-card,
    .rp-popup.is-closing,
    .rp-popup.is-closing .rp-popup-card {
        animation: none;
    }
}

.rp-dashboard--environment   { --rp-accent: var(--rp-env); --rp-accent-soft: var(--rp-env-soft); }
.rp-dashboard--process_me    { --rp-accent: var(--rp-pme); --rp-accent-soft: var(--rp-pme-soft); }
.rp-dashboard--mechanical    { --rp-accent: var(--rp-mec); --rp-accent-soft: var(--rp-mec-soft); }
.rp-dashboard--admin_finance { --rp-accent: var(--rp-adf); --rp-accent-soft: var(--rp-adf-soft); }
.rp-dashboard--ga_adm        { --rp-accent: var(--rp-gaa); --rp-accent-soft: var(--rp-gaa-soft); }

.rp-card,
.rp-head,
.rp-summary-card {
    background: var(--surface);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: var(--radius);
    box-shadow: 0 1.4vmin 3.4vmin rgba(23, 38, 60, 0.08);
}

/* ------------------------------------------------------------------ header dashboard */

.rp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2vmin;
    padding: 1.6vmin 2.4vmin;
    border-left: 0.6vmin solid var(--rp-accent);
}

.rp-head-main {
    display: flex;
    align-items: center;
    gap: 1.6vmin;
    min-width: 0;
}

.rp-chip {
    display: grid;
    place-items: center;
    min-width: 6.4vmin;
    height: 6.4vmin;
    padding: 0 1vmin;
    border-radius: 1.6vmin;
    background: var(--rp-accent-soft);
    color: var(--rp-accent);
    font-weight: 800;
    font-size: clamp(12px, 1.9vmin, 26px);
    letter-spacing: 0.04em;
}

.rp-head-titles {
    min-width: 0;
}

.rp-division {
    margin: 0;
    font-size: clamp(18px, 3vmin, 54px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.rp-period {
    margin: 0.3vmin 0 0;
    font-size: clamp(12px, 1.8vmin, 28px);
    font-weight: 700;
    color: var(--rp-accent);
}

.rp-range {
    margin: 0.1vmin 0 0;
    font-size: clamp(11px, 1.5vmin, 22px);
    color: var(--muted);
    font-weight: 600;
}

.rp-head-meta {
    display: grid;
    justify-items: end;
    gap: 0.25vmin;
    text-align: right;
    font-size: clamp(10px, 1.35vmin, 19px);
    color: var(--muted);
    font-weight: 600;
    flex: none;
}

.rp-head-meta .rp-updated {
    color: var(--text);
    font-weight: 700;
}

.rp-status-flag {
    margin-top: 0.4vmin;
    padding: 0.3vmin 1vmin;
    border-radius: 999px;
    background: rgba(217, 168, 40, 0.18);
    color: #8d6a0f;
    font-weight: 800;
}

/* ------------------------------------------------------------------ summary cards */

.rp-summary {
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr 1fr;
    gap: 1.4vmin;
}

.rp-summary-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.3vmin;
    padding: 1.4vmin 2vmin;
    min-width: 0;
}

.rp-summary-card--progress {
    flex-direction: row;
    align-items: center;
    gap: 1.8vmin;
}

.rp-summary-text {
    display: grid;
    gap: 0.3vmin;
    min-width: 0;
}

.rp-summary-label {
    font-size: clamp(10px, 1.4vmin, 20px);
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.rp-summary-value {
    font-size: clamp(20px, 3.4vmin, 58px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.05;
}

.rp-summary-extra {
    font-size: clamp(10px, 1.4vmin, 20px);
    color: var(--muted);
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ------------------------------------------------------------------ progress ring */

.rp-ring {
    --value: 0;
    position: relative;
    width: 9.5vmin;
    height: 9.5vmin;
    min-width: 58px;
    min-height: 58px;
    flex: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: conic-gradient(var(--rp-ring-color, var(--primary)) calc(var(--value) * 1%), rgba(57, 136, 255, 0.14) 0);
}

.rp-ring::after {
    content: "";
    position: absolute;
    inset: 1.1vmin;
    border-radius: 50%;
    background: #fbfdff;
}

.rp-ring-value {
    position: relative;
    z-index: 1;
    font-size: clamp(13px, 2.1vmin, 32px);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.rp-ring--attention { --rp-ring-color: #e05263; }
.rp-ring--warn      { --rp-ring-color: #d9a828; }
.rp-ring--good      { --rp-ring-color: #3988ff; }
.rp-ring--complete  { --rp-ring-color: #31b780; }

/* ------------------------------------------------------------------ area detail */

.rp-detail {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: 1.4vmin;
    min-height: 0;
}

/* To Do memuat 4 baris per halaman dan Informasi 3, jadi porsinya tidak sama. */
.rp-side {
    display: grid;
    grid-template-rows: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 1.4vmin;
    min-height: 0;
}

.rp-card {
    display: flex;
    flex-direction: column;
    padding: 1.6vmin 2vmin;
    min-height: 0;
    overflow: hidden;
}

.rp-card-title {
    margin: 0 0 1.2vmin;
    font-size: clamp(13px, 1.9vmin, 28px);
    font-weight: 800;
    letter-spacing: -0.01em;
    padding-bottom: 0.8vmin;
    border-bottom: 1px solid var(--line);
}

.rp-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.1vmin;
    align-content: start;
    min-height: 0;
    overflow: hidden;
}

.rp-empty {
    margin: auto;
    text-align: center;
    color: var(--muted);
    font-size: clamp(12px, 1.7vmin, 24px);
    font-weight: 600;
}

.rp-item-title {
    font-size: clamp(12px, 1.75vmin, 26px);
    font-weight: 700;
    line-height: 1.25;
    min-width: 0;
}

.rp-item-desc {
    margin: 0;
    font-size: clamp(10px, 1.4vmin, 20px);
    color: var(--muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rp-item-tags {
    display: flex;
    gap: 0.6vmin;
    flex-wrap: wrap;
}

.rp-tag {
    padding: 0.25vmin 0.9vmin;
    border-radius: 999px;
    background: rgba(113, 130, 153, 0.14);
    color: var(--muted);
    font-size: clamp(9px, 1.25vmin, 17px);
    font-weight: 700;
    white-space: nowrap;
}

.rp-tag--priority-urgent { background: rgba(224, 82, 99, 0.16); color: #b23c4c; }
.rp-tag--priority-high   { background: rgba(217, 168, 40, 0.2); color: #8d6a0f; }
.rp-tag--overdue         { background: rgba(224, 82, 99, 0.18); color: #b23c4c; }

/* ------------------------------------------------------------------ progress item */

.rp-progress-item {
    display: grid;
    gap: 0.5vmin;
    padding-bottom: 1vmin;
    border-bottom: 1px dashed var(--line);
}

.rp-progress-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.rp-progress-head,
.rp-todo-head,
.rp-info-head {
    display: flex;
    align-items: center;
    gap: 1vmin;
    justify-content: space-between;
}

.rp-progress-meter {
    display: flex;
    align-items: center;
    gap: 1vmin;
}

.rp-bar {
    flex: 1;
    height: 1.1vmin;
    min-height: 7px;
    border-radius: 999px;
    background: rgba(57, 136, 255, 0.14);
    overflow: hidden;
}

.rp-bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--primary);
    transition: width 0.4s ease;
}

.rp-bar-fill--attention { background: #e05263; }
.rp-bar-fill--warn      { background: #d9a828; }
.rp-bar-fill--good      { background: #3988ff; }
.rp-bar-fill--complete  { background: #31b780; }

.rp-progress-value {
    font-size: clamp(11px, 1.6vmin, 24px);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    min-width: 5ch;
    text-align: right;
}

/* Status, PIC, dan target berderet rapat di bawah bar progress. Dibungkus
   supaya baris tetap utuh saat nama PIC panjang. */
.rp-item-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6vmin;
    min-width: 0;
}

/* ------------------------------------------------------------------ status badge */

.rp-status {
    padding: 0.3vmin 1vmin;
    border-radius: 999px;
    font-size: clamp(9px, 1.25vmin, 17px);
    font-weight: 800;
    white-space: nowrap;
    flex: none;
    background: rgba(113, 130, 153, 0.16);
    color: #566577;
}

.rp-status--on_track,
.rp-status--completed,
.rp-status--done      { background: rgba(49, 183, 128, 0.16); color: #1f7a54; }
.rp-status--in_progress { background: rgba(57, 136, 255, 0.16); color: #2274e8; }
.rp-status--need_attention,
.rp-status--delayed   { background: rgba(217, 168, 40, 0.2); color: #8d6a0f; }
.rp-status--blocked   { background: rgba(224, 82, 99, 0.18); color: #b23c4c; }

/* ------------------------------------------------------------------ to do & informasi */

.rp-todo-item {
    display: grid;
    gap: 0.4vmin;
    padding: 0.8vmin 1vmin;
    border-radius: 1.2vmin;
    background: rgba(255, 255, 255, 0.55);
    border-left: 0.45vmin solid rgba(113, 130, 153, 0.35);
}

.rp-todo-item--done    { border-left-color: #31b780; }
.rp-todo-item--blocked { border-left-color: #e05263; }
.rp-todo-item.is-overdue { background: rgba(224, 82, 99, 0.07); }

.rp-info-item {
    display: grid;
    gap: 0.4vmin;
    padding: 0.8vmin 1vmin;
    border-radius: 1.2vmin;
    background: rgba(255, 255, 255, 0.55);
    border-left: 0.45vmin solid var(--rp-accent);
}

.rp-info-item--risk    { border-left-color: #d9a828; }
.rp-info-item--blocker { border-left-color: #e05263; }
.rp-info-item--achievement { border-left-color: #31b780; }
.rp-info-item--decision    { border-left-color: #6c5ce7; }
.rp-info-item.is-critical { background: rgba(224, 82, 99, 0.08); }

.rp-info-head {
    justify-content: flex-start;
    gap: 0.8vmin;
}

.rp-info-type {
    padding: 0.25vmin 0.9vmin;
    border-radius: 999px;
    font-size: clamp(9px, 1.2vmin, 16px);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex: none;
    background: rgba(57, 136, 255, 0.14);
    color: #2274e8;
}

.rp-info-type--achievement { background: rgba(49, 183, 128, 0.16); color: #1f7a54; }
.rp-info-type--risk        { background: rgba(217, 168, 40, 0.2); color: #8d6a0f; }
.rp-info-type--blocker     { background: rgba(224, 82, 99, 0.18); color: #b23c4c; }
.rp-info-type--decision    { background: rgba(108, 92, 231, 0.16); color: #5245c4; }

/* ------------------------------------------------------------------ empty state */

.rp-unavailable {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 2.4vmin;
    padding: 6vmin;
    text-align: center;
    border-radius: var(--radius);
    background: var(--surface);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.85);
}

.rp-unavailable p {
    margin: 0;
    max-width: 30ch;
    font-size: clamp(16px, 2.4vmin, 36px);
    font-weight: 600;
    color: var(--muted);
    line-height: 1.5;
}

.rp-unavailable-mark {
    width: 9vmin;
    height: 9vmin;
    min-width: 56px;
    min-height: 56px;
    border-radius: 2.6vmin;
    background: linear-gradient(135deg, rgba(57, 136, 255, 0.22), rgba(57, 136, 255, 0.08));
    border: 0.4vmin solid rgba(57, 136, 255, 0.3);
}

/* ------------------------------------------------------------------ preview admin */

.preview-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.6rem 1.2rem;
    background: linear-gradient(90deg, #d9a828, #e0a93f);
    color: #23180a;
    font-size: 0.88rem;
    font-weight: 700;
}

.preview-banner span {
    font-weight: 500;
}

/* Halaman preview tidak memuat admin.css, jadi ukuran ikon ditetapkan di sini. */
.preview-banner .icon {
    width: 20px;
    height: 20px;
    flex: none;
}

.preview-banner a {
    color: #23180a;
    font-weight: 700;
}

.preview-pager {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.preview-pager button {
    appearance: none;
    border: 1px solid rgba(35, 24, 10, 0.35);
    background: rgba(255, 255, 255, 0.5);
    color: #23180a;
    font: inherit;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    cursor: pointer;
}

.preview-pager button:disabled {
    opacity: 0.45;
    cursor: default;
}

.preview-pager-state {
    font-weight: 700;
    white-space: nowrap;
}

.tv-shell--preview {
    padding-top: 4.2rem;
    grid-template-rows: minmax(0, 1fr);
}

/* ------------------------------------------------------------------ layar lebih kecil */

@media (max-width: 1400px), (max-height: 800px) {
    .rp-summary {
        grid-template-columns: 1.6fr 1fr 1fr 1fr;
    }

    .rp-head {
        padding: 1.2vmin 1.8vmin;
    }
}

@media (max-width: 900px), (max-height: 520px) {
    .tv-nav {
        justify-content: flex-start;
        overflow-x: auto;
    }

    .rp-summary {
        grid-template-columns: 1fr 1fr;
    }

    .rp-detail {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------------------------ indikator carousel */

.rp-position {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2vmin;
    padding: 0.9vmin 2.2vmin;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 1vmin 2.4vmin rgba(23, 38, 60, 0.07);
    min-height: 0;
}

.rp-position-report {
    display: flex;
    align-items: baseline;
    gap: 1.2vmin;
    min-width: 0;
}

.rp-position-code {
    flex: none;
    padding: 0.3vmin 1vmin;
    border-radius: 0.8vmin;
    background: var(--rp-accent-soft, rgba(57, 136, 255, 0.14));
    color: var(--rp-accent, #3988ff);
    font-size: clamp(0.7rem, 1.25vmin, 1.05rem);
    font-weight: 700;
    letter-spacing: 0.04em;
}

.rp-position-title {
    font-size: clamp(0.78rem, 1.45vmin, 1.2rem);
    font-weight: 600;
    color: var(--ink, #17263c);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rp-position-counters {
    display: flex;
    align-items: center;
    gap: 1.4vmin;
    flex: none;
}

.rp-counter {
    font-size: clamp(0.72rem, 1.3vmin, 1.1rem);
    font-weight: 700;
    color: var(--muted, #6d7f97);
    letter-spacing: 0.02em;
}

.rp-dots {
    display: flex;
    align-items: center;
    gap: 0.7vmin;
}

.rp-dot {
    width: 1vmin;
    height: 1vmin;
    min-width: 6px;
    min-height: 6px;
    border-radius: 50%;
    background: rgba(109, 127, 151, 0.32);
    transition: background 0.25s ease, transform 0.25s ease;
}

.rp-dot.is-active {
    background: var(--rp-accent, #3988ff);
    transform: scale(1.35);
}

/* ------------------------------------------------------------------ kepadatan kolom kanan

   Kolom kanan harus memuat 4 To Do dan 3 Information dalam tinggi yang sama
   dengan 4 Progress di kolom kiri. Barisnya karena itu dipadatkan agar satu
   halaman penuh selalu tampil utuh — tidak ada item yang terpotong diam-diam
   oleh overflow kartu (PRD §13.3, §FR-REPORT-08). */

.rp-side .rp-card {
    padding: 1vmin 1.4vmin;
}

.rp-side .rp-card-title {
    margin-bottom: 0.6vmin;
    padding-bottom: 0.45vmin;
    font-size: clamp(12px, 1.65vmin, 24px);
}

.rp-side .rp-list {
    gap: 0.7vmin;
}

.rp-todo-item,
.rp-info-item {
    padding: 0.45vmin 0.9vmin;
    gap: 0.2vmin;
    border-radius: 1vmin;
}

.rp-todo-item .rp-item-title,
.rp-info-item .rp-item-title {
    font-size: clamp(11px, 1.55vmin, 22px);
}

.rp-todo-item .rp-tag {
    padding: 0.15vmin 0.75vmin;
    font-size: clamp(9px, 1.1vmin, 15px);
}

.rp-info-type {
    padding: 0.15vmin 0.75vmin;
    font-size: clamp(9px, 1.05vmin, 15px);
}

/* Deskripsi informasi dipotong terkendali menjadi satu baris. */
.rp-info-item .rp-item-desc {
    -webkit-line-clamp: 1;
    font-size: clamp(10px, 1.3vmin, 18px);
}

/* ------------------------------------------------------------------ layar 16:9 pendek

   Pada 1366 × 768 header dan summary ikut dipadatkan agar area detail
   memperoleh tinggi yang cukup. */

@media (max-height: 860px) {
    .rp-dashboard {
        gap: 1vmin;
    }

    .rp-head {
        padding: 1vmin 1.8vmin;
    }

    .rp-summary-card {
        padding: 0.9vmin 1.4vmin;
    }

    .rp-card {
        padding: 1vmin 1.4vmin;
    }

    .rp-card-title {
        margin-bottom: 0.7vmin;
        padding-bottom: 0.5vmin;
        font-size: clamp(12px, 1.7vmin, 22px);
    }

    .rp-list {
        gap: 0.65vmin;
    }

    .rp-progress-item {
        padding-bottom: 0.7vmin;
    }

    .rp-position {
        padding: 0.5vmin 1.6vmin;
    }
}

/* ------------------------------------------------------------------ tag client di TV

   Tag Internal memakai warna netral; tag Client memakai warna master client
   yang sudah divalidasi. Teks tag selalu ditulis, jadi warna bukan satu-satunya
   pembeda (PRD §FR-REPORT-20). */

.rp-division-line {
    display: flex;
    align-items: center;
    gap: 1.2vmin;
    flex-wrap: wrap;
    min-width: 0;
}

.rp-tag-client {
    display: inline-flex;
    align-items: center;
    padding: 0.4vmin 1.2vmin;
    border-radius: 999px;
    background: var(--rp-accent-soft);
    color: var(--rp-accent);
    font-size: clamp(10px, 1.45vmin, 20px);
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
    max-width: 34vmin;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rp-tag-client--internal {
    background: rgba(113, 130, 153, 0.16);
    color: #566577;
}

.rp-tag-client--sm {
    padding: 0.25vmin 0.9vmin;
    font-size: clamp(9px, 1.2vmin, 16px);
    max-width: 24vmin;
}

/* ==========================================================================
   V2.8 — Lampiran item pada layar TV
   ========================================================================== */

/* ------------------------------------------- daftar lampiran di pop-up rincian */

.rp-popup-block--files {
    border-left-color: #0ea5e9;
}

.rp-files {
    display: grid;
    gap: 1vmin;
    margin: 1vmin 0 0;
    padding: 0;
    list-style: none;
}

.rp-file-btn {
    display: flex;
    align-items: center;
    gap: 1.4vmin;
    width: 100%;
    padding: 1.3vmin 1.6vmin;
    border: 0.22vmin solid rgba(23, 38, 60, 0.12);
    border-radius: 1.2vmin;
    background: rgba(248, 250, 253, 0.9);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.18s var(--ease-out, ease),
                background 0.18s var(--ease-out, ease),
                transform 0.18s var(--ease-out, ease);
}

.rp-file-btn:hover,
.rp-file-btn:focus-visible {
    border-color: #0ea5e9;
    background: #fff;
    transform: translateY(-0.2vmin);
    outline: none;
}

.rp-file-kind {
    flex: 0 0 auto;
    width: 1vmin;
    align-self: stretch;
    min-height: 4vmin;
    border-radius: 999px;
    background: #94a3b8;
}

.rp-file-kind--image  { background: #10b981; }
.rp-file-kind--pdf    { background: #ef4444; }
.rp-file-kind--office { background: #2563eb; }

.rp-file-meta {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    gap: 0.3vmin;
}

.rp-file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 2.1vmin;
    font-weight: 700;
    color: #172d4a;
}

.rp-file-size {
    font-size: 1.6vmin;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}

.rp-file-open {
    flex: 0 0 auto;
    padding: 0.6vmin 1.4vmin;
    border-radius: 999px;
    background: #0ea5e9;
    color: #fff;
    font-size: 1.6vmin;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ---------------------------------------------- pop-up lanjutan satu lampiran */

.rp-viewer {
    position: fixed;
    inset: 0;
    /* Di atas pop-up rincian (z-index 60). */
    z-index: 70;
    display: grid;
    place-items: center;
    padding: 4vmin;
    background: rgba(8, 15, 28, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: rp-popup-in 0.2s var(--ease-out, ease) both;
}

.rp-viewer.is-closing {
    animation: rp-popup-in 0.18s var(--ease-out, ease) reverse both;
}

.rp-viewer-card {
    width: min(92vw, 150vmin);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    gap: 1.6vmin;
    padding: 2.6vmin 3vmin;
    border-radius: 2vmin;
    background: #fff;
    box-shadow: 0 4vmin 9vmin rgba(8, 15, 28, 0.45);
    animation: rp-popup-card-in 0.26s var(--ease-out, ease) both;
}

.rp-viewer-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.4vmin;
}

.rp-viewer-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 2.4vmin;
    color: #172d4a;
}

.rp-viewer-size {
    flex: 0 0 auto;
    font-size: 1.7vmin;
    color: #64748b;
}

/* min-height:0 wajib agar panggung dapat menyusut di dalam kartu flex. */
.rp-viewer-stage {
    flex: 1;
    min-height: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 1.4vmin;
    background: #f1f5f9;
}

.rp-viewer-image {
    max-width: 100%;
    max-height: 72vh;
    object-fit: contain;
    display: block;
}

.rp-viewer-frame {
    width: 100%;
    height: 72vh;
    border: 0;
    display: block;
    background: #fff;
}

.rp-viewer-fallback {
    display: grid;
    justify-items: center;
    gap: 2vmin;
    padding: 6vmin 4vmin;
    text-align: center;
}

/* Berkas Office tidak dapat dirender; yang tampil hanya penanda dan catatan. */
.rp-viewer-icon {
    width: 12vmin;
    height: 12vmin;
    border-radius: 2vmin;
    background: #2563eb;
    position: relative;
}

.rp-viewer-icon::after {
    content: '';
    position: absolute;
    inset: 32% 30% 30% 30%;
    border-radius: 0.6vmin;
    background: #fff;
    clip-path: polygon(50% 100%, 0 45%, 28% 45%, 28% 0, 72% 0, 72% 45%, 100% 45%);
}

.rp-viewer-note {
    margin: 0;
    max-width: 52vmin;
    font-size: 2vmin;
    line-height: 1.5;
    color: #475569;
}

.rp-viewer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1.2vmin;
}

.rp-viewer-download,
.rp-viewer-close {
    padding: 1.2vmin 2.6vmin;
    border-radius: 999px;
    border: 0;
    font: inherit;
    font-size: 1.9vmin;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
}

.rp-viewer-download {
    background: #0ea5e9;
    color: #fff;
}

.rp-viewer-close {
    background: rgba(23, 38, 60, 0.08);
    color: #172d4a;
}

/* -------------------------------------------- item Informasi yang dapat dibuka */

.rp-info-item--openable {
    cursor: pointer;
    transition: transform 0.18s var(--ease-out, ease),
                box-shadow 0.18s var(--ease-out, ease);
}

.rp-info-item--openable:hover,
.rp-info-item--openable:focus-visible {
    transform: translateY(-0.3vmin);
    box-shadow: 0 1.4vmin 3vmin rgba(12, 22, 38, 0.14);
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    .rp-file-btn,
    .rp-info-item--openable {
        transition: none;
    }
    .rp-file-btn:hover,
    .rp-info-item--openable:hover {
        transform: none;
    }
}

/* --------------------------------- pratinjau lampiran pada kartu Informasi */

.rp-thumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8vmin;
    margin-top: 1vmin;
}

.rp-thumb {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 6vmin;
    border-radius: 0.9vmin;
    overflow: hidden;
}

.rp-thumb--image {
    width: 8vmin;
    object-fit: cover;
    border: 0.2vmin solid rgba(23, 38, 60, 0.12);
    background: rgba(23, 38, 60, 0.05);
}

/* Berkas yang tidak dapat dipratinjau tampil sebagai keping berlabel ekstensi. */
.rp-thumb--file {
    padding: 0 1.1vmin;
    font-size: 1.5vmin;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #fff;
    background: #94a3b8;
}

.rp-thumb--pdf    { background: #ef4444; }
.rp-thumb--office { background: #2563eb; }

.rp-thumb--more {
    padding: 0 1.1vmin;
    font-size: 1.5vmin;
    font-weight: 800;
    color: #475569;
    background: rgba(23, 38, 60, 0.08);
}