/* =============================================
   ฟิสิกส์ อาจารย์อั๋น — Tailwind Custom Overrides
   ============================================= */

/* Warm mode filters */
html.warm { filter: sepia(15%) saturate(90%) brightness(98%); }
html.warm-strong { filter: sepia(30%) saturate(75%) brightness(92%); }

/* Theme transition */
*, *::before, *::after {
    transition-property: background-color, border-color, color;
    transition-duration: 0.25s;
    transition-timing-function: ease;
}

/* Mobile nav open state */
.nav-mobile.open {
    display: flex !important;
}

/* Sidebar mobile open state */
.sidebar-panel.open {
    display: block !important;
    position: fixed;
    top: 64px;
    left: 0;
    bottom: 0;
    z-index: 50;
    width: 260px;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}

/* Modal system */
.modal-overlay {
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}
.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}
.modal-overlay .modal-box {
    transform: translateY(20px);
    transition: transform 0.2s ease;
}
.modal-overlay.active .modal-box {
    transform: translateY(0);
}

/* Progress bar fill animation */
.progress-fill {
    transition: width 0.4s ease;
}

/* Slip image lightbox */
.slip-img {
    cursor: pointer;
    transition: transform 0.2s ease;
}
.slip-img:hover {
    transform: scale(1.05);
}

/* Course card line clamp */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Episode list item states */
.ep-item.active {
    border-left: 3px solid #0ea5e9;
    background: rgba(14, 165, 233, 0.05);
}
.ep-item.locked {
    opacity: 0.5;
}

/* Watch sidebar scrollbar */
.watch-episodes::-webkit-scrollbar {
    width: 4px;
}
.watch-episodes::-webkit-scrollbar-track {
    background: transparent;
}
.watch-episodes::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 9999px;
}

/* Font size adjustments for eye comfort */
html.font-lg { font-size: 18px; }
html.font-xl { font-size: 20px; }

/* Dark mode Tailwind overrides for custom elements */
.dark .modal-overlay.active {
    background: rgba(0,0,0,0.7);
}