body,
input,
button {
    font-family: 'Inter', sans-serif;
}

.card {
    border-radius: 1rem;
}

/* === PRIMARY === */
.btn-primary {
    background: linear-gradient(135deg, #0062E6, #33AEFF);
    border: none;
    color: #fff;
    transition: 0.3s ease;
}
.btn-primary:hover {
    background: linear-gradient(135deg, #0052C1, #2995E8);
    transform: translateY(-1px);
}

/* === SUCCESS === */
.btn-success {
    background: linear-gradient(135deg, #00B09B, #96C93D);
    border: none;
    color: #fff;
    transition: 0.3s ease;
}
.btn-success:hover {
    background: linear-gradient(135deg, #00917A, #7FB833);
    transform: translateY(-1px);
}

/* === WARNING === */
.btn-warning {
    background: linear-gradient(135deg, #F7971E, #FFD200);
    border: none;
    color: #212529;
    transition: 0.3s ease;
}
.btn-warning:hover {
    background: linear-gradient(135deg, #E68900, #EFC800);
    transform: translateY(-1px);
}

/* === DANGER === */
.btn-danger {
    background: linear-gradient(135deg, #EB3349, #F45C43);
    border: none;
    color: #fff;
    transition: 0.3s ease;
}
.btn-danger:hover {
    background: linear-gradient(135deg, #D12A3E, #E04B37);
    transform: translateY(-1px);
}

/* === INFO === */
.btn-info {
    background: linear-gradient(135deg, #36D1DC, #5B86E5);
    border: none;
    color: #fff;
    transition: 0.3s ease;
}
.btn-info:hover {
    background: linear-gradient(135deg, #2CB4C1, #4A73CC);
    transform: translateY(-1px);
}

/* === SECONDARY === */
.btn-secondary {
    background: linear-gradient(135deg, #757F9A, #D7DDE8);
    border: none;
    color: #fff;
    transition: 0.3s ease;
}
.btn-secondary:hover {
    background: linear-gradient(135deg, #666F87, #C5CBDC);
    transform: translateY(-1px);
}

/* === DARK === */
.btn-dark {
    background: linear-gradient(135deg, #232526, #414345);
    border: none;
    color: #fff;
    transition: 0.3s ease;
}
.btn-dark:hover {
    background: linear-gradient(135deg, #1C1E1F, #37393B);
    transform: translateY(-1px);
}

/* === LIGHT === */
.btn-light {
    background: linear-gradient(135deg, #ECE9E6, #FFFFFF);
    border: 1px solid #ccc;
    color: #212529;
    transition: 0.3s ease;
}
.btn-light:hover {
    background: linear-gradient(135deg, #E0DDD9, #F9F9F9);
    transform: translateY(-1px);
}

/* === Common button enhancements === */
.btn {
    border-radius: 8px;
    font-weight: 600;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}
.btn:focus,
.btn:active {
    outline: none !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 98, 230, 0.25);
}

.bg-opacity-75 {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
}

/* === Modern Sidebar Style === */
.sidebar {
  background: linear-gradient(180deg, #0062E6 0%, #33AEFF 100%) !important;
  color: #fff;
  transition: all 0.3s ease;
  border-right: none;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

/* Tambahkan sedikit ruang di dalam sidebar */
.sidebar .nav-item {
  margin: 0px 0;
}

.sidebar .nav-link {
  color: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  margin: 2px 8px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  transition: all 0.2s ease;
}

/* Ikon di sidebar */
.sidebar .nav-link i {
  margin-right: 10px;
  font-size: 1rem;
  opacity: 0.9;
}

/* Hover state */
.sidebar .nav-link:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  transform: translateX(0px);
}

/* Active state */
.sidebar .nav-link.active {
  background: rgba(255, 255, 255, 0.25);
  font-weight: 600;
  color: #fff;
  box-shadow: inset 2px 0 0 0 #fff;
}

/* Divider dan heading */
.sidebar .sidebar-heading {
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.7);
  padding: 10px 16px;
  margin-top: 5px;
}

/* Sidebar toggle button (bawah) */
.sidebar .sidebar-toggle {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transition: all 0.2s;
}
.sidebar .sidebar-toggle:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Accordion caret / collapse indicator */
.sidebar .collapse-inner .collapse-item {
  border-radius: 8px;
  padding: 8px 16px;
}
.sidebar .collapse-inner .collapse-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Scrollbar halus di sidebar */
.sidebar::-webkit-scrollbar {
  width: 6px;
}
.sidebar::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
}