/* Dark Mode Styles */
html.dark-mode body {
    background-color: #121212;
    color: #e0e0e0;
}

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

html.dark-mode .card {
    background-color: #2a2a2a;
    border-color: #444;
    color: #e0e0e0;
}

html.dark-mode .card-header {
    background-color: #333;
    border-bottom-color: #444;
}

html.dark-mode .card-header .btn-link {
    color: #e0e0e0;
}

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

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

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

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

html.dark-mode .table .thead-light th {
    background-color: #333;
    color: #e0e0e0;
    border-color: #444;
}

html.dark-mode .modal-content {
    background-color: #2a2a2a;
    color: #e0e0e0;
}

html.dark-mode .modal-header,
html.dark-mode .modal-footer {
    border-color: #444;
}

html.dark-mode .close {
    color: #fff;
    text-shadow: none;
}

html.dark-mode .form-control {
    background-color: #333;
    color: #e0e0e0;
    border-color: #555;
}

body.dark-mode .form-control:focus {
    background-color: #444;
    color: #e0e0e0;
    border-color: var(--primary);
}

html.dark-mode .custom-control-label::before {
    background-color: #333;
    border-color: #555;
}

html.dark-mode .custom-file-label,
html.dark-mode .custom-file-label::after {
    background-color: #333;
    border-color: #555;
    color: #e0e0e0;
}

html.dark-mode .sidebar-nav .nav-link {
    color: #e0e0e0;
}

html.dark-mode .sidebar-nav .nav-link:hover {
    background-color: #333;
}

html.dark-mode .sidebar-nav .nav-link.active {
    background-color: var(--primary);
    color: var(--white);
}

html.dark-mode .profile-name {
    color: #fff;
}

/* Table row highlights for dark mode */
html.dark-mode .table-warning,
html.dark-mode .table-warning > th,
html.dark-mode .table-warning > td {
    background-color: rgba(255, 193, 7, 0.15); /* Darker yellow */
    color: #ffc107;
}
html.dark-mode .table-hover .table-warning:hover {
    background-color: rgba(255, 193, 7, 0.25);
}

html.dark-mode .table-danger,
html.dark-mode .table-danger > th,
html.dark-mode .table-danger > td {
    background-color: rgba(220, 53, 69, 0.15); /* Darker red */
    color: #f5c6cb;
}
html.dark-mode .table-hover .table-danger:hover {
    background-color: rgba(220, 53, 69, 0.25);
}

/* Override for specific table zebra-striping from live-resume.css */
html.dark-mode #certificates tr:nth-child(even),
html.dark-mode #users tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Dark mode for custom switch (toggle) */
html.dark-mode .custom-switch .custom-control-label::after {
    background-color: #adb5bd; /* Thumb color when off */
}

html.dark-mode .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--primary); /* Track color when on */
}

html.dark-mode .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    background-color: #fff; /* Thumb color when on */
}