/* 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;
}

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: 1px solid var(--border-color);
    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; }

/*
   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 {
    background-color: var(--input-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}
.form-control.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;
}

/* Ensure outline buttons in navbar also theme correctly */
.navbar .btn-outline-primary {
    color: var(--accent-blue) !important;
    border-color: var(--accent-blue) !important;
}
.navbar .btn-outline-primary:hover {
    color: #fff !important; /* Or a theme variable for button text on hover */
    background-color: var(--accent-blue) !important;
    border-color: var(--accent-blue) !important;
}

/* --- Navbar Light Mode: Dark Background (to match footer) --- */
body.light-mode .navbar {
    background-color: #2c3e50 !important; /* Footer background color */
    border-bottom-color: #34495e !important; /* Footer border-top color */
    box-shadow: 0 2px 4px rgba(0,0,0,0.25) !important; /* Adjusted shadow for dark navbar */
}

body.light-mode .navbar .navbar-brand,
body.light-mode .navbar .navbar-brand:hover,
body.light-mode .navbar .navbar-brand:focus {
    color: #e0e0e0 !important; /* Light text (like dark mode's --text-primary) */
}

body.light-mode .navbar .navbar-nav .nav-link {
    color: #b0b0b0 !important; /* Light text (like dark mode's --text-secondary) */
}

body.light-mode .navbar .navbar-nav .nav-link:hover,
body.light-mode .navbar .navbar-nav .nav-link:focus {
    color: #e0e0e0 !important; /* Lighter on hover */
}

body.light-mode .navbar .navbar-nav .nav-item.active .nav-link,
body.light-mode .navbar .navbar-nav .nav-link.active {
    color: var(--accent-blue) !important; /* Accent blue for active, or choose a lighter variant if needed */
}

/* Override the default light-mode toggler icon to be light for the dark navbar background */
body.light-mode .navbar-toggler-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; /* Light icon */
}

body.light-mode .navbar .navbar-text {
    color: #b0b0b0 !important; /* Light text */
}
.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);
}