/**
 * IntelliLearn App Enhancements v1
 * Dark mode, reading progress, button states, lazy-load placeholders
 */

/* ─────────────────────────────────────────────
   DARK MODE OVERRIDES
   ───────────────────────────────────────────── */
html.dark body {
    background-color: #0f172a;
    color: #e2e8f0;
}
html.dark .bg-white,
html.dark .bg-gray-50 {
    background-color: #1e293b;
}
html.dark .text-gray-600 { color: #94a3b8; }
html.dark .text-gray-700 { color: #cbd5e1; }
html.dark .text-gray-800 { color: #e2e8f0; }
html.dark .text-gray-900 { color: #f1f5f9; }
html.dark .border-gray-200 { border-color: #334155; }
html.dark .border-gray-100 { border-color: #1e293b; }
html.dark .bg-gray-100 { background-color: #334155; }
html.dark .bg-gray-200 { background-color: #475569; }

/* ─────────────────────────────────────────────
   READING PROGRESS BAR
   ───────────────────────────────────────────── */
#reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #00A8E8, #F2B134);
    z-index: 9999;
    width: 0%;
    transition: width 0.15s ease-out;
}

/* ─────────────────────────────────────────────
   BUTTON LOADING STATE
   ───────────────────────────────────────────── */
.btn-loading,
.btn-loading:is(:hover, :focus) {
    position: relative;
    pointer-events: none !important;
    opacity: 0.75;
    cursor: wait;
}
.btn-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid currentColor;
    border-radius: 50%;
    border-top-color: transparent;
    animation: btn-spin 0.7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* Spinner for buttons with bg color */
.btn-loading.btn-primary::after,
.btn-loading.bg-navy::after,
.btn-loading.bg-orange::after,
.btn-loading.bg-cyan::after {
    border-color: rgba(255,255,255,0.4);
    border-top-color: transparent;
}

/* ─────────────────────────────────────────────
   LAZY IMAGE PLACEHOLDERS
   ───────────────────────────────────────────── */
img[loading="lazy"] {
    background: linear-gradient(110deg, #f1f5f9 8%, #e2e8f0 18%, #f1f5f9 33%);
    background-size: 200% 100%;
    animation: shimmer-bg 1.5s linear infinite;
}
html.dark img[loading="lazy"] {
    background: linear-gradient(110deg, #1e293b 8%, #334155 18%, #1e293b 33%);
}
img[loading="lazy"].loaded,
img[loading="lazy"][src=""] {
    animation: none;
    background: transparent;
}
@keyframes shimmer-bg {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ─────────────────────────────────────────────
   LIVE FILTER HIGHLIGHT
   ───────────────────────────────────────────── */
.filter-highlight {
    background-color: rgba(0, 168, 232, 0.15);
    border-radius: 2px;
    padding: 0 2px;
}

/* ─────────────────────────────────────────────
   SMOOTH THEME TRANSITION
   ───────────────────────────────────────────── */
/* ─────────────────────────────────────────────
   DARK MODE: Dashboard / Admin Components
   ───────────────────────────────────────────── */
html.dark {
    --navy: #5ab8e8;
    --navy-dark: #0d4a73;
    --navy-light: #33c3ff;
    --cyan: #33c3ff;
    --cyan-light: #66d4ff;
    --cyan-dark: #0086b9;
    --orange: #ff7b6b;
    --gold: #ffd966;
    --green: #a8e063;
}

html.dark [style*="color: var(--navy)"],
html.dark [style*="color:var(--navy)"] {
    color: #5ab8e8 !important;
}

html.dark [style*="background: rgba(0, 168, 232, 0.08)"],
html.dark [style*="background:rgba(0, 168, 232, 0.08)"] {
    background: rgba(0, 168, 232, 0.12) !important;
}

html.dark [style*="background: rgba(140, 198, 63, 0.08)"],
html.dark [style*="background:rgba(140, 198, 63, 0.08)"] {
    background: rgba(140, 198, 63, 0.12) !important;
}

html.dark [style*="background: rgba(242, 177, 52, 0.08)"],
html.dark [style*="background:rgba(242, 177, 52, 0.08)"] {
    background: rgba(242, 177, 52, 0.12) !important;
}

html.dark [style*="background: rgba(11, 60, 93, 0.08)"],
html.dark [style*="background:rgba(11, 60, 93, 0.08)"] {
    background: rgba(90, 184, 232, 0.12) !important;
}

html.dark [style*="background: linear-gradient(135deg, var(--navy) 0%, var(--cyan) 100%)"],
html.dark [style*="background:linear-gradient(135deg, var(--navy) 0%, var(--cyan) 100%)"] {
    background: linear-gradient(135deg, #0d4a73 0%, #0086b9 100%) !important;
}
html.dark .admin-card,
html.dark .dashboard-card {
    background-color: #1e293b;
    border-color: rgba(255,255,255,0.06);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
html.dark .admin-card:hover,
html.dark .dashboard-card:hover {
    box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}

html.dark .enrollment-item {
    background-color: #1e293b;
    border-left-color: var(--cyan-dark);
}
html.dark .enrollment-item:hover {
    background-color: #334155;
}
html.dark .enrollment-name {
    color: #e2e8f0;
}
html.dark .enrollment-meta {
    color: #94a3b8;
}
html.dark .enrollment-date {
    color: #64748b;
}

html.dark .section-title {
    color: #e2e8f0;
}

html.dark .quick-action-btn {
    background-color: rgba(255,255,255,0.04) !important;
}

html.dark .empty-state {
    color: #64748b;
}

/* Footer */
html.dark footer.bg-gray-800 {
    background-color: #0f172a;
    border-top: 1px solid #334155;
}

/* Sidebar & Nav */
html.dark .sidebar {
    background: linear-gradient(180deg, #0B3C5D 0%, #061e2e 100%);
}
html.dark ::-webkit-scrollbar-track {
    background: #0f172a;
}
html.dark ::-webkit-scrollbar-thumb {
    background: #334155;
}

/* Tables */
html.dark table {
    color: #e2e8f0;
}
html.dark thead {
    background-color: #1e293b;
}
html.dark tbody tr {
    border-color: #334155;
}
html.dark tbody tr:hover {
    background-color: #334155;
}

/* Forms & Inputs */
html.dark input[type="text"],
html.dark input[type="password"],
html.dark input[type="email"],
html.dark input[type="number"],
html.dark input[type="tel"],
html.dark input[type="url"],
html.dark input[type="date"],
html.dark input[type="datetime-local"],
html.dark textarea,
html.dark select {
    background-color: #1e293b;
    color: #e2e8f0;
    border-color: #334155;
}
html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #64748b;
}

/* Login card (public pages) */
html.dark .login-card {
    background-color: #1e293b;
}
html.dark .login-card h1,
html.dark .login-card .logo-text {
    color: #e2e8f0;
}
html.dark .login-card label {
    color: #cbd5e1;
}

/* Misc hardcoded backgrounds */
html.dark [style*="background: #f8fafc"],
html.dark [style*="background:#f8fafc"] {
    background-color: #1e293b !important;
}
html.dark [style*="background: white"],
html.dark [style*="background:white"] {
    background-color: #1e293b !important;
}

/* Smooth transitions for theme switch */
body, .bg-white, .bg-gray-50, .bg-gray-100, .text-gray-600, .text-gray-800, .text-gray-700, .text-gray-900, .border-gray-200, .border-gray-100, .admin-card, .dashboard-card, .enrollment-item, input, textarea, select, table, thead, tbody tr {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* RTL Support */
[dir="rtl"] .language-switcher #lang-menu {
    right: auto;
    left: 0;
}
[dir="rtl"] .skip-link {
    left: auto;
    right: 0;
    border-radius: 0 0 0 var(--radius-sm);
}
[dir="rtl"] .sidebar-link.active {
    border-left: none;
    border-right: 4px solid #00A8E8;
}
[dir="rtl"] .pub-nav-link::after {
    left: auto;
    right: 0;
}
[dir="rtl"] .logo-container {
    flex-direction: row-reverse;
}
[dir="rtl"] .sidebar nav a i {
    margin-right: 0;
    margin-left: 0.75rem;
}

/* Skip-to-content link */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primary);
    color: #fff;
    padding: 8px 16px;
    z-index: 10000;
    text-decoration: none;
    font-weight: 600;
    border-radius: 0 0 var(--radius-sm) 0;
    transition: top 0.2s ease;
}
.skip-link:focus {
    top: 0;
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}