/* ==========================================================================
   JURISTDIGI OFFICE — komponen bersama modul internal
   ========================================================================== */

/* ---------- Kartu ringkasan yang dapat diklik sebagai filter ---------- */
.office-tile {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    align-items: flex-start;
    width: 100%;
    padding: .85rem 1rem;
    border-radius: .65rem;
    border: 1px solid var(--claude-border-light);
    background: none;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

html[data-bs-theme="dark"] .office-tile { border-color: var(--claude-border-dark); }

.office-tile:hover { border-color: var(--claude-accent); }

.office-tile.is-active {
    border-color: var(--claude-accent);
    background-color: rgba(217, 119, 6, .1);
}

.office-tile__value { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }

.office-tile__label {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    opacity: .65;
}

/* Varian statistik non-interaktif untuk dashboard. */
.office-stat {
    padding: 1rem 1.15rem;
    border-radius: .7rem;
    border: 1px solid var(--claude-border-light);
    height: 100%;
}

html[data-bs-theme="dark"] .office-stat { border-color: var(--claude-border-dark); }

.office-stat__label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .6;
    margin: 0 0 .35rem;
}

.office-stat__value { font-size: 1.65rem; font-weight: 700; line-height: 1.15; margin: 0; }
.office-stat__hint { font-size: .75rem; opacity: .6; margin: .25rem 0 0; }

.office-stat--accent { border-left: 3px solid var(--claude-accent); }
.office-stat--danger { border-left: 3px solid #dc3545; }
.office-stat--success { border-left: 3px solid #16a34a; }
.office-stat--info { border-left: 3px solid #3b82f6; }

/* ---------- Papan tugas ---------- */
.task-board {
    display: grid;
    grid-template-columns: repeat(5, minmax(190px, 1fr));
    gap: .75rem;
    overflow-x: auto;
    padding-bottom: .5rem;
}

.task-column {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: .6rem;
    background-color: rgba(0, 0, 0, .025);
}

html[data-bs-theme="dark"] .task-column { background-color: rgba(255, 255, 255, .04); }

.task-column__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .6rem .7rem;
    border-bottom: 1px solid var(--claude-border-light);
}

html[data-bs-theme="dark"] .task-column__head { border-bottom-color: var(--claude-border-dark); }

.task-column__title {
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    opacity: .75;
}

.task-column__count {
    font-size: .7rem;
    font-weight: 700;
    padding: .05rem .4rem;
    border-radius: 999px;
    background-color: rgba(217, 119, 6, .15);
    color: var(--claude-accent);
}

.task-column__body {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .55rem;
    max-height: 520px;
    overflow-y: auto;
}

.task-card {
    padding: .6rem .65rem;
    border-radius: .5rem;
    border: 1px solid var(--claude-border-light);
    background-color: var(--bs-body-bg);
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

html[data-bs-theme="dark"] .task-card { border-color: var(--claude-border-dark); }

.task-card.is-late { border-left: 3px solid #dc3545; }

.task-card__title { font-size: .82rem; font-weight: 500; line-height: 1.35; }

.task-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.task-card__meta .badge { font-size: .65rem; }

.task-card__foot { display: flex; justify-content: space-between; gap: .5rem; }

.task-card__actions .form-select { font-size: .74rem; padding: .15rem 1.4rem .15rem .4rem; }

/* ---------- Bilah kemajuan sederhana untuk laporan kinerja ---------- */
.perf-bar {
    height: 6px;
    border-radius: 999px;
    background-color: rgba(0, 0, 0, .08);
    overflow: hidden;
}

html[data-bs-theme="dark"] .perf-bar { background-color: rgba(255, 255, 255, .12); }

.perf-bar__fill { height: 100%; border-radius: 999px; background-color: var(--claude-accent); }
.perf-bar__fill--success { background-color: #16a34a; }
.perf-bar__fill--danger { background-color: #dc3545; }

/* ==========================================================================
   DASHBOARD ANALITIK
   Warna deret berasal dari palet kategorikal yang sudah divalidasi:
   kontras terhadap permukaan, jarak antarwarna pada penglihatan normal,
   dan pada simulasi buta warna. Jangan menukar nilainya satu per satu.
   ========================================================================== */
.viz-root {
    --viz-surface:    #fbfaf7;
    --viz-ink:        #0b0b0b;
    --viz-ink-muted:  #898781;
    --viz-grid:       #e1e0d9;
    --viz-baseline:   #c3c2b7;
    --viz-series-1:   #2a78d6;  /* slot 1 — biru */
    --viz-series-2:   #eb6834;  /* slot 2 — jingga */
    --viz-series-3:   #1baf7a;  /* slot 3 — toska */
    --viz-series-4:   #eda100;  /* slot 4 — kuning */
    --viz-good:       #0ca30c;
    --viz-warning:    #fab219;
    --viz-critical:   #d03b3b;
    --viz-delta-up:   #006300;
}

html[data-bs-theme="dark"] .viz-root {
    --viz-surface:    #191919;
    --viz-ink:        #ffffff;
    --viz-ink-muted:  #898781;
    --viz-grid:       #2c2c2a;
    --viz-baseline:   #383835;
    --viz-series-1:   #3987e5;
    --viz-series-2:   #d95926;
    --viz-series-3:   #199e70;
    --viz-series-4:   #c98500;
    --viz-delta-up:   #0ca30c;
}

.viz-card {
    border: 1px solid var(--claude-border-light);
    border-radius: .7rem;
    padding: 1.1rem 1.2rem;
    height: 100%;
    background-color: var(--bs-body-bg);
}

html[data-bs-theme="dark"] .viz-card { border-color: var(--claude-border-dark); }

.viz-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .9rem;
}

.viz-card__title { font-size: .95rem; font-weight: 600; margin: 0; }
.viz-card__note  { font-size: .74rem; color: var(--viz-ink-muted); margin: .15rem 0 0; }

/* Wadah tinggi tetap: mencegah kanvas Chart.js tumbuh berulang tanpa henti. */
.viz-canvas { position: relative; width: 100%; height: 260px; }
.viz-canvas--tall { height: 300px; }

/* Penanda deret pada judul, dipakai sebagai pengganti legenda saat ringkas. */
.viz-key { display: flex; flex-wrap: wrap; gap: .75rem; }

.viz-key__item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .74rem;
    color: var(--viz-ink-muted);
}

.viz-key__dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }

/* ---------- Batang mendatar dengan label langsung ----------
   Sebaran kategori digambar sebagai HTML, bukan kanvas: nilainya selalu
   tertulis di sebelah batang sehingga warna tidak pernah menjadi
   satu-satunya pembawa makna, dan halaman tetap terbaca tanpa Chart.js. */
.viz-hbar { display: flex; flex-direction: column; gap: .7rem; }

.viz-hbar__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: .3rem; }

.viz-hbar__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    font-size: .8rem;
}

.viz-hbar__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.viz-hbar__value {
    flex: 0 0 auto;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.viz-hbar__track {
    height: 8px;
    border-radius: 999px;
    background-color: rgba(0, 0, 0, .06);
    overflow: hidden;
}

html[data-bs-theme="dark"] .viz-hbar__track { background-color: rgba(255, 255, 255, .09); }

.viz-hbar__fill {
    height: 100%;
    border-radius: 999px;
    background-color: var(--viz-series-1);
    transition: width .25s ease;
}

.viz-hbar__fill--alt { background-color: var(--viz-series-2); }

/* ---------- Petak indikator utama ---------- */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .75rem;
}

.kpi {
    padding: .85rem 1rem;
    border: 1px solid var(--claude-border-light);
    border-radius: .65rem;
    min-width: 0;
}

html[data-bs-theme="dark"] .kpi { border-color: var(--claude-border-dark); }

.kpi__label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--viz-ink-muted);
    margin: 0 0 .3rem;
}

