/* ==========================================================================
   Dashboard Data RTLH per Kelurahan
   Menggunakan CSS variable yang sama dengan main.css tema (navy/blue/cyan/lime)
   sehingga menyatu, bukan tempelan terpisah.
   ========================================================================== */

.dpkp-rtlh-page{background:#f7f9fc}

/* --- Ringkasan statistik --- */
.dpkp-rtlh-summary{
    display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
    margin-top:-46px;position:relative;z-index:3;margin-bottom:46px;
}
.dpkp-rtlh-stat{
    background:#fff;border-radius:20px;padding:24px 22px;
    box-shadow:0 18px 42px rgba(8,34,61,.10);border:1px solid var(--line);
}
.dpkp-rtlh-stat span{
    width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
    background:rgba(23,107,255,.10);color:var(--blue);margin-bottom:14px;
}
.dpkp-rtlh-stat span svg{width:22px;height:22px}
.dpkp-rtlh-stat strong{display:block;font-size:32px;line-height:1;color:var(--navy);letter-spacing:-.02em}
.dpkp-rtlh-stat p{margin:8px 0 0;color:var(--muted);font-size:13.5px;line-height:1.5}

/* --- Panel utama --- */
.dpkp-rtlh-panel{
    background:#fff;border-radius:var(--radius);border:1px solid var(--line);
    box-shadow:var(--shadow);padding:clamp(20px,4vw,36px);margin-bottom:70px;
}

.dpkp-rtlh-toolbar{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    flex-wrap:wrap;margin-bottom:26px;padding-bottom:22px;border-bottom:1px solid var(--line);
}
.dpkp-rtlh-tabs{display:flex;flex-wrap:wrap;gap:8px}
.dpkp-rtlh-tabs button{
    border:1px solid var(--line);background:var(--surface);color:var(--muted);
    font-weight:750;font-size:13.5px;padding:9px 16px;border-radius:100px;
    cursor:pointer;transition:.15s;
}
.dpkp-rtlh-tabs button:hover{border-color:var(--blue);color:var(--blue)}
.dpkp-rtlh-tabs button.is-active{background:var(--navy);border-color:var(--navy);color:#fff}

.dpkp-rtlh-search{
    display:flex;align-items:center;gap:8px;background:var(--surface);
    border:1px solid var(--line);border-radius:100px;padding:8px 16px;min-width:230px;
}
.dpkp-rtlh-search svg{width:17px;color:var(--muted);flex:0 0 auto}
.dpkp-rtlh-search input{
    border:0;background:transparent;outline:0;font:inherit;font-size:14px;
    color:var(--ink);width:100%;
}

.dpkp-rtlh-body{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:start}

.dpkp-rtlh-chart-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.dpkp-rtlh-chart-head h2{margin:0;font-size:19px;color:var(--navy);letter-spacing:-.01em}
.dpkp-rtlh-legend{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);font-weight:700}
.dpkp-rtlh-legend i{width:22px;height:9px;border-radius:5px;display:inline-block}

.dpkp-rtlh-chart{display:flex;flex-direction:column;gap:10px;max-height:560px;overflow-y:auto;padding-right:4px}
.dpkp-rtlh-bar-row{display:grid;grid-template-columns:150px 1fr 46px;align-items:center;gap:10px}
.dpkp-rtlh-bar-label{
    font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;
}
.dpkp-rtlh-bar-track{background:var(--surface);border-radius:8px;height:14px;overflow:hidden}
.dpkp-rtlh-bar-fill{
    height:100%;border-radius:8px;background:linear-gradient(90deg,var(--blue),var(--cyan));
    min-width:4px;transition:width .5s cubic-bezier(.2,.8,.2,1);
}
.dpkp-rtlh-bar-value{font-size:12.5px;font-weight:800;color:var(--navy);text-align:right}

.dpkp-rtlh-table-wrap{background:var(--surface);border-radius:18px;padding:14px;max-height:610px;overflow:auto}
.dpkp-rtlh-table{width:100%;border-collapse:collapse;font-size:12.5px}
.dpkp-rtlh-table thead th{
    position:sticky;top:0;background:var(--surface);text-align:left;color:var(--muted);
    font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:10.5px;
    padding:9px 8px;border-bottom:2px solid var(--line);
}
.dpkp-rtlh-table thead th:not(:first-child),
.dpkp-rtlh-table td:not(:first-child){text-align:right}
.dpkp-rtlh-table td{padding:9px 8px;border-bottom:1px solid var(--line);color:var(--ink)}
.dpkp-rtlh-table td:first-child{font-weight:700}
.dpkp-rtlh-table tbody tr:hover{background:#fff}
.dpkp-rtlh-table td.dpkp-rtlh-total{font-weight:900;color:var(--navy)}

.dpkp-rtlh-empty{padding:30px 10px;text-align:center;color:var(--muted);font-size:13.5px}

.dpkp-rtlh-source{margin:26px 0 0;font-size:12.5px;color:var(--muted);text-align:right}

@media(max-width:900px){
    .dpkp-rtlh-summary{grid-template-columns:repeat(2,1fr)}
    .dpkp-rtlh-body{grid-template-columns:1fr}
    .dpkp-rtlh-table-wrap{max-height:420px}
}
@media(max-width:640px){
    .dpkp-rtlh-summary{grid-template-columns:1fr 1fr;margin-top:-30px}
    .dpkp-rtlh-stat{padding:18px}
    .dpkp-rtlh-stat strong{font-size:26px}
    .dpkp-rtlh-toolbar{flex-direction:column;align-items:stretch}
    .dpkp-rtlh-search{min-width:0}
    .dpkp-rtlh-bar-row{grid-template-columns:96px 1fr 38px}
    .dpkp-rtlh-bar-label{font-size:11px}
}