:root{
  --brand:#4f46e5;
  --brand-dark:#3730a3;
  --bg:#f6f7fb;
  --card:#ffffff;
  --border:#e7e8ef;
  --text:#1f2330;
  --muted:#6b7280;
  --radius:14px;
}
*{box-sizing:border-box;}
body{
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--text);
}
.app-sidebar{
  width:250px;min-height:100vh;background:#fff;border-right:1px solid var(--border);
  position:fixed;top:0;left:0;padding:24px 16px;
}
.app-sidebar .brand{font-weight:700;font-size:1.15rem;margin-bottom:28px;display:flex;align-items:center;gap:8px;color:var(--brand-dark);}
.app-sidebar .nav-link{
  border-radius:10px;color:var(--text);padding:10px 14px;font-weight:500;font-size:.92rem;
  display:flex;align-items:center;gap:10px;margin-bottom:2px;
}
.app-sidebar .nav-link.active,.app-sidebar .nav-link:hover{background:#eef0ff;color:var(--brand-dark);}
.app-main{margin-left:250px;padding:24px 32px;}
.app-topbar{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:14px 20px;display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;
}
.card-soft{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 1px 2px rgba(16,24,40,.04);}
.stat-card{padding:20px;}
.stat-card .value{font-size:1.6rem;font-weight:700;}
.stat-card .label{color:var(--muted);font-size:.85rem;}
.btn-brand{background:var(--brand);border-color:var(--brand);color:#fff;border-radius:10px;font-weight:600;}
.btn-brand:hover{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff;}
.table-modern thead th{font-size:.78rem;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--border);font-weight:600;}
.table-modern td, .table-modern th{padding:14px 12px;vertical-align:middle;}
.table-modern tbody tr{border-bottom:1px solid var(--border);}
.badge-soft-success{background:#e7f8ee;color:#12805c;font-weight:600;border-radius:8px;padding:5px 10px;}
.badge-soft-danger{background:#fdeaea;color:#c0392b;font-weight:600;border-radius:8px;padding:5px 10px;}
.form-control,.form-select{border-radius:10px;border-color:var(--border);padding:10px 12px;}
.form-control:focus,.form-select:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(79,70,229,.12);}
.empty-state{padding:60px 20px;text-align:center;color:var(--muted);}
.auth-wrapper{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#eef0ff,#f6f7fb);}
.auth-card{width:380px;padding:36px;}
/* Styling Pagination modern - pill shape */
.pagination {
    gap: 4px;
}

.pagination .page-link {
    color: #4a5568;
    border-radius: 50px !important; /* Full pill shape */
    margin: 0 2px;
    padding: 0.55rem 1rem;
    border: 1px solid #e2e8f0;
    font-weight: 500;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Efek saat di-hover */
.pagination .page-link:hover {
    background-color: #edf2f7;
    color: #0d6efd;
    border-color: #cbd5e0;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.08);
}

/* Efek fokus (aksesibilitas keyboard) */
.pagination .page-link:focus {
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
    outline: none;
}

/* Styling untuk halaman yang sedang aktif */
.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #0d6efd, #0b5ed7);
    border-color: #0d6efd;
    color: #ffffff;
    box-shadow: 0 4px 10px -2px rgba(13, 110, 253, 0.35);
    transform: translateY(-1px);
}

/* Styling untuk tombol Disabled (sebelum/sesudah) */
.pagination .page-item.disabled .page-link {
    color: #cbd5e0;
    background-color: #f7fafc;
    border-color: #edf2f7;
    box-shadow: none;
}