/* ==========================================================================
   EDUSMART AI - STYLESHEET
   Bao gồm: Scrollbar, Gradients, Shimmer, Light Mode và Print Styles
   ========================================================================== */

/* Custom Scrollbars */
::-webkit-scrollbar { 
    width: 8px; 
    height: 8px; 
}
::-webkit-scrollbar-track { 
    background: #090d16; 
}
::-webkit-scrollbar-thumb { 
    background: #1f293d; 
    border-radius: 4px; 
}
::-webkit-scrollbar-thumb:hover { 
    background: #334155; 
}

/* Gradients & Animations */
.gradient-brand {
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 50%, #7c3aed 100%);
}
.gradient-brand:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #4338ca 50%, #6d28d9 100%);
}
.gradient-subtle {
    background: radial-gradient(circle at top right, rgba(99, 102, 241, 0.15), transparent 50%),
                radial-gradient(circle at bottom left, rgba(6, 182, 212, 0.1), transparent 50%);
}
.shimmer-badge {
    background: linear-gradient(90deg, rgba(59,130,246,0.1) 0%, rgba(99,102,241,0.25) 50%, rgba(59,130,246,0.1) 100%);
    background-size: 200% 100%;
    animation: shimmer 3s infinite;
}
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Chuyển đổi mượt mà giữa chế độ Sáng / Tối */
html {
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* ==========================================================================
   HỆ THỐNG GIAO DIỆN SÁNG (LIGHT MODE)
   ========================================================================== */
html:not(.dark) {
    color-scheme: light;
}
html:not(.dark) body {
    background-color: #f8fafc !important;
    color: #0f172a !important;
}
html:not(.dark) .bg-darkbg {
    background-color: #f8fafc !important;
}
html:not(.dark) header {
    background-color: rgba(255, 255, 255, 0.92) !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.05) !important;
}
html:not(.dark) .bg-cardbg {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05) !important;
}
html:not(.dark) .bg-cardinner, 
html:not(.dark) .bg-cardinner\/80, 
html:not(.dark) .bg-cardinner\/70, 
html:not(.dark) .bg-cardinner\/60, 
html:not(.dark) .bg-cardinner\/50 {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}
html:not(.dark) .bg-slate-950, 
html:not(.dark) .bg-slate-950\/70, 
html:not(.dark) .bg-slate-950\/50, 
html:not(.dark) .bg-slate-950\/40 {
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
}
html:not(.dark) .bg-slate-900, 
html:not(.dark) .bg-slate-800, 
html:not(.dark) .bg-slate-800\/80 {
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    color: #1e293b !important;
}
html:not(.dark) .border-cardborder, 
html:not(.dark) .border-cardborder\/60 {
    border-color: #e2e8f0 !important;
}
html:not(.dark) h1, 
html:not(.dark) h2, 
html:not(.dark) h3, 
html:not(.dark) h4 {
    color: #0f172a !important;
}
html:not(.dark) .text-slate-100, 
html:not(.dark) .text-slate-200 {
    color: #1e293b !important;
}
html:not(.dark) .text-slate-300 {
    color: #334155 !important;
}
html:not(.dark) .text-slate-400 {
    color: #64748b !important;
}
html:not(.dark) .text-slate-500 {
    color: #94a3b8 !important;
}
html:not(.dark) .text-blue-300 {
    color: #1d4ed8 !important;
}
html:not(.dark) .text-indigo-300 {
    color: #4338ca !important;
}
html:not(.dark) .text-cyan-400, html:not(.dark) .text-cyan-300 {
    color: #0284c7 !important;
}
html:not(.dark) .text-emerald-300, html:not(.dark) .text-emerald-400 {
    color: #059669 !important;
}
html:not(.dark) .text-amber-300, html:not(.dark) .text-amber-400 {
    color: #b45309 !important;
}
html:not(.dark) .text-purple-300, html:not(.dark) .text-purple-400 {
    color: #7c3aed !important;
}
html:not(.dark) .bg-blue-950, 
html:not(.dark) .bg-blue-950\/70, 
html:not(.dark) .bg-blue-950\/40 {
    background-color: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #1e40af !important;
}
html:not(.dark) .bg-indigo-950, 
html:not(.dark) .bg-indigo-950\/70, 
html:not(.dark) .bg-indigo-950\/40 {
    background-color: #eef2ff !important;
    border-color: #c7d2fe !important;
    color: #3730a3 !important;
}
html:not(.dark) .bg-emerald-950, 
html:not(.dark) .bg-emerald-950\/60, 
html:not(.dark) .bg-emerald-950\/40 {
    background-color: #ecfdf5 !important;
    border-color: #a7f3d0 !important;
    color: #065f46 !important;
}
html:not(.dark) input, 
html:not(.dark) select, 
html:not(.dark) textarea {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}
html:not(.dark) input::placeholder, 
html:not(.dark) textarea::placeholder {
    color: #94a3b8 !important;
}
html:not(.dark) .gradient-brand,
html:not(.dark) .gradient-brand *,
html:not(.dark) button.bg-blue-600,
html:not(.dark) button.bg-blue-600 *,
html:not(.dark) .topic-count-btn.active,
html:not(.dark) .level-btn.active,
html:not(.dark) .level-btn.active * {
    color: #ffffff !important;
}
html:not(.dark) .level-btn:not(.active) {
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    color: #475569 !important;
}
html:not(.dark) .level-btn.active {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
}
html:not(.dark) .duration-option {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}
html:not(.dark) .duration-option.bg-blue-600\/20 {
    background-color: #eff6ff !important;
    border-color: #3b82f6 !important;
}
html:not(.dark) .preset-card {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}
html:not(.dark) .preset-card:hover {
    background-color: #eff6ff !important;
    border-color: #93c5fd !important;
}
html:not(.dark) .gradient-subtle {
    background: radial-gradient(circle at top right, rgba(99, 102, 241, 0.06), transparent 50%),
                radial-gradient(circle at bottom left, rgba(6, 182, 212, 0.05), transparent 50%) !important;
}
html:not(.dark) #toastNotification {
    background-color: #0f172a !important;
    color: #ffffff !important;
    border-color: #334155 !important;
}

/* ==========================================================================
   ĐỊNH DẠNG IN ẤN (@MEDIA PRINT)
   ========================================================================== */
@media print {
    header, form, section:not(#resultSection), footer, .no-print { 
        display: none !important; 
    }
    #resultSection { 
        display: block !important; 
        border: none !important; 
        margin: 0 !important; 
        padding: 0 !important; 
    }
    body { 
        background: white !important; 
        color: black !important; 
        font-size: 12pt; 
    }
    .bg-cardbg, .bg-cardinner, .bg-slate-900, .bg-slate-950, .bg-slate-900\/80, .bg-slate-900\/60 { 
        background: white !important; 
        border: 1px solid #d1d5db !important; 
        color: black !important; 
        box-shadow: none !important;
    }
    .text-slate-100, .text-slate-200, .text-slate-300, .text-slate-400, 
    .text-blue-300, .text-purple-300, .text-emerald-300 { 
        color: black !important; 
    }
    table, th, td { 
        border: 1px solid #333 !important; 
    }
}