:root {
    /* Default Colour settings */
    --default-sidebar-text-color: #dd3e46; /* Text color */
    --default-sidebar-bg-color: rgba(71, 0, 15, 0.2); /* Background color */
    --default-sidebar-hover-color: rgba(161, 29, 29, 0.2); /* Hover color */
    --sidebar-blur: 10px; /* Sidebar blur effect */

    --border-width: 1.5px; /* Border line width */
    --border-size: 0.3rem; /* Border size */
    --default-border-color: #640015; /* Border color */
    --default-background-color: #640015;
    --default-text-color: #dd3e46; /* Text color */
    --default-empty-color: #dd3e46;
    --default-icon-color: #dbcc42; /* Icon color */
    --default-icon-hover-color: #e6d32a; /* Icon color */
    
    /* Accesibility versions of all colours */
    --accesible-sidebar-text-color: #008cff; /* Accessible text color */
    --accesible-sidebar-bg-color: rgba(0, 0, 0, 0.2); /* Accessible background color */
    --accesible-sidebar-hover-color: rgba(45, 61, 151, 0.2); /* Accessible hover color */
    
    --accessible-border-color: #ffffff; /* Accessibility border color */
    --accessible-background-color: #ffffff; /* Accessibility background color */
    --accessible-text-color: #008cff; /* Accessibility text color */
    --accessible-empty-color: #000000; /* Accessibility empty color */
    --accessible-icon-color: #000000; /* Accessibility icon color */
    --accessible-icon-hover-color: #0051ff; /* Accessibility icon hover color */
    
    /* Initial values of all colours (Dynamic during runtime) */
    --sidebar-text-color: var(--default-sidebar-text-color); /* Text color */
    --sidebar-bg-color: var(--default-sidebar-bg-color); /* Background color */
    --sidebar-hover-color: var(--default-sidebar-hover-color); /* Hover color */
    --border-color: var(--default-border-color); /* Border color */
    --background-color: var(--default-background-color); /* Background color */
    --text-color: var(--default-text-color); /* Text color */
    --empty-color: var(--default-empty-color); /* Empty color */
    --icon-color: var(--default-icon-color); /* Icon color */
    --icon-hover-color: var(--default-icon-hover-color); /* Icon hover color */
}

/* Sidebar Toggle Button */
.sidebar-toggle {
    position: fixed; /* Fix the button's position */
    top: 20px; /* Distance from the top of the page */
    right: 20px; /* Distance from the right of the page */
    z-index: 1051; /* Ensure it stays above other elements */
}

.sidebar-toggle.btn {
    /* --bs-btn-color: var(--btn-color); (overriden) */
    --bs-btn-bg: var(--btn-color);
    --bs-btn-border-color: var(--btn-color);
    --bs-btn-hover-color: var(--background-color);
    --bs-btn-hover-bg: var(--btn-hover-color);
    --bs-btn-hover-border-color: var(--btn-hover-color);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: var(--background-color);
    --bs-btn-active-bg: var(--btn-hover-color);
    --bs-btn-active-border-color: var(--btn-hover-color);
    --bs-btn-border-radius: 0.5rem;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5);
}


/* Sidebar */
#sidebar.offcanvas {
    background-color: rgba(43, 43, 43, 0.2); /* Semi-transparent background */
    backdrop-filter: blur(var(--sidebar-blur)); /* Apply blur effect */
    -webkit-backdrop-filter: blur(var(--sidebar-blur)); /* For Safari support */
    color: var(--sidebar-text-color); /* Set text color */
}

/* Sidebar Header */
#sidebar .offcanvas-header {
    background-color: var(--sidebar-bg-color); /* Slightly darker background for the header */
    color: var(--sidebar-text-color); /* Set text color */
}

/* Sidebar Body */
#sidebar .offcanvas-body {
    background-color: var(--sidebar-bg-color); /* Match the sidebar background */
    color: var(--sidebar-text-color); /* Set text color */
}

/* Sidebar List Items */
#sidebar .list-group-item {
    background-color: transparent; /* Transparent background for list items */
    color: var(--sidebar-text-color); /* Set text color */
    border: none; /* Remove borders */
}

#sidebar .list-group-item:hover {
    background-color: var(--sidebar-hover-color); /* Highlight color on hover */
    color: var(--sidebar-text-color);
}

/* Options dropdown ----------------------------------- */

/* Dropdown Menu Styling */
div.dropdown .dropdown-menu {
    background-color: var(--sidebar-bg-color); /* Match sidebar background */
    color: var(--sidebar-text-color); /* Match sidebar text color */
    border-radius: 0.25rem; /* Slightly rounded corners */
    padding: 0.5rem; /* Add padding */
}

/* Dropdown Item Styling */
div.dropdown .dropdown-item {
    color: var(--sidebar-text-color); /* Match sidebar text color */
    padding: 0.5rem 1rem; /* Add padding */
    font-size: 1rem; /* Adjust font size */
    white-space: normal; /* Allow text to wrap */
}

/* Hover Effect for Dropdown Items */
#sidebar div.dropdown .dropdown-item:hover {
    background-color: var(--sidebar-hover-color); /* Match sidebar hover color */
    color: var(--text-color) !important; /* Adjust text color on hover */
}


/* Footer */
#footer {
    background-color: var(--text-color); /* Set the background color */
    color: var(--background-color); /* Set the text color */
    text-align: center;
    padding: 0.5rem;
    width: 100%;
}

/* Disable scrolling when the sidebar is active */
.no-scroll {
    overflow: hidden; /* Disable scrolling */
}