@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500;600;700&display=swap');

:root {
  --blue-soft: #AEE1F9;
  --blue-soft-dark: #7FC6EA;
  --blue-deep: #5AA9D6;
  --orange-soft: #FFD6B0;
  --orange-soft-dark: #FFB985;
  --orange-deep: #F4966B;
  --bg-page: #F6FAFD;
  --text-dark: #3B4A54;
  --radius: 18px;
}

body {
  font-family: 'Quicksand', sans-serif;
  background: var(--bg-page);
  color: var(--text-dark);
}

/* ===== Navbar ===== */
.navbar {
  background: linear-gradient(135deg, var(--blue-soft), var(--blue-deep)) !important;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  box-shadow: 0 4px 14px rgba(90, 169, 214, 0.25);
}
.navbar-brand, .nav-link {
  color: #ffffff !important;
  font-weight: 600;
}
.nav-link.active {
  color: var(--orange-soft-dark) !important;
  text-shadow: 0 0 1px rgba(0,0,0,0.05);
}
.nav-link:hover {
  color: #fff4e8 !important;
}

/* ===== Cards ===== */
.card {
  border: none;
  border-radius: var(--radius);
  box-shadow: 0 6px 16px rgba(122, 176, 210, 0.18);
}

.card-dashboard {
  border-radius: var(--radius);
  color: #fff;
  padding: 1.2rem 1.5rem;
  box-shadow: 0 8px 18px rgba(0,0,0,0.08);
}
.card-dashboard h2 { font-weight: 700; }
.bg-blue-soft   { background: linear-gradient(135deg, var(--blue-soft-dark), var(--blue-deep)); }
.bg-orange-soft { background: linear-gradient(135deg, var(--orange-soft), var(--orange-deep)); }

/* ===== Buttons ===== */
.btn {
  border-radius: 999px;
  font-weight: 600;
  border: none;
}
.btn-primary, .btn-info {
  background: linear-gradient(135deg, var(--blue-soft-dark), var(--blue-deep));
  color: #fff;
}
.btn-primary:hover, .btn-info:hover {
  background: linear-gradient(135deg, var(--blue-deep), var(--blue-soft-dark));
  color: #fff;
}
.btn-success, .btn-warning, .btn-danger {
  background: linear-gradient(135deg, var(--orange-soft), var(--orange-deep));
  color: #fff;
}
.btn-success:hover, .btn-warning:hover, .btn-danger:hover {
  background: linear-gradient(135deg, var(--orange-deep), var(--orange-soft));
  color: #fff;
}
.btn-outline-primary, .btn-outline-info, .btn-outline-success, .btn-outline-danger {
  border: 2px solid var(--blue-deep);
  color: var(--blue-deep);
  background: transparent;
}
.btn-outline-primary:hover, .btn-outline-info:hover, .btn-outline-success:hover, .btn-outline-danger:hover {
  background: var(--blue-soft);
  color: #fff;
}
.btn-secondary {
  background: #E7EEF3;
  color: var(--text-dark);
}

/* ===== Tables ===== */
.table thead.table-dark th {
  background: linear-gradient(135deg, var(--blue-soft-dark), var(--blue-deep)) !important;
  color: #fff !important;
  border: none;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: #F0F8FC;
}
.table td, .table th {
  vertical-align: middle;
}
.badge-masuk {
  background: linear-gradient(135deg, var(--blue-soft-dark), var(--blue-deep));
  color: #fff;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
}
.badge-keluar {
  background: linear-gradient(135deg, var(--orange-soft), var(--orange-deep));
  color: #fff;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
}

/* ===== Modal ===== */
.modal-content {
  border-radius: var(--radius);
  border: none;
}
.modal-header {
  background: linear-gradient(135deg, var(--blue-soft), var(--orange-soft));
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

/* ===== Alerts ===== */
.alert-success {
  background: var(--blue-soft);
  color: var(--text-dark);
  border: none;
  border-radius: var(--radius);
}

/* ===== Headings ===== */
h2 {
  font-weight: 700;
  color: var(--blue-deep);
}