@charset "utf-8";
/* CSS Document - menu.css */
/* @import url('calcModel.css'); */
/* Ensure the full page layout is correct */
html, body {
    font-family: Arial, sans-serif;
    display: flex;
	overflow: hidden; /* Prevents an outer scroll bar */
    height: 100%;
    margin: 0;
}

/* ========================
   Sidebar Styles
   ======================== */
.sidebar {
	box-sizing: border-box;
    display: flex;
    flex-direction: column; /* Stack the elements vertically */
    width: 250px;
    height: calc(var(--vh, 1vh) * 100);
    background-color: #2c3e50;
    color: #ecf0f1;
    position: fixed;
    top: 0;
    left: 0;
    transition: transform 0.3s ease-in-out;
    z-index: 1000;
    padding-top: 70px; /* Space for header */
}

/* Sidebar closed (hidden on mobile) */
.sidebar.closed {
    transform: translateX(-100%);
}

/* For testing, use .sidebar.open to see it */
.sidebar.open {
    transform: translateX(0);
}

.sidebar .menu {
	flex-grow: 1; /* This makes the menu fill the available space */
    overflow-y: auto; /* Allow scrolling for long menu items */
    list-style: none;
    padding: 0;
    margin: 0;
	padding-bottom: 50px; /* Ensure last items can scroll above the footer */
	/*scrollbar-width: thin; /* Options: auto, thin, none */
    /*scrollbar-color: #547997 #2c3e50; /* Thumb color then track color */
}

.sidebar .menu li {
    padding: 10px 3px 10px 5px;
    position: relative;
}

/* Hover Effects */
.sidebar .menu li:hover {
    background-color: #34495e;
}

.sidebar .menu li:hover::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 5px;
    height: 100%;
    background-color: #95CEFC;
}

/* Active Menu Item */
.sidebar .menu li.active {
    background-color: #5B8297;
    color: #fff;
}

.sidebar .menu li.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 5px;
    height: 100%;
    background-color: #D1E8FB;
}

/* Sidebar Links */
.sidebar .menu li a {
    color: #ecf0f1;
    text-decoration: none;
    display: block;
    padding: 3px;
    font-size: 14px;
}

/* Custom Scrollbar Styling for WebKit Browsers */
.sidebar .menu::-webkit-scrollbar {
  width: 10px; /* Width of the scrollbar */
  background-color: transparent;
}

.sidebar .menu::-webkit-scrollbar-track {
  background-color: #2c3e50; /* Matches sidebar background */
  border-radius: 5px;
}

.sidebar .menu::-webkit-scrollbar-thumb {
  background-color: #556D80; /* A pleasing light blue */
  border-radius: 5px;
  border: 2px solid #2c3e50; /* Creates a separation effect */
}

.sidebar .menu::-webkit-scrollbar-thumb:hover {
  background-color: #74b0e2; /* Darker blue on hover */
}

/* Sidebar Footer */
.menuFooter {
    margin-top: auto;           /* Pushes the footer to the bottom of the sidebar */
    text-align: center;
    font-size: 14px;
    padding: 10px;
    background-color: #34495e;  /* You can adjust this color as needed */
    color: white;
    box-sizing: border-box;
	width: 100%;
}

.icon {
    font-style: normal !important;
}
.settingsIcon {
    position: absolute;
	margin: -10px -35px -15px -35px;
	padding: 7px;
}
.addAccount {
	color: #2D8032;
}
.link-text{
	padding-left: 2px;
}

.plugin-menu-link {
    display: flex;
    align-items: center;
    gap: 6px;
}

.plugin-menu-link .link-text {
    display: inline-block;
}

.menu-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: #d93025;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    margin-left: 4px;
    vertical-align: middle;
    box-sizing: border-box;
}

/* ========================
   Main Content
   ======================== */
