/* ===========================
   KKG NANGGALO - Custom CSS
   =========================== */

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

/* ===========================
   CSS Variables
   =========================== */
:root {
  --kkg-primary: #1a237e;
  --kkg-primary-dark: #0d1757;
  --kkg-primary-light: #283593;
  --kkg-secondary: #1565c0;
  --kkg-accent: #c9b037;
  --kkg-success: #2e7d32;
  --kkg-danger: #c62828;
  --kkg-warning: #f57c00;
  --kkg-purple: #6a1b9a;
  --kkg-teal: #00695c;
  --sidebar-width: 250px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.12);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.15);
  --radius: 12px;
  --radius-sm: 8px;
}

/* ===========================
   Base Overrides
   =========================== */
body, .content-wrapper, .main-sidebar, .main-header {
  font-family: 'Inter', -apple-system, sans-serif !important;
}

* { transition: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s; }

/* ===========================
   Sidebar Styling
   =========================== */
.sidebar-kkg {
  background: linear-gradient(180deg, var(--kkg-primary) 0%, #1a2a6c 100%) !important;
  box-shadow: 4px 0 20px rgba(0,0,0,0.2) !important;
}

.sidebar-kkg .brand-link {
  background: rgba(0,0,0,0.2) !important;
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
  padding: 14px 20px !important;
}

.sidebar-kkg .brand-text { color: white !important; font-weight: 700 !important; font-size: 15px !important; }
.sidebar-kkg .brand-icon { color: #c9b037 !important; }
.brand-logo-wrapper { display: inline-block; }

.user-avatar-sidebar {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, #c9b037, #f5d060);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; color: #1a237e;
}

.sidebar-kkg .nav-link {
  border-radius: 8px !important;
  margin: 2px 8px !important;
  padding: 10px 14px !important;
  font-size: 13.5px !important;
  color: rgba(255,255,255,0.8) !important;
  font-weight: 500 !important;
}
.sidebar-kkg .nav-link:hover {
  background: rgba(255,255,255,0.12) !important;
  color: white !important;
}
.sidebar-kkg .nav-link.active {
  background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.15)) !important;
  color: white !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2) !important;
}
.sidebar-kkg .nav-icon { color: rgba(255,255,255,0.6) !important; font-size: 15px !important; width: 20px !important; }
.sidebar-kkg .nav-link.active .nav-icon { color: #c9b037 !important; }
.sidebar-kkg .nav-header {
  color: rgba(255,255,255,0.4) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  padding: 16px 22px 4px !important;
}

/* ===========================
   Navbar
   =========================== */
.navbar-kkg {
  background: linear-gradient(135deg, var(--kkg-primary), var(--kkg-secondary)) !important;
  box-shadow: 0 2px 15px rgba(0,0,0,0.15) !important;
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

.navbar-brand-center {
  position: absolute; left: 50%; transform: translateX(-50%);
}
.navbar-brand-text { color: rgba(255,255,255,0.9); font-weight: 600; font-size: 14px; }

.user-avatar-mini {
  width: 28px; height: 28px;
  background: linear-gradient(135deg, #c9b037, #f5d060);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px; color: #1a237e;
}

/* ===========================
   Content Header Gradient
   =========================== */
.bg-gradient-kkg {
  background: linear-gradient(135deg, var(--kkg-primary) 0%, var(--kkg-secondary) 100%) !important;
  padding: 20px 0 !important;
}
.page-title-white { color: white !important; font-size: 22px !important; font-weight: 700 !important; }
.breadcrumb { background: transparent !important; }
.breadcrumb-item.active { color: rgba(255,255,255,0.8) !important; }
.breadcrumb-item a { color: rgba(255,255,255,0.7) !important; }
.breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,0.5) !important; }

/* ===========================
   Card Styling
   =========================== */
.card-kkg {
  border: none !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden;
}
.card-kkg .card-header {
  background: white !important;
  border-bottom: 2px solid #f0f0f0 !important;
  font-weight: 600 !important;
  padding: 14px 20px !important;
}
.card-kkg .card-title { font-size: 14px !important; color: #333 !important; margin: 0 !important; }
.card-kkg .card-footer { background: #fafafa !important; border-top: 1px solid #f0f0f0 !important; }

/* ===========================
   STAT CARDS
   =========================== */
.stat-card {
  border-radius: var(--radius) !important;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform 0.3s, box-shadow 0.3s;
  margin-bottom: 20px;
}
.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.stat-card-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
}
.stat-card-info { flex: 1; }
.stat-number { font-size: 32px; font-weight: 800; color: white; margin: 0; line-height: 1; }
.stat-label { color: rgba(255,255,255,0.85); font-size: 13px; margin: 4px 0 6px; font-weight: 500; }
.stat-sub { font-size: 12px; color: rgba(255,255,255,0.7); }
.stat-card-icon {
  font-size: 48px;
  color: rgba(255,255,255,0.2);
  margin-left: 16px;
}
.stat-card-footer {
  display: block;
  padding: 10px 24px;
  color: rgba(255,255,255,0.8) !important;
  font-size: 12px;
  text-decoration: none !important;
  background: rgba(0,0,0,0.15);
  transition: background 0.3s;
}
.stat-card-footer:hover {
  background: rgba(0,0,0,0.25);
  color: white !important;
  text-decoration: none !important;
}

/* Color variants */
.stat-card-blue { background: linear-gradient(135deg, #1a237e, #1565c0); }
.stat-card-green { background: linear-gradient(135deg, #1b5e20, #2e7d32); }
.stat-card-orange { background: linear-gradient(135deg, #e65100, #f57c00); }
.stat-card-purple { background: linear-gradient(135deg, #4a148c, #7b1fa2); }

/* ===========================
   Quick Action Buttons
   =========================== */
.quick-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 8px;
  border-radius: var(--radius-sm);
  color: white !important;
  text-decoration: none !important;
  font-size: 12px;
  font-weight: 600;
  gap: 8px;
  transition: transform 0.2s, box-shadow 0.2s;
  width: 100%;
}
.quick-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  color: white !important;
  text-decoration: none !important;
}
.btn-blue { background: linear-gradient(135deg, #1a237e, #1565c0); }
.btn-green { background: linear-gradient(135deg, #1b5e20, #2e7d32); }
.btn-orange { background: linear-gradient(135deg, #e65100, #f57c00); }
.btn-purple { background: linear-gradient(135deg, #4a148c, #7b1fa2); }

/* ===========================
   Avatar
   =========================== */
.avatar-table {
  width: 36px; height: 36px;
  border-radius: 50%; overflow: hidden; flex-shrink: 0;
}
.avatar-table img { width: 100%; height: 100%; object-fit: cover; }
.avatar-table span {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  font-weight: 700; font-size: 14px; color: white;
}
.bg-blue { background: linear-gradient(135deg, #1a237e, #1565c0); }
.bg-pink { background: linear-gradient(135deg, #880e4f, #c2185b); }

.avatar-circle {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; color: #333;
}

/* ===========================
   Table Improvements
   =========================== */
.table thead th {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-bottom: 2px solid #dee2e6 !important;
  white-space: nowrap;
}
.table td { vertical-align: middle !important; font-size: 13.5px; }
.btn-xs { padding: 3px 7px !important; font-size: 11px !important; border-radius: 5px !important; }
.thead-dark th { background: linear-gradient(135deg, #263238, #37474f) !important; color: white !important; }

/* ===========================
   Alert Floating
   =========================== */
.alert-floating {
  position: fixed; top: 80px; right: 20px; z-index: 9999;
  min-width: 320px; max-width: 400px;
}
.alert-floating .alert {
  border-radius: var(--radius) !important;
  border-left: 4px solid currentColor !important;
}

/* ===========================
   Badge Improvements
   =========================== */
.badge { border-radius: 6px !important; font-weight: 600 !important; font-size: 11px !important; }

/* ===========================
   Forms
   =========================== */
.form-control {
  border-radius: var(--radius-sm) !important;
  border: 1.5px solid #e0e0e0 !important;
  font-size: 13.5px !important;
  padding: 8px 12px !important;
}
.form-control:focus {
  border-color: var(--kkg-secondary) !important;
  box-shadow: 0 0 0 3px rgba(21,101,192,0.12) !important;
}
.btn { border-radius: var(--radius-sm) !important; font-weight: 600 !important; font-size: 13px !important; }
.btn-primary { background: linear-gradient(135deg, var(--kkg-primary), var(--kkg-secondary)) !important; border: none !important; }
.btn-primary:hover { box-shadow: 0 4px 15px rgba(26,35,126,0.3) !important; transform: translateY(-1px); }

/* ===========================
   Select2 Overrides
   =========================== */
.select2-container--bootstrap4 .select2-selection {
  border-radius: var(--radius-sm) !important;
  border: 1.5px solid #e0e0e0 !important;
}

/* ===========================
   Main Footer
   =========================== */
.main-footer {
  border-top: 2px solid #f0f0f0 !important;
  font-size: 12px !important;
  padding: 12px 20px !important;
  background: white !important;
}

/* ===========================
   Sertifikat
   =========================== */
.sertifikat-card {
  border: 2px solid #e0e0e0;
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
.sertifikat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--kkg-secondary);
}

/* ===========================
   Responsive
   =========================== */
@media (max-width: 768px) {
  .stat-number { font-size: 24px !important; }
  .content-header { padding: 14px 0 !important; }
  .page-title-white { font-size: 18px !important; }
}