/* Theme Styles - Light and Colorful (Dark) */

/* =========================================
   COLORFUL THEME (Dark Mode)
   ========================================= */

body.colorful-theme {
    --bg-primary: #0f1020;
    --bg-secondary: #1a1b2e;
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --border-color: rgba(255, 255, 255, 0.1);
    
    background-color: #0f1020;
    color: #ffffff;
}

/* Animated Background */
body.colorful-theme .main-content::before {
    content: '';
    position: fixed;
    top: 0;
    left: var(--sidebar-width);
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse at 20% 20%, rgba(147, 51, 234, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(236, 72, 153, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 40% 80%, rgba(37, 99, 235, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(6, 182, 212, 0.1) 0%, transparent 50%);
    z-index: -1;
    pointer-events: none;
    animation: bg-shift 15s ease-in-out infinite;
}

@media (max-width: 991.98px) {
    body.colorful-theme .main-content::before {
        left: 0;
    }
}

@keyframes bg-shift {
    0%, 100% { 
        background-position: 0% 0%, 100% 0%, 0% 100%, 100% 100%;
    }
    50% { 
        background-position: 20% 10%, 80% 10%, 10% 90%, 90% 90%;
    }
}

/* Ambient Glow Effects */
body.colorful-theme::before {
    content: '';
    position: fixed;
    top: -15%;
    left: -10%;
    width: 500px;
    height: 500px;
    background: #9333ea;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.15;
    z-index: -1;
    pointer-events: none;
    animation: pulse-glow 8s infinite alternate;
}

/* Dark mode empty state fix */
body.colorful-theme .text-center.text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
}

body.colorful-theme .text-center.text-muted i,
body.colorful-theme .text-center.text-muted .bi {
    color: rgba(255, 255, 255, 0.6) !important;
}

body.colorful-theme::after {
    content: '';
    position: fixed;
    bottom: -15%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: #2563eb;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.12;
    z-index: -1;
    pointer-events: none;
    animation: pulse-glow-2 10s infinite alternate;
}

@keyframes pulse-glow {
    0% { opacity: 0.1; transform: scale(1); }
    50% { opacity: 0.2; transform: scale(1.1); }
    100% { opacity: 0.15; transform: scale(1.05); }
}

@keyframes pulse-glow-2 {
    0% { opacity: 0.08; transform: scale(1); }
    50% { opacity: 0.15; transform: scale(1.1); }
    100% { opacity: 0.1; transform: scale(1.05); }
}

/* Sidebar */
body.colorful-theme .sidebar {
    background: #1a1b2e;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

body.colorful-theme .sidebar-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.colorful-theme .sidebar .logo {
    background: linear-gradient(135deg, #9333ea, #db2777);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body.colorful-theme .sidebar-toggle {
    color: rgba(255, 255, 255, 0.7);
}

body.colorful-theme .nav-link {
    color: rgba(255, 255, 255, 0.7);
}

body.colorful-theme .nav-link:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
}

body.colorful-theme .nav-link.active {
    background: linear-gradient(90deg, rgba(147, 51, 234, 0.2), transparent);
    color: #ffffff;
    border-left-color: #9333ea;
}

body.colorful-theme .sidebar-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

body.colorful-theme .btn-theme {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

body.colorful-theme .btn-theme:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

/* Topbar */
body.colorful-theme .topbar {
    background: #1a1b2e;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.colorful-theme .btn-menu {
    color: rgba(255, 255, 255, 0.7);
}

body.colorful-theme .page-title {
    color: #ffffff;
}

body.colorful-theme .user-menu .btn-user {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

body.colorful-theme .user-menu .btn-user:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(147, 51, 234, 0.5);
}

body.colorful-theme .user-name {
    color: rgba(255, 255, 255, 0.9);
}

body.colorful-theme .user-chevron {
    color: rgba(255, 255, 255, 0.5);
}

body.colorful-theme .user-initials {
    background: linear-gradient(135deg, #9333ea, #db2777);
}

body.colorful-theme .btn-theme-toggle {
    color: rgba(255, 255, 255, 0.7);
}

body.colorful-theme .btn-theme-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fbbf24;
}

/* Mobile Filters */
body.colorful-theme .mobile-filters {
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Form Controls */
body.colorful-theme .form-control,
body.colorful-theme .form-select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

body.colorful-theme .form-control:focus,
body.colorful-theme .form-select:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(147, 51, 234, 0.5);
    box-shadow: 0 0 15px rgba(147, 51, 234, 0.3);
    color: #ffffff;
}

body.colorful-theme .form-control::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

body.colorful-theme .form-label {
    color: rgba(255, 255, 255, 0.8);
}

body.colorful-theme .form-select option {
    background: #1a1b2e;
    color: #ffffff;
}

/* Cards and Containers */
body.colorful-theme .card,
body.colorful-theme .table-responsive,
body.colorful-theme .view-container > div {
    /* background: rgba(15, 16, 32, 0.85); */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    /* border: 1px solid rgba(255, 255, 255, 0.1); */
    border-radius: 0.75rem;
}

/* Tables */
body.colorful-theme .table {
    --bs-table-bg: transparent;
    --bs-table-accent-bg: transparent;
    --bs-table-striped-color: var(--text-primary);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.05);
    --bs-table-active-color: var(--text-primary);
    --bs-table-active-bg: rgba(255, 255, 255, 0.1);
    --bs-table-hover-color: var(--text-primary);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.08);
    
    background: transparent !important;
    border: none !important;
    border-radius: 0.5rem;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.9) !important;
}

