/* ===== PDPT UGK — Data Table Pages ===== */
/* Extends pdpt-home.css (navbar, breadcrumb, layout, footer) */

/* ============================================
   FILTER SECTION
   ============================================ */
.filter-section{
  background:var(--bg-card);
  border:1px solid var(--surface-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  margin-bottom:24px;
  overflow:hidden;
  animation:fadeInUp .5s cubic-bezier(.22,1,.36,1) .05s both;
}

.filter-header{
  background:linear-gradient(135deg,var(--bg-nav),var(--bg-nav-dark));
  padding:14px 24px;
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--white);
  font-size:.85rem;
  font-weight:600;
}

.filter-header svg{
  opacity:.7;
}

.filter-body{
  padding:24px;
}

.filter-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-bottom:20px;
}

.filter-group{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.filter-label{
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--text-muted);
}

.filter-select{
  width:100%;
  padding:10px 36px 10px 14px;
  border:1px solid var(--surface-border);
  border-radius:var(--radius-sm);
  background:var(--bg-card);
  color:var(--text-body);
  font-family:inherit;
  font-size:.85rem;
  font-weight:500;
  outline:none;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  transition:border-color .2s, box-shadow .2s;
}

.filter-select:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(37,99,235,.1);
}

.filter-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

.btn-filter{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 22px;
  border:none;
  border-radius:var(--radius-sm);
  font-family:inherit;
  font-size:.82rem;
  font-weight:600;
  cursor:pointer;
  transition:background .2s, transform .15s, box-shadow .2s;
}

.btn-filter:active{transform:scale(.97)}

.btn-filter-primary{
  background:var(--primary);
  color:var(--white);
  box-shadow:0 2px 8px rgba(37,99,235,.25);
}
.btn-filter-primary:hover{
  background:var(--primary-dark);
  box-shadow:0 4px 12px rgba(37,99,235,.3);
}

.btn-filter-export{
  background:var(--accent-emerald);
  color:var(--white);
  box-shadow:0 2px 8px rgba(5,150,105,.25);
}
.btn-filter-export:hover{
  background:#047857;
  box-shadow:0 4px 12px rgba(5,150,105,.3);
}

.btn-filter-reset{
  background:transparent;
  color:var(--text-muted);
  border:1px solid var(--surface-border);
}
.btn-filter-reset:hover{
  background:rgba(100,116,139,.08);
  color:var(--text-body);
}

/* ============================================
   INSTITUSI SUMMARY CARD
   ============================================ */
.institusi-summary{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-bottom:24px;
}

.institusi-card{
  background:var(--bg-card);
  border:1px solid var(--surface-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  padding:28px;
  position:relative;
  overflow:hidden;
  animation:fadeInUp .5s cubic-bezier(.22,1,.36,1) .1s both;
}

.institusi-card::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:4px;
}

.institusi-card.primary::before{
  background:linear-gradient(90deg,#2563eb,#3b82f6,#60a5fa);
}

.institusi-card.gold::before{
  background:linear-gradient(90deg,#d97706,#f59e0b,#fbbf24);
}

.institusi-card-header{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:20px;
}

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

.institusi-card.primary .institusi-card-icon{
  background:rgba(37,99,235,.1);
  color:#2563eb;
}

.institusi-card.gold .institusi-card-icon{
  background:rgba(217,119,6,.1);
  color:#d97706;
}

.institusi-card-title{
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:4px;
}

.institusi-card-value{
  font-size:1.5rem;
  font-weight:800;
  color:var(--text-dark);
}

.institusi-details{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.institusi-detail-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 14px;
  background:rgba(241,245,249,.6);
  border-radius:var(--radius-sm);
  font-size:.82rem;
}

.institusi-detail-label{
  color:var(--text-muted);
  font-weight:500;
}

.institusi-detail-value{
  color:var(--text-dark);
  font-weight:600;
}

.akred-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 14px;
  border-radius:100px;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.akred-badge.unggul{
  background:rgba(5,150,105,.1);
  color:#059669;
}

.akred-badge.a{
  background:rgba(37,99,235,.1);
  color:#2563eb;
}

.akred-badge.b{
  background:rgba(217,119,6,.1);
  color:#d97706;
}

.akred-badge.c{
  background:rgba(225,29,72,.1);
  color:#e11d48;
}

.akred-badge.proses{
  background:rgba(100,116,139,.1);
  color:#64748b;
}

/* ============================================
   DATA TABLE
   ============================================ */
.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) .15s both;
}

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

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

