/*
  Full height setup:
  - Sets html and body to 100% height.
  - Applies a light background and dark text color.
  - Uses flex layout in column direction for proper stacking of header, content, and footer.
*/
*{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}



html, body {
    height: 100%;
    background-color: #f8f9fa; /* Light gray background */
    color: #333; /* Dark text color */
    display: flex;
    flex-direction: column;
}

/*
  Navbar:
  - Fixed at the top of the viewport.
  - Spans the full width of the page.
  - Has a high z-index to ensure it stays above other elements.
  - Dark background with a subtle box-shadow for depth.
*/
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    background-color: #000; /* Black background */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* Subtle shadow effect */
}

/*
  Logo:
  - Sets a fixed height for the logo image while maintaining its aspect ratio.
  - Adds a right margin for spacing between the logo and adjacent elements.
*/
.logo {
    height: 45px;
    width: auto;
    margin-right: 10px;
}

/*
  Sidebar:
  - Fixed sidebar with a width of 250px and full viewport height.
  - Positioned below the navbar (using top offset) and fixed to the left.
  - Allows vertical scrolling if content exceeds viewport height.
  - Dark background with padding and a right-side shadow for depth.
*/
.sidebar {
    width: 250px;
    height: 100vh;
    position: fixed;
    top: 56px; /* Adjust according to the navbar height */
    left: 0;
    overflow-y: auto;
    background-color: #222; /* Dark background */
    color: white;
    box-shadow: 2px 0 6px rgba(0, 0, 0, 0.3); /* Right-side shadow */
    padding: 20px;
}

/*
  Sidebar Heading:
  - Styles the heading in the sidebar with a bottom border, padding, and margin.
  - Uses a lighter text color for better contrast.
*/
.sidebar h4 {
    border-bottom: 2px solid #444;
    padding-bottom: 10px;
    margin-bottom: 15px;
    color: #f8f9fa;
}

/*
  Sidebar Navigation Links:
  - Default state styles for the links.
  - Includes smooth transitions for hover effects.
*/
.sidebar .nav-link {
    color: #ddd; /* Light grey text */
    transition: all 0.3s ease-in-out;
    padding: 10px;
    display: block;
}

/*
  Sidebar Navigation Hover:
  - Changes background and text color on hover.
  - Adds rounded corners for visual appeal.
*/
.sidebar .nav-link:hover {
    background-color: #444;
    color: white;
    border-radius: 5px;
}

/*
  Dropdown Toggle:
  - Adds a custom arrow indicator after dropdown toggles.
  - The arrow is styled to be small and aligned correctly.
*/
.dropdown-toggle::after {
    display: inline-block;
    margin-left: 8px;
    vertical-align: 0.255em;
    content: "▼"; /* Down arrow indicator */
    font-size: 12px;
}

/*
  Sidebar Dropdown Menu:
  - Sets a dark background and removes the border.
  - Ensures the dropdown spans full width and adds a subtle shadow.
*/
.sidebar .dropdown-menu {
    overflow-y: auto;
    max-height: 300px;   /* Adjust height as needed */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;
    background-color: #333;
    border: none;
    width: 100%;
    padding: 0;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
}

.sidebar .dropdown-menu::-webkit-scrollbar {
    display: none;  /* Chrome, Safari, Opera */
}

/*
  Dropdown Items:
  - Styles individual dropdown items for legibility and responsiveness.
  - Allows text wrapping and breaks long words properly.
  - Limits maximum width to ensure proper layout.
*/
.sidebar .dropdown-item {
    color: #ddd;
    padding: 10px;
    transition: background 0.3s ease-in-out;
    white-space: normal; /* Allows wrapping */
    word-wrap: break-word; /* Breaks long words */
    max-width: 230px;
}

/*
  Dropdown Item Hover:
  - Changes background and text color when hovering over an item.
*/
.sidebar .dropdown-item:hover {
    background-color: #555;
    color: white;
}

/*
  Main Content:
  - Provides a left margin to account for the sidebar.
  - Applies a top margin to leave space for the fixed navbar.
  - Uses flex-grow to fill available space.
  - Adds padding, a white background, a subtle shadow, and rounded corners.
*/
.main-content {
    margin-left: 250px; /* Space for sidebar */
    margin-top: 80px; /* Space for navbar plus extra margin */
    flex-grow: 1;
    padding: 20px;
    background-color: white;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

/*
  Footer:
  - Spans the full width of the page.
  - Has a dark background and white text.
  - Uses margin-top: auto to ensure it stays at the bottom of the page when content is short.
  - Includes padding and a top shadow for separation.
*/
.footer {
    width: 100%;
    background-color: #000;
    color: white;
    text-align: center;
    padding: 10px;
    box-shadow: 0px -4px 6px rgba(0, 0, 0, 0.2);
    margin-top: auto;  /* Ensures the footer is pushed to the bottom */
}