/* Custom Styles - Pondok Pesantren */
:root {
  --primary-green: #064e3b;
  --dark-green: #064e3b;
  --hover-green: #064e3b;
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

/* =========================
   Navbar Styles (Updated)
   ========================= */
.navbar {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Warna brand & link pada navbar background putih */
.navbar-light.bg-white .navbar-brand,
.navbar-light.bg-white .navbar-nav .nav-link {
  color: #111 !important;
}

/* Hover & active state link navbar */
.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: var(--primary-green) !important;
}
.navbar .nav-link.active {
  color: var(--primary-green) !important;
  font-weight: 600;
}

/* Toggler border utk navbar terang (bg putih) */
.navbar-light .navbar-toggler {
  border-color: rgba(0, 0, 0, 0.2);
}

/* Toggler icon: versi gelap utk navbar-light */
.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Opsional: jika ada halaman lain masih pakai navbar-dark */
.navbar-dark .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.5);
}
.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-brand {
  font-size: 1.5rem;
}

/* (Sebelumnya .nav-item { color:black; } diganti ke .nav-link agar tepat sasaran) */
.navbar .nav-link {
  transition: color 0.2s ease;
}

/* =========================
   Button Styles
   ========================= */
.btn {
  transition: all 0.3s ease;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* =========================
   Card Hover Effects
   ========================= */
.card {
  transition: all 0.3s ease;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
}
.card:hover .feature-icon {
  transform: scale(1.1) rotate(5deg);
}

/* Feature Icons */
.feature-icon {
  transition: transform 0.3s ease;
}

/* =========================
   Form Styles
   ========================= */
.form-control:focus,
.form-select:focus {
  border-color: var(--primary-green);
  box-shadow: 0 0 0 0.25rem rgba(15, 157, 88, 0.25);
}
.form-label {
  font-weight: 500;
  margin-bottom: 0.5rem;
}
.form-text {
  font-size: 0.875rem;
  color: #6c757d;
}

/* Validation Styles */
.was-validated .form-control:valid,
.was-validated .form-select:valid {
  border-color: var(--primary-green);
}
.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
  border-color: #dc3545;
}

/* =========================
   Table Styles
   ========================= */
.table {
  font-size: 0.95rem;
}
.table thead th {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  background-color: #f8f9fa;
}
.table-hover tbody tr:hover {
  background-color: rgba(15, 157, 88, 0.05);
}

/* Badge Styles */
.badge {
  padding: 0.5em 0.8em;
  font-weight: 500;
}

/* Stats Cards */
.card.bg-primary,
.card.bg-warning,
.card.bg-success,
.card.bg-danger {
  border: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* =========================
   Loading Spinner
   ========================= */
.spinner-border {
  width: 1rem;
  height: 1rem;
  border-width: 0.15em;
}

/* =========================
   Alert Styles
   ========================= */
.alert {
  border-radius: 0.5rem;
  border: none;
}
.alert-success {
  background-color: #d4edda;
  color: #155724;
}
.alert-danger {
  background-color: #f8d7da;
  color: #721c24;
}

/* =========================
   Pagination
   ========================= */
.pagination .page-link {
  color: var(--primary-green);
}
.pagination .page-item.active .page-link {
  background-color: var(--primary-green);
  border-color: var(--primary-green);
}
.pagination .page-link:hover {
  color: var(--hover-green);
}

/* =========================
   Footer
   ========================= */
footer {
  margin-top: auto;
}

/* =========================
   Custom Scrollbar
   ========================= */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: var(--primary-green);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--hover-green);
}

/* =========================
   Animation Classes
   ========================= */
.animate-fade-in {
  animation: fadeIn 0.5s ease-in;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================
   Sticky Navbar Elevation
   ========================= */
.navbar.sticky-top {
  transition: all 0.3s ease;
}
.navbar.sticky-top.scrolled {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}