.table-count{
  font-size:.75rem;
  font-weight:600;
  color:var(--text-muted);
  background:rgba(241,245,249,.8);
  padding:4px 12px;
  border-radius:100px;
}

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

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

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

.data-table th{
  padding:14px 16px;
  text-align:left;
  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;
  position:sticky;
  top:0;
  background:rgba(241,245,249,.95);
}

.data-table td{
  padding:14px 16px;
  border-bottom:1px solid rgba(226,232,240,.5);
  color:var(--text-body);
  vertical-align:top;
}

.data-table tbody tr{
  transition:background .15s;
}

.data-table tbody tr:hover{
  background:rgba(37,99,235,.03);
}

.data-table tbody tr:last-child td{
  border-bottom:none;
}

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

/* Faculty badge */
.fak-badge{
  display:inline-flex;
  padding:3px 10px;
  border-radius:6px;
  font-size:.72rem;
  font-weight:600;
  background:rgba(241,245,249,.8);
  color:var(--text-body);
  white-space:nowrap;
}

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

/* Date cell */
.date-cell{
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
  font-size:.8rem;
}

/* Sertifikat cell */
.sertifikat-cell{
  font-size:.75rem;
  color:var(--text-muted);
  max-width:200px;
  word-break:break-all;
}

/* File button */
.btn-file{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 14px;
  border:none;
  border-radius:100px;
  background:linear-gradient(135deg,#f97316,#fb923c);
  color:var(--white);
  font-family:inherit;
  font-size:.72rem;
  font-weight:600;
  cursor:pointer;
  transition:transform .15s, box-shadow .2s;
  white-space:nowrap;
}

.btn-file:hover{
  transform:translateY(-1px);
  box-shadow:0 3px 10px rgba(249,115,22,.3);
}

.btn-file:active{transform:scale(.97)}

/* ============================================
   PAGINATION
   ============================================ */
.pagination-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 24px;
  border-top:1px solid var(--surface-border);
}

.pagination-info{
  font-size:.78rem;
  color:var(--text-muted);
  font-weight:500;
}

.pagination{
  display:flex;
  align-items:center;
  gap:4px;
}

.page-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:36px;
  height:36px;
  padding:0 10px;
  border:1px solid var(--surface-border);
  border-radius:var(--radius-sm);
  background:var(--bg-card);
  color:var(--text-body);
  font-family:inherit;
  font-size:.8rem;
  font-weight:600;
  cursor:pointer;
  transition:all .15s;
}

.page-btn:hover{
  background:rgba(37,99,235,.05);
  border-color:rgba(37,99,235,.2);
  color:var(--primary);
}

.page-btn.active{
  background:var(--primary);
  border-color:var(--primary);
  color:var(--white);
  box-shadow:0 2px 6px rgba(37,99,235,.25);
}

.page-btn:disabled{
  opacity:.4;
  cursor:not-allowed;
}

.page-btn svg{
  width:14px;height:14px;
}

/* ============================================
   EMPTY STATE
   ============================================ */
.empty-state{
  text-align:center;
  padding:48px 24px;
}

.empty-state svg{
  color:var(--text-light);
  margin-bottom:16px;
  opacity:.4;
}

.empty-state p{
  font-size:.88rem;
  color:var(--text-muted);
  font-weight:500;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media(max-width:768px){
  .filter-grid{grid-template-columns:1fr}
  .filter-actions{flex-wrap:wrap}
  .institusi-summary{grid-template-columns:1fr}
  .pagination-bar{
    flex-direction:column;
    gap:12px;
    align-items:center;
  }
  .table-header{
    flex-direction:column;
    gap:10px;
    align-items:flex-start;
  }
}

@media(max-width:480px){
  .filter-body{padding:16px}
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .data-table th,
  .data-table td{padding:10px 12px}
  .pagination{gap:2px;flex-wrap:wrap;justify-content:center}
  .page-btn{min-width:32px;height:32px;font-size:.75rem}
}