/* ============================================
   BAP Theme - Merah, Putih, Biru, Hijau
   Lebih elegan | Warna matching | Ikon konsisten
   ============================================ */

:root {
  --bap-red: #b91c1c;
  --bap-red-dark: #991b1b;
  --bap-red-light: #dc2626;
  --bap-sidebar-bg: #b91c1c;
  --bap-sidebar-dark: #7f1d1d;
  --bap-sidebar-hover: #dc2626;
  --bap-sidebar-text: #ffffff;
  --bap-sidebar-muted: rgba(255, 255, 255, 0.88);
  --bap-blue: #1d4ed8;
  --bap-blue-light: #3b82f6;
  --bap-primary: #1d4ed8;
  --bap-primary-light: #3b82f6;
  --bap-success: #059669;
  --bap-success-light: #10b981;
  --bap-page-bg: #f1f5f9;
  --bap-card-border: #e2e8f0;
  --bap-header-border: #1d4ed8;
  --bap-input-border: #cbd5e1;
  --bap-input-focus: #1d4ed8;
  --bap-icon-size: 1.125rem;
}

/* ---- Page & Wrapper ---- */
.theme-bap .page {
  background: var(--bap-page-bg);
}

.theme-bap .page-wrapper {
  background: linear-gradient(160deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%);
  min-height: 100vh;
}

/* ---- Sidebar (MERAH) - Lebih elegan ---- */
.theme-bap .navbar-vertical.bg-dark {
  background: linear-gradient(180deg, var(--bap-sidebar-bg) 0%, var(--bap-sidebar-dark) 100%) !important;
  box-shadow: 4px 0 32px rgba(185, 28, 28, 0.2);
  border-right: none !important;
}

.theme-bap .navbar-vertical .navbar-brand a,
.theme-bap .navbar-vertical .nav-link,
.theme-bap .navbar-vertical .nav-link-title,
.theme-bap .navbar-vertical .nav-link-icon {
  color: var(--bap-sidebar-text) !important;
}

.theme-bap .navbar-vertical .nav-link-icon {
  font-size: var(--bap-icon-size);
  opacity: 0.95;
}

.theme-bap .navbar-vertical .navbar-toggler {
  color: var(--bap-sidebar-text) !important;
  border-color: rgba(255, 255, 255, 0.35);
}

.theme-bap .navbar-vertical .nav-item.active .nav-link,
.theme-bap .navbar-vertical .nav-link:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  color: var(--bap-sidebar-text) !important;
  border-radius: 0.5rem;
  margin-left: 0.35rem;
  margin-right: 0.35rem;
}

