/* ============================================
   LMS UNNES - Application Stylesheet
   ============================================ */

/* Dark Mode Overrides */
.dark-mode .card { background: #121736; border-color: #1F2348; color: #EDEFF7; }
.dark-mode .navbar-main { background: #0A0D18; border-color: #1F2348; }
.dark-mode .card-stat { background: #121736; }
.dark-mode .table { color: #EDEFF7; }
.dark-mode .table-light { background: #121736; color: #EDEFF7; }
.dark-mode .modal-content { background: #121736; color: #EDEFF7; }
.dark-mode .dropdown-menu { background: #121736; border-color: #1F2348; }
.dark-mode .dropdown-item { color: #EDEFF7; }
.dark-mode .dropdown-item:hover { background: #1F2348; }
.dark-mode .form-control, .dark-mode .form-select { background: #1F2348; border-color: #2A2F5A; color: #EDEFF7; }
.dark-mode .form-control:focus { background: #1F2348; color: #EDEFF7; }
.dark-mode .text-muted { color: #9CA3AF !important; }
.dark-mode .border { border-color: #1F2348 !important; }
.dark-mode .bg-white { background: #121736 !important; }
.dark-mode .bg-light { background: #1F2348 !important; }
.dark-mode footer { background: #050810; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #CBD5E0; border-radius: 3px; }
.dark-mode ::-webkit-scrollbar-thumb { background: #2A2F5A; }

/* Card Hover */
.card-hover { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.card-hover:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(11,30,77,0.12); }

/* Focus Visible */
*:focus-visible { outline: 2px solid var(--unnes-gold); outline-offset: 2px; }

/* Skeleton Loader */
.skeleton { background: linear-gradient(90deg, var(--mist) 25%, #E8ECF4 50%, var(--mist) 75%); background-size: 200% 100%; animation: skeleton-loading 1.5s ease-in-out infinite; border-radius: 6px; }
.dark-mode .skeleton { background: linear-gradient(90deg, #1F2348 25%, #2A2F5A 50%, #1F2348 75%); background-size: 200% 100%; }
@keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* DataTables Overrides */
.dataTables_wrapper .dataTables_length select { border-radius: 8px; padding: 6px 30px 6px 12px; }
.dataTables_wrapper .dataTables_filter input { border-radius: 8px; padding: 6px 14px; margin-left: 8px; }
.dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: 6px !important; }

/* Chart Container */
.chart-container { position: relative; width: 100%; }
.chart-container canvas { max-height: 300px; }

/* Timer CBT Warning */
.timer-warning { color: var(--unnes-flame) !important; animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* Glass Effect */
.glass { background: rgba(255,255,255,0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.dark-mode .glass { background: rgba(18,23,54,0.8); }

/* SweetAlert2 Custom */
.swal2-popup { border-radius: 14px !important; font-family: 'Plus Jakarta Sans', sans-serif !important; }

/* Signature Divider */
.signature-divider { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 40px 0; }
.signature-divider::before, .signature-divider::after { content: ''; height: 1px; width: 60px; background: var(--unnes-gold); opacity: 0.4; }

/* Progress Bar */
.progress-unnes { height: 8px; border-radius: 4px; background: var(--mist); }
.progress-unnes .progress-bar { background: var(--unnes-gold); border-radius: 4px; }

/* Empty State */
.empty-state { text-align: center; padding: 60px 20px; }
.empty-state .icon { font-size: 4rem; margin-bottom: 16px; opacity: 0.5; }

/* Badge Status */
.badge-active { background: #D1FAE5; color: #065F46; }
.badge-inactive { background: #FEF3C7; color: #92400E; }
.badge-banned { background: #FEE2E2; color: #991B1B; }

/* Notification Dot */
.notification-dot { width: 8px; height: 8px; background: var(--unnes-flame); border-radius: 50%; display: inline-block; margin-left: 4px; animation: blink 1s ease-in-out infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* Responsive */
@media (max-width: 767.98px) {
    .hero-section h1 { font-size: 2rem !important; }
    .card-stat { padding: 14px; }
    .content-area { padding: 16px; }
}

/* Material Reordering */
.material-number {
    font-weight: 700;
    font-size: 15px;
    min-width: 26px;
    text-align: center;
    flex-shrink: 0;
}
.material-drag-handle {
    font-size: 1.3rem;
    line-height: 1;
    color: #9CA3AF;
    cursor: grab;
    padding: 4px 6px;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    flex-shrink: 0;
}
.material-drag-handle:hover { color: var(--unnes-navy); }
.material-item { transition: box-shadow 0.15s ease, transform 0.15s ease; }
.material-item.material-dragging {
    cursor: grabbing;
    box-shadow: 0 8px 20px rgba(11, 30, 77, 0.18);
    transform: scale(1.01);
    z-index: 5;
    position: relative;
    background: #fff;
}
.dark-mode .material-item.material-dragging { background: #121736; }

@media (max-width: 767.98px) {
    .material-drag-handle { font-size: 1.5rem; padding: 8px; }
}