/* WDTMenuBar Styles - Using Kendo CSS Variables */

/* Main Menu Bar Container */
.wdt-menubar {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    min-height: 40px;
    padding: 0;
    margin: 0;
    list-style: none;
    background-color: var(--kendo-color-surface-alt, #f8f9fa);
    border-bottom: 1px solid var(--kendo-color-border, #dee2e6);
    font-family: var(--kendo-font-family, inherit);
    font-size: var(--kendo-font-size, 14px);
    user-select: none;
}

/* Top-level Menu Items */
.wdt-menubar-item {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 100px;
    padding: 0 var(--kendo-spacing-2, 8px);
    cursor: pointer;
    white-space: nowrap;
    color: var(--kendo-color-on-base, #212529);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    gap: var(--kendo-spacing-1, 4px);
    box-sizing: border-box;
    border: 1px solid var(--kendo-color-border, #dee2e6);
    border-radius: var(--kendo-border-radius-md, 4px);
    margin: 4px 2px;
    flex-shrink: 0; /* Prevent items from shrinking - overflow system handles visibility */
}

.wdt-menubar-item:hover:not(.wdt-menubar-item-disabled) {
    background-color: var(--kendo-color-base-hover, #e9ecef);
    border-color: var(--kendo-color-primary, #0d6efd);
    color: var(--kendo-color-primary, #0d6efd);
}

.wdt-menubar-item:focus-visible {
    outline: 2px solid var(--kendo-color-primary, #0d6efd);
    outline-offset: -2px;
    border-color: var(--kendo-color-primary, #0d6efd);
}

/* Focused item (keyboard navigation) */
.wdt-menubar-item-focused {
    background-color: var(--kendo-color-base-hover, #e9ecef);
    color: var(--kendo-color-primary, #0d6efd);
    outline: 2px solid var(--kendo-color-primary, #0d6efd);
    outline-offset: -2px;
    border-color: var(--kendo-color-primary, #0d6efd);
}

/* Expanded item (dropdown open) */
.wdt-menubar-item-expanded {
    background-color: var(--kendo-color-base-hover, #e9ecef);
    border-color: var(--kendo-color-primary, #0d6efd);
    color: var(--kendo-color-primary, #0d6efd);
}

/* Disabled items */
.wdt-menubar-item-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Selected/Checked items */
.wdt-menubar-item-selected {
    background-color: var(--kendo-color-base-hover, #e9ecef);
    color: var(--kendo-color-primary, #0d6efd);
    border-color: var(--kendo-color-primary, #0d6efd);
}

.wdt-menubar-item-selected:hover:not(.wdt-menubar-item-disabled) {
    background-color: var(--kendo-color-base-active, #dee2e6);
    border-color: var(--kendo-color-primary-hover, #0a58ca);
}

/* Arrow indicator for items with children (Font Awesome basiert) */
.wdt-menubar-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: var(--kendo-spacing-1, 4px);
    font-size: 14px;
    color: var(--kendo-color-subtle, #6c757d);
    transition: transform 0.15s ease, color 0.15s ease;
    line-height: 1;
    /* Explizit alte CSS-Dreieck-Styles entfernen */
    width: auto;
    height: auto;
    border: none;
}

.wdt-menubar-item-expanded .wdt-menubar-arrow {
    transform: rotate(180deg);
    color: var(--kendo-color-primary, #0d6efd);
}

.wdt-menubar-item:hover .wdt-menubar-arrow {
    color: var(--kendo-color-primary, #0d6efd);
}

/* Separator between top-level items (explicit separator item) */
.wdt-menubar-separator {
    width: 2px;
    align-self: stretch;
    margin: var(--kendo-spacing-3, 12px) var(--kendo-spacing-3, 12px);
    background-color: var(--kendo-color-border, #dee2e6);
}

/* Auto-generated separator between items (ShowItemSeparators=true) */
.wdt-menubar-item-separator {
    width: 1px;
    height: 1em;
    align-self: center;
    margin: 0;
    background-color: var(--kendo-color-border, #dee2e6);
    flex-shrink: 0;
}

/* Icon container */
.wdt-menubar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 4px;
}

.wdt-menubar-icon i,
.wdt-menubar-icon svg {
    width: 16px;
    height: 16px;
}

.wdt-menubar-icon svg {
    fill: currentColor;
}

/* Text */
.wdt-menubar-text {
    flex: 1;
}

/* Dropdown Menu (appears below menu bar item) */
.wdt-menubar-dropdown {
    position: fixed;
    z-index: 10000;
    min-width: 180px;
    max-width: 300px;
    padding: var(--kendo-spacing-1, 4px) 0;
    margin: 0;
    list-style: none;
    background-color: var(--kendo-color-surface, #ffffff);
    border: 1px solid var(--kendo-color-border, #dee2e6);
    border-radius: 0;
    box-shadow: var(--kendo-elevation-4, 0 4px 16px rgba(0, 0, 0, 0.15));
    visibility: hidden;
    opacity: 0;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: calc(100vh - 60px);
}

.wdt-menubar-dropdown::-webkit-scrollbar {
    width: 8px;
}

.wdt-menubar-dropdown::-webkit-scrollbar-track {
    background: var(--kendo-color-surface-alt, #f5f5f5);
}

.wdt-menubar-dropdown::-webkit-scrollbar-thumb {
    background-color: var(--kendo-color-border, #dee2e6);
    border-radius: 4px;
}

.wdt-menubar-dropdown::-webkit-scrollbar-thumb:hover {
    background-color: var(--kendo-color-border-alt, #adb5bd);
}

/* Animation for dropdown */
.wdt-menubar-dropdown {
    transition: opacity 0.15s ease, transform 0.15s ease;
    transform-origin: top left;
}

/* RTL Support */
[dir="rtl"] .wdt-menubar {
    flex-direction: row-reverse;
}

[dir="rtl"] .wdt-menubar-arrow {
    margin-left: 0;
    margin-right: var(--kendo-spacing-1, 4px);
}

/* Responsive: Stack vertically on small screens */
@media (max-width: 768px) {
    .wdt-menubar.wdt-menubar-responsive {
        flex-direction: column;
        min-height: auto;
    }

    .wdt-menubar.wdt-menubar-responsive .wdt-menubar-item {
        padding: var(--kendo-spacing-3, 12px) var(--kendo-spacing-4, 16px);
        border-bottom: 1px solid var(--kendo-color-border, #dee2e6);
    }

    .wdt-menubar.wdt-menubar-responsive .wdt-menubar-separator {
        width: auto;
        height: 1px;
        margin: 0;
    }
}

/* ==========================================================================
   Dense Mode Styles (Icons only, for mobile/compact view)
   ========================================================================== */

/* Dense MenuBar container */
.wdt-menubar.wdt-menubar-dense {
    min-height: 36px;
    background-color: transparent;
    border-bottom: none;
}

/* Dense Menu Items - icon only */
.wdt-menubar-item.wdt-menubar-item-dense {
    min-width: auto;
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
    border-radius: var(--kendo-border-radius-md, 4px);
}

.wdt-menubar-item.wdt-menubar-item-dense .wdt-menubar-icon {
    margin: 0;
    width: 24px;
    height: 24px;
}

.wdt-menubar-item.wdt-menubar-item-dense .wdt-menubar-icon i,
.wdt-menubar-item.wdt-menubar-item-dense .wdt-menubar-icon svg {
    width: 20px;
    height: 20px;
    font-size: 20px;
}

/* Hide text and arrow in dense mode (handled via component, but CSS fallback) */
.wdt-menubar-item.wdt-menubar-item-dense .wdt-menubar-text,
.wdt-menubar-item.wdt-menubar-item-dense .wdt-menubar-arrow {
    display: none;
}

/* Dense hover state */
.wdt-menubar-item.wdt-menubar-item-dense:hover:not(.wdt-menubar-item-disabled) {
    background-color: var(--kendo-color-base-hover, #e9ecef);
    color: var(--kendo-color-primary, #0d6efd);
}

/* Dense expanded state */
.wdt-menubar-item.wdt-menubar-item-dense.wdt-menubar-item-expanded {
    background-color: var(--kendo-color-primary, #0d6efd);
    color: var(--kendo-color-on-primary, #fff);
}

/* ==========================================================================
   WDTMainMenu Styles
   ========================================================================== */

/* Main Menu Container */
.wdt-mainmenu {
    display: flex;
    align-items: stretch;
    align-self: stretch;
    height: 100%;
}

/* Desktop specific styles */
.wdt-mainmenu.wdt-mainmenu-desktop {
    flex: 1;
    justify-content: center;
}

.wdt-mainmenu.wdt-mainmenu-desktop .wdt-menubar {
    height: 100%;
    min-height: 100%;
    align-items: stretch;
}

/* Mobile specific styles */
.wdt-mainmenu.wdt-mainmenu-mobile {
    gap: var(--kendo-spacing-1, 4px);
}

.wdt-mainmenu.wdt-mainmenu-mobile .wdt-menubar {
    background-color: transparent;
    border-bottom: none;
}

/* ==========================================================================
   WDTMenuBar in Primary AppBar
   ========================================================================== */

/* AppBar center section should stretch when containing menu, but not overflow */
.wdt-appbar-center:has(.wdt-mainmenu) {
    align-self: stretch;
    align-items: stretch;
    /* Prevent center from pushing end content off screen */
    min-width: 0;
    overflow: hidden;
}

/* MenuBar inside Primary AppBar - transparent background, full height */
.wdt-appbar-primary .wdt-menubar {
    background-color: transparent;
    border-bottom: none;
    height: 100%;
    align-items: stretch;
}

/* Menu items in Primary AppBar - flat style, full height */
.wdt-appbar-primary .wdt-menubar-item {
    color: var(--kendo-color-on-primary, #fff);
    background-color: transparent;
    border-color: transparent;
    border-radius: 0;
    margin: 0;
    height: auto;
    align-self: stretch;
    border: none;
    padding: 0 var(--kendo-spacing-3, 12px);
    display: flex;
    align-items: center;
}

.wdt-appbar-primary .wdt-menubar-item:hover:not(.wdt-menubar-item-disabled) {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--kendo-color-on-primary, #fff);
}

.wdt-appbar-primary .wdt-menubar-item-expanded {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

.wdt-appbar-primary .wdt-menubar-item-focused {
    background-color: rgba(255, 255, 255, 0.15);
    outline-color: var(--kendo-color-on-primary, #fff);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Icons and text in Primary AppBar */
.wdt-appbar-primary .wdt-menubar-icon,
.wdt-appbar-primary .wdt-menubar-icon i,
.wdt-appbar-primary .wdt-menubar-text {
    color: var(--kendo-color-on-primary, #fff);
}

/* Arrow in Primary AppBar */
.wdt-appbar-primary .wdt-menubar-arrow {
    color: var(--kendo-color-on-primary, #fff);
}

.wdt-appbar-primary .wdt-menubar-item:hover .wdt-menubar-arrow {
    color: var(--kendo-color-on-primary, #fff);
}

/* Separator in Primary AppBar */
.wdt-appbar-primary .wdt-menubar-separator {
    background-color: rgba(255, 255, 255, 0.3);
}

/* Auto item separator in Primary AppBar */
.wdt-appbar-primary .wdt-menubar-item-separator {
    background-color: rgba(255, 255, 255, 0.3);
}

/* Dropdown in Primary AppBar - flat style without border */
.wdt-appbar-primary .wdt-menubar-dropdown {
    border-radius: 0;
    border: none;
    margin-top: 0;
    box-shadow: var(--kendo-elevation-4, 0 4px 16px rgba(0, 0, 0, 0.15));
    /* Reset text color for dropdown - NOT white like AppBar */
    color: var(--kendo-color-on-base, #212529);
}

/* Ensure dropdown items in Primary AppBar have readable text */
.wdt-appbar-primary .wdt-menubar-dropdown .wdt-contextmenu-item,
.wdt-appbar-primary .wdt-menubar-dropdown .wdt-contextmenu-text {
    color: var(--kendo-color-on-base, #212529);
}

.wdt-appbar-primary .wdt-menubar-dropdown .wdt-contextmenu-item:hover:not(.wdt-contextmenu-item-disabled) {
    color: var(--kendo-color-primary, #0d6efd);
}

/* Expanded item in Primary AppBar - keep white text color */
.wdt-appbar-primary .wdt-menubar-item-expanded {
    color: var(--kendo-color-on-primary, #fff);
}

.wdt-appbar-primary .wdt-menubar-item-expanded .wdt-menubar-arrow {
    color: var(--kendo-color-on-primary, #fff);
}

/* ============================================
   Primary AppBar - EndContent full height
   ============================================ */

/* Make EndContent stretch and align items to fill height */
.wdt-appbar-primary .wdt-appbar-end {
    align-self: stretch;
    align-items: stretch;
}

/* Buttons in Primary AppBar EndContent - full height */
.wdt-appbar-primary .wdt-appbar-end .wdt-button {
    align-self: stretch;
    height: auto;
    border-radius: 0;
    display: flex;
    align-items: center;
    padding: 0 var(--kendo-spacing-3, 12px);
}

/* User info section - full height */
.wdt-appbar-primary .wdt-appbar-end > i,
.wdt-appbar-primary .wdt-appbar-end > span {
    align-self: center;
}

/* Separator in EndContent - full height */
.wdt-appbar-primary .wdt-appbar-end .wdt-appbar-separator {
    align-self: stretch;
    height: auto;
}

/* ThemeSwitcher and CulturePicker containers - full height */
.wdt-appbar-primary .wdt-appbar-end > div:not(.wdt-appbar-separator):not(.user-info) {
    align-self: stretch;
    display: flex;
    align-items: stretch;
}

/* User info - vertically centered, not stretched */
.wdt-appbar-primary .wdt-appbar-end .user-info {
    align-self: center;
    display: flex;
    align-items: center;
}

/* WDTPopover wrapper in EndContent - full height stretch */
.wdt-appbar-primary .wdt-appbar-end .wdt-popover-wrapper {
    align-self: stretch;
    display: flex;
    align-items: stretch;
}

.wdt-appbar-primary .wdt-appbar-end .wdt-popover-anchor {
    align-self: stretch;
    display: flex;
    align-items: stretch;
}

/* ==========================================================================
   Overflow Menu Styles
   ========================================================================== */

/* MenuBar with overflow enabled - don't clip, let JS handle item visibility */
.wdt-menubar.wdt-menubar-overflow-enabled {
    flex-wrap: nowrap;
    /* Don't use overflow:hidden - it clips items before JS can calculate */
}

/* Overflow trigger button ("More") */
.wdt-menubar-overflow-trigger {
    flex-shrink: 0;
    margin-left: auto;
}

/* Overflow trigger in Primary AppBar */
.wdt-appbar-primary .wdt-menubar-overflow-trigger {
    color: var(--kendo-color-on-primary, #fff);
    border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.wdt-appbar-primary .wdt-menubar-overflow-trigger:hover:not(.wdt-menubar-item-disabled) {
    background-color: rgba(255, 255, 255, 0.15);
}

/* Overflow trigger icon styling */
.wdt-menubar-overflow-trigger .wdt-menubar-icon i {
    font-size: 16px;
}

/* In dense mode, overflow trigger should also be icon-only */
.wdt-menubar-item-dense.wdt-menubar-overflow-trigger {
    width: 40px;
    min-width: 40px;
}