/* ===== PDPT UGK — Rekapitulasi Pages CSS ===== */
/* Extends pdpt-home.css */

/* ============================================
   REKAP STAT CARDS (overview row)
   ============================================ */
.rekap-stats{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:16px;
  margin-bottom:24px;
}

.rekap-stat{
  background:var(--bg-card);
  border:1px solid var(--surface-border);
  border-radius:var(--radius-lg);
  padding:22px 20px;
  display:flex;
  align-items:center;
  gap:14px;
  box-shadow:var(--shadow-sm);
  position:relative;
  overflow:hidden;
  transition:transform .25s, box-shadow .25s;
  animation:fadeInUp .5s cubic-bezier(.22,1,.36,1) both;
}

.rekap-stat:nth-child(1){animation-delay:.05s}
.rekap-stat:nth-child(2){animation-delay:.1s}
.rekap-stat:nth-child(3){animation-delay:.15s}
.rekap-stat:nth-child(4){animation-delay:.2s}
.rekap-stat:nth-child(5){animation-delay:.25s}

.rekap-stat::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
}

.rekap-stat:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
}

.rekap-stat.blue::before{background:linear-gradient(90deg,#2563eb,#3b82f6)}
.rekap-stat.amber::before{background:linear-gradient(90deg,#d97706,#f59e0b)}
.rekap-stat.red::before{background:linear-gradient(90deg,#dc2626,#ef4444)}
.rekap-stat.green::before{background:linear-gradient(90deg,#059669,#10b981)}
.rekap-stat.purple::before{background:linear-gradient(90deg,#7c3aed,#8b5cf6)}

.rekap-stat-icon{
  width:44px;height:44px;
  border-radius:var(--radius-md);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.rekap-stat.blue .rekap-stat-icon{background:rgba(37,99,235,.1);color:#2563eb}
.rekap-stat.amber .rekap-stat-icon{background:rgba(217,119,6,.1);color:#d97706}
.rekap-stat.red .rekap-stat-icon{background:rgba(220,38,38,.1);color:#dc2626}
.rekap-stat.green .rekap-stat-icon{background:rgba(5,150,105,.1);color:#059669}
.rekap-stat.purple .rekap-stat-icon{background:rgba(124,58,237,.1);color:#7c3aed}

.rekap-stat-info{display:flex;flex-direction:column;gap:2px}

.rekap-stat-label{
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-muted);
}

.rekap-stat-value{
  font-size:1.5rem;
  font-weight:800;
  color:var(--text-dark);
  line-height:1.1;
  letter-spacing:-.02em;
}

/* ============================================
   CHART GRID (2-column)
   ============================================ */
.rekap-charts{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:20px;
  margin-bottom:24px;
}

.rekap-chart-card{
  background:var(--bg-card);
  border:1px solid var(--surface-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  animation:fadeInUp .5s cubic-bezier(.22,1,.36,1) .2s both;
  transition:box-shadow .25s;
}

.rekap-chart-card:hover{box-shadow:var(--shadow-md)}

.rekap-chart-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 24px 0;
}

.rekap-chart-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:.9rem;
  font-weight:700;
  color:var(--text-dark);
}

.rekap-chart-title-icon{
  width:32px;height:32px;
  border-radius:var(--radius-sm);
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(37,99,235,.1);
  color:#2563eb;
}

.rekap-chart-body{
  padding:16px 20px 20px;
  position:relative;
}

.rekap-chart-body.bar-wrap{
  height:380px;
}

/* ============================================
   NUMBER BADGES (for table cells)
   ============================================ */
.num-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:38px;
  padding:4px 10px;
  border-radius:8px;
  font-size:.78rem;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}

.num-badge.blue{background:rgba(37,99,235,.1);color:#2563eb}
.num-badge.amber{background:rgba(217,119,6,.1);color:#d97706}
.num-badge.red{background:rgba(220,38,38,.1);color:#dc2626}
.num-badge.green{background:rgba(5,150,105,.1);color:#059669}
.num-badge.total{background:rgba(124,58,237,.1);color:#7c3aed;font-weight:800}

/* ============================================
   TABLE SECTION (reuse from pdpt-data.css)
   ============================================ */
.rekap-table-section{
  background:var(--bg-card);
  border:1px solid var(--surface-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  animation:fadeInUp .5s cubic-bezier(.22,1,.36,1) .3s both;
}

.rekap-table-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 24px;
  border-bottom:1px solid var(--surface-border);
}

.rekap-table-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:.9rem;
  font-weight:700;
  color:var(--text-dark);
}

.btn-export{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 16px;
  border:none;
  border-radius:var(--radius-sm);
  background:var(--accent-emerald);
  color:var(--white);
  font-family:inherit;
  font-size:.78rem;
  font-weight:600;
  cursor:pointer;
  transition:background .2s, transform .15s;
}

.btn-export:hover{background:#047857}
.btn-export:active{transform:scale(.97)}

.rekap-table-wrap{overflow-x:auto}

.rekap-table{
  width:100%;
  border-collapse:collapse;
  font-size:.82rem;
}

.rekap-table thead{background:rgba(241,245,249,.8)}

.rekap-table th{
  padding:13px 16px;
  text-align:center;
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-muted);
  border-bottom:2px solid var(--surface-border);
  white-space:nowrap;
}

.rekap-table th:first-child,
.rekap-table th:nth-child(2){text-align:left}

.rekap-table td{
  padding:12px 16px;
  border-bottom:1px solid rgba(226,232,240,.5);
  text-align:center;
  vertical-align:middle;
}

.rekap-table td:first-child,
.rekap-table td:nth-child(2){text-align:left}

.rekap-table tbody tr{transition:background .15s}
.rekap-table tbody tr:hover{background:rgba(37,99,235,.02)}
.rekap-table tbody tr:last-child td{border-bottom:none}

.row-num{
  font-weight:600;
  color:var(--text-light);
  font-size:.78rem;
}

.prodi-name{
  font-weight:600;
  color:var(--text-dark);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media(max-width:1024px){
  .rekap-charts{grid-template-columns:1fr}
}

@media(max-width:768px){
  .rekap-stats{grid-template-columns:1fr 1fr}
  .rekap-chart-body.bar-wrap{height:300px}
}

@media(max-width:480px){
  .rekap-stats{grid-template-columns:1fr}
  .rekap-stat{padding:16px}
  .rekap-stat-value{font-size:1.25rem}
  .rekap-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .rekap-table th, .rekap-table td{padding:10px 12px}
}