:root{
  --primary-color:#2c3e50;
  --secondary-color:#3498db;
  --success-color:#27ae60;
  --warning-color:#f39c12;
  --danger-color:#e74c3c;

  --light-color:#ecf0f1;
  --border-color:#bdc3c7;
  --shadow:0 4px 6px rgba(0,0,0,.10);

  --bg:#f5f7fa;
  --text:#333;
  --muted:#7f8c8d;
  --card:#fff;
  --radius:10px;
}

*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}

.container{
  max-width:1400px;
  margin:0 auto;
  padding:20px;
}

/* ===== Topbar (header) ===== */
.topbar{
  background:var(--card);
  padding:18px 20px;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  margin:20px auto 14px;
  max-width:1400px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.brand{display:flex;align-items:center;gap:12px}
.logo{
  width:44px;height:44px;border-radius:12px;
  display:grid;place-items:center;
  background:var(--secondary-color);
  color:#fff;font-weight:800;
}
.title{font-size:1.2rem;font-weight:800;color:var(--primary-color)}
.subtitle{font-size:.9rem;color:var(--muted)}
.right{display:flex;align-items:center;gap:10px}

/* ===== Tabs ===== */
.tabs{
  max-width:1400px;
  margin:0 auto 12px;
  padding:0 20px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.tab{
  border:none;
  background:var(--card);
  box-shadow:var(--shadow);
  border-radius:999px;
  padding:10px 16px;
  cursor:pointer;
  font-weight:700;
  color:var(--primary-color);
  transition:.2s ease;
}
.tab:hover{transform:translateY(-1px)}
.tab.active{
  background:var(--secondary-color);
  color:#fff;
}

/* ===== Cards ===== */
.card{
  background:var(--card);
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow);
  margin-bottom:20px;
}
.card.subtle{
  background:#f8f9fa;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:none;
}
.label{
  color:var(--primary-color);
  font-weight:800;
  letter-spacing:.2px;
}
.muted{color:var(--muted)}
.small{font-size:.9rem}

/* ===== Layout grids ===== */
.grid{display:grid;gap:15px}
.grid.cards{grid-template-columns:repeat(4,1fr)}
.grid.two{grid-template-columns:1fr 1fr}
.grid.form{grid-template-columns:repeat(2,1fr)}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.row.end{justify-content:flex-end}

@media (max-width:1200px){
  .grid.cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .grid.cards{grid-template-columns:repeat(2,1fr)}
  .grid.two{grid-template-columns:1fr}
  .grid.form{grid-template-columns:1fr}
  .tabs{padding:0 14px}
  .topbar{margin:14px auto 10px;border-radius:12px}
  .container{padding:14px}
}

/* ===== KPI ===== */
.kpi{
  font-size:2rem;
  font-weight:900;
  color:var(--primary-color);
  margin-top:6px;
}
#kpiTodaySub,#kpiPoints30Sub,#kpiRiskSub,#kpiQueueSub{margin-top:4px}

/* ===== Buttons ===== */
.btn{
  padding:10px 16px;
  border:none;
  border-radius:6px;
  cursor:pointer;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:.2s ease;
  background:var(--light-color);
  color:var(--primary-color);
}
.btn:hover{filter:brightness(.98);transform:translateY(-1px)}
.btn.primary{background:var(--success-color);color:#fff}
.btn.ghost{background:transparent;border:1px solid rgba(0,0,0,.10)}
.btn.danger{background:var(--danger-color);color:#fff}

/* ===== Badges ===== */
.badge{
  padding:6px 12px;
  border-radius:999px;
  font-weight:800;
  font-size:.85rem;
  background:var(--light-color);
  color:var(--primary-color);
  border:1px solid rgba(0,0,0,.06);
}
.badge.ok{background:rgba(39,174,96,.14);color:var(--success-color);border-color:rgba(39,174,96,.25)}
.badge.off{background:rgba(231,76,60,.14);color:var(--danger-color);border-color:rgba(231,76,60,.25)}

/* ===== Form controls ===== */
label{display:block;margin-bottom:8px;font-weight:800;color:var(--primary-color)}
input,select{
  width:100%;
  padding:12px;
  border:1px solid var(--border-color);
  border-radius:6px;
  font-size:1rem;
  background:#fff;
}
input:focus,select:focus{outline:2px solid rgba(52,152,219,.25);border-color:rgba(52,152,219,.55)}

/* ===== Tables ===== */
.tableWrap{
  overflow-x: auto;               /* geser kiri-kanan jika kolom kepanjangan */
  overflow-y: auto;               /* scroll vertikal */
  max-height: 320px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.06);
  -webkit-overflow-scrolling: touch;
}

.table{
  width: 100%;
  min-width: 980px;               /* tabel boleh melebar supaya no-wrap tetap rapi */
  border-collapse: collapse;
}

.table th,
.table td{
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid rgba(0,0,0,.08);
  white-space: nowrap;            /* ✅ NO WRAP (tidak turun baris) */
}

.table th{
  background: var(--light-color);
  font-weight: 900;
  position: sticky;
  top: 0;
  z-index: 1;
}

/* ===== Chart area ===== */
canvas{max-width:100%}

/* ===== Modal ===== */
.modal{
  position:fixed;inset:0;
  background:rgba(0,0,0,.5);
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:1000;
}
.modalCard{
  background:#fff;
  border-radius:12px;
  width:min(900px,95vw);
  max-height:90vh;
  overflow:auto;
  padding:18px;
  box-shadow:var(--shadow);
}

/* ===== Footer ===== */
.footer{
  text-align:center;
  padding:20px;
  color:var(--muted);
  font-size:.9rem;
  margin:20px auto 0;
  max-width:1400px;
}

/* ===== Toast (fallback) ===== */
#toast{
  background:var(--success-color) !important;
  color:#fff !important;
}

/* ===== Dashboard enhancements (dspld-like) ===== */
.kpiIcon{margin-right:6px; opacity:.85}

.grid.cards .card{
  position:relative;
  overflow:hidden;
}

.grid.cards .card::after{
  content:"";
  position:absolute;
  right:-40px;
  top:-40px;
  width:120px;height:120px;
  background:rgba(52,152,219,.12);
  border-radius:999px;
}

.grid.cards .card .label{
  display:flex;
  align-items:center;
  gap:6px;
}

.grid.cards .card .kpi{
  font-size:2.2rem;
  letter-spacing:.5px;
}

#dashPeriod, #dashFrom, #dashTo{
  padding:10px 12px;
  border-radius:8px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
}

