/* Light mode */
.fi-sidebar {
    background-color: #ffffff !important;
    color: #111827;
}

/* Dark mode */
.dark .fi-sidebar {
    background-color: #18181B !important; /* same as top bar */
    color: #ffffff;
}

.lesson-video-player {
    background: #020617;
    color: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.35);
}

.lesson-video-controls {
    background: #020617;
    color: #ffffff;
    border-top: 1px solid rgba(148, 163, 184, 0.28);
}

.lesson-video-control-button {
    background: #1e293b;
    color: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 2px rgba(15, 23, 42, 0.45);
}

.lesson-video-control-button:hover {
    background: #334155;
    border-color: rgba(226, 232, 240, 0.5);
}

.lesson-video-control-button:focus-visible,
.lesson-video-play-button:focus-visible {
    box-shadow: 0 0 0 2px #020617, 0 0 0 4px #38bdf8;
}

.lesson-video-control-button svg {
    color: #ffffff;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55));
}

.lesson-video-control-button-disabled {
    cursor: not-allowed;
    opacity: 0.58;
}

.lesson-video-play-button {
    background: #2563eb;
    color: #ffffff;
    border: 1px solid rgba(191, 219, 254, 0.55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 3px rgba(15, 23, 42, 0.5);
}

.lesson-video-play-button:hover {
    background: #1d4ed8;
}