/* General Styles */
body {
    font-family: 'Arial', sans-serif;
    background-color: var(--background-color, #f4f4f4);
    color: var(--text-color, #333);
    margin: 0;
    padding: 0;
}

/* Navbar */
.navbar {
    margin-bottom: 20px;
}

.navbar-brand {
    font-weight: bold;
}

.nav-link {
    color: var(--navbar-text-color, #fff) !important;
}

/* Sidebar */
.leftside-menu {
    width: 250px;
    background-color: var(--sidebar-bg, #343a40); /* Use theme variable */
    color: var(--sidebar-text-color, #ffffff); /* Use theme variable */
    border-right: 1px solid #dee2e6;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
    overflow-y: auto;
}

.leftside-menu .side-nav .side-nav-item a {
    color: var(--sidebar-text-color, #ffffff); /* Use theme variable */
    text-decoration: none;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    border-radius: 4px;
}

.leftside-menu .side-nav .side-nav-item a:hover {
    background-color: var(--sidebar-hover-bg, #495057); /* Use theme variable */
    color: var(--sidebar-text-color, #ffffff);
}

.leftside-menu .side-nav .side-nav-item a i {
    margin-right: 10px; /* Add spacing between icons and text */
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    margin-top: 5rem; /* Ensure enough margin from the top */
}

/* Content Page — margin-left removed; flexbox layout handles spacing */
.content-page {
    padding: 20px;
    flex-grow: 1;
}

/* Footer */
.footer {
    background-color: var(--footer-bg, #343a40);
    color: var(--footer-text-color, #fff);
    padding: 20px 0;
}

.footer a {
    color: var(--footer-link-color, #fff);
}

.footer a:hover {
    color: var(--footer-link-hover-color, #ddd);
    text-decoration: none;
}

/* Alerts */
.alert-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1050;
}

/* Dark Mode */
body.dark-mode {
    background-color: var(--dark-bg, #121212);
    color: var(--dark-text-color, #ffffff);
}

body.dark-mode .navbar, body.dark-mode .footer {
    background-color: var(--dark-navbar-bg, #1e1e1e);
    color: var(--dark-text-color, #ffffff);
}

body.dark-mode .btn-dark {
    background-color: #333333;
    border-color: #333333;
}

body.dark-mode .btn-light {
    background-color: #ffffff;
    color: #000000;
}

/* Dark Mode Styles */
body[data-theme='dark'] {
    background-color: var(--dark-bg, #121212);
    color: var(--dark-text-color, #ffffff);
}

body[data-theme='dark'] .navbar {
    background-color: var(--dark-navbar-bg, #1e1e1e);
    color: var(--dark-text-color, #ffffff);
}

body[data-theme='dark'] .card {
    background-color: var(--dark-card-bg, #1e1e1e);
    color: var(--dark-text-color, #ffffff);
}

body[data-theme='dark'] .btn {
    background-color: var(--dark-btn-bg, #333333);
    color: var(--dark-text-color, white);
}

body[data-theme='dark'] .btn:hover {
    background-color: var(--dark-btn-hover-bg, #444);
}

body[data-theme='dark'] .footer {
    background-color: var(--dark-footer-bg, #1e1e1e);
    color: var(--dark-text-color, #ffffff);
}

/* Premium Login Styles - Fixed & Improved */

/* Improved Login Container */
.login-container {
    max-width: 400px;
    width: 100%;
    padding: 30px;
    background: var(--background-color, #ffffff);
    border-radius: 12px;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1); /* Softer Shadow */
    text-align: center;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Prevent cutting on smaller forms */
.login-container.small-form {
    max-width: 320px;
}

/* Smooth Hover Effect */
.login-container:hover {
    transform: scale(1.02);
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.15);
}

/* Improved Alert Styling */
.alert-container {
    margin-bottom: 20px;
    padding: 12px;
    background: #ffdddd; /* Soft red */
    color: #a94442;
    border-left: 5px solid #d9534f;
    border-radius: 8px;
    animation: fadeIn 0.5s ease-in;
}

/* More stylish alert text */
.text-danger {
    color: #d9534f;
    font-weight: bold;
    font-size: 1rem;
}

/* Close Button - More Elegant */
.btn-close {
    float: right;
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: #d9534f;
    transition: transform 0.3s ease, color 0.3s ease;
}

.btn-close:hover {
    transform: scale(1.1);
    color: #b52b27;
}

/* Improve Input Fields */
.input-field {
    width: 100%;
    padding: 12px;
    margin-top: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    transition: border-color 0.3s ease;
    font-size: 1rem;
    background-color: #f8f9fa; /* Light grey */
}

/* Highlight Input on Focus */
.input-field:focus {
    border-color: #28a745;
    outline: none;
    box-shadow: 0px 0px 5px rgba(40, 167, 69, 0.3);
}

/* Enhanced Submit Button */
.btn-submit {
    background: #28a745; /* Primary Green */
    color: #fff;
    border: none;
    padding: 12px 20px;
    font-size: 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
}

/* Button Hover */
.btn-submit:hover {
    background: #0056b3; /* Darker Blue */
    transform: translateY(-2px);
}

/* Subtle Button Click Animation */
.btn-submit:active {
    transform: scale(0.98);
}

/* Smooth Fade-in Animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Fix Page Cutting - Better Layout */
.w-100 {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

/* Ensure the feature section is not hidden under the hero section */
.features-section {
    padding-top: 2rem;
    padding-bottom: 2rem;
    z-index: 1; /* Ensure it is above other sections if needed */
}

.chat-container {
    max-height: 400px;
    overflow-y: auto;
    scroll-behavior: smooth;
}

/* Inline Form */
.inline-form {
    display: inline;
}

/* Profile Picture */
.profile-picture {
    max-width: 150px;
}

/* Welcome Title */
.welcome-title {
    color: red;
}

/* Error Text */
.error-text {
    color: red;
}

/* Example Inline Style */
.example-inline-style {
    color: red;
}

.responsive-narrow-form {
    width: 100%;
    max-width: 300px; /* Shrink the form width */
    margin: 0 auto;
}

/* Utility class to offset content below fixed navbar */
.main-content {
    padding-top: 80px; /* Adjust this value based on your navbar height */
    min-height: 100vh;
}

/* Additional spacing for admin pages */
.admin-page-content {
    padding-top: 80px;
    padding-bottom: 20px;
}

/* Ensure buttons and interactive elements are not hidden */
.page-header {
    position: relative;
    z-index: 100;
    background: transparent;
}