/* Modern UI font stack for better readability */
#grp-navigation {
    padding: 0px 0px !important;
    min-width: 640px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
}

/* Hide grp-admin-title completely */
#grp-admin-title {
    display: none !important;
}

#grp-navigation ul li {
    position: relative;
    list-style: none;
}

#grp-navigation ul li a {
    white-space: nowrap;
}

#grp-navigation #navigation-menu {
    z-index: 9999;
}

#grp-navigation #bookmark-button {
    cursor: pointer;
    float: right;
    top: auto;
    height: 25px;
    width: 24px;
    margin-top: 4px;
    margin-right: 10px;
    margin-left: 3px;
    border: none;
    text-indent: -5000px;
    overflow: hidden;
    background: transparent url(/static/admin_tools/images/admin-tools.png) no-repeat 0 -425px;
}

#grp-navigation #bookmark-button.bookmarked {
    background-position: 0 -445px;
}

#grp-navigation ul#navigation-menu li {
    float: left;
}

#grp-navigation ul#navigation-menu li a {
    display: block;
    text-decoration: none;
    font-weight: bold;
    padding: 9px 8px;
    /*border-right: 1px solid #ededed;*/
    border-right: 1px solid #090909;
    border-left: 1px solid #343434;

}

#grp-navigation ul#navigation-menu li.disabled a {
    color: #bbb;
    cursor: default;
}

#grp-navigation ul#navigation-menu li.first a {
    margin: 5px 0 0 0;
    padding-top: 4px;
    height: 12px;
}

#grp-navigation ul#navigation-menu li span {
    float: right;
    height: 10px;
    width: 20px;
    background: transparent url(/static/admin_tools/images/admin-tools.png) no-repeat 0 -360px;
}

#grp-navigation ul#navigation-menu li:hover,
#grp-navigation ul#navigation-menu li.over,
#grp-navigation ul#navigation-menu li.selected {

}

#grp-navigation ul#navigation-menu li ul {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: auto;
    left: auto;
    margin: 0;
    border-color: black !important;
    padding: 0px;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    z-index: 99999;
}

#grp-navigation ul#navigation-menu li ul li {
    padding: 0;
    float: none;

    background: none repeat scroll 0 0 #222222;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-top: 1px solid #090909;
    display: block;
    margin: -1px 0 0 -1px;
    z-index: 99999;
}

#grp-navigation ul#navigation-menu li ul li a {
    display: block;
    border-width: 0 1px 1px 1px;
    text-transform: none;
    min-width: 180px;
    transition: background-color 0.25s ease, padding-left 0.2s ease, border-left 0.2s ease;
    background-color: #222222;
    border-left: 3px solid transparent;
}

#grp-navigation ul#navigation-menu li ul li a:hover {
    background-color: #3a3a3a;
    border-left: 3px solid #5a9fd4;
}

#grp-navigation ul#navigation-menu li ul li span {
    background-position: 0 -370px;
}

#grp-navigation ul#navigation-menu li ul li ul {
    left: 100%;
    top: 0;
    border-top: 1px solid #ededed;
}

#grp-navigation ul#navigation-menu li ul li ul li a {
    white-space: nowrap;
}

#grp-navigation ul#navigation-menu li:hover ul li ul,
#grp-navigation ul#navigation-menu li.over ul li ul {
    visibility: hidden;
    opacity: 0;
}

#grp-navigation ul#navigation-menu li:hover ul,
#grp-navigation ul#navigation-menu li.over ul,
#grp-navigation ul#navigation-menu li ul li:hover ul,
#grp-navigation ul#navigation-menu li ul li.over ul {
    visibility: visible;
    opacity: 1;
}

#grp-navigation ul#navigation-menu li:hover ul li,
#grp-navigation ul#navigation-menu li.over ul li,
#grp-navigation ul#navigation-menu li ul li:hover ul li,
#grp-navigation ul#navigation-menu li ul li.over ul li {
}

#grp-navigation ul#navigation-menu li ul li:hover,
#grp-navigation ul#navigation-menu li ul li.over,
#grp-navigation ul#navigation-menu li ul li ul li:hover,
#grp-navigation ul#navigation-menu li ul li ul li.over {

}

#grp-navigation ul#navigation-menu li.disabled a:hover,
#grp-navigation ul#navigation-menu li.disabled a.over {
    background: none;
}