body.colorful-theme .table > :not(caption) > * > * {
    background-color: transparent !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

body.colorful-theme .table-responsive {
    background: rgba(15, 16, 32, 0.4) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    border-radius: 1rem;
    padding: 0;
}

body.colorful-theme .table thead {
    background: rgba(147, 51, 234, 0.15) !important;
}

body.colorful-theme .table thead th {
    color: rgba(255, 255, 255, 0.8) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: rgba(147, 51, 234, 0.15) !important;
}

body.colorful-theme .table tbody td {
    color: rgba(255, 255, 255, 0.9) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

body.colorful-theme .table tbody tr {
    background: transparent !important;
}

body.colorful-theme .table-hover tbody tr:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

body.colorful-theme .attendance-input {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

body.colorful-theme .attendance-input:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: #9333ea;
}

/* Buttons */
body.colorful-theme .btn-primary {
    background: linear-gradient(135deg, #9333ea, #db2777);
    border: none;
    box-shadow: 0 4px 15px rgba(147, 51, 234, 0.4);
}

body.colorful-theme .btn-primary:hover {
    filter: brightness(1.15);
    box-shadow: 0 6px 20px rgba(147, 51, 234, 0.6);
    transform: translateY(-2px);
}

body.colorful-theme .btn-success {
    background: linear-gradient(135deg, #16a34a, #84cc16);
    border: none;
    box-shadow: 0 4px 15px rgba(22, 163, 74, 0.4);
}

body.colorful-theme .btn-success:hover {
    filter: brightness(1.15);
    box-shadow: 0 6px 20px rgba(22, 163, 74, 0.6);
    transform: translateY(-2px);
}

body.colorful-theme .btn-danger {
    background: linear-gradient(135deg, #ea580c, #ef4444);
    border: none;
    box-shadow: 0 4px 15px rgba(234, 88, 12, 0.4);
}

body.colorful-theme .btn-danger:hover {
    filter: brightness(1.15);
    box-shadow: 0 6px 20px rgba(234, 88, 12, 0.6);
    transform: translateY(-2px);
}

body.colorful-theme .btn-info {
    background: linear-gradient(135deg, #2563eb, #06b6d4);
    border: none;
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
}

body.colorful-theme .btn-info:hover {
    filter: brightness(1.15);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.6);
    transform: translateY(-2px);
    color: #ffffff;
}

body.colorful-theme .btn-warning {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    border: none;
    color: #000;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
}

body.colorful-theme .btn-warning:hover {
    filter: brightness(1.1);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.6);
    transform: translateY(-2px);
}

body.colorful-theme .btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

body.colorful-theme .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

body.colorful-theme .btn-outline-primary {
    border: 1px solid rgba(147, 51, 234, 0.5);
    color: #a78bfa;
}

body.colorful-theme .btn-outline-primary:hover {
    background: linear-gradient(135deg, #9333ea, #db2777);
    border-color: transparent;
    color: #ffffff;
}

/* Modal */
body.colorful-theme .modal-content {
    background: rgba(15, 16, 32, 0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

body.colorful-theme .modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.colorful-theme .modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

body.colorful-theme .btn-close {
    filter: invert(1);
}

/* Dropdown */
body.colorful-theme .dropdown-menu {
    background: rgba(15, 16, 32, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

body.colorful-theme .dropdown-item {
    color: rgba(255, 255, 255, 0.8);
}

body.colorful-theme .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

body.colorful-theme .dropdown-divider {
    border-color: rgba(255, 255, 255, 0.1);
}

/* Cards */
body.colorful-theme .card,
body.colorful-theme .remark-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

body.colorful-theme .remark-content {
    color: rgba(255, 255, 255, 0.7);
}

body.colorful-theme .remark-footer {
    color: rgba(255, 255, 255, 0.5);
}

/* Pagination */
body.colorful-theme .page-link {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

body.colorful-theme .page-link:hover {
    background: linear-gradient(135deg, #9333ea, #db2777);
    border-color: transparent;
}

body.colorful-theme .page-item.active .page-link {
    background: linear-gradient(135deg, #9333ea, #db2777);
    border-color: transparent;
}

body.colorful-theme .page-item.disabled .page-link {
    background: rgba(255, 255, 255, 0.02);
    color: rgba(255, 255, 255, 0.3);
}

/* Badge */
body.colorful-theme .badge.bg-primary {
    background: linear-gradient(135deg, #9333ea, #db2777) !important;
}

/* View Title */
body.colorful-theme .view-title h2 {
    color: #ffffff;
}

/* Search Icon */
body.colorful-theme .search-box i {
    color: rgba(255, 255, 255, 0.5);
}

/* Scrollbar */
body.colorful-theme::-webkit-scrollbar {
    width: 8px;
}

body.colorful-theme::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

body.colorful-theme::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

body.colorful-theme::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* SweetAlert2 Dark Theme */
body.colorful-theme .swal2-popup {
    background: rgba(15, 16, 32, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

body.colorful-theme .swal2-title {
    color: #ffffff !important;
}

body.colorful-theme .swal2-html-container {
    color: rgba(255, 255, 255, 0.8) !important;
}

body.colorful-theme .swal2-confirm {
    background: linear-gradient(135deg, #9333ea, #db2777) !important;
}

body.colorful-theme .swal2-cancel {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}