/* assets/css/dark-mode.css */
/* Dark Mode Theme - Complete */
/* ใช้ html.dark-mode (เพราะ class อยู่ที่ html tag) */

/* ============================================
   Body & Background
   ============================================ */
html.dark-mode body {
    background-color: #1a1a2e !important;
    color: #e0e0e0;
}

html.dark-mode main {
    background-color: #1a1a2e;
}

html.dark-mode .container {
    /* container ยังคงโปร่งใส */
}

/* ============================================
   Navbar
   ============================================ */
html.dark-mode .navbar {
    background-color: #16213e !important;
    border-bottom: 1px solid #0f3460;
    box-shadow: 0 2px 20px rgba(0,0,0,0.3) !important;
}

html.dark-mode .navbar-light .navbar-brand,
html.dark-mode .navbar-light .navbar-brand span {
    color: #e0e0e0 !important;
}

html.dark-mode .navbar-light .nav-link {
    color: #b0b0b0 !important;
}

html.dark-mode .navbar-light .nav-link:hover {
    color: #ffffff !important;
    background-color: rgba(255,255,255,0.05);
}

html.dark-mode .navbar-light .nav-link.active {
    color: #4da6ff !important;
    background-color: rgba(77, 166, 255, 0.1);
}

html.dark-mode .navbar-toggler {
    border-color: rgba(255,255,255,0.1);
}

html.dark-mode .navbar-toggler-icon {
    filter: invert(1);
}

html.dark-mode .btn-light {
    background-color: #16213e;
    border-color: #0f3460;
    color: #e0e0e0;
}

html.dark-mode .btn-light:hover {
    background-color: #0f3460;
    color: #ffffff;
}

/* ============================================
   Cards
   ============================================ */
html.dark-mode .card {
    background-color: #16213e;
    border-color: #0f3460;
    color: #e0e0e0;
}

html.dark-mode .card-header {
    background-color: #0f3460;
    border-bottom-color: #1a1a2e;
    color: #e0e0e0;
}

html.dark-mode .card-header.bg-primary {
    background-color: #0d47a1 !important;
}

html.dark-mode .card-header.bg-success {
    background-color: #1b5e20 !important;
}

html.dark-mode .card-header.bg-warning {
    background-color: #e65100 !important;
    color: #fff !important;
}

html.dark-mode .card-header.bg-info {
    background-color: #01579b !important;
}

html.dark-mode .card-header.bg-white {
    background-color: #16213e !important;
    border-bottom-color: #0f3460;
}

html.dark-mode .card-footer {
    background-color: #16213e;
    border-top-color: #0f3460;
}

html.dark-mode .card.bg-light {
    background-color: #1a1a2e !important;
}

html.dark-mode .card.border-0 {
    border: 1px solid #0f3460 !important;
}

/* ============================================
   Tables
   ============================================ */
html.dark-mode .table {
    color: #e0e0e0;
}

html.dark-mode .table-light {
    background-color: #0f3460;
    color: #e0e0e0;
}

html.dark-mode .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(255,255,255,0.03);
    color: #e0e0e0;
}

html.dark-mode .table-hover > tbody > tr:hover {
    background-color: rgba(255,255,255,0.05);
    color: #ffffff;
}

html.dark-mode .table thead th {
    border-bottom-color: #0f3460;
}

html.dark-mode .table td, 
html.dark-mode .table th {
    border-color: #0f3460;
}

/* ============================================
   Forms
   ============================================ */
html.dark-mode .form-control,
html.dark-mode .form-select {
    background-color: #1a1a2e;
    border-color: #0f3460;
    color: #e0e0e0;
}

html.dark-mode .form-control:focus,
html.dark-mode .form-select:focus {
    background-color: #1a1a2e;
    border-color: #4da6ff;
    color: #ffffff;
    box-shadow: 0 0 0 0.2rem rgba(77, 166, 255, 0.25);
}

html.dark-mode .form-control::placeholder {
    color: #6c757d;
}

html.dark-mode .form-text {
    color: #8a8a8a;
}

html.dark-mode .input-group-text {
    background-color: #0f3460;
    border-color: #0f3460;
    color: #b0b0b0;
}

html.dark-mode .form-check-label {
    color: #e0e0e0;
}

html.dark-mode .form-check-input {
    background-color: #1a1a2e;
    border-color: #0f3460;
}

html.dark-mode .form-check-input:checked {
    background-color: #4da6ff;
    border-color: #4da6ff;
}

/* ============================================
   Buttons
   ============================================ */
