/* =====================================
   Base Global Styles
===================================== */

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    /*margin: 0;*/
    /*margin-bottom: 60px;*/
    font-family: sans-serif;
    /*height: 100%;*/
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}


/* =====================================
   Layout + Topbar
===================================== */

.topbar {
    background-color: white;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: auto;
    min-height: 70px;
}

/* Improved alignment & spacing */
.topbar-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0px;
    /*padding-left: 12px;*/
}

.topbar-right > * {
    display: flex;
    align-items: center;
    gap: 0px;
}

.topbar-right .divider {
    border-left: 1px solid #ccc;
    margin-left: 12px;
    padding-left: 12px;
    height: 32px;
    align-self: center;
}

.divider.vertical {
    border-left: 1px solid #ccc;
    height: 33px;
    margin-left: 12px;
    padding-left: 12px;
}

.avatar-img {
    height: 32px;
    width: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.arrow-icon {
    width: 10px;
    height: 10px;
    margin-left: 4px;
    vertical-align: middle;
}

/*.flag {
    width: 24px;
    height: 16px;
}*/

/* Responsive handling */
@media (max-width: 768px) {
    .topbar {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .topbar-right {
        justify-content: center;
        padding-top: 10px;
    }

    .topbar-right .divider {
        border-left: none;
        margin: 0;
        padding: 0;
    }
}
/* -------------------------------------------------------------------------
   Layout Height Fix
   -------------------------------------------------------------------------
   Previously, the layout container used a fixed height:
       height: calc(100vh - 60px);

   This caused layout issues when the sidebar became taller than the viewport.
   Because the height was fixed, the sidebar overflowed beyond the container
   and produced a visible white gap at the bottom of the page.

   Changing to `min-height` allows the layout to grow naturally with its
   content. Flexbox will stretch both sidebar and main-content correctly
   without forcing them to fit inside the viewport.

   Benefits of this fix:
     - No more bottom white gaps on pages with long sidebar menus.
     - Sidebar and main-content always stay aligned vertically.
     - Allows full-page scrolling when content exceeds viewport height.
     - Works correctly in expanded and collapsed sidebar modes.

   This aligns the layout behavior with modern admin panel standards.
   ------------------------------------------------------------------------- */
.layout {
    display: flex;
    min-height: calc(100vh - 60px); /* allow page to grow beyond viewport */
    margin-top: 60px;
    background-color: white;
    align-items: stretch; /* children (sidebar + content) share same height */
}

.main-content {
    flex-grow: 1;
    background-color: #F5F5F5;
    padding: 20px;
    margin-left: 5px;
    overflow: auto;
}


/* =====================================
  Sidebar Core Styles
===================================== */

.sidebar {
    background-color: #F5F5F5;
    width: 80px;
    transition: width 0.3s ease;
}

.sidebar.expanded {
    width: 240px;
}

.sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar li {
    padding: 0;
    cursor: pointer;
}


/* =====================================
    Einklappen Button
===================================== */

#einklappen-item {
    margin-top: 24px;
}

.einklappen-icon-bg {
    /*background-color: #006699;*/   
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 0;
}

.einklappen-icon-bg img {
    width: 22px;
    height: 22px;
}


/* =====================================
   ?? Menu Item Styles
===================================== */

.menu-item {
    height: 40px; 
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 12px;
    padding-right: 12px;
    gap: 12px;
    margin-top: 6px;
}

.sidebar.expanded .menu-item {
    justify-content: space-between;
    padding-left: 12px;
    padding-right: 12px;
}

.sidebar:not(.expanded) .menu-item {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 0;
    height: 50px; /* Same fixed height here as well */
}


/* =====================================
    Icons + Labels + Arrows
===================================== */

.icon {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.icon img,
.menu-item img:not(.arrow-icon) {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.label {
    display: none;
    /*flex-grow: 1;*/
}

.sidebar.expanded .label {
    display: inline;
}

.arrow-inline {
    display: none;
    font-size: 30px;
    color: #333;
    margin-right: 40px; /* remove or reduce */
    order: 1;
}

.sidebar.expanded .arrow-inline {
    display: inline;
}

.arrow-below {
    display: none;
    font-size: 12px;
    color: #555;
    text-align: center;
    margin-top: 4px;
}

.sidebar:not(.expanded) .arrow-below {
    display: block;
}
/* -------------------------------------------------------------------------
   Submenu Visibility Logic (CSS-only)
   -------------------------------------------------------------------------
   We removed the old JS method `updateSubmenuDisplay()` because submenu
   visibility should not be controlled dynamically in JavaScript. The server
   already decides which menu item is active, so the frontend must simply
   *show or hide* submenus based on:

       1) Sidebar mode (expanded vs. collapsed)
       2) Which main menu item is "active"

   These CSS rules replace the old JS logic and ensure consistent behavior
   across multiple tabs, page refreshes, and role-based menu rendering.
   ------------------------------------------------------------------------- */

/* When sidebar is expanded then always show all submenus (normal navigation mode) */
.sidebar:not(.collapsed) .submenu {
    display: block !important; /* Server-driven active states remain intact */
}
/* When sidebar is collapsed then hide all submenus by default */
.sidebar.collapsed .submenu {
    display: none; /* Prevent clutter in collapsed mode */
}
/* In collapsed mode then only show submenu under the currently active main menu */
.sidebar.collapsed li.active .submenu {
    display: flex !important; /* Show only the active subtree */
    flex-direction: column; /* Stack submenu items vertically */
}


/* =====================================
    Sidebar Main Layout
===================================== */
#sidebar {
    width: 250px;
    transition: width 0.3s ease;
    /*overflow: auto;*/
}

#sidebar.collapsed {
    width: 60px;
}

/* =====================================
    Submenus (Mandant, PickPort etc.)
===================================== */
.sidebar .submenu {
    list-style: none;
    margin: 5px;
    padding: 0 0 0 50px;
    font-size: 14px;
}

#sidebar.expanded .submenu li {
    display: block;
    padding: 3px 0px 3px 0px;
    height: 44px;
}

