/* ===================================================
   E-Modul Microlearning Interaktif - Dark Mode
   Premium Dark Theme
   =================================================== */

@media (prefers-color-scheme: dark) {
    :root {
        --primary: #60a5fa;
        --primary-dark: #3b82f6;
        --primary-darker: #2563eb;
        --primary-light: rgba(96, 165, 250, 0.12);
        --primary-lighter: rgba(96, 165, 250, 0.2);
        --primary-gradient: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%);
        --primary-gradient-soft: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
        --bg: #0b1120;
        --bg-secondary: #111827;
        --bg-tertiary: #1e293b;
        --text: #f1f5f9;
        --text-secondary: #94a3b8;
        --text-muted: #64748b;
        --border: #1e293b;
        --border-light: #1e293b;
        --success: #34d399;
        --success-light: rgba(52, 211, 153, 0.12);
        --warning: #fbbf24;
        --warning-light: rgba(251, 191, 36, 0.12);
        --error: #f87171;
        --error-light: rgba(248, 113, 113, 0.12);
        --info: #60a5fa;
        --info-light: rgba(96, 165, 250, 0.12);
        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
        --shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.35);
        --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.4);
        --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.5);
        --shadow-primary: 0 4px 14px rgba(59, 130, 246, 0.3);
        --shadow-primary-lg: 0 8px 30px rgba(59, 130, 246, 0.4);
        --glass-bg: rgba(17, 24, 39, 0.8);
        --glass-border: rgba(255, 255, 255, 0.06);
        --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    }

    body {
        background: var(--bg);
        color: var(--text);
    }

    /* Navbar */
    .navbar {
        background: rgba(11, 17, 32, 0.9);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom: 1px solid rgba(30, 41, 59, 0.8);
    }

    .navbar.scrolled {
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
    }

    .navbar-link {
        color: var(--text-secondary);
    }

    .navbar-link:hover {
        background: var(--primary-light);
        color: var(--primary);
    }

    .user-name {
        color: var(--text);
    }

    .navbar-toggle:hover {
        background: var(--bg-tertiary);
    }

    /* Cards & Containers */
    .stat-card,
    .image-card-dashboard,
    .upload-form,
    .dashboard-filter {
        background: var(--bg-secondary);
        border-color: var(--border);
    }

    .card-desc {
        color: var(--text-secondary);
    }

    .card-meta {
        color: var(--text-muted);
    }

    .card-header-info h3 {
        color: var(--text);
    }

    .badge-materi {
        background: var(--primary-light);
        color: var(--primary);
        border-color: var(--primary-lighter);
    }

    /* Form elements */
    .filter-group input,
    .filter-group select,
    .form-group input[type="text"],
    .form-group textarea {
        background: var(--bg);
        border-color: var(--border);
        color: var(--text);
    }

    .filter-group input:focus,
    .filter-group select:focus,
    .form-group input[type="text"]:focus,
    .form-group textarea:focus {
        background: var(--bg-secondary);
        border-color: var(--primary);
        box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.1);
    }

    .filter-group i {
        color: var(--text-muted);
    }

    .filter-group select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    }

    /* File upload */
    .file-upload {
        background: var(--bg);
        border-color: var(--border);
    }

    .file-upload:hover {
        background: var(--primary-light);
        border-color: var(--primary);
    }

    .file-upload-placeholder p {
        color: var(--text-secondary);
    }

    /* Buttons */
    .btn-secondary {
        background: var(--bg-tertiary);
        border-color: var(--border);
        color: var(--text);
    }

    .btn-secondary:hover {
        background: var(--border);
    }

    .btn-outline {
        border-color: var(--border);
        color: var(--text-secondary);
    }

    .btn-outline:hover {
        border-color: var(--primary);
        color: var(--primary);
        background: var(--primary-light);
    }

    .btn-ghost:hover {
        background: var(--bg-tertiary);
        color: var(--text);
    }

    .btn-warning {
        background: var(--warning-light);
        color: #fbbf24;
        border-color: rgba(251, 191, 36, 0.3);
    }

    .btn-warning:hover {
        background: rgba(251, 191, 36, 0.2);
    }

    .btn-danger {
        background: var(--error-light);
        color: #f87171;
        border-color: rgba(248, 113, 113, 0.3);
    }

    .btn-danger:hover {
        background: rgba(248, 113, 113, 0.2);
    }

    .btn-success {
        background: var(--success-light);
        color: #34d399;
        border-color: rgba(52, 211, 153, 0.3);
    }

    .btn-success:hover {
        background: rgba(52, 211, 153, 0.2);
    }

    /* Pagination */
    .page-link {
        border-color: var(--border);
        color: var(--text-secondary);
        background: var(--bg-secondary);
    }

    .page-link:hover {
        background: var(--primary-light);
        border-color: var(--primary);
        color: var(--primary);
    }

    .page-link.active {
        background: var(--primary-gradient);
        color: white;
        border-color: var(--primary);
    }

    /* Footer */
    .footer {
        background: var(--bg-secondary);
        border-top-color: var(--border);
    }

    /* Alert */
    .alert-error {
        background: var(--error-light);
        border-color: rgba(248, 113, 113, 0.3);
        color: #f87171;
    }

    .alert-success {
        background: var(--success-light);
        border-color: rgba(52, 211, 153, 0.3);
        color: #34d399;
    }

    .alert-info {
        background: var(--info-light);
        border-color: rgba(96, 165, 250, 0.3);
        color: var(--primary);
    }

    /* Current image */
    .current-image img {
        border-color: var(--border);
    }

    /* Empty state */
    .empty-state {
        background: var(--bg-secondary);
        border-color: var(--border);
    }

    .empty-state i {
        color: var(--text-muted);
    }

    .empty-state h3 {
        color: var(--text-secondary);
    }

    /* Toast */
    .toast {
        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
    }

    /* Navbar mobile */
    @media (max-width: 768px) {
        .navbar-menu {
            background: rgba(11, 17, 32, 0.98);
            backdrop-filter: blur(20px);
            border-bottom-color: var(--border);
        }
        .navbar-user {
            border-top-color: var(--border);
        }
    }

    /* Skeleton */
    .skeleton {
        background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
    }

    /* Scrollbar */
    ::-webkit-scrollbar-thumb {
        background: var(--border);
    }

    ::-webkit-scrollbar-thumb:hover {
        background: var(--text-muted);
    }

    /* Hero & Gallery sections (index.php) */
    .hero-section h1 {
        color: var(--text);
    }

    .media-card {
        background: var(--bg-secondary);
        border-color: var(--border);
    }

    .media-card:hover {
        border-color: var(--primary-lighter);
    }

    .media-card .card-thumb {
        background: var(--bg-tertiary);
    }

    .media-card .card-body .card-title {
        color: var(--text);
    }

    .filter-tabs {
        background: var(--bg-secondary);
        border-color: var(--border);
    }

    .filter-tabs a {
        color: var(--text-secondary);
    }

    .filter-tabs a:hover {
        background: var(--bg-tertiary);
    }

    .search-bar .input-wrap input {
        background: var(--bg);
        border-color: var(--border);
        color: var(--text);
    }

    .search-bar .input-wrap input:focus {
        background: var(--bg-secondary);
        border-color: var(--primary);
    }

    .search-bar .btn-search {
        background: var(--primary);
    }

    .pagination-wrap a {
        background: var(--bg-secondary);
        border-color: var(--border);
        color: var(--text-secondary);
    }

    .pagination-wrap a:hover {
        border-color: var(--primary);
        color: var(--primary);
    }

    .pagination-wrap a.active {
        background: var(--primary);
        color: white;
        border-color: var(--primary);
    }

    /* Stat card accent */
    .stat-card::before {
        background: var(--primary-gradient);
    }

    /* Image card overlay */
    .card-stats-overlay span {
        background: rgba(0, 0, 0, 0.5);
    }

    /* ============================
       DASHBOARD GURU (custom styles)
       ============================ */
    .top-header {
        background: var(--bg-secondary) !important;
        border-bottom-color: var(--border) !important;
    }

    .stat-item {
        background: var(--bg-secondary) !important;
        border-color: var(--border) !important;
    }

    .stat-item .stat-info .num {
        color: var(--text) !important;
    }

    .stat-item .stat-info .lbl {
        color: var(--text-secondary) !important;
    }

    .table-card {
        background: var(--bg-secondary) !important;
        border-color: var(--border) !important;
    }

    .table-card .table-header {
        border-bottom-color: var(--border) !important;
    }

    .table-card .table-header h3 {
        color: var(--text);
    }

    table.dtable thead {
        background: var(--bg-tertiary) !important;
    }

    table.dtable thead th {
        color: var(--text-muted) !important;
        border-bottom-color: var(--border) !important;
    }

    table.dtable tbody tr {
        border-bottom-color: var(--border) !important;
    }

    table.dtable tbody tr:hover {
        background: var(--bg-tertiary) !important;
    }

    table.dtable tbody td {
        color: var(--text) !important;
    }

    table.dtable .td-title .main {
        color: var(--text);
    }

    table.dtable .td-title .sub {
        color: var(--text-muted);
    }

    table.dtable .stat-num {
        background: var(--bg-tertiary) !important;
        color: var(--text-secondary) !important;
    }

    .empty-state-card {
        background: var(--bg-secondary) !important;
        border-color: var(--border) !important;
    }

    .empty-state-card i {
        color: var(--text-muted) !important;
    }

    .empty-state-card h3 {
        color: var(--text-secondary) !important;
    }

    .empty-state-card p {
        color: var(--text-muted) !important;
    }

    .filter-bar .input-wrap input,
    .filter-bar select {
        background: var(--bg) !important;
        border-color: var(--border) !important;
        color: var(--text) !important;
    }

    .filter-bar .input-wrap input:focus,
    .filter-bar select:focus {
        background: var(--bg-secondary) !important;
        border-color: var(--primary) !important;
    }

    .filter-bar .btn-reset {
        border-color: var(--border) !important;
        color: var(--text-secondary) !important;
    }

    .filter-bar .btn-reset:hover {
        border-color: var(--text-muted) !important;
        color: var(--text) !important;
    }

    table.dtable .actions .btn-action.primary {
        background: var(--primary-light) !important;
        color: var(--primary) !important;
    }

    table.dtable .actions .btn-action.secondary {
        background: var(--bg-tertiary) !important;
        color: var(--text-secondary) !important;
    }

    table.dtable .actions .btn-action.warning {
        background: rgba(251, 191, 36, 0.15) !important;
        color: #fbbf24 !important;
    }

    table.dtable .actions .btn-action.danger {
        background: var(--error-light) !important;
        color: #f87171 !important;
    }

    .breadcrumb a {
        color: var(--text-muted) !important;
    }

    /* ============================
       DASHBOARD SISWA (custom styles)
       ============================ */
    .note-card .note-footer .btn-delete {
        background: var(--error-light) !important;
    }

    .note-card .note-header .materi-badge {
        background: var(--info-light) !important;
        color: var(--primary) !important;
    }

    .stat-card .stat-icon {
        background: var(--primary-light) !important;
        color: var(--primary) !important;
    }
}