/* ===========================
   Color Styling - Modern Theme
   =========================== */

/* Overall page background */
body {
    background-color: #E8F1F8;
    /* light gray-blue */
}

/* Sidebar (menu panel) */
#sidebar-wrapper {
    background-color: #2f3640;
    /* dark gray */
    /* border-right: 3px solid #718093; */
    /* subtle border */
    color: #f5f6fa;
    /* light text */
}

/* Sidebar text links */
#sidebar-wrapper .nav-link {
    color: #dcdde1;
    /* soft white */
    font-weight: 500;
}

#sidebar-wrapper .nav-link:hover {
    background-color: #40739e;
    /* soft blue hover */
    color: #f5f6fa;
}

/* Sidebar header text */
#sidebar-wrapper .sidebar-header h3 {
    color: #f5f6fa;
}

/* Navbar */
.navbar {
    background-color: #40739e;
    /* soft blue */
    border-bottom: 2px solid #2f3640;
    color: #f5f6fa;
}

/* Dropdown menu */
.dropdown-menu {
    background-color: #f5f6fa;
    border: 1px solid #718093;
}

.dropdown-menu .dropdown-item:hover {
    background-color: #dcdde1;
}

#sidebar-wrapper .nav-link.active {
    background-color: #40739e;
    /* bright blue */
    color: white;
}

.selected-menu-tile {
    background-color: #353b48;
    /* slightly lighter sidebar */
    color: #f5f6fa;
}

/* White background for dashboard cards/columns */
.bg-white-col {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
}

/* General text */
.text-left {
    color: #2f3640;
}

/* Menu toggle button */
#menu-toggle {
    background-color: #2f3640;
    color: #f5f6fa;
}

.nav .border-bottom {
    border-bottom: 1px solid #465161 !important;
}

/* Top sidebar section */
.sidebar-top {
    background-color: #2f3640;
}

/* Chart Legend Colors */
.legend-color.blue {
    background-color: #00a8ff;
}

.legend-color.grey {
    background-color: #95a5a6;
}

.legend-color.black {
    background-color: #2f3640;
}

.legend-color.green {
    background-color: #4cd137;
}

/* ≥100% */
.legend-color.yellow {
    background-color: #fbc531;
}

/* ≥90% */
.legend-color.orange {
    background-color: #e84118;
}

/* Budget line */

.dropdown-menu {
    background-color: #e8f1f8;
}

.dropdown-menu .dropdown-item:hover {
    background-color: #fefcfc;
    /* light grey hover */
    color: #2b2c2c;
    /* text changes to blue on hover */
}


/* Blue style for all .btn elements */
.btn-custom {
    background-color: #2f3640;
    /* Bootstrap Gray */
    color: white;
    border: none;
    transition: background-color 0.3s ease;
}

.btn-custom:hover {
    background-color: #40739e;
    /* Darker Gray on hover */
    color: white;
}

.btn-custom:active {
    background-color: #40739e;
}

.offcanvas {
    background-color: #f5f6fa;
}

.dashboard_topbar_title {
    color: #2f3640 !important;
}

/* ===========================
   Extended Blue Theme Styles
   =========================== */

/* Primary Custom Button */
.btn-custom-primary {
    background-color: #40739e;
    /* same soft blue as navbar */
    color: white;
    border: none;
    transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
}

.btn-custom-primary:hover {
    background-color: #2f3640;
    /* light hover for contrast */
    color: white;
    /* text in original blue */
    border: 1px solid white;
    /* subtle blue border on hover */
}

.btn-custom-primary:active {
    background-color: #2f3640;
    /* dark sidebar gray */
    color: white;
}

/* Custom background classes */
.custom_bg_primary {
    background-color: #E8F1F8 !important;
    /* blue navbar color */
    color: #2f3640 !important;
    /* readable text */
}

.custom_bg_secondary {
    background-color: #2f3640 !important;
    /* dark sidebar gray */
    color: #f5f6fa !important;
    /* light text */
}