/* Login modal small tweaks */
#loginModal .modalCard input { font-size: 1rem; }
#loginModal .modalCard { border-radius: 14px; }

button, .btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ===== Mobile-safe horizontal scrolling for wide content ===== */
body{
  overflow-x: hidden; /* biar halaman tidak melebar sendiri */
}

/* khusus area chart: kalau canvas lebih lebar dari layar, bisa digeser */
.chartWrap{
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

/* default canvas tetap responsif */
canvas{max-width:100%}

/* ===== Top 10 table: lebih “ringan” min-width daripada tabel data utama ===== */
.tableWrapTop .table{
  min-width: 620px; /* Top 10 biasanya tidak butuh 980px */
}

/* ===== Multi-select sanksi agar enak dipakai ===== */
#selSanksi[multiple]{
  min-height: 160px;
  padding: 10px;
}

/* ===== Mobile tuning ===== */
@media (max-width:768px){
  /* kartu & layout */
  .card{ padding:14px; }
  .grid{ gap:12px; }

  /* header & tabs */
  .topbar{
    margin:12px auto 10px;
    padding:14px;
  }
  .tabs{
    padding:0 12px;
    gap:8px;
  }
  .tab{
    padding:9px 12px;
    font-size:.95rem;
  }

  /* chart: buat kanvas punya lebar minimum,
     jadi kalau label banyak, user bisa geser */
  .chartWrap canvas{
    min-width: 640px; /* <-- membuat chart tidak "dipaksa" rapat di layar kecil */
  }
}

/* ===== Clickable KPI Card (Peserta Bermasalah) ===== */
.card.kpi-clickable{
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

/* Desktop hover */
@media (hover:hover){
  .card.kpi-clickable:hover{
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0,0,0,.15);
    background: linear-gradient(
      0deg,
      rgba(243,156,18,.06),
      rgba(243,156,18,.02)
    );
  }
}

/* Mobile tap feedback */
.card.kpi-clickable:active{
  transform: scale(.98);
  box-shadow: 0 3px 8px rgba(0,0,0,.18);
}

/* Icon & angka sedikit disorot */
.card.kpi-clickable .kpi{
  transition: color .15s ease;
}

.card.kpi-clickable:hover .kpi,
.card.kpi-clickable:active .kpi{
  color: var(--warning-color);
}

/* Hint kecil di bawah (opsional) */
.card.kpi-clickable .kpiHint{
  font-size: .85rem;
  color: var(--muted);
  margin-top: 4px;
}