html.dark-mode .btn-primary {
    background-color: #0d47a1;
    border-color: #0d47a1;
}

html.dark-mode .btn-outline-primary {
    color: #4da6ff;
    border-color: #4da6ff;
}

html.dark-mode .btn-outline-primary:hover {
    background-color: #4da6ff;
    color: #1a1a2e;
}

html.dark-mode .btn-outline-secondary {
    color: #b0b0b0;
    border-color: #6c757d;
}

html.dark-mode .btn-outline-secondary:hover {
    background-color: #6c757d;
    color: #ffffff;
}

html.dark-mode .btn-outline-success {
    color: #4caf50;
    border-color: #4caf50;
}

html.dark-mode .btn-outline-success:hover {
    background-color: #4caf50;
    color: #ffffff;
}

html.dark-mode .btn-outline-info {
    color: #29b6f6;
    border-color: #29b6f6;
}

html.dark-mode .btn-outline-info:hover {
    background-color: #29b6f6;
    color: #1a1a2e;
}

html.dark-mode .btn-outline-warning {
    color: #ffa726;
    border-color: #ffa726;
}

html.dark-mode .btn-outline-warning:hover {
    background-color: #ffa726;
    color: #1a1a2e;
}

html.dark-mode .btn-outline-danger {
    color: #ef5350;
    border-color: #ef5350;
}

html.dark-mode .btn-outline-danger:hover {
    background-color: #ef5350;
    color: #ffffff;
}

html.dark-mode .btn-secondary {
    background-color: #455a64;
    border-color: #455a64;
}

html.dark-mode .btn-success {
    background-color: #2e7d32;
    border-color: #2e7d32;
}

html.dark-mode .btn-warning {
    background-color: #e65100;
    border-color: #e65100;
    color: #fff;
}

html.dark-mode .btn-danger {
    background-color: #c62828;
    border-color: #c62828;
}

/* ============================================
   Alerts
   ============================================ */
html.dark-mode .alert {
    border: 1px solid transparent;
}

html.dark-mode .alert-info {
    background-color: #01579b;
    border-color: #0277bd;
    color: #e1f5fe;
}

html.dark-mode .alert-success {
    background-color: #1b5e20;
    border-color: #2e7d32;
    color: #e8f5e9;
}

html.dark-mode .alert-warning {
    background-color: #e65100;
    border-color: #ef6c00;
    color: #fff3e0;
}

html.dark-mode .alert-danger {
    background-color: #b71c1c;
    border-color: #c62828;
    color: #ffebee;
}

html.dark-mode .alert-light {
    background-color: #37474f;
    border-color: #455a64;
    color: #e0e0e0;
}

/* ============================================
   Badges
   ============================================ */
html.dark-mode .badge.bg-light {
    background-color: #37474f !important;
    color: #e0e0e0;
}

html.dark-mode .badge.bg-white {
    background-color: #1a1a2e !important;
    color: #e0e0e0;
}

html.dark-mode .badge.text-dark {
    color: #e0e0e0 !important;
}

/* ============================================
   Text Colors
   ============================================ */
html.dark-mode .text-muted {
    color: #8a8a8a !important;
}

html.dark-mode .text-dark {
    color: #e0e0e0 !important;
}

html.dark-mode .text-secondary {
    color: #b0b0b0 !important;
}

html.dark-mode .text-primary {
    color: #4da6ff !important;
}

html.dark-mode .text-success {
    color: #4caf50 !important;
}

html.dark-mode .text-danger {
    color: #ef5350 !important;
}

html.dark-mode .text-warning {
    color: #ffa726 !important;
}

html.dark-mode .bg-light {
    background-color: #1a1a2e !important;
}

html.dark-mode .bg-white {
    background-color: #16213e !important;
}

html.dark-mode .shadow-sm {
    box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
}

/* ============================================
   Progress Bars
   ============================================ */
html.dark-mode .progress {
    background-color: #0f3460;
}

/* ============================================
   Modals
   ============================================ */
html.dark-mode .modal-content {
    background-color: #16213e;
    border-color: #0f3460;
    color: #e0e0e0;
}

html.dark-mode .modal-header {
    border-bottom-color: #0f3460;
}

html.dark-mode .modal-footer {
    border-top-color: #0f3460;
}

html.dark-mode .btn-close {
    filter: invert(1);
}

/* ============================================
   Dropdowns
   ============================================ */
