* {
  box-sizing: border-box;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ===== GLASS & DARK THEME (SINOBI) ===== */
.glass-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-input {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.glass-input:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(59, 130, 246, 0.5);
  outline: none;
}

/* ===== LIGHT GLASS (MESRA) ===== */
.glass-light {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.gradient-teal {
  background: linear-gradient(135deg, #0d9488 0%, #0891b2 50%, #2563eb 100%);
}

/* ===== ANIMATIONS ===== */
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideIn { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastIn { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(100%); } }
@keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 5px rgba(59, 130, 246, 0.3); } 50% { box-shadow: 0 0 25px rgba(59, 130, 246, 0.6); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.animate-fadeIn { animation: fadeIn 0.4s ease-out forwards; }
.animate-slideIn { animation: slideIn 0.3s ease-out forwards; }
.animate-slideUp { animation: slideUp 0.6s ease-out forwards; }
.animate-float { animation: float 3s ease-in-out infinite; }
.toast-enter { animation: toastIn 0.3s ease-out forwards; }
.toast-exit { animation: toastOut 0.3s ease-in forwards; }

/* ===== SCROLLBAR ===== */
.scrollbar-thin::-webkit-scrollbar { width: 6px; height: 6px; }
.scrollbar-thin::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 3px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 3px; }
.scrollbar-thin::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); }

/* ===== BUTTONS ===== */
.btn-primary { background: linear-gradient(135deg, #3b82f6, #1d4ed8); transition: all 0.2s ease; }
.btn-primary:hover { background: linear-gradient(135deg, #60a5fa, #3b82f6); transform: translateY(-1px); }
.btn-danger { background: linear-gradient(135deg, #ef4444, #dc2626); transition: all 0.2s ease; }
.btn-danger:hover { background: linear-gradient(135deg, #f87171, #ef4444); transform: translateY(-1px); }
.btn-secondary { background: rgba(255, 255, 255, 0.1); transition: all 0.2s ease; }
.btn-secondary:hover { background: rgba(255, 255, 255, 0.15); }
.btn-success { background: linear-gradient(135deg, #22c55e, #16a34a); transition: all 0.2s ease; }
.btn-success:hover { background: linear-gradient(135deg, #4ade80, #22c55e); transform: translateY(-1px); }
.btn-teal { background: linear-gradient(135deg, #0d9488, #0891b2); transition: all 0.2s ease; }
.btn-teal:hover { background: linear-gradient(135deg, #14b8a6, #0d9488); transform: translateY(-1px); }

/* ===== SIDEBAR ===== */
.sidebar-item { transition: all 0.2s ease; }
.sidebar-item:hover { background: rgba(255, 255, 255, 0.1); }
.sidebar-item.active { background: rgba(59, 130, 246, 0.3); border-left: 3px solid #3b82f6; }

/* ===== STATUS BADGES ===== */
.status-validated { background: rgba(34, 197, 94, 0.2); color: #86efac; }
.status-pending { background: rgba(234, 179, 8, 0.2); color: #fde047; }
.status-hadir { background: rgba(34, 197, 94, 0.2); color: #86efac; }
.status-izin { background: rgba(59, 130, 246, 0.2); color: #93c5fd; }
.status-sakit { background: rgba(234, 179, 8, 0.2); color: #fde047; }
.status-alfa { background: rgba(239, 68, 68, 0.2); color: #fca5a5; }

.table-container { overflow-x: auto; }
.stat-card:hover { transform: translateY(-2px); transition: transform 0.2s ease; }

/* ===== STAR RATING ===== */
.star { transition: all 0.15s ease; cursor: pointer; user-select: none; }
.star:hover { transform: scale(1.2); }
.star.filled { color: #fbbf24; }

.progress-bar-mesra { transition: width 0.5s ease; }

/* ===== PRINT ===== */
@media print {
  body { background: #fff !important; color: #000 !important; }
  .glass-card { background: #fff !important; border: 1px solid #ccc !important; }
  .no-print { display: none !important; }
}