/* Version 1.1 - Cache Busting Change */
/* assets/css/theme.css */

/* Define your color palette using CSS variables */
:root { /* Default to Dark Theme */
    --bg-color: #1a1a1a;
    --card-bg: #2c2c2c;
    --text-primary: #e0e0e0;
    --text-secondary: #b0b0b0;
    --border-color: #444444;
    --accent-blue: #007bff;
    --input-bg: #333333;
    --shadow-color: rgba(255, 255, 255, 0.08);
    --link-color: var(--accent-blue);
    --link-hover-color: #0056b3;
}

html, body {
    height: 100%;
    width: 100%; /* Ensure full width */
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevent horizontal scrollbar if any element overflows */
}

body.light-mode {
    --bg-color: #f4f7f9;
    --card-bg: #ffffff;
    --text-primary: #212529; /* Black for primary text */
    --text-secondary: #343a40; /* Darker gray for secondary text */
    --border-color: #dee2e6; /* Light border color */
    --input-bg: #f8f9fa; /* Light background for input fields */
    --shadow-color: rgba(0, 0, 0, 0.1);
}

/* General body styling */
body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    font-family: 'Poppins', sans-serif;
    transition: background-color 0.3s, color 0.3s;
}

/* Styles for the theme toggle button */
#theme-toggle-btn {
    display: flex !important; /* Use !important to ensure visibility if other styles conflict */
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 48px; /* Increased size for better touch target */
    height: 48px; /* Increased size for better touch target */
    background-color: var(--card-bg);
    color: var(--text-primary);
    border: 2px solid red !important;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1050;
    opacity: 1 !important; /* Ensure visibility */
    visibility: visible !important; /* Ensure visibility */
    box-shadow: 0 4px 8px var(--shadow-color);
    font-size: 1.6rem; /* Adjust icon size */
    padding: 0;
    transition: background-color 0.3s, color 0.3s, transform 0.2s, box-shadow 0.3s;
}

#theme-toggle-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 12px var(--shadow-color);
}

/* Icon visibility based on .light-mode class on body */
/* Show sun in light mode, moon in dark mode */
body.light-mode #theme-toggle-btn .sun-icon { display: inline; }
body.light-mode #theme-toggle-btn .moon-icon { display: none; }

body:not(.light-mode) #theme-toggle-btn .sun-icon { display: none; }
body:not(.light-mode) #theme-toggle-btn .moon-icon { display: inline; }

#resume-quiz-btn {
    position: fixed;
    bottom: 25px; /* Same as theme toggle button */
    right: 83px; /* 25px (toggle right) + 48px (toggle width) + 10px (gap) */
    z-index: 1049; /* Slightly lower than theme toggle button (1050) to avoid overlap issues */
}

/*
   Ensure your other global styles (e.g., .themed-btn, .themed-card, .footer, .navbar)
   also use these CSS variables for full theme consistency.
   Example:
*/
.themed-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-primary); /* Ensure text inside cards also themes */
}

.themed-btn {
    background-color: var(--accent-blue);
    color: white; /* Or a variable for button text color */
    border-color: var(--accent-blue);
    padding: 0.5rem 1rem; /* Add padding */
    border-radius: 0.25rem; /* Add rounded corners */
    text-decoration: none; /* Remove underline */
    display: inline-block; /* Ensure it behaves like a block for padding/margin */
    text-align: center;
    cursor: pointer; /* Add pointer cursor */
}
.themed-btn:hover {
    background-color: var(--link-hover-color);
    border-color: var(--link-hover-color);
    color: white; /* Ensure text color remains white on hover */
}

.form-control.themed-input, .form-select.themed-input {
    background-color: var(--input-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}
.form-control.themed-input:focus, .form-select.themed-input:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); /* Example focus shadow */
}

/* You will need to go through your other CSS (inline styles in PHP files, or other CSS files)
   and update hardcoded colors to use these CSS variables.
   For example, in services.php, .service-card background-color: #fff; should become
   .service-card { background-color: var(--card-bg); border-color: var(--border-color); }
   and its h3 color should be var(--accent-blue) or var(--text-primary).
*/

/* Navbar Theming */
.navbar {
    background-color: var(--card-bg) !important; /* Apply themed background */
    border-bottom: 1px solid var(--border-color); /* Optional: consistent border */
    box-shadow: 0 2px 4px var(--shadow-color); /* Optional: subtle shadow */
}

/* Navbar Brand */
.navbar .navbar-brand,
.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus {
    color: var(--text-primary) !important; /* Themed brand text color */
}

