/* ===== MATERI PAGE - GLASSMORPHISM REDESIGN (MODEL B) ===== */

/* Gradient Background & Ornamental Backgrounds */
.materi-page-wrapper {
    background: 
        radial-gradient(rgba(99, 102, 241, 0.07) 1.5px, transparent 1.5px) repeat fixed,
        linear-gradient(135deg, #e0e7ff 0%, #f0fdf4 30%, #fdf4ff 60%, #eff6ff 100%);
    background-size: 24px 24px, auto;
    min-height: 100vh;
    position: relative;
}

.materi-page-wrapper::before {
    content: '';
    position: fixed;
    top: -20%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(167, 139, 250, 0.18) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.materi-page-wrapper::after {
    content: '';
    position: fixed;
    bottom: -10%;
    left: -5%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(110, 231, 183, 0.18) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Glass Panel Base - Explicit Visible Border */
.glass-panel {
    background: rgba(255, 255, 255, 0.70) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1.5px solid rgba(16, 185, 129, 0.25) !important; /* Emerald Tinted Border */
    border-radius: 1rem !important;
    box-shadow: 0 4px 24px rgba(100, 116, 139, 0.1), 0 1px 4px rgba(0, 0, 0, 0.04) !important;
}

/* Glass Card - Explicit Visible Border */
.glass-card {
    background: rgba(255, 255, 255, 0.65) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1.5px solid rgba(203, 213, 225, 0.8) !important; /* Defined border so it doesn't blend in */
    border-radius: 1.15rem !important;
    box-shadow: 0 6px 28px rgba(100, 116, 139, 0.12), 0 1px 6px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
}

.glass-card:hover {
    background: rgba(255, 255, 255, 0.85) !important;
    box-shadow: 0 12px 40px rgba(100, 116, 139, 0.18), 0 2px 10px rgba(0, 0, 0, 0.07) !important;
    transform: translateY(-4px) !important;
    border-color: rgba(16, 185, 129, 0.45) !important; /* Highlighting border on hover */
    z-index: 10 !important;
}

/* Card Header Glass Tint */
.glass-card-header {
    background: rgba(248, 250, 255, 0.60) !important;
    border-bottom: 1.5px solid rgba(226, 232, 240, 0.8) !important;
    border-radius: 1.15rem 1.15rem 0 0 !important;
}

/* === SOFT BUTTON STYLES WITH EXPLICIT BORDERS === */
.btn-soft-indigo {
    background: #eef2ff !important;
    color: #4f46e5 !important;
    border: 1px solid #a5b4fc !important; /* Strengthened border color */
    transition: all 0.25s ease !important;
}
.btn-soft-indigo:hover {
    background: #e0e7ff !important;
    border-color: #818cf8 !important;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.15) !important;
    transform: translateY(-1px) !important;
}

.btn-soft-violet {
    background: #f6f0ff !important;
    color: #7e3af2 !important;
    border: 1px solid #d8b4fe !important;
    transition: all 0.25s ease !important;
}
.btn-soft-violet:hover {
    background: #f3e8ff !important;
    border-color: #c084fc !important;
    box-shadow: 0 4px 14px rgba(126, 58, 242, 0.15) !important;
    transform: translateY(-1px) !important;
}

.btn-soft-emerald {
    background: #e8f8f2 !important;
    color: #088758 !important;
    border: 1px solid #6ee7b7 !important;
    transition: all 0.25s ease !important;
}
.btn-soft-emerald:hover {
    background: #d1fae5 !important;
    border-color: #34d399 !important;
    box-shadow: 0 4px 14px rgba(8, 135, 88, 0.15) !important;
    transform: translateY(-1px) !important;
}

.btn-soft-purple {
    background: #fdf4ff !important;
    color: #c026d3 !important;
    border: 1px solid #e879f9 !important;
    transition: all 0.25s ease !important;
}
.btn-soft-purple:hover {
    background: #fae8ff !important;
    border-color: #d946ef !important;
    box-shadow: 0 4px 14px rgba(192, 38, 211, 0.15) !important;
    transform: translateY(-1px) !important;
}

.btn-soft-sky {
    background: #f0f9ff !important;
    color: #0284c7 !important;
    border: 1px solid #7dd3fc !important;
    transition: all 0.25s ease !important;
}
.btn-soft-sky:hover {
    background: #e0f2fe !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.15) !important;
    transform: translateY(-1px) !important;
}

.btn-soft-teal {
    background: #f0fdfa !important;
    color: #0d9488 !important;
    border: 1px solid #5eead4 !important;
    transition: all 0.25s ease !important;
}
.btn-soft-teal:hover {
    background: #ccfbf1 !important;
    border-color: #2dd4bf !important;
    box-shadow: 0 4px 14px rgba(13, 148, 136, 0.15) !important;
    transform: translateY(-1px) !important;
}

.btn-soft-fuchsia {
    background: #fdf4ff !important;
    color: #c026d3 !important;
    border: 1px solid #e879f9 !important;
    transition: all 0.25s ease !important;
}
.btn-soft-fuchsia:hover {
    background: #fae8ff !important;
    border-color: #d946ef !important;
    box-shadow: 0 4px 14px rgba(192, 38, 211, 0.15) !important;
    transform: translateY(-2px) !important;
}

.btn-soft-green {
    background: #f0fdf4 !important;
    color: #16a34a !important;
    border: 1px solid #86efac !important;
    transition: all 0.25s ease !important;
}
.btn-soft-green:hover {
    background: #dcfce7 !important;
    border-color: #4ade80 !important;
    box-shadow: 0 4px 14px rgba(22, 163, 74, 0.15) !important;
    transform: translateY(-2px) !important;
}

.btn-soft-blue {
    background: #eff6ff !important;
    color: #1c64f2 !important;
    border: 1px solid #a4cafe !important;
    transition: all 0.25s ease !important;
}
.btn-soft-blue:hover {
    background: #e1effe !important;
    border-color: #76a9fa !important;
    box-shadow: 0 4px 14px rgba(28, 100, 242, 0.15) !important;
    transform: translateY(-2px) !important;
}

.btn-soft-slate {
    background: #f8fafc !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
    transition: all 0.25s ease !important;
}
.btn-soft-slate:hover {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 14px rgba(71, 85, 105, 0.15) !important;
    transform: translateY(-2px) !important;
}

.btn-soft-red {
    background: #fff5f5 !important;
    color: #e02424 !important;
    border: 1px solid #f8b4b4 !important;
    transition: all 0.25s ease !important;
}
.btn-soft-red:hover {
    background: #fde8e8 !important;
    border-color: #f87171 !important;
    box-shadow: 0 4px 14px rgba(224, 36, 36, 0.15) !important;
    transform: translateY(-2px) !important;
}

/* Info grid soft badges */
.badge-start {
    background: #eff6ff !important;
    color: #1c64f2 !important;
    border: 1px solid #cbd5e1 !important;
}
.badge-end {
    background: #fff5f5 !important;
    color: #e02424 !important;
    border: 1px solid #fde8e8 !important;
}
.badge-count {
    background: #e8f8f2 !important;
    color: #088758 !important;
    border: 1px solid #a3e2cb !important;
}
.badge-duration {
    background: #fffbeb !important;
    color: #d97706 !important;
    border: 1px solid #fef3c7 !important;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.school-section {
    animation: fadeInUp 0.4s ease both;
}

/* ── Dark Mode System (Obsidian) ── */
.dark .materi-page-wrapper {
    background: 
        radial-gradient(rgba(139, 92, 246, 0.08) 1.5px, transparent 1.5px) repeat fixed,
        radial-gradient(circle at 0% 0%, #1e1b4b 0%, #0f172a 50%, #020617 100%) !important;
    background-size: 24px 24px, auto !important;
}
.dark .materi-page-wrapper::before {
    background: radial-gradient(circle, rgba(99, 102, 241, 0.12) 0%, transparent 70%);
}
.dark .materi-page-wrapper::after {
    background: radial-gradient(circle, rgba(16, 185, 129, 0.10) 0%, transparent 70%);
}

.dark .glass-panel {
    background: rgba(15, 23, 42, 0.75) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border-color: rgba(52, 211, 153, 0.35) !important;
}

.dark .glass-card {
    background: linear-gradient(165deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%) !important;
    backdrop-filter: blur(32px) !important;
    -webkit-backdrop-filter: blur(32px) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
}

.dark .glass-card:hover {
    background: linear-gradient(165deg, rgba(30, 41, 59, 1) 0%, rgba(15, 23, 42, 1) 100%) !important;
    border-color: rgba(16, 185, 129, 0.5) !important;
    box-shadow: 0 0 25px rgba(16, 185, 129, 0.15), 0 15px 45px rgba(0, 0, 0, 0.5) !important;
}

.dark .glass-card-header {
    background: rgba(15, 23, 42, 0.4) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

/* Dark Soft Buttons */
.dark .btn-soft-indigo { background: rgba(99, 102, 241, 0.08) !important; color: #818cf8 !important; border-color: rgba(99, 102, 241, 0.35) !important; }
.dark .btn-soft-indigo:hover { background: rgba(99, 102, 241, 0.15) !important; }
.dark .btn-soft-emerald { background: rgba(16, 185, 129, 0.08) !important; color: #34d399 !important; border-color: rgba(16, 185, 129, 0.35) !important; }
.dark .btn-soft-emerald:hover { background: rgba(16, 185, 129, 0.15) !important; }
.dark .btn-soft-purple { background: rgba(217, 70, 239, 0.08) !important; color: #f472b6; border-color: rgba(217, 70, 239, 0.35) !important; }
.dark .btn-soft-purple:hover { background: rgba(217, 70, 239, 0.15) !important; }
.dark .btn-soft-slate { background: rgba(148, 163, 184, 0.08) !important; color: #94a3b8 !important; border-color: rgba(148, 163, 184, 0.35) !important; }
.dark .btn-soft-slate:hover { background: rgba(148, 163, 184, 0.15) !important; }
.dark .btn-soft-red { background: rgba(239, 68, 68, 0.08) !important; color: #f87171 !important; border-color: rgba(239, 68, 68, 0.35) !important; }
.dark .btn-soft-red:hover { background: rgba(239, 68, 68, 0.15) !important; }
.dark .btn-soft-teal { background: rgba(45, 212, 191, 0.08) !important; color: #5eead4; border-color: rgba(45, 212, 191, 0.35) !important; }
.dark .btn-soft-teal:hover { background: rgba(45, 212, 191, 0.15) !important; }
.dark .btn-soft-green { background: rgba(34, 197, 94, 0.08) !important; color: #4ade80; border-color: rgba(34, 197, 94, 0.35) !important; }

/* Horizontal scrollbar styling for subject tabs */
.subject-tabs-container::-webkit-scrollbar {
    height: 5px;
}
.subject-tabs-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.02);
    border-radius: 10px;
}
.subject-tabs-container::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.2);
    border-radius: 10px;
}
.subject-tabs-container::-webkit-scrollbar-thumb:hover {
    background: rgba(99, 102, 241, 0.4);
}
.dark .subject-tabs-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.01);
}
.dark .subject-tabs-container::-webkit-scrollbar-thumb {
    background: rgba(129, 140, 248, 0.2);
    border-radius: 10px;
}
.dark .subject-tabs-container::-webkit-scrollbar-thumb:hover {
    background: rgba(129, 140, 248, 0.4);
}

/* Original Quill Editor CSS & Katex */
.ql-container {
    min-height: 250px;
    font-size: 14px;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}
.ql-toolbar {
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}
#editor-container .ql-editor {
    min-height: 250px;
}
.hover-lift {
    transition: transform 0.2s;
}
.hover-lift:hover {
    transform: translateY(-2px);
}

/* ── Dark Mode: Quill Editor ── */
.dark .ql-toolbar.ql-snow {
    background-color: #334155 !important;
    border-color: #475569 !important;
}
.dark .ql-container.ql-snow {
    background-color: #1e293b !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}
.dark .ql-editor {
    color: #f1f5f9 !important;
}
.dark .ql-editor.ql-blank::before {
    color: #94a3b8 !important;
}
.dark .ql-toolbar .ql-stroke { stroke: #cbd5e1 !important; }
.dark .ql-toolbar .ql-fill { fill: #cbd5e1 !important; }
.dark .ql-toolbar .ql-picker-label { color: #cbd5e1 !important; }
.dark .ql-toolbar .ql-picker-options {
    background-color: #334155 !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}
.dark .ql-toolbar button:hover .ql-stroke,
.dark .ql-toolbar button.ql-active .ql-stroke { stroke: #38bdf8 !important; }
.dark .ql-toolbar button:hover .ql-fill,
.dark .ql-toolbar button.ql-active .ql-fill { fill: #38bdf8 !important; }
.dark .ql-toolbar .ql-picker-label:hover,
.dark .ql-toolbar .ql-picker-label.ql-active { color: #38bdf8 !important; }

/* Modal Overlay Glassmorphism */
#materiModal, #deleteConfirmModal, #toggleVisibilityModal, #distributeModal, #modal-modul-ajar {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: all 0.3s ease;
}
.dark #materiModal, .dark #deleteConfirmModal, .dark #toggleVisibilityModal, .dark #distributeModal, .dark #modal-modul-ajar {
    background-color: rgba(0, 0, 0, 0.4) !important;
}

/* ── Mobile Responsive Enhancements ── */
@media (max-width: 767px) {
    .ql-toolbar.ql-snow {
        padding: 4px 6px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 2px !important;
        background: #f8fafc !important;
    }
    .ql-toolbar.ql-snow .ql-formats {
        margin-right: 4px !important;
        margin-bottom: 2px !important;
        display: flex !important;
        align-items: center !important;
        gap: 1px !important;
    }
    .ql-toolbar.ql-snow button {
        width: 24px !important;
        height: 24px !important;
        padding: 3px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .ql-toolbar.ql-snow button svg {
        width: 14px !important;
        height: 14px !important;
    }
    .ql-toolbar.ql-snow .ql-picker {
        height: 24px !important;
        font-size: 11px !important;
    }
    .ql-toolbar.ql-snow .ql-picker-label {
        padding-left: 4px !important;
        padding-right: 14px !important;
        display: flex !important;
        align-items: center !important;
    }
    .ql-toolbar.ql-snow .ql-font { width: 100px !important; }
    .ql-toolbar.ql-snow .ql-size { width: 65px !important; }
    .ql-toolbar.ql-snow .ql-picker-options { font-size: 12px !important; }
    #materiModal .relative.flex-col { height: 100vh !important; }
    .modal-responsive-wrapper {
        padding: 1rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .modal-responsive-content {
        max-height: calc(100vh - 2rem) !important;
        width: 100% !important;
        margin: auto !important;
    }
    #modal-ai-generator .flex-col.lg:flex-row {
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        flex: 1 !important;
    }
    #modal-ai-generator .lg\:w-80 {
        width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(226, 232, 240, 0.1) !important;
        flex-shrink: 0 !important;
        max-height: 40vh !important;
        overflow-y: auto !important;
    }
    #modal-ai-generator #ai-materi-manual-prompt-container {
        height: 100% !important;
        max-height: 100% !important;
        overflow-y: auto !important;
        padding-bottom: 2rem !important;
    }
    #modal-ai-generator .flex-1.flex.flex-col.relative {
        min-height: 400px !important;
    }
    #modal-ai-generator #ai-materi-preview-container {
        padding: 1.5rem !important;
        overflow-y: visible !important;
    }
    @keyframes pulse-soft {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.7; }
    }
    .animate-pulse-soft { animation: pulse-soft 2s infinite ease-in-out; }
}

/* Universal elements inside AI Generated & Quill editor */
#ai-materi-preview-content h1, .ai-content h1, .ql-editor h1, .content-display h1 { font-size: 1.875rem; font-weight: 800; color: #4f46e5 !important; margin-top: 1.5rem; margin-bottom: 1rem; line-height: 1.2; }
#ai-materi-preview-content h2, .ai-content h2, .ql-editor h2, .content-display h2 { font-size: 1.5rem; font-weight: 700; color: #1e293b !important; margin-top: 1.5rem; margin-bottom: 0.75rem; border-bottom: 2px solid #f1f5f9; padding-bottom: 0.25rem; }
#ai-materi-preview-content h3, .ai-content h3, .ql-editor h3, .content-display h3 { font-size: 1.25rem; font-weight: 700; color: #334155 !important; margin-top: 1.25rem; margin-bottom: 0.5rem; }
#ai-materi-preview-content p, .ai-content p, .ql-editor p, .content-display p { font-size: 1rem; color: #475569 !important; line-height: 1.6; margin-bottom: 1rem; }
#ai-materi-preview-content ul, .ai-content ul, .content-display ul { margin-bottom: 1rem; list-style-type: disc !important; padding-left: 1.5rem !important; }
#ai-materi-preview-content li, .ai-content li, .content-display li { margin-bottom: 0.25rem; color: #475569 !important; list-style: inherit !important; }
#ai-materi-preview-content table, .ai-content table, .ql-editor table, .content-display table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.95rem; border: 1px solid #e2e8f0; }
#ai-materi-preview-content th, .ai-content th, .ql-editor th, .content-display th { background-color: #f8fafc !important; border: 1px solid #e2e8f0; padding: 12px 15px; text-align: left; font-weight: 800; color: #1e293b !important; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; }
#ai-materi-preview-content td, .ai-content td, .ql-editor td, .content-display td { border: 1px solid #e2e8f0; padding: 12px 15px; color: #475569 !important; vertical-align: top; line-height: 1.5; }
#ai-materi-preview-content tr:nth-child(even), .ai-content tr:nth-child(even), .ql-editor tr:nth-child(even), .content-display tr:nth-child(even) { background-color: #fcfcfd; }
#ai-materi-preview-content blockquote, .ai-content blockquote, .ql-editor blockquote, .content-display blockquote { border-left: 4px solid #6366f1 !important; background: #f5f3ff !important; padding: 0.75rem 1rem !important; margin: 1rem 0 !important; font-style: italic !important; color: #4338ca !important; border-radius: 0 0.5rem 0.5rem 0 !important; }

/* Dark overrides for content elements */
.dark #ai-materi-preview-content h1, .dark .ai-content h1, .dark .ql-editor h1, .dark .content-display h1 { color: #818cf8 !important; }
.dark #ai-materi-preview-content h2, .dark .ai-content h2, .dark .ql-editor h2, .dark .content-display h2 { color: #f1f5f9 !important; border-color: #334155 !important; }
.dark #ai-materi-preview-content h3, .dark .ai-content h3, .dark .ql-editor h3, .dark .content-display h3 { color: #e2e8f0 !important; }
.dark #ai-materi-preview-content p, .dark .ai-content p, .dark .ql-editor p, .dark .content-display p { color: #cbd5e1 !important; }
.dark #ai-materi-preview-content li, .dark .ai-content li, .dark .ql-editor li, .dark .content-display li { color: #cbd5e1 !important; }
.dark #ai-materi-preview-content th, .dark .ai-content th, .dark .ql-editor th, .dark .content-display th { background-color: #1e293b !important; border-color: #475569 !important; color: #f1f5f9 !important; }
.dark #ai-materi-preview-content td, .dark .ai-content td, .dark .ql-editor td, .dark .content-display td { border-color: #334155 !important; color: #cbd5e1 !important; }
.dark #ai-materi-preview-content tr:nth-child(even), .dark .ai-content tr:nth-child(even), .dark .ql-editor tr:nth-child(even), .dark .content-display tr:nth-child(even) { background-color: rgba(30, 41, 59, 0.5) !important; }
.dark #ai-materi-preview-content blockquote, .dark .ai-content blockquote, .dark .ql-editor blockquote, .dark .content-display blockquote { background: #1e1b4b !important; color: #c7d2fe !important; border-color: #818cf8 !important; }

/* Cleanup hardcoded inline styling in AI preview under dark mode */
.dark #ai-materi-preview-content [style*="background"],
.dark #ai-materi-preview-content div[style*="background"],
.dark #ai-materi-preview-content section[style*="background"] {
    background-color: transparent !important;
    background: transparent !important;
}
.dark #ai-materi-preview-content [style*="color"] {
    color: #cbd5e1 !important;
}
.dark #ai-materi-preview-content h1, .dark #ai-materi-preview-content h2, .dark #ai-materi-preview-content h3 {
    color: #818cf8 !important;
}
.dark #ai-materi-preview-content strong {
    color: #f1f5f9 !important;
}
.dark .ai-case-study { background-color: rgba(14, 165, 233, 0.1) !important; border-color: #0ea5e9 !important; }
.dark .ai-case-study h3 { color: #7dd3fc !important; }
.dark .ai-visual-box { background-color: rgba(245, 158, 11, 0.1) !important; border-color: rgba(245, 158, 11, 0.4) !important; color: #fcd34d !important; }
.dark .ai-step-basic { background-color: rgba(34, 197, 94, 0.1) !important; border-color: #22c55e !important; }
.dark .ai-step-medium { background-color: rgba(245, 158, 11, 0.1) !important; border-color: #f59e0b !important; }
.dark .ai-step-advanced { background-color: rgba(239, 68, 68, 0.1) !important; border-color: #ef4444 !important; }

.dark #ai-materi-preview-content [style*="background-color: #ffffff"],
.dark #ai-materi-preview-content [style*="background: #ffffff"],
.dark #ai-materi-preview-content [style*="background: white"],
.dark #ai-materi-preview-content [style*="background-color: white"] {
    background-color: transparent !important;
    color: #f1f5f9 !important;
}
.dark #ai-materi-preview-content [style*="color: #000000"],
.dark #ai-materi-preview-content [style*="color: black"],
.dark #ai-materi-preview-content [style*="color: #1a202c"] {
    color: #cbd5e1 !important;
}
.dark div[style*="background-color: #f0f9ff"] { background-color: rgba(14, 165, 233, 0.1) !important; }
.dark div[style*="background-color: #f0f9ff"] h3 { color: #7dd3fc !important; }
.dark div[style*="background: #fffbeb"] { background-color: rgba(245, 158, 11, 0.1) !important; color: #fcd34d !important; }
.dark div[style*="background: #f0fdf4"] { background-color: rgba(34, 197, 94, 0.1) !important; }
.dark div[style*="background: #fef2f2"] { background-color: rgba(239, 68, 68, 0.1) !important; }

/* RPP Contenteditable Editor */
.rpp-editor { font-size: 0.9rem; line-height: 1.7; color: #334155; }
.rpp-editor:focus { background-color: #fefefe; }
.dark .rpp-editor { color: #e2e8f0; }
.rpp-editor:empty::before { content: attr(data-placeholder); color: #94a3b8; pointer-events: none; display: block; }
.rpp-editor table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.rpp-editor th { background-color: #eef2ff; border: 1px solid #c7d2fe; padding: 10px 12px; font-weight: 800; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: #3730a3; }
.rpp-editor td { border: 1px solid #e2e8f0; padding: 10px 12px; vertical-align: top; }
.rpp-editor tr:nth-child(even) { background-color: #f8fafc; }
.dark .rpp-editor th { background-color: #1e1b4b; border-color: #4338ca; color: #a5b4fc; }
.dark .rpp-editor td { border-color: #334155; color: #e2e8f0; }
.dark .rpp-editor tr:nth-child(even) { background-color: rgba(30, 41, 59, 0.5); }
.rpp-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1px solid #e2e8f0; border-radius: 6px; background: #f8fafc; font-size: 12px; color: #475569; cursor: pointer; transition: all 0.15s; }
.rpp-btn:hover { background: #e2e8f0; color: #1e293b; }
.dark .rpp-btn { background: #334155; border-color: #475569; color: #cbd5e1; }
.dark .rpp-btn:hover { background: #475569; color: #fff; }
.ql-editor { line-height: 1.6; }
.ql-editor p { margin-bottom: 1rem; }

/* Custom Tooltip pt */
[data-tooltip-pt] { position: relative; }
[data-tooltip-pt]::after {
    content: attr(data-tooltip-pt);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    background: rgba(15, 23, 42, 0.95);
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.1);
    pointer-events: none;
    line-height: 1.4;
}
[data-tooltip-pt]::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: rgba(15, 23, 42, 0.95) transparent transparent transparent;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10000;
    pointer-events: none;
}
[data-tooltip-pt]:hover::after, [data-tooltip-pt]:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
[data-tooltip-pt]:has([data-tooltip-pt]:hover)::after,
[data-tooltip-pt]:has([data-tooltip-pt]:hover)::before {
    opacity: 0 !important;
    visibility: hidden !important;
}
[data-tooltip-pt-pos="bottom"]::after { top: calc(100% + 8px); bottom: auto; }
[data-tooltip-pt-pos="bottom"]::before {
    top: calc(100% + 2px);
    bottom: auto;
    border-width: 0 6px 6px 6px;
    border-color: transparent transparent rgba(15, 23, 42, 0.95) transparent;
    transform: translateX(-50%) translateY(-5px);
}
[data-tooltip-pt-pos="bottom"]:hover::after, [data-tooltip-pt-pos="bottom"]:hover::before {
    transform: translateX(-50%) translateY(0);
}
.dark [data-tooltip-pt]::after {
    background: rgba(30, 41, 59, 0.98);
    border-color: rgba(52, 211, 153, 0.3);
}
.dark [data-tooltip-pt]::before { border-top-color: rgba(30, 41, 59, 0.98); }
.dark [data-tooltip-pt-pos="bottom"]::before {
    border-top-color: transparent;
    border-bottom-color: rgba(30, 41, 59, 0.98);
}

/* Mobile responsive overflow blocker */
@media (max-width: 767px) {
    .min-h-screen.bg-slate-50,
    .min-h-screen.dark\:bg-slate-950,
    [class*="materi"],
    .materi-page-wrapper {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
}

/* ── Mobile Optimization (HP Screen ≤640px) ── */
@media (max-width: 640px) {

    /* Page wrapper padding */
    .materi-page-wrapper {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        padding-top: 0.5rem !important;
    }

    /* Header Panel (glass-panel) */
    .glass-panel {
        padding: 10px 12px !important;
        border-radius: 0.75rem !important;
    }

    /* Header title & icon */
    .glass-panel h1 {
        font-size: 13px !important;
        font-weight: 800 !important;
    }
    .glass-panel p.text-xs {
        font-size: 10px !important;
    }
    .glass-panel .icon-badge-card {
        width: 32px !important;
        height: 32px !important;
        padding: 6px !important;
    }
    .glass-panel .icon-badge-card i {
        font-size: 13px !important;
    }

    /* Header action buttons */
    .btn-soft-slate,
    .btn-soft-indigo,
    .btn-soft-purple,
    .btn-soft-emerald,
    .btn-soft-teal,
    .btn-soft-sky,
    .btn-soft-red,
    .btn-soft-green,
    .btn-soft-violet,
    .btn-soft-fuchsia,
    .btn-soft-blue {
        padding: 0.25rem 0.4rem !important;
        font-size: 10px !important;
        height: 26px !important;
        border-radius: 0.375rem !important;
        gap: 2px !important;
    }
    .btn-soft-slate i,
    .btn-soft-indigo i,
    .btn-soft-purple i,
    .btn-soft-emerald i,
    .btn-soft-teal i,
    .btn-soft-sky i,
    .btn-soft-red i,
    .btn-soft-green i,
    .btn-soft-violet i,
    .btn-soft-fuchsia i,
    .btn-soft-blue i {
        font-size: 9px !important;
    }

    /* School section header */
    .school-section .glass-panel {
        padding: 8px 10px !important;
    }
    .school-section .glass-panel h2 {
        font-size: 13px !important;
        font-weight: 800 !important;
    }
    .school-section .glass-panel p {
        font-size: 9px !important;
    }
    .school-section .glass-panel .w-10.h-10,
    .school-section .glass-panel [class*="w-10"][class*="h-10"] {
        width: 30px !important;
        height: 30px !important;
        border-radius: 8px !important;
    }
    .school-section .glass-panel .w-10.h-10 i,
    .school-section .glass-panel [class*="w-10"][class*="h-10"] i {
        font-size: 12px !important;
    }
    .school-section .glass-panel .fa-chevron-down {
        font-size: 10px !important;
    }

    /* Class group header */
    .class-group .glass-panel {
        padding: 6px 10px !important;
    }
    .class-group .glass-panel span.bg-emerald-600 {
        font-size: 10px !important;
        padding: 3px 8px !important;
        border-radius: 6px !important;
    }
    .class-group .glass-panel span.bg-emerald-600 i {
        font-size: 9px !important;
    }
    .class-group .glass-panel .text-\[10px\] {
        font-size: 9px !important;
    }
    .class-group .glass-panel .fa-chevron-down {
        font-size: 10px !important;
    }

    /* Card grid gap */
    .grid.grid-cols-1.md\:grid-cols-2 {
        gap: 10px !important;
    }

    /* Glass card */
    .glass-card {
        border-radius: 0.875rem !important;
    }
    .glass-card:hover {
        transform: translateY(-2px) !important;
    }

    /* Card header */
    .glass-card .p-3\.5,
    .glass-card .p-5,
    .glass-card [class*="p-3\.5"],
    .glass-card [class*="sm\:p-5"] {
        padding: 8px 10px !important;
    }

    /* Subject badge (e.g. "Matematika") */
    .glass-card span[class*="rounded-full"] {
        font-size: 10px !important;
        padding: 2px 6px !important;
    }

    /* Timestamp text */
    .glass-card .text-\[10px\] {
        font-size: 9px !important;
    }
    .glass-card .text-\[10px\] i {
        font-size: 9px !important;
    }

    /* Card title h3 */
    .glass-card h3 {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }

    /* RPP badge */
    .badge-rpp {
        font-size: 8px !important;
        padding: 1px 3px !important;
    }

    /* Content description */
    .glass-card p.text-xs,
    .glass-card p.line-clamp-2 {
        font-size: 10px !important;
        margin-top: 2px !important;
    }

    /* Connections grid (Pretest/Ujian/Latihan/Remedi) */
    .glass-card .grid.grid-cols-4 {
        padding: 4px !important;
        gap: 4px !important;
        border-radius: 6px !important;
    }
    .glass-card .grid.grid-cols-4 > div {
        padding: 3px 2px !important;
        border-radius: 4px !important;
    }
    .glass-card .grid.grid-cols-4 .text-\[9px\] {
        font-size: 8px !important;
    }
    .glass-card .grid.grid-cols-4 .text-xs {
        font-size: 10px !important;
    }
    .glass-card .grid.grid-cols-4 i {
        font-size: 9px !important;
    }

    /* Creator info */
    .glass-card .h-5.w-5 {
        width: 16px !important;
        height: 16px !important;
        font-size: 8px !important;
    }
    .glass-card .text-xs.font-bold.text-gray-500 {
        font-size: 10px !important;
    }

    /* Card footer */
    .glass-card .border-t {
        padding: 6px 10px !important;
    }

    /* Media attachment icon buttons */
    .glass-card .w-7.h-7 {
        width: 22px !important;
        height: 22px !important;
        border-radius: 5px !important;
    }
    .glass-card .w-7.h-7 i {
        font-size: 9px !important;
    }

    /* Action buttons in card footer */
    .glass-card .p-1\.5.rounded-lg {
        padding: 4px !important;
        border-radius: 5px !important;
    }
    .glass-card .p-1\.5.rounded-lg i {
        font-size: 9px !important;
    }

    /* No media text */
    .glass-card span.text-xs.italic {
        font-size: 9px !important;
    }

    /* Background subject icon - make smaller on mobile */
    .glass-card .-right-3.-bottom-3 {
        font-size: 60px !important;
    }

    /* Space between school sections */
    .space-y-12 {
        gap: 1.5rem !important;
    }
    .space-y-12 > * + * {
        margin-top: 1.5rem !important;
    }
    .space-y-6 {
        gap: 0.75rem !important;
    }
    .space-y-6 > * + * {
        margin-top: 0.75rem !important;
    }
    .space-y-4 > * + * {
        margin-top: 0.5rem !important;
    }

    /* md:pl-4 indent for nested content */
    .md\:pl-4 {
        padding-left: 0 !important;
    }

    /* Filter panel (from filter.blade.php) */
    #filter-panel,
    #filterPanel,
    [id*="filter"] .glass-panel {
        padding: 8px !important;
        border-radius: 0.75rem !important;
    }
    #filter-panel input,
    #filter-panel select,
    #filterPanel input,
    #filterPanel select {
        height: 28px !important;
        font-size: 10px !important;
        padding: 2px 6px !important;
        border-radius: 6px !important;
    }
    #filter-panel label,
    #filterPanel label {
        font-size: 10px !important;
    }
}

/* Fallback Styles for AI Generated Layout Blocks in Light Mode */
.ai-case-study {
    background-color: #f0f9ff !important;
    border-left: 5px solid #0ea5e9 !important;
    padding: 15px !important;
    margin: 20px 0 !important;
    border-radius: 8px !important;
}
.ai-visual-box {
    background: #fffbeb !important;
    border: 2px dashed #f59e0b !important;
    padding: 15px !important;
    border-radius: 12px !important;
    color: #b45309 !important;
    margin: 20px 0 !important;
}
.ai-step-box {
    padding: 15px !important;
    border-radius: 8px !important;
    margin-top: 10px !important;
}
.ai-step-basic {
    background: #f0fdf4 !important;
    border-left: 4px solid #22c55e !important;
}
.ai-step-medium {
    background: #fffbeb !important;
    border-left: 4px solid #f59e0b !important;
}
.ai-step-advanced {
    background: #fef2f2 !important;
    border-left: 4px solid #ef4444 !important;
}