.kpi__value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; margin: 0; }
.kpi__hint { font-size: .72rem; color: var(--viz-ink-muted); margin: .3rem 0 0; }

.kpi--attention { border-left: 3px solid var(--viz-warning); }
.kpi--critical  { border-left: 3px solid var(--viz-critical); }
.kpi--good      { border-left: 3px solid var(--viz-good); }
.kpi--neutral   { border-left: 3px solid var(--viz-series-1); }

/* ---------- Kendali rentang tanggal ---------- */
.range-picker { display: flex; flex-wrap: wrap; gap: .35rem; }

.range-picker__btn {
    border: 1px solid var(--claude-border-light);
    background: none;
    color: inherit;
    border-radius: 999px;
    padding: .25rem .75rem;
    font-size: .78rem;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

html[data-bs-theme="dark"] .range-picker__btn { border-color: var(--claude-border-dark); }

.range-picker__btn:hover { border-color: var(--claude-accent); }

.range-picker__btn.is-active {
    border-color: var(--claude-accent);
    background-color: rgba(217, 119, 6, .12);
    font-weight: 600;
}

/* Tabel kinerja: angka harus sejajar vertikal agar mudah dibandingkan. */
.perf-table { font-size: .84rem; }
.perf-table td, .perf-table th { vertical-align: middle; }
.perf-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 575.98px) {
    .viz-canvas { height: 220px; }
    .kpi__value { font-size: 1.35rem; }
}

/* ---------- Riwayat versi dokumen ---------- */
.version-item {
    display: flex;
    gap: .75rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--claude-border-light);
}

html[data-bs-theme="dark"] .version-item { border-bottom-color: var(--claude-border-dark); }

.version-item:last-child { border-bottom: 0; }

.version-item__badge {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .72rem;
    font-weight: 700;
    background-color: rgba(217, 119, 6, .15);
    color: var(--claude-accent);
}

.version-item__body { min-width: 0; flex: 1 1 auto; }
.version-item__summary { font-size: .84rem; line-height: 1.45; }
.version-item__meta { font-size: .72rem; opacity: .6; }

/* ---------- Kepatuhan ---------- */
.compliance-card {
    border: 1px solid var(--claude-border-light);
    border-radius: .65rem;
    padding: .9rem 1rem;
    height: 100%;
}

html[data-bs-theme="dark"] .compliance-card { border-color: var(--claude-border-dark); }

.compliance-card--critical { border-left: 4px solid #b91c1c; }
.compliance-card--high { border-left: 4px solid #dc3545; }
.compliance-card--medium { border-left: 4px solid #d97706; }
.compliance-card--low { border-left: 4px solid #3b82f6; }
.compliance-card--informational { border-left: 4px solid #6b7280; }

/* ---------- Responsif ---------- */
@media (max-width: 991.98px) {
    .task-board { grid-template-columns: repeat(5, minmax(170px, 1fr)); }
    .office-stat__value { font-size: 1.4rem; }
}

@media (max-width: 575.98px) {
    .office-tile { padding: .7rem .8rem; }
    .office-tile__value { font-size: 1.25rem; }
}