/* ========= DARK MODE CSS ========= */

/* === COLOR VARIABLES === */
:root {
    --primary-color: #0d6efd; /* Blue for buttons, links */
    --background-color: #121212; /* Dark background */
    --text-color: #ffffff; /* White text */
    --navbar-bg-color: #1f1f1f; /* Navbar and header background */
    --hover-bg-color: #333333; /* Hover background for items */
    --button-hover-bg: #ffffff; /* Button hover background */
    --button-hover-text: #121212; /* Button hover text color */
    --border-light: rgba(255, 255, 255, 0.3); /* Light border for better visibility */
}

/* === GLOBAL STYLES === */
body {
    background-color: var(--background-color);
    color: var(--text-color);  
}

/* === NAVBAR & HEADER === */
header, .navbar, .dropdown-menu {
    background-color: var(--navbar-bg-color);
    color: var(--text-color);  
}

/* === NAVBAR LINKS & BUTTONS === */
.nav-link, .dropdown-item, .btn-link, 
.navbar-nav .nav-link, .navbar-nav .btn-link {
    color: var(--text-color) !important;
}

.navbar-nav .btn-link:hover, 
.navbar-nav .dropdown-item:hover, 
.nav-link:hover {
    background-color: var(--hover-bg-color) !important;
    color: var(--primary-color) !important;
}

/* Ensure a dark underline for the tabs container */
.nav-tabs {
    border-bottom: 1px solid var(--border-light);
}

/* Default state for each tab */
/* Use the navbar's dark color for a unified look */
.nav-tabs .nav-link {
    background-color: var(--navbar-bg-color) !important;
    color: var(--text-color) !important;
    border: 1px solid transparent !important;
}

/* Hover state: Use the hover background and primary text color */
.nav-tabs .nav-link:hover {
    background-color: var(--hover-bg-color) !important;
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

/* Active tab: Maintain dark background with a visible accent */
.nav-tabs .nav-link.active {
    color: var(--text-color) !important;
    background-color: var(--hover-bg-color) !important;
    border-color: var(--primary-color) var(--primary-color) transparent !important;
}

/* === AUTH BUTTONS === */
.auth-buttons .btn-link {
    color: var(--text-color) !important;  
}

.auth-buttons .btn-link:hover {
    color: var(--primary-color) !important;
}

/* === BUTTON STYLES === */
.btn-outline-light {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-outline-light:hover {
    background-color: var(--button-hover-bg);
    color: var(--button-hover-text);
}

/* === FORMS & INPUTS === */
input.form-control, 
textarea.form-control, 
select.form-control {
    background-color: white !important;  
    color: black !important;  
    border-color: var(--border-light);
}

input[disabled], textarea[disabled] {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #bbbbbb !important;
}

/* === FORM LABELS === */
label, .col-form-label, .form-group label {
    color: var(--text-color) !important;  
}

/* === FORM CONTAINERS (Ensure Transparency) === */
.card, .form-group, .session-entry, 
.instruction-box, .text-box, .preview-container, 
.bg-light {
    background-color: transparent !important;  
    color: var(--text-color) !important;
    border: none !important;
}

/* === TABLES === */
table {
    border-color: var(--border-light) !important;
}

table thead th, 
table tbody tr td {
    color: var(--text-color) !important;
}

table th,
table td {
    color: var(--text-color) !important;
}

/* === LISTS === */
ul, ol {
    color: var(--text-color) !important;
}

/* === SESSION BUTTONS (Accordion) === */
#sessionsAccordion .card {
    background-color: transparent !important;  
    border: none;  
}

.accordion .card-header .btn-link {
    color: var(--text-color) !important;  
}

.accordion .card-header .btn-link:hover {
    background-color: var(--hover-bg-color);
    color: var(--primary-color);
}

/* === OVERVIEW TEXT (Ensuring Visibility) === */
.form-control-plaintext, 
p.form-control-plaintext {
    color: var(--text-color) !important;
}

/* === Dark Mode: Ensure Modals Have a Dark Background === */
.modal-content {
    background-color: var(--navbar-bg-color) !important; /* Dark gray background */
    color: var(--text-color) !important; /* White text */
}

/* === Ensure Modal Titles and Text are Readable === */
.modal-header, .modal-body, .modal-footer {
    background-color: var(--navbar-bg-color) !important; /* Dark gray */
    color: var(--text-color) !important; /* White text */
}

/* === Ensure Modal Buttons are Readable === */
.modal-footer .btn {
    background-color: var(--primary-color);
    color: white;
    border: none;
}

.modal-footer .btn-secondary {
    background-color: var(--hover-bg-color);
    color: var(--text-color);
}

.modal-footer .btn:hover {
    background-color: var(--button-hover-bg);
    color: var(--button-hover-text);
}

/* === Ensure Close Button (X) is Visible === */
.modal-header .close {
    color: var(--text-color) !important;
    opacity: 1;
}