/* --- 1. GLOBAL COLORS & BACKGROUNDS --- */
:root {
    --page-bg: #f5f5f5;          /* White Smoke */
    --sidebar-panel-bg: #e9e9e9; /* Slightly darker than White Smoke */
    --dark-text: #2c3e50;        /* Contasting dark text */
    --active-text: #000000;      /* Brighter/Sharper active text */
    --brand-green-dark: #1e5631; /* Dark Green for Headers */
    --btn-bg: #dcdcdc;           /* Slightly darker than sidebar for depth */
    --icon-green: #3bb505;       /* Requested Dark Green icons */
}

/* Apply Page Background to all states (Logged in/out) */
body, .app-main, .main-content, section#main-body {
    background-color: var(--page-bg) !important;
    color: var(--dark-text) !important;
}

/* --- 2. SIDEBARS & PANELS --- */
/* Sidebar/Panel Background & Text */
.sidebar .card, .panel, .list-group-item, .card {
    background-color: var(--sidebar-panel-bg) !important;
    color: var(--dark-text) !important;
    border-color: #d1d1d1 !important;
}

/* Sidebar Heading Background (Dark Green with White Text) */
.sidebar .card-header, 
.sidebar .panel-heading, 
.list-group-item-header {
    background-color: var(--brand-green-dark) !important;
    color: #ffffff !important;
}

/* --- 3. NAVIGATION & ACTIVE STATES --- */
/* Text contrast for non-active items */
.list-group-item {
    color: var(--dark-text) !important;
}

/* Active item text (Brighter/Sharper) */
.list-group-item.active, 
.list-group-item:hover,
.nav-link.active {
    background-color: #e0e0e0 !important; /* Light highlight */
    color: var(--active-text) !important;
    font-weight: 600;
}

/* --- 4. BUTTONS & ICONS --- */
/* Button styling */
.btn-default, .btn-primary, .btn-info {
    background-color: var(--btn-bg) !important;
    color: var(--dark-text) !important;
    border-color: #cccccc !important;
}

/* Icon Colors (Green Icons as requested) */
i.fas, i.far, i.fa, .list-group-item i, .tile i {
    color: var(--icon-green) !important;
}

/* --- 5. LOGGED-OUT SPECIFIC FIXES --- */
/* Ensures the login/registration containers match the theme */
.login-container, .registration-container {
    background-color: var(--sidebar-panel-bg) !important;
    border: 1px solid #d1d1d1;
    padding: 20px;
    border-radius: 8px;
}