html.dark-mode .dropdown-menu {
    background-color: #16213e;
    border-color: #0f3460;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

html.dark-mode .dropdown-item {
    color: #e0e0e0;
}

html.dark-mode .dropdown-item:hover {
    background-color: rgba(255,255,255,0.05);
    color: #ffffff;
}

html.dark-mode .dropdown-divider {
    border-top-color: #0f3460;
}

html.dark-mode .dropdown-header {
    color: #8a8a8a;
}

/* ============================================
   Breadcrumbs
   ============================================ */
html.dark-mode .breadcrumb {
    background-color: transparent;
}

html.dark-mode .breadcrumb-item a {
    color: #4da6ff;
}

html.dark-mode .breadcrumb-item.active {
    color: #b0b0b0;
}

html.dark-mode .breadcrumb-item + .breadcrumb-item::before {
    color: #6c757d;
}

/* ============================================
   List Groups
   ============================================ */
html.dark-mode .list-group-item {
    background-color: #16213e;
    border-color: #0f3460;
    color: #e0e0e0;
}

html.dark-mode .list-group-item:hover {
    background-color: rgba(255,255,255,0.03);
}

html.dark-mode .list-group-item-action:hover {
    background-color: #0f3460;
}

/* ============================================
   Borders
   ============================================ */
html.dark-mode .border {
    border-color: #0f3460 !important;
}

html.dark-mode .border-bottom {
    border-bottom-color: #0f3460 !important;
}

html.dark-mode .border-top {
    border-top-color: #0f3460 !important;
}

html.dark-mode .border-start {
    border-left-color: #0f3460 !important;
}

html.dark-mode .border-end {
    border-right-color: #0f3460 !important;
}

html.dark-mode hr {
    border-color: #0f3460;
    opacity: 0.5;
}

/* ============================================
   Module Cards
   ============================================ */
html.dark-mode .module-card {
    background-color: #16213e;
    border-color: #0f3460;
}

html.dark-mode .module-card:hover {
    background-color: #1a2744;
}

html.dark-mode .module-card.completed {
    background-color: #0d2818;
    border-left-color: #4caf50 !important;
}

html.dark-mode .module-card.locked {
    opacity: 0.5;
}

html.dark-mode .module-card.current {
    border-left-color: #ffa726 !important;
}

html.dark-mode .module-description {
    background-color: #1a1a2e;
    border-left-color: #4da6ff;
}

/* ============================================
   Video Wrapper
   ============================================ */
html.dark-mode .video-wrapper {
    background: #000;
}

/* ============================================
   Exam Container
   ============================================ */
html.dark-mode .question-block {
    background-color: #1a1a2e;
    border-color: #0f3460;
}

/* ============================================
   Step Indicator
   ============================================ */
html.dark-mode .step-circle.pending {
    background-color: #1a1a2e;
    color: #6c757d;
}

html.dark-mode .step-line {
    background-color: #0f3460;
}

html.dark-mode .step-line.completed {
    background-color: #4caf50;
}

html.dark-mode .step-label {
    color: #8a8a8a;
}

/* ============================================
   Footer
   ============================================ */
html.dark-mode footer.bg-dark {
    background-color: #0a0a1a !important;
}

html.dark-mode footer .text-muted {
    color: #8a8a8a !important;
}

/* ============================================
   Toast Container
   ============================================ */
html.dark-mode .toast {
    background-color: #16213e;
    border-color: #0f3460;
}

/* ============================================
   Custom Scrollbar (Webkit)
   ============================================ */
html.dark-mode::-webkit-scrollbar {
    width: 10px;
}

html.dark-mode::-webkit-scrollbar-track {
    background: #1a1a2e;
}

html.dark-mode::-webkit-scrollbar-thumb {
    background: #0f3460;
    border-radius: 5px;
}

html.dark-mode::-webkit-scrollbar-thumb:hover {
    background: #4da6ff;
}

/* ============================================
   Course Theme Override (ให้ dark mode ชนะ)
   ============================================ */
html.dark-mode .course-page {
    background-color: #1a1a2e !important;
}

/* ============================================
   Miscellaneous
   ============================================ */
html.dark-mode .text-bg-light {
    background-color: #37474f !important;
    color: #e0e0e0 !important;
}

html.dark-mode pre,
html.dark-mode code {
    background-color: #1a1a2e;
    color: #4ec9b0;
    border-color: #0f3460;
}

/* ============================================
   Transitions
   ============================================ */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

.card,
.navbar,
.modal-content,
.dropdown-menu,
.table,
.form-control,
.form-select {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}