#sidebar.collapsed .has-sub.active .submenu {
    display: flex !important;
    flex-direction: column;
    align-items: center;
}

#sidebar.collapsed .has-sub:not(.active) .submenu {
    display: none !important;
}


/* Smooth transition for submenu items */
#sidebar .submenu li {
    transition: all 0.3s ease;
}

/* Expanded submenu links */
.sidebar.expanded .submenu a {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #333;
    padding-left: 8px;
}

/* Submenu icons */
.sidebar .submenu img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

/* Hover effect */
/*.sidebar .submenu a:hover {
    color: #000;
    font-weight: 500;
    padding: 6px;
}*/

.sidebar.collapsed .submenu .icon {
    width: 40px;
    height: 40px;
}

.sidebar.collapsed .submenu {
    padding-left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sidebar.collapsed .submenu li {
    display: block;
    padding: 6px 0;
}

.sidebar.collapsed .submenu a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-size: 12px;
    /*font-size: 0;*/ /* Hide leftover text spacing */
    gap: 4px;
}

.sidebar.collapsed .submenu .label {
    display: none !important;
}

#toggleSidebar {
    cursor: pointer;
    z-index: 1001; /* optional: make it higher if something overlays it */
}

/* Optional: hide text labels in collapsed mode if needed */

.sidebar.collapsed .submenu .arrow-inline,
.sidebar.collapsed .submenu .arrow-below {
    display: none;
}

/* Also ensure this in collapsed state */
.sidebar.collapsed li.active .menu-item {
    background-color: #e0e0e0;
}

/* =====================================
    Active & Hover States
===================================== */

.sidebar li.active .menu-item {
    background-color: #e0e0e0;
    font-weight: bold;
    border-radius: 0;
}

.sidebar a {
    text-decoration: none !important;
    color: inherit !important;
}

.sidebar a:hover .menu-item {
    background-color: #e0e0e0;
    text-decoration: none;
    /*padding: 6px 0px;*/
}


