/* =====================================================================
   KRP Admin — responsive layer (dimuat setelah admin.css)
   Mengatur sidebar, topbar, KPI, grid dashboard, dan tabel di semua
   ukuran desktop / laptop / tablet.
   ===================================================================== */

/* ---------- dasar ---------- */
.adm-main{min-width:0}
.adm-view{width:100%}
.top-title{min-width:0}
.top-title h1,.top-title p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-clock{flex:none;white-space:nowrap}
.top-clock span,.top-clock b{white-space:nowrap}
.top-right{flex:none}
.adm-ov{display:none;position:fixed;inset:0;z-index:65;background:rgba(5,17,31,.52);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.adm-ov.on{display:block}
body.sb-open{overflow:hidden}

/* grafik & kartu tidak meluber */
.dcard{min-width:0}
.chart-wrap2,.chart-wrap,.cb-plot{min-width:0}
.cb-cols .chart-col{min-width:0}

/* ---------- desktop besar ---------- */
@media (min-width:1700px){
  .adm-view{max-width:1660px;margin:0 auto;padding:20px 28px 30px}
  .adm-side{--as-w:266px}
}

/* ---------- laptop 1367–1699 ---------- */
@media (min-width:1367px) and (max-width:1699px){
  .adm-side{--as-w:248px}
  .adm-view{padding:16px 20px 26px}
  .kpi4{gap:13px}
}

/* ---------- laptop kecil 1181–1366 ---------- */
@media (min-width:1181px) and (max-width:1366px){
  .adm-side{--as-w:232px}
  .as-brand{padding:16px 14px}
  .as-brand strong{font-size:13px;letter-spacing:.12em}
  .as-brand small{font-size:8px}
  .as-nav a{font-size:12px;padding:9px 10px}
  .adm-view{padding:14px 16px 24px}
  .kpi4{gap:11px}
  .kpi2{padding:12px 13px 11px;min-height:100px}
  .kpi2 .k2-val b{font-size:27px}
  .kpi2 .k2-ic{width:38px;height:38px;border-radius:10px}
  .kpi2 .k2-ic svg{width:20px;height:20px}
  .dash-r2{grid-template-columns:1.5fr 1.1fr}
  .dash-r4{grid-template-columns:1.5fr 1fr}
  .top-clock{font-size:10.5px;padding:0 10px}
}

/* ---------- tablet / laptop sempit: sidebar jadi drawer ---------- */
@media (max-width:1180px){
  .adm-shell{display:block}
  .adm-side{
    position:fixed;top:0;left:0;bottom:0;height:100dvh;width:278px;flex:none;
    transform:translateX(-103%);transition:transform .26s cubic-bezier(.4,0,.2,1);
    z-index:70;box-shadow:0 0 60px rgba(4,16,30,.45)
  }
  .adm-side.on{transform:none}
  .adm-side .as-guard{height:180px}
  .adm-side .as-close{display:grid;place-items:center;font-size:14px;line-height:1;flex:none}
  .top-burger{display:grid;place-items:center;flex:none}
  .adm-main{width:100%;min-height:100vh}
  .adm-view{padding:16px 18px 26px}
  .top-clock{padding:0 10px;font-size:10.8px}
  .top-clock span#topDay,.top-clock i{display:none}
  .dash-r2,.dash-r3{grid-template-columns:1fr 1fr}
  .dash-r2>.dcard:first-child,.dash-r3>.dcard:first-child{grid-column:1/-1}
  .dash-r4{grid-template-columns:1fr}
  .aa-art{display:none}
  .adm-auth{grid-template-columns:1fr}
}

/* ---------- tablet vertikal ---------- */
@media (max-width:960px){
  .top-title p{display:none}
  .top-clock{display:none}
  .adm-view{padding:14px 16px 24px}
  .kpi2 .k2-val b{font-size:26px}
  .pg-head{margin-bottom:12px}
  .pg-head h1{font-size:19px}
  .dc-head h3{font-size:12.5px}
  table.tbl{min-width:680px}
  table.acttbl{min-width:560px}
}

/* ---------- tablet / HP besar ---------- */
@media (max-width:760px){
  .adm-side{width:272px}
  .adm-view{padding:12px 12px 22px}
  .adm-top{height:58px;padding:0 12px;gap:8px}
  .adm-top .top-title h1{font-size:16px;padding-bottom:3px}
  .adm-top .top-title h1::after{width:38px;height:2px}
  .top-prof{padding-left:0;border-left:0}
  .top-prof img{width:32px;height:32px}
  .top-prof div{display:none}
  .top-logout{display:none}
  .dash{gap:11px}
  .kpi4{grid-template-columns:repeat(2,1fr);gap:8px}
  .kpi2{min-height:0;padding:11px 12px 10px;border-radius:12px}
  .kpi2 .k2-ic{width:32px;height:32px;border-radius:9px}
  .kpi2 .k2-ic svg{width:17px;height:17px}
  .kpi2 .k2-label{font-size:10.5px}
  .kpi2 .k2-val b{font-size:23px}
  .kpi2 .k2-badge{font-size:9px;padding:2px 6px}
  .kpi2 .k2-foot{font-size:9.5px;margin-top:6px}
  .kpi2 .k2-mark svg{width:78px;height:78px}
  .dash-r2,.dash-r3,.dash-r4{grid-template-columns:1fr;gap:11px}
  .dash-r2>.dcard:first-child,.dash-r3>.dcard:first-child{grid-column:auto}
  .dcard{padding:12px 13px;border-radius:12px}
  .chart-bars{height:170px;padding-left:26px}
  .cb-axis,.cb-plot{height:152px}
  .adm-foot{display:block;padding:12px;font-size:9px}
}

/* ---------- HP kecil ---------- */
@media (max-width:520px){
  .kpi4{grid-template-columns:1fr}
  .adm-top .top-icon#topRefresh{display:none}
  .top-title h1{font-size:15px!important}
  .adm-view{padding:10px 10px 20px}
  table.tbl{min-width:620px}
  .pg-actions .btn-sm{flex:1;justify-content:center}
}

/* ---------- layar pendek: sembunyikan foto sidebar ---------- */
@media (max-height:820px) and (min-width:1181px){
  .adm-side .as-guard{height:132px}
}
@media (max-height:700px) and (min-width:1181px){
  .adm-side .as-guard{display:none}
}

/* ---------- komposisi grid dashboard yang deterministik ---------- */
@media (min-width:1440px){
  .dash-r2{grid-template-columns:1.52fr 1.12fr .98fr}
  .dash-r3{grid-template-columns:1.52fr .8fr 1fr}
  .dash-r4{grid-template-columns:1.62fr 1fr}
  .dash-r2>.dcard,.dash-r3>.dcard{grid-column:auto}
}
@media (min-width:1100px) and (max-width:1439px){
  .dash-r2{grid-template-columns:1.5fr 1fr 1fr;gap:12px}
  .dash-r3{grid-template-columns:1.5fr .85fr 1fr;gap:12px}
  .dash-r2>.dcard,.dash-r3>.dcard{grid-column:auto!important}
  .dash-r4{grid-template-columns:1.55fr 1fr}
}
@media (min-width:760px) and (max-width:1099px){
  .dash-r2,.dash-r3{grid-template-columns:1fr 1fr}
  .dash-r2>.dcard,.dash-r3>.dcard{grid-column:auto}
  .dash-r2>.dcard:first-child,.dash-r3>.dcard:first-child{grid-column:1/-1}
  .dash-r4{grid-template-columns:1fr}
}
@media (max-width:759px){
  .dash-r2,.dash-r3,.dash-r4{grid-template-columns:1fr}
  .dash-r2>.dcard,.dash-r3>.dcard{grid-column:auto}
}

/* ---------- topbar: tombol menu di atas header navy ---------- */
.adm-top .top-burger{background:rgba(255,255,255,.13);color:#EAF2FB;border:1px solid rgba(255,255,255,.22);border-radius:10px}
.adm-top .top-burger:hover{background:rgba(255,255,255,.22)}
.adm-top .top-burger svg{stroke:#EAF2FB}

/* ---------- KPI halaman dalam (absensi, satpam, dll) ---------- */
.kpi{min-width:0}
.kpi .kt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (min-width:900px){
  .kpi-grid{grid-template-columns:repeat(4,1fr)!important;gap:12px}
  .kpi{padding:13px 15px}
  .kpi b{font-size:26px}
}
@media (min-width:760px) and (max-width:899px){
  .kpi-grid{grid-template-columns:repeat(2,1fr)!important}
}
@media (max-width:759px){
  .kpi-grid{grid-template-columns:repeat(2,1fr)!important;gap:8px}
  .kpi{padding:11px 12px}
  .kpi b{font-size:21px}
}
@media (max-width:460px){
  .kpi-grid{grid-template-columns:1fr!important}
}

/* ---------- tabel lebar: gulir horizontal yang jelas ---------- */
@media (max-width:1180px){
  .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .tbl-wrap table.tbl{min-width:860px}
  .tbl-wrap table.acttbl{min-width:620px}
}

/* tabel tanpa pembungkus: beri ruang gulir sendiri */
.dash-r4>.dcard{overflow-x:auto}
table.acttbl{width:100%;min-width:520px}
.month-grid{grid-template-columns:repeat(4,1fr)}
@media (max-width:600px){.month-grid{grid-template-columns:repeat(2,1fr)}}

/* KPI utama: tetap 4 kolom sampai 900px, baru 2 kolom */
@media (min-width:901px){.kpi4{grid-template-columns:repeat(4,1fr)!important}}
@media (min-width:561px) and (max-width:900px){.kpi4{grid-template-columns:repeat(2,1fr)!important}}
@media (max-width:560px){.kpi4{grid-template-columns:1fr!important}}