.mainContent {
    flex: 1;
    margin-left: 250px;
	overflow-x: hidden;
    overflow-y: auto; /* Hides Extra Scroll Bar */
	/* Use the dynamically calculated viewport height */
    width: calc(100vw - 250px);
    transition: margin-left 0.3s ease;
    display: flex;
    flex-direction: column;  /* This can help children stack correctly */
}
/* Custom Scrollbar Styling for WebKit Browsers */
::-webkit-scrollbar {
  width: 12px; /* Width of the scrollbar */
  height: 10px;
  background-color: transparent;
}

::-webkit-scrollbar-track {
  background-color: transparent; /* Matches sidebar background */
  border-radius: 6px;
}

::-webkit-scrollbar-thumb {
  background-color: #556D80; /* A pleasing light blue */
  border-radius: 6px;
  border: 2px solid transparent; /* Creates a separation effect */
}

::-webkit-scrollbar-thumb:hover {
  background-color: #74b0e2; /* Darker blue on hover */
}

/* ========================
   Header
   ======================== */
/* On large screens the header is confined to 250px */
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
	background: #FFF;
	/* #173548 - Blue #D87D00 - Orange */
    color: white;
    padding: 10px 20px;
    position: fixed;
    top: 0;
    left: 0;
    width: 250px; /* Exactly same as sidebar */
    box-sizing: border-box;
    z-index: 1100;
}

.site-header .logo img {
    height: 50px;
    max-width: 100%;
}

/* Toggle Button (for mobile) */
.toggle-btn {
    background: transparent;
    color: #000;
    border: none;
    font-size: 24px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

/* -----  SUBMENU --------- hidden by default */
.sidebar .menu li .submenu {
  list-style: none;         /* keep your bullet‐removal */
  margin: 0;                /* keep your zeroed margins */
  padding-left: 0;          /* keep your base padding */
  
  /* slide animation */
  max-height: 0;            /* collapsed */
  overflow: hidden;         /* hide the children when closed */
  transition: max-height 0.8s ease;
}

/* indent the links inside */
.sidebar .menu li .submenu li a {
  display: block;
  padding: 5px 3px 5px 10px; /* your indent + spacing */
  font-size: 13px;
}

/* when the parent has .open, expand it */
.sidebar .menu li.open > .submenu {
  max-height: 500px;        /* big enough to show all items */
}

/* rotate arrow, same timing */
.sidebar .menu li.has-submenu .submenu-arrow {
  transition: transform 0.5s ease;
}
.sidebar .menu li.open .submenu-arrow {
  transform: rotate(180deg);
}

/* ========================
   Mobile Adjustments
   ======================== */
@media (max-width: 944px) {
    /* Sidebar slides in and out */
    .sidebar {
        transform: translateX(-100%);
		box-sizing: border-box;
        padding-top: 70px;  /* Extra spacing so the menu items start below the header */
    }
    .sidebar.open {
        transform: translateX(0);
    }

    /* Header becomes full width on mobile */
    .site-header {
        width: 100%; /* Full width */
        padding: 2px 10px; /* Reduce padding for smaller screens */
        box-sizing: border-box;
		box-shadow: -3px 4px 6px -1px rgba(0, 0, 0, 0.2);
        left: 0;
    }

    /* Position the toggle button inside the header */
    .toggle-btn {
        display: block;
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
    }

    /* Main content gets pushed down to avoid header overlap */
    .mainContent {
		margin-top: 70px; /* This pushes content down below the fixed header */
		/*height: calc(var(--vh, 1vh) * 100);*/
		-webkit-overflow-scrolling: touch; /* For smoother scrolling on iOS */
        margin-left: 0;
		margin-right: 0;
		margin-bottom: 0;
        width: 100%;
    }
}

/* On larger screens the sidebar is always visible and toggle button hidden */
@media (min-width: 945px) {
    .sidebar {
        transform: translateX(0);
    }
    .toggle-btn {
        display: none;
    }
}