/* =====================================
   Topbar User / Avatar / Flags
===================================== */

.avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #ccc;
}

.avatar-img {
    height: 32px;
    width: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.flag-icon {
    height: 23px;
    width: 35px;
    object-fit: cover;
    border: 1px solid #000;
}

/* Override for flags inside dropdown list */
.dropdown-flag {
    border-radius: 0 !important;
}
.dropdown-menu.show {
    /*transform: translate3d(0px, 100%, 0px) !important;*/ /* aligns directly below button */
    /*transform: translate3d(-10px, 27px, 0px) !important;*/
    border-radius: 0px !important;
}
.dropdown-menu .flag-icon {
    border-radius: 0 !important;
}
.language-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px; /* or adjust to match dropdown item width */
    padding: 0;
    border: none;
    background: transparent;
}
#languageFlagDDL {
    width: 48px !important; /* match the button width exactly */
    min-width: unset !important;
    padding: 2px;
    text-align: center;
    margin-top: 2px;
}

#logoutDDL{
    height:51px;
}

.topbar-right .divider {
    border-left: 1px solid #333;
    padding-left: 12px;
    margin-left: 12px;
    display: flex;
    align-items: center;
    font-size: 14px;
}

.divider.vertical {
    height: 34px;
    align-self: center;
    border-left: 1px solid #333;
    margin-left: 12px;
    padding-left: 12px;
}

/*.arrow-light {
    font-weight: normal;
    font-size: 12px;
    color: #999;
    margin-left: 4px;
}*/
.arrow-icon {
    width: 10px;
    height: 10px;
    margin-left: 4px;
    vertical-align: middle;
}

/*.sidebar.collapsed .submenu .label {
    display: none;
}*/

.sidebar.collapsed .submenu li {
    justify-content: center;
}

.Corner-Radius {
    border-radius: 0 !important; /* forcefully remove corners */
}

.sidebar .submenu .active-sub {
    background-color: #e0e0e0;
    border-radius: 0;
    padding: 4px;
    display: flex;
    justify-content: center;
}

.sidebar .submenu .active-sub img {
    filter: grayscale(100%) brightness(0.6);
}

.dropdown-toggle::after {
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
}

/* Keep dropdown menu same width as the toggle button */
.dropdown-menu {
    min-width: auto !important;
    width: auto !important;
    padding: 20px;
    text-align: center;
}

.dropdown-item {
    padding: 4px !important;
}

.sidebar .active > .main-link {
    background-color: #e6e6e6;
    font-weight: bold;
}
.einklappen-icon-bg {
    transition: background-color 0.3s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 4px;
}

.einklappen-icon-bg:hover {
    background-color: #1976d2; 
    transform: scale(1.05);
    cursor: pointer;
}

.einklappen-icon-bg img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: none !important;
    background: none;
}

/* Proper hover effect for submenu items */
.sidebar .submenu li a:hover {
    background-color: #e0e0e0; /* Matches Settings row background */
    color: #000;
    font-weight: 500;
    border-radius: 0;
}


/* Set a consistent height and padding for all submenu links */
.sidebar .submenu a {
    display: flex;
    align-items: center;
    height: 40px; /* fixed height so hover/active don't move */
    padding: 6px 0px; /* same padding in all states */
    color: #333;
    font-weight: 400; /* keep weight stable */
    text-decoration: none;
}

/* Active submenu item */
.sidebar .submenu li.active-sub a {
    background-color: #e0e0e0;
    color: #000;
    font-weight: 500;
}

/* Hover effect — only change color & bg, not padding or height */
.sidebar .submenu a:hover {
    background-color: #e0e0e0;
    color: #000;
    font-weight: 500; /* same as active, won't shift height if line-height is fixed */
}

/* Ensure text stays aligned vertically */
.sidebar .submenu a span {
    line-height: 1.2; /* avoids vertical misalignment */
}

#layoutlogout{
    margin-top: -10px;
}