/* Using :root for variables is a great practice */
:root {
    --sidebar-width: 200px;
    --logo-green: #25ae4a; /* The color from your logo */
    --hover-green: #1e8e3e; /* A slightly darker shade for hover effect */
    --link-color: #495057; /* A neutral color for inactive links */
    --link-active-background: #e6f7e6; /* A light green for active/hover background */
}

body {
    background-color: #e9ecef;
    font-family: 'Inter', sans-serif;
    overflow-x: hidden; /* Prevents horizontal scroll */
}

/* Container for the entire layout */
.page-container {
    display: flex;
    transition: all 0.3s ease;
    min-height: 100vh; /* Ensures the container fills the viewport height */
}

/* Sidebar Styling */
.sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    background-color: #fff;
    padding: 1rem 0;
    border-right: 1px solid #dee2e6;
    transition: all 0.3s ease;
}

.sidebar-logo {
    display: flex; /* Use flexbox for alignment */
    justify-content: center; /* Horizontally center the content */
    align-items: center; /* Vertically center the content */
    padding: 1rem 0;
    border-bottom: 1px solid #dee2e6;
}

/* New rule to control the size of the logo image */
.sidebar-logo img {
    height: 50px; /* Adjust the height to your preference */
    width: auto;
}

/* * FIX: This is the definitive fix. It targets both the link and the image
 * to remove the outline and box-shadow on focus and hover,
 * using !important to ensure it overrides any other styles.
 */
.sidebar-logo a:focus,
.sidebar-logo a:hover,
.sidebar-logo img:focus,
.sidebar-logo img:hover {
    outline: none !important;
    box-shadow: none !important;
}

.sidebar .nav-link {
    /* Set the default link color to the neutral color variable */
    color: var(--link-color);
    padding: 0.75rem 1rem;
    margin: 0.25rem 0.5rem;
    border-radius: 8px;
    font-size: 1rem;
    display: flex;
    align-items: center;
    transition: all 0.2s ease;
}

/* Updated hover and active states for navigation links to match the green theme */
.sidebar .nav-link:hover, .sidebar .nav-link.active {
    color: var(--logo-green);
    background-color: var(--link-active-background);
}

.sidebar .nav-link.active {
    font-weight: 600;
}

.sidebar .nav-link i {
    width: 20px;
    margin-right: 0.75rem;
}

/* Main content area */
.main-content {
    flex-grow: 1;
    transition: all 0.3s ease;
}

/* Top banner styling */
.top-banner {
    background-color: #fff;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0,0,0,.05);
}

/* User profile in top banner */
.user-profile {
    display: flex;
    align-items: center;
}

.user-profile img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-left: 1rem;
}

/* Dashboard card styling */
.dashboard-card {
    background-color: #fff;
    border-radius: 12px;
    border: 1px solid #dee2e6;
    box-shadow: 0 4px 12px rgba(0,0,0,.05);
    text-align: center;
    padding: 2rem 1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(0,0,0,.1);
}

.dashboard-card .icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.dashboard-card h6 {
    font-weight: 600;
    color: #6c757d;
}

.dashboard-section-title {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    color: #343a40;
}

/* --- BUTTON COLOR CHANGES --- */
/* A simple style for the toggle button to make it look good */
#sidebar-toggle {
    background-color: var(--logo-green);
    border: none;
    color: #fff; /* White icon for contrast */
    cursor: pointer;
    font-size: 1.5rem;
    border-radius: 8px; /* Rounded corners */
    padding: 8px 12px;
}

/* Overriding Bootstrap's primary button color */
.btn-primary {
    background-color: var(--logo-green);
    border-color: var(--logo-green);
}

.btn-primary:hover {
    background-color: var(--hover-green);
    border-color: var(--hover-green);
}

/* --- SIDEBAR TOGGLE --- */
/* This class is added by JavaScript to hide the sidebar */
.page-container.collapsed .sidebar {
    width: 0;
    min-width: 0;
    overflow: hidden;
}

.page-container.collapsed .main-content {
    margin-left: 0;
}