/* WDTContextMenu Styles - Using Kendo CSS Variables */

.wdt-contextmenu {
    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));
    font-family: var(--kendo-font-family, inherit);
    font-size: var(--kendo-font-size, 14px);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.1s ease-in-out;
    outline: none;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: calc(100vh - 20px);
}

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

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

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

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

/* Menu Items */
.wdt-contextmenu-item {
    position: relative;
    display: flex;
    align-items: center;
    height: 34px;
    padding: 0 var(--kendo-spacing-3, 12px);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    color: var(--kendo-color-on-base, #212529);
    transition: background-color 0.15s ease;
    gap: var(--kendo-spacing-2, 8px);
    box-sizing: border-box;
}

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

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

/* Item with submenu */
.wdt-contextmenu-item-has-children::after {
    content: '';
    position: absolute;
    right: var(--kendo-spacing-2, 8px);
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 5px solid var(--kendo-color-subtle, #6c757d);
}

.wdt-contextmenu-item-has-children:hover::after {
    border-left-color: var(--kendo-color-primary, #0d6efd);
}

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

/* Caption items */
.wdt-contextmenu-caption {
    font-weight: 600;
    text-align: center;
    justify-content: center;
    cursor: default;
    background-color: var(--kendo-color-surface-alt, #f8f9fa);
    border-bottom: 1px solid var(--kendo-color-border, #dee2e6);
}

.wdt-contextmenu-caption:hover {
    background-color: var(--kendo-color-surface-alt, #f8f9fa);
}

/* Separator - just a thin border line, no background */
.wdt-contextmenu-separator {
    height: 0 !important;
    padding: 0 !important;
    margin: var(--kendo-spacing-1, 4px) var(--kendo-spacing-2, 8px) !important;
    background: none !important;
    background-color: transparent !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid var(--kendo-color-border, #dee2e6) !important;
    cursor: default;
}

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

.wdt-contextmenu-icon svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* ==========================================================================
   Icon Gutter - Subtle accent for the left icon area
   ========================================================================== */

/* Add a subtle left gutter background to context menus and submenus */
.wdt-contextmenu-with-gutter .wdt-contextmenu-item::before,
.wdt-contextmenu-submenu-with-gutter .wdt-contextmenu-item::before,
.wdt-menubar-dropdown-with-gutter .wdt-contextmenu-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 28px; /* Width for icon area - reduced from 32px */
    background-color: var(--kendo-color-surface-alt, rgba(0, 0, 0, 0.03));
    pointer-events: none;
}

/* No gutter for separators and captions */
.wdt-contextmenu-with-gutter .wdt-contextmenu-separator::before,
.wdt-contextmenu-with-gutter .wdt-contextmenu-caption::before,
.wdt-contextmenu-submenu-with-gutter .wdt-contextmenu-separator::before,
.wdt-contextmenu-submenu-with-gutter .wdt-contextmenu-caption::before,
.wdt-menubar-dropdown-with-gutter .wdt-contextmenu-separator::before,
.wdt-menubar-dropdown-with-gutter .wdt-contextmenu-caption::before {
    display: none;
}

/* Separator in menus with gutter - just a thin border line, no background */
.wdt-contextmenu-with-gutter .wdt-contextmenu-separator,
.wdt-contextmenu-submenu-with-gutter .wdt-contextmenu-separator {
    height: 0 !important;
    margin: var(--kendo-spacing-1, 4px) 0 !important;
    padding: 0 !important;
    background: none !important;
    background-color: transparent !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid var(--kendo-color-border, #dee2e6) !important;
}

.wdt-contextmenu-with-gutter .wdt-contextmenu-separator::before,
.wdt-contextmenu-with-gutter .wdt-contextmenu-separator::after,
.wdt-contextmenu-submenu-with-gutter .wdt-contextmenu-separator::before,
.wdt-contextmenu-submenu-with-gutter .wdt-contextmenu-separator::after {
    display: none;
}

/* Default: always show gutter in menubar dropdowns */
.wdt-menubar-dropdown .wdt-contextmenu-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 28px; /* Width for icon area - reduced from 32px */
    background-color: var(--kendo-color-surface-alt, rgba(0, 0, 0, 0.03));
    pointer-events: none;
}

/* Separator in menubar dropdown - just a thin border line, no background */
.wdt-menubar-dropdown .wdt-contextmenu-separator {
    height: 0 !important;
    margin: var(--kendo-spacing-1, 4px) 0 !important;
    padding: 0 !important;
    background: none !important;
    background-color: transparent !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid var(--kendo-color-border, #dee2e6) !important;
    position: relative;
}

/* Gutter area for separator - matches the item gutter */
.wdt-menubar-dropdown .wdt-contextmenu-separator::before {
    content: '' !important;
    display: block !important;
    position: absolute;
    left: 0;
    top: calc(-1 * var(--kendo-spacing-1, 4px)); /* Extend into top margin */
    bottom: 0;
    width: 28px;
    height: calc(100% + var(--kendo-spacing-1, 4px) + var(--kendo-spacing-1, 4px)); /* Cover full height including margins */
    background-color: var(--kendo-color-surface-alt, rgba(0, 0, 0, 0.03));
    pointer-events: none;
    z-index: -1; /* Behind the separator line */
}

.wdt-menubar-dropdown .wdt-contextmenu-separator::after {
    display: none !important;
    content: none !important;
}

/* Spacing between gutter and text */
.wdt-menubar-dropdown .wdt-contextmenu-item {
    padding-left: calc(28px + var(--kendo-spacing-2, 8px)); /* Gutter width + gap */
}

.wdt-menubar-dropdown .wdt-contextmenu-icon,
.wdt-menubar-dropdown .wdt-contextmenu-checkbox,
.wdt-menubar-dropdown .wdt-contextmenu-radio {
    position: absolute;
    left: 4px; /* Center in gutter area */
}

/* Text */
.wdt-contextmenu-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Checkbox container */
.wdt-contextmenu-checkbox {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 2px solid var(--kendo-color-border, #dee2e6);
    border-radius: 3px;
    background-color: var(--kendo-color-surface, #ffffff);
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.wdt-contextmenu-checkbox-checked {
    background-color: var(--kendo-color-primary, #0d6efd);
    border-color: var(--kendo-color-primary, #0d6efd);
}

.wdt-contextmenu-checkbox-checked::after {
    content: '';
    width: 5px;
    height: 9px;
    border: solid var(--kendo-color-on-primary, #ffffff);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-bottom: 2px;
}

/* Radio button container */
.wdt-contextmenu-radio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 2px solid var(--kendo-color-border, #dee2e6);
    border-radius: 50%;
    background-color: var(--kendo-color-surface, #ffffff);
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.wdt-contextmenu-radio-checked {
    border-color: var(--kendo-color-primary, #0d6efd);
}

.wdt-contextmenu-radio-checked::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--kendo-color-primary, #0d6efd);
}

/* Submenu */
.wdt-contextmenu-submenu {
    position: fixed;
    z-index: 10001;
    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));
    overflow-x: hidden;
    overflow-y: auto;
    max-height: calc(100vh - 20px);
    /* Initially hidden until JS positions it, then made visible */
    visibility: hidden;
    opacity: 0;
}

.wdt-contextmenu-submenu::-webkit-scrollbar {
    width: 8px;
}

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

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

/* Active/Expanded parent item */
.wdt-contextmenu-item-expanded {
    background-color: var(--kendo-color-base-hover, #e9ecef);
    color: var(--kendo-color-primary, #0d6efd);
}

.wdt-contextmenu-item-expanded.wdt-contextmenu-item-has-children::after {
    border-left-color: var(--kendo-color-primary, #0d6efd);
}

/* Focus styles for keyboard navigation */
.wdt-contextmenu-item-focused {
    background-color: var(--kendo-color-base-hover, #e9ecef);
    color: var(--kendo-color-primary, #0d6efd);
    outline: none;
}

/* Right-to-Left support */
[dir="rtl"] .wdt-contextmenu-item-has-children::after {
    right: auto;
    left: var(--kendo-spacing-2, 8px);
    border-left: none;
    border-right: 5px solid var(--kendo-color-subtle, #6c757d);
}

[dir="rtl"] .wdt-contextmenu-item {
    padding: var(--kendo-spacing-2, 8px) var(--kendo-spacing-3, 12px);
}

/* Keyboard Shortcut Text */
.wdt-contextmenu-shortcut {
    margin-left: auto;
    padding-left: var(--kendo-spacing-4, 16px);
    font-size: var(--kendo-font-size-sm, 12px);
    color: var(--kendo-color-subtle, #6c757d);
    flex-shrink: 0;
}

[dir="rtl"] .wdt-contextmenu-shortcut {
    margin-left: 0;
    margin-right: auto;
    padding-left: 0;
    padding-right: var(--kendo-spacing-4, 16px);
}

/* Animation classes */
.wdt-contextmenu-animating-in {
    animation: wdt-contextmenu-fade-in 0.15s ease-out forwards;
}

.wdt-contextmenu-animating-out {
    animation: wdt-contextmenu-fade-out 0.1s ease-in forwards;
}

@keyframes wdt-contextmenu-fade-in {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes wdt-contextmenu-fade-out {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.95);
    }
}

/* Submenu animation */
.wdt-contextmenu-submenu {
    transition: opacity 0.15s ease, transform 0.15s ease;
    transform-origin: left top;
}

/* Focused item with keyboard navigation - stronger highlight */
.wdt-contextmenu-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;
}

/* ==========================================================================
   Context Menu / Submenu in Primary AppBar (flat style)
   ========================================================================== */

/* Context menu and submenus within Primary AppBar - flat style without border */
.wdt-appbar-primary .wdt-contextmenu,
.wdt-appbar-primary .wdt-contextmenu-submenu {
    border-radius: 0;
    border: none;
}

/* Also target menus that are opened from menubar in Primary AppBar */
.wdt-appbar-primary .wdt-menubar-dropdown .wdt-contextmenu-submenu {
    border-radius: 0;
    border: none;
}