/* Navbar Links */
.navbar .navbar-nav .nav-link {
    color: var(--text-secondary) !important; /* Themed nav link color */
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:focus {
    color: var(--text-primary) !important; /* Themed nav link hover/focus color */
}

/* Active Navbar Link */
.navbar .navbar-nav .nav-item.active .nav-link,
.navbar .navbar-nav .nav-link.active {
    color: var(--accent-blue) !important; /* Themed active nav link color */
    font-weight: 600; /* Optional: make active link bolder */
}

/* Navbar Toggler Icon - Ensure it contrasts with the themed background */
body:not(.light-mode) .navbar-toggler-icon { /* Default (Dark mode) - light icon */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
body.light-mode .navbar-toggler-icon { /* Light mode (default navbar) - dark icon */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.55)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Navbar text (e.g., "Hi, User") */
.navbar .navbar-text {
    color: var(--text-secondary) !important;
}
.btn-warning:hover {
    background-color: var(--btn-warning-hover-bg);
}

#score-area p {
    font-size: 1.1rem;
}

/* btn-outline-primary and btn-primary in navbar should retain their existing themed styles which work on dark backgrounds */

/* Footer Theming */
.footer {
    background-color: #2c3e50; /* Dark background for footer */
    color: #ecf0f1; /* Light text color */
    padding: 3rem 0;
    border-top: 1px solid #34495e;
}

.footer h5 {
    color: #ffffff; /* White headings */
    margin-bottom: 1.5rem;
}

.footer p {
    color: #bdc3c7; /* Lighter gray for paragraphs */
    font-size: 0.9rem;
    line-height: 1.6;
}

.footer .social-icons a {
    color: #ecf0f1;
    font-size: 1.2rem;
    margin-right: 1rem;
    transition: color 0.3s ease;
}

.footer .social-icons a:hover {
    color: var(--accent-blue); /* Accent color on hover */
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li a {
    color: #bdc3c7;
    text-decoration: none;
    line-height: 2;
    transition: color 0.3s ease;
}

.footer-links li a:hover {
    color: var(--accent-blue);
}

.footer .copyright {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #34495e;
    font-size: 0.85rem;
    color: #95a5a6;
}

.footer .copyright a {
    color: var(--accent-blue);
    text-decoration: none;
}

.footer .copyright a:hover {
    text-decoration: underline;
}

/* Light mode adjustments for footer */
body.light-mode .footer {
    background-color: #34495e; /* Slightly darker blue for light mode footer */
    color: #ecf0f1;
    border-top-color: #2c3e50;
}

body.light-mode .footer h5 {
    color: #ffffff;
}

body.light-mode .footer p,
body.light-mode .footer-links li a {
    color: #bdc3c7;
}

body.light-mode .footer .social-icons a {
    color: #ecf0f1;
}

body.light-mode .footer .copyright {
    border-top-color: #2c3e50;
    color: #95a5a6;
}

body.light-mode .footer .copyright a {
    color: var(--accent-blue);
}

/* Sidebar Styling */
.wrapper {
    display: flex;
    min-height: 100vh; /* Ensure wrapper takes full viewport height */
    width: 100%; /* Ensure it spans full width */
}

.left-sidebar {
    width: 250px; /* Fixed width for the sidebar */
    background-color: var(--card-bg); /* Use themed background */
    color: var(--text-primary); /* Use themed text color */
    padding: 20px;
    box-shadow: 2px 0 5px var(--shadow-color); /* Shadow on the right */
    position: fixed; /* Make it fixed */
    top: 70px; /* Stick to the top */
    height: calc(100vh - 70px); /* Make it span the full viewport height */
    overflow-y: auto; /* Enable scrolling if content overflows */
}

.main-content {
    flex-grow: 1; /* Main content takes remaining space */
    padding: 20px;
    margin-left: 250px; /* Same width as the sidebar */
}

.sidebar-profile img {
    border: 2px solid var(--border-color); /* Themed border for profile photo */
}

.sidebar-section h6 {
    color: var(--accent-blue); /* Accent color for section titles */
    margin-bottom: 10px;
}

.sidebar-section ul {
    padding-left: 0; /* Remove default ul padding */
}

.sidebar-section ul li {
    margin-bottom: 5px;
}

/* Adjust main content padding to account for navbar */
main.main-content {
    padding-top: 90px; /* Adjust based on your navbar height */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .wrapper {
        flex-direction: column; /* Stack sidebar and main content on small screens */
    }

    .left-sidebar {
        width: 100%; /* Full width on small screens */
        height: auto; /* Auto height */
        position: relative; /* Revert to relative on small screens */
        box-shadow: 0 2px 5px var(--shadow-color); /* Shadow on the bottom */
    }

    main.main-content {
        padding-top: 20px; /* Reset padding for main content on small screens */
        margin-left: 0; /* Remove margin on small screens */
    }
}

/* Styles for pages without sidebar */
.wrapper-no-sidebar {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allow it to grow and push footer down */
    width: 100%; /* Ensure it spans full width */
}

.main-content-no-sidebar {
    flex-grow: 1; /* Main content takes remaining space */
    padding: 20px; /* Add some padding */
    padding-top: 70px; /* Account for navbar */
    margin-left: 0; /* Ensure no margin for no-sidebar pages */
}

/* Remove padding-bottom from user-dashboard-section on user dashboard page */
body.user-dashboard-page .user-dashboard-section {
    padding-bottom: 0 !important;
}