/* Menu icons using ::before with emoji - improved visibility */
#grp-navigation ul#navigation-menu li.menu-icon-home > a::before,
#grp-navigation ul#navigation-menu li.menu-icon-bookmarks > a::before,
#grp-navigation ul#navigation-menu li.menu-icon-web > a::before,
#grp-navigation ul#navigation-menu li.menu-icon-api > a::before,
#grp-navigation ul#navigation-menu li.menu-icon-settings > a::before,
#grp-navigation ul#navigation-menu li.menu-icon-structure > a::before,
#grp-navigation ul#navigation-menu li.menu-icon-edit > a::before,
#grp-navigation ul#navigation-menu li.menu-icon-reports > a::before,
#grp-navigation ul#navigation-menu li.menu-icon-dashboard > a::before,
#grp-navigation ul#navigation-menu li.menu-icon-admin > a::before,
#grp-navigation ul#navigation-menu li.menu-icon-user > a::before {
    margin-right: 6px;
    font-weight: normal;
    filter: saturate(0.8) brightness(1);
}

#grp-navigation ul#navigation-menu li.menu-icon-home > a::before {
    content: "";
    background-image: url('/static/images/bpp-icon.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

#grp-navigation ul#navigation-menu li.menu-icon-bookmarks > a::before {
    content: "🔖";
}

#grp-navigation ul#navigation-menu li.menu-icon-web > a::before {
    content: "🌐";
}

#grp-navigation ul#navigation-menu li.menu-icon-api > a::before {
    content: "🔗";
}

#grp-navigation ul#navigation-menu li.menu-icon-settings > a::before {
    content: "⚙️";
}

#grp-navigation ul#navigation-menu li.menu-icon-structure > a::before {
    content: "🏛️";
}

#grp-navigation ul#navigation-menu li.menu-icon-edit > a::before {
    content: "✏️";
}

#grp-navigation ul#navigation-menu li.menu-icon-reports > a::before {
    content: "📊";
}

#grp-navigation ul#navigation-menu li.menu-icon-dashboard > a::before {
    content: "🏠";
}

#grp-navigation ul#navigation-menu li.menu-icon-admin > a::before {
    content: "🔧";
}

#grp-navigation ul#navigation-menu li.menu-icon-user > a::before {
    content: "👤";
}

/* -------------------------------------------------------------------------------- */
/* Responsive font sizing strategy for menu */
/* -------------------------------------------------------------------------------- */
/*
   Breakpoints:
   - >1490px: Full size (11px base)
   - 1400-1490px: Slightly reduced (10px)
   - 1364-1400px: More reduced (9.5px)
   - 1200-1364px: Even more reduced (9.2px)
   - 1050-1200px: Further reduced (9px)
   - ≤1050px: Icons only (text hidden)
*/

/* First reduction at 1490px */
@media (max-width: 1490px) {
    #grp-navigation ul#navigation-menu li a {
        font-size: 12px !important;
    }
}

/* Second reduction at 1400px */
@media (max-width: 1400px) {
    #grp-navigation ul#navigation-menu li a {
        font-size: 11px !important;
    }
}

/* Third reduction at 1364px */
@media (max-width: 1364px) {
    #grp-navigation ul#navigation-menu li a {
        font-size: 11px !important;
    }
}

/* Disable padding shift on hover below 1400px */
@media (max-width: 1400px) {
    /* Padding shift disabled - no change on hover */
}

/* More reduced font size for smaller screens */
@media (max-width: 1200px) {
    #grp-navigation ul#navigation-menu li a {
        font-size: 11px !important;
        padding: 10px 12px;
    }
}

