/* ======================================
   PORTAL DATA SPBE – COMPLEX VERSION
====================================== */

/* Reset visual lama */
.area-title,
.bgload,
.bgload2,
.bgload3{
  display:none !important;
}

body{
  background:#eef2f6 !important;
  font-family:"Segoe UI", Arial, sans-serif !important;
  color:#1e293b !important;
}

/* ================= HEADER ================= */

.head-content{
  background:#ffffff !important;
  border-bottom:4px solid #0b3c7d !important;
  padding:25px 40px !important;
}

.head-content h1{
  color:#0b3c7d !important;
  font-size:1.4rem !important;
  font-weight:600 !important;
}

/* ================= WRAPPER ================= */

.area-content{
  float:none !important;
  width:100% !important;
  max-width:1300px;
  margin:40px auto !important;
  padding:0 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}

/* Card */
.portal-card{
  background:#ffffff;
  border-radius:8px;
  border:1px solid #dbe2ea;
  padding:30px;
}

/* ================= STATISTIK BOX ================= */

.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin-bottom:30px;
}

.stat-box{
  background:#ffffff;
  border:1px solid #dbe2ea;
  border-radius:8px;
  padding:20px;
  text-align:left;
}

.stat-box h4{
  font-size:13px;
  color:#64748b;
  margin-bottom:8px;
  font-weight:600;
}

.stat-box h2{
  font-size:1.8rem;
  font-weight:700;
  color:#0b3c7d;
}

/* ================= FILTER PANEL ================= */

.filter-panel{
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:8px;
  padding:20px;
  margin-bottom:25px;
}

.filter-panel label{
  font-weight:600;
  font-size:13px;
  margin-bottom:5px;
  display:block;
}

.form-control{
  border:1px solid #cbd5e1 !important;
  border-radius:4px !important;
  padding:8px 10px !important;
}

/* ================= TABLE ================= */

.table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}

.table th{
  background:#0b3c7d;
  color:#ffffff;
  padding:12px;
  text-align:left;
  font-weight:600;
}

.table td{
  padding:12px;
  border-bottom:1px solid #e2e8f0;
}

.table tr:hover{
  background:#f1f5f9;
}

/* ================= BUTTON ================= */

.btn{
  background:#0b3c7d !important;
  border:1px solid #0b3c7d !important;
  color:#ffffff !important;
  border-radius:4px !important;
  padding:8px 18px !important;
}

.btn:hover{
  background:#072a56 !important;
}

/* ================= PAGINATION ================= */

.pagination{
  margin-top:25px;
  display:flex;
  gap:8px;
}

.pagination a{
  padding:6px 12px;
  border:1px solid #cbd5e1;
  border-radius:4px;
  text-decoration:none;
  color:#0b3c7d;
}

.pagination a.active{
  background:#0b3c7d;
  color:#ffffff;
}

/* ================= RESPONSIVE ================= */

@media(max-width:1024px){
  .stats-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:600px){
  .stats-grid{
    grid-template-columns:1fr;
  }
}