.theme-bap .navbar-vertical .dropdown-menu {
  background: var(--bap-sidebar-dark) !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.5rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.theme-bap .navbar-vertical .dropdown-item {
  color: var(--bap-sidebar-muted) !important;
  border-radius: 0.375rem;
}

.theme-bap .navbar-vertical .dropdown-item:hover,
.theme-bap .navbar-vertical .dropdown-item:focus {
  background: rgba(255, 255, 255, 0.15) !important;
  color: var(--bap-sidebar-text) !important;
}

.theme-bap .navbar-vertical .dropdown-item.active {
  background: rgba(255, 255, 255, 0.22) !important;
  color: var(--bap-sidebar-text) !important;
  font-weight: 600;
}

.theme-bap .navbar-vertical .navbar-brand {
  padding: 1rem 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  margin-bottom: 0.5rem;
}

/* ---- Page Header ---- */
.theme-bap .page-header {
  background: #ffffff;
  border-bottom: 3px solid var(--bap-header-border);
  box-shadow: 0 2px 16px rgba(29, 78, 216, 0.06);
  padding: 1rem 0;
}

.theme-bap .page-title {
  color: var(--bap-primary);
  font-weight: 700;
}

.theme-bap .page-header .avatar {
  background: linear-gradient(135deg, var(--bap-primary) 0%, var(--bap-primary-light) 100%) !important;
}

.theme-bap .page-header .dropdown-menu {
  border-radius: 0.5rem;
  border: 1px solid var(--bap-card-border);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

.theme-bap .page-header .dropdown-item i {
  font-size: 1rem;
  opacity: 0.9;
}

/* ---- Page Body & Cards ---- */
.theme-bap .page-body {
  padding-top: 1.5rem;
  padding-bottom: 2rem;
}

.theme-bap .card {
  border: 1px solid var(--bap-card-border);
  border-radius: 0.75rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.2s ease;
}

.theme-bap .card:hover {
  box-shadow: 0 8px 28px rgba(29, 78, 216, 0.08);
}

.theme-bap .card-header {
  border-bottom: 1px solid var(--bap-card-border);
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  font-weight: 600;
  color: #1e293b;
  border-radius: 0.75rem 0.75rem 0 0;
}

.theme-bap .card-title {
  color: #1e293b;
  font-weight: 700;
}

.theme-bap .card-stacked {
  border-top: 3px solid var(--bap-primary);
}

/* ---- Form controls (matching) ---- */
.theme-bap .form-control,
.theme-bap .form-select {
  border-radius: 0.5rem;
  border-color: var(--bap-input-border);
}

.theme-bap .form-control:focus,
.theme-bap .form-select:focus {
  border-color: var(--bap-input-focus);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
}

/* ---- Buttons ---- */
.theme-bap .btn-primary {
  background: linear-gradient(135deg, var(--bap-primary) 0%, var(--bap-primary-light) 100%);
  border: none;
  border-radius: 0.5rem;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(29, 78, 216, 0.35);
}

.theme-bap .btn-primary:hover {
  background: linear-gradient(135deg, #1e40af 0%, var(--bap-primary) 100%);
  box-shadow: 0 6px 20px rgba(29, 78, 216, 0.4);
}

.theme-bap .btn-success {
  background: linear-gradient(135deg, var(--bap-success) 0%, var(--bap-success-light) 100%);
  border: none;
  border-radius: 0.5rem;
  font-weight: 600;
}

.theme-bap .btn-outline-primary {
  border-color: var(--bap-primary);
  color: var(--bap-primary);
  border-radius: 0.5rem;
}

.theme-bap .btn-outline-primary:hover {
  background: rgba(29, 78, 216, 0.08);
  color: var(--bap-primary);
}

.theme-bap .btn-danger,
.theme-bap .btn-outline-danger {
  border-radius: 0.5rem;
}

/* ---- Alerts ---- */
.theme-bap .alert-danger {
  border-left: 4px solid var(--bap-red);
  border-radius: 0.5rem;
}

.theme-bap .alert-success {
  border-left: 4px solid var(--bap-success);
  border-radius: 0.5rem;
}

.theme-bap .alert-warning {
  border-left: 4px solid #d97706;
  border-radius: 0.5rem;
}

/* ---- Footer ---- */
.theme-bap .footer {
  background: #ffffff;
  border-top: 1px solid var(--bap-card-border);
  color: #64748b;
  padding: 1rem 0;
}

.theme-bap .footer .list-inline-item {
  color: var(--bap-primary);
  font-weight: 500;
}

/* ---- Tables ---- */
.theme-bap .table thead th {
  background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
  color: #1e293b;
  font-weight: 600;
  border-bottom: 2px solid var(--bap-primary);
  border-radius: 0.375rem 0.375rem 0 0;
}

.theme-bap .table tbody tr:hover {
  background: rgba(29, 78, 216, 0.04);
}

.theme-bap .bg-primary { background: var(--bap-primary) !important; }
.theme-bap .bg-green { background: var(--bap-success) !important; }
.theme-bap .text-primary { color: var(--bap-primary) !important; }

/* ---- Badges ---- */
.theme-bap .badge {
  border-radius: 0.375rem;
  font-weight: 500;
}

/* ---- Pagination ---- */
.theme-bap .pagination .page-link {
  border-radius: 0.375rem;
  color: var(--bap-primary);
  font-weight: 500;
}

.theme-bap .pagination .page-item.active .page-link {
  background: var(--bap-primary);
  border-color: var(--bap-primary);
}

.theme-bap .pagination .page-link:hover {
  background: rgba(29, 78, 216, 0.08);
  color: var(--bap-primary);
}

@media (max-width: 991.98px) {
  .theme-bap .navbar-vertical.bg-dark {
    background: var(--bap-sidebar-bg) !important;
  }
}

/* ========== HALAMAN LOGIN (theme-login-bap) ========== */
.body-login-bap {
  min-height: 100vh;
  background: linear-gradient(145deg, #f8fafc 0%, #e2e8f0 40%, #f1f5f9 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

.body-login-bap .login-bap-wrap {
  width: 100%;
  max-width: 420px;
}

.body-login-bap .login-bap-logo {
  text-align: center;
  margin-bottom: 1.5rem;
}

.body-login-bap .login-bap-logo img {
  max-height: 72px;
  width: auto;
}

.body-login-bap .login-bap-logo h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--bap-red);
}

.body-login-bap .login-bap-card {
  background: #ffffff;
  border-radius: 1rem;
  box-shadow: 0 20px 60px rgba(29, 78, 216, 0.12), 0 0 0 1px rgba(0,0,0,0.04);
  overflow: hidden;
  border-top: 4px solid var(--bap-red);
}

.body-login-bap .login-bap-card .card-body {
  padding: 2rem;
}

.body-login-bap .login-bap-card .card-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.body-login-bap .login-bap-card .card-title i {
  color: var(--bap-primary);
  font-size: 1.5rem;
}

.body-login-bap .login-bap-card .form-label {
  font-weight: 600;
  color: #334155;
}

.body-login-bap .login-bap-card .form-control {
  border-radius: 0.5rem;
  border: 1px solid var(--bap-input-border);
  padding: 0.6rem 0.85rem;
}

.body-login-bap .login-bap-card .form-control:focus {
  border-color: var(--bap-primary);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
}

.body-login-bap .login-bap-card .btn-primary {
  width: 100%;
  padding: 0.75rem;
  font-weight: 600;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, var(--bap-red) 0%, var(--bap-red-light) 100%);
  border: none;
  box-shadow: 0 4px 14px rgba(185, 28, 28, 0.35);
}

.body-login-bap .login-bap-card .btn-primary:hover {
  background: linear-gradient(135deg, var(--bap-red-dark) 0%, var(--bap-red) 100%);
  box-shadow: 0 6px 20px rgba(185, 28, 28, 0.4);
}

.body-login-bap .login-bap-footer {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.875rem;
  color: #64748b;
}

.body-login-bap .alert-danger {
  border-radius: 0.5rem;
  border-left: 4px solid var(--bap-red);
}

.body-login-bap .form-check-label {
  color: #475569;
}

.body-login-bap .form-check-input:checked {
  background-color: var(--bap-primary);
  border-color: var(--bap-primary);
}