/* Base styles */
body {
    font-family: 'Poppins', sans-serif; /* Modern font */
    background-color: #f8f9fa; /* Light background for the body */
    color: #212529; /* Standard dark text color */
}

/* Navbar */
.navbar-brand {
    font-family: 'Lobster', cursive; /* Keep special font for brand */
    font-size: 1.75rem; /* Slightly larger brand */
    color: #0d6efd; /* Example primary color */
}

.navbar {
    box-shadow: 0 2px 4px rgba(0,0,0,.1); /* Subtle shadow for depth */
}

.nav-link {
    color: #495057; /* Slightly muted nav link color */
    transition: color 0.2s ease-in-out; /* Smooth hover effect */
}

.nav-link:hover,
.nav-link.active { /* Style for active link */
    color: #0d6efd; /* Highlight color on hover/active */
}

.navbar-toggler {
    border: none; /* Cleaner toggler */
}

.dropdown-item {
    transition: background-color 0.2s ease-in-out; /* Smooth hover for dropdown */
}

.dropdown-item:hover {
    background-color: #e9ecef; /* Light hover for dropdown items */
}


/* Content Area */
.content-wrapper {
    padding: 20px; /* Keep padding */
    background-color: #ffffff; /* White background for content */
    border-radius: 8px; /* Slightly rounded corners */
    box-shadow: 0 1px 3px rgba(0,0,0,.1); /* Subtle shadow for content area */
    margin-bottom: 2rem; /* Add some space at the bottom */
}

/* Buttons (Example - Apply .btn classes in your templates) */
.btn-primary {
    background-color: #0d6efd;
    border-color: #0d6efd;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.btn-primary:hover {
    background-color: #0b5ed7;
    border-color: #0a58ca;
}

/* Add more styles for other elements like forms, tables, etc. as needed */