/* Hide text on small screens, keep only icons */
@media (max-width: 1050px) {
    /* Enlarge BPP icon when showing icons only */
    #grp-navigation ul#navigation-menu li.menu-icon-home > a::before {
        height: 28px;
        width: 28px;
        margin-right: 0;
    }

    #grp-navigation ul#navigation-menu li.menu-icon-bookmarks > a::before,
    #grp-navigation ul#navigation-menu li.menu-icon-web > a::before,
    #grp-navigation ul#navigation-menu li.menu-icon-api > a::before,
    #grp-navigation ul#navigation-menu li.menu-icon-settings > a::before,
    #grp-navigation ul#navigation-menu li.menu-icon-structure > a::before,
    #grp-navigation ul#navigation-menu li.menu-icon-edit > a::before,
    #grp-navigation ul#navigation-menu li.menu-icon-reports > a::before,
    #grp-navigation ul#navigation-menu li.menu-icon-dashboard > a::before,
    #grp-navigation ul#navigation-menu li.menu-icon-admin > a::before,
    #grp-navigation ul#navigation-menu li.menu-icon-user > a::before {
        margin-right: 0;
    }

    #grp-navigation ul#navigation-menu li.menu-icon-bookmarks > a,
    #grp-navigation ul#navigation-menu li.menu-icon-web > a,
    #grp-navigation ul#navigation-menu li.menu-icon-api > a,
    #grp-navigation ul#navigation-menu li.menu-icon-settings > a,
    #grp-navigation ul#navigation-menu li.menu-icon-structure > a,
    #grp-navigation ul#navigation-menu li.menu-icon-edit > a,
    #grp-navigation ul#navigation-menu li.menu-icon-reports > a,
    #grp-navigation ul#navigation-menu li.menu-icon-dashboard > a,
    #grp-navigation ul#navigation-menu li.menu-icon-admin > a,
    #grp-navigation ul#navigation-menu li.menu-icon-user > a {
        font-size: 0 !important;
        padding: 12px 10px 9px 10px;
    }

    /* Logo BPP needs different padding */
    #grp-navigation ul#navigation-menu li.menu-icon-home > a {
        font-size: 0 !important;
        padding: 4px 5px;
    }

    #grp-navigation ul#navigation-menu li.menu-icon-home > a::before,
    #grp-navigation ul#navigation-menu li.menu-icon-bookmarks > a::before,
    #grp-navigation ul#navigation-menu li.menu-icon-web > a::before,
    #grp-navigation ul#navigation-menu li.menu-icon-api > a::before,
    #grp-navigation ul#navigation-menu li.menu-icon-settings > a::before,
    #grp-navigation ul#navigation-menu li.menu-icon-structure > a::before,
    #grp-navigation ul#navigation-menu li.menu-icon-edit > a::before,
    #grp-navigation ul#navigation-menu li.menu-icon-reports > a::before,
    #grp-navigation ul#navigation-menu li.menu-icon-dashboard > a::before,
    #grp-navigation ul#navigation-menu li.menu-icon-admin > a::before,
    #grp-navigation ul#navigation-menu li.menu-icon-user > a::before {
        font-size: 26px !important;
    }
}

@media (max-width: 1320px) {
    #grp-navigation ul#navigation-menu li a {
        display: block;
        text-decoration: none;
        font-weight: bold;
        padding: 9px 8px;
        /*border-right: 1px solid #ededed;*/
        border-right: 1px solid #090909;
        border-left: 1px solid #343434;

    }

    #navigation_autocomplete {
        font-size: 9pt;

    }

    header#grp-header #grp-navigation ul#grp-user-tools > li a {
        font-size: 11px;
        width: 60px;
    }

    yourlabs-autocomplete inner-container  id-navigation_autocomplete a {
        font-size: 10px;
    }
}


/* Navigation layout containers */
#nav-global-container {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    flex: 1;
}

#menu-container {
    display: inline-flex;
    align-items: center;
}

#search-container {
    display: inline-flex;
    align-items: center;
    flex: 1;
    padding-top: 0px;
    margin-top: 0px;
    /* Allow search container to grow and fill available space */
}

/* Ensure crispy form wrapper takes full width */
#search-container #div_id_global_nav_value {
    width: 100% !important;
    flex: 1 !important;
}

/* Add horizontal margin to global nav select2 */
#search-container .select2-container {
    margin-left: 3px;
    margin-right: 10px !important;
    /* Allow select2 to expand to fill container and grow to right */
    min-width: 200px;
    max-width: 100%;
    width: 100% !important;
}

/* Hide old grp-user-tools since user menu is now in navigation menu */
header#grp-header #grp-navigation ul#grp-user-tools {
    display: none !important;
}

/* Hide bookmark button */
#grp-navigation #bookmark-button {
    display: none !important;
}

/* Style username item in user menu dropdown - make it non-clickable and highlighted */
#grp-navigation ul#navigation-menu li.menu-icon-user ul li:first-child a {
    pointer-events: none;
    cursor: default;
    font-weight: bold;
    background-color: #2a2a2a !important;
    border-left: 3px solid transparent !important;
}

/* Menu spacer entries - empty space above fonts */
#grp-navigation ul#navigation-menu li.menu-spacer a {
    pointer-events: none;
    cursor: default;
    background-color: transparent !important;
    border: none !important;
    height: 35px;
    min-height: 35px;
    padding: 0 !important;
    visibility: hidden;
}

#grp-navigation ul#navigation-menu li.menu-icon-user ul li:first-child a:hover {
    /* No padding shift on hover */
}

/* User profile menu positioning */

/* On wide screens (> 1200px): menu opens to the right from the button */
@media (min-width: 1201px) {
    #grp-navigation ul#navigation-menu li.menu-icon-user.has-columns ul {
        left: 0 !important;
        right: auto !important;
    }
}

/* On narrower screens (<= 1200px): center the menu */
@media (max-width: 1200px) {
    #grp-navigation ul#navigation-menu li.menu-icon-user.has-columns ul {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
    }
}

/* -------------------------------------------------------------------------------- */
/* Two-column menu layout for "Dane systemowe" */
/* -------------------------------------------------------------------------------- */

/* Hide the dropdown by default */
#grp-navigation ul#navigation-menu li.has-columns ul {
    visibility: hidden;
    opacity: 0;
    width: 500px !important;
    position: absolute;
    top: auto;
    left: auto;
    margin: 0;
    padding: 0;
    z-index: 99999;
    background: #222222;
    border: 1px solid #090909;
    border-radius: 8px !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
    /* Delay opacity transition to allow flexbox to calculate layout first */
    transition: opacity 0.5s ease 0.05s, visibility 0s ease 0s;
    overflow: hidden;
}

/* Show dropdown on hover */
#grp-navigation ul#navigation-menu li.has-columns:hover ul,
#grp-navigation ul#navigation-menu li.has-columns.over ul {
    /* First, instantly show with display: flex but invisible */
    display: flex !important;
    flex-direction: column;
    flex-wrap: wrap;
    max-height: 525px; /* 15 items * ~35px per item */
    /* Then fade in after layout is calculated */
    visibility: visible;
    opacity: 1;
}

#grp-navigation ul#navigation-menu li.has-columns ul li {
    width: 250px;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 0 !important;
    float: none;
    background: #222222;
    border: none;
    border-radius: 0 !important; /* No rounded corners */
}

#grp-navigation ul#navigation-menu li.has-columns ul li.column-1 {
    order: 1;
}

#grp-navigation ul#navigation-menu li.has-columns ul li.column-2 {
    order: 2;
}

#grp-navigation ul#navigation-menu li.has-columns ul li a {
    display: block;
    border: none;
    border-bottom: 1px solid #090909;
    border-radius: 0 !important; /* No rounded corners */
    min-width: 240px;
    margin: 0;
    padding: 9px 15px;
    height: 35px; /* Fixed height for consistent layout */
    line-height: 17px; /* Center text vertically */
    box-sizing: border-box;
    transition: background-color 0.25s ease, padding-left 0.2s ease, border-left 0.2s ease;
    background-color: #222222;
    border-left: 3px solid transparent;
}

#grp-navigation ul#navigation-menu li.has-columns ul li a:hover {
    background-color: #3a3a3a;
    border-left: 3px solid #5a9fd4;
}

/* Remove border from last row items */
#grp-navigation ul#navigation-menu li.has-columns ul li:last-child a,
#grp-navigation ul#navigation-menu li.has-columns ul li:nth-last-child(2) a {
    border-bottom: none;
}

/* -------------------------------------------------------------------------------- */
/* Responsive search wrapping for narrow screens */
/* -------------------------------------------------------------------------------- */

/* At 1200px: Allow search to wrap to next line */
@media (max-width: 1200px) {
    #nav-global-container {
        flex-wrap: wrap;
        gap: 12px;
    }

    #search-container {
        flex-basis: 100%;
        margin-left: 0;
        margin-top: 2px;
        justify-content: flex-start;
    }

    /*#div_id_global_nav_value {*/
    /*    width: 100%;*/
    /*}*/

    #div_id_global_nav_value .select2-container {
        margin-left: 0px;
    }
}

/* At 900px and below: Adjust grp-navigation to allow more wrapping */
@media (max-width: 900px) {
    #grp-navigation {
        min-width: 100% !important;
    }

    #search-container {
        padding-left: 0px;
    }
}

/* -------------------------------------------------------------------------------- */
/* Adjust content padding when menu wraps to two lines */
/* -------------------------------------------------------------------------------- */

/* When search wraps to new line (< 1200px), increase padding to accommodate two-line menu */
@media (max-width: 1200px) {
    #grp-content {
        padding-top: 120px !important;
    }
}
