/* Menubar Component Styles */
/* Comprehensive CSS for horizontal menubar layout with responsive design */

/* Base Menubar Styles */
.p-menubar {
    display: flex;
    align-items: center;
    background: var(--surface-0);
    border: 1px solid var(--surface-border);
    border-radius: var(--border-radius);
    padding: 0.5rem;
    position: relative;
}

.p-menubar.p-component {
    font-family: var(--font-family);
    font-size: var(--text-base-size);
    color: var(--text-color);
}

/* Horizontal Layout (Default) */
.p-menubar-horizontal {
    flex-direction: row;
}

.p-menubar-horizontal .p-menubar-menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Vertical Layout */
.p-menubar-vertical {
    flex-direction: column;
    align-items: stretch;
}

.p-menubar-vertical .p-menubar-menu {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Menu Item Styles */
.p-menubar-item {
    position: relative;
    display: flex;
    align-items: center;
}

.p-menubar-horizontal .p-menubar-item {
    margin-right: 0.25rem;
}

.p-menubar-vertical .p-menubar-item {
    width: 100%;
    margin-bottom: 0.125rem;
}

.p-menubar-item-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: 0.75rem 1rem;
    color: var(--text-color);
    border-radius: var(--border-radius);
    transition: background-color var(--transition-duration), color var(--transition-duration);
    cursor: pointer;
    user-select: none;
    position: relative;
}

.p-menubar-item-link:hover {
    background: var(--surface-hover);
    color: var(--text-color-secondary);
}

.p-menubar-item-link:focus {
    outline: 0 none;
    outline-offset: 0;
    box-shadow: var(--focus-ring);
    background: var(--surface-hover);
}

.p-menubar-item.p-focus .p-menubar-item-link {
    background: var(--surface-hover);
    box-shadow: var(--focus-ring);
}

.p-menubar-item.p-menubar-item-active .p-menubar-item-link {
    background: var(--primary-color);
    color: var(--primary-color-text);
}

.p-menubar-item.p-disabled .p-menubar-item-link {
    opacity: 0.6;
    cursor: default;
    pointer-events: none;
}

/* Menu Item Content */
.p-menubar-item-icon {
    margin-right: 0.5rem;
    font-size: 1rem;
}

.p-menubar-item-text {
    font-weight: 500;
}

.p-badge {
    margin-left: 0.5rem;
    min-width: 1.25rem;
    height: 1.25rem;
    line-height: 1.25rem;
    color: var(--primary-color-text);
    background: var(--primary-color);
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 50%;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.p-menubar-submenu-icon {
    margin-left: auto;
    font-size: 0.875rem;
    transition: transform var(--transition-duration);
}

.p-menubar-item.p-menubar-item-active .p-menubar-submenu-icon {
    transform: rotate(180deg);
}

/* Submenu Styles */
.p-menubar-submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 12.5rem;
    z-index: 1000;
    background: var(--surface-overlay);
    border: 1px solid var(--surface-border);
    border-radius: var(--border-radius);
    box-shadow: var(--overlay-shadow);
    padding: 0.5rem 0;
}

.p-menubar-vertical .p-menubar-submenu {
    top: 0;
    left: 100%;
}

/* Start and End Content */
.p-menubar-start {
    display: flex;
    align-items: center;
    margin-right: 1rem;
}

.p-menubar-end {
    display: flex;
    align-items: center;
    margin-left: auto;
}

/* Mobile Toggle Button */
.p-menubar-mobile-toggle {
    display: none;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-color);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: var(--border-radius);
    transition: background-color var(--transition-duration), border-color var(--transition-duration);
}

.p-menubar-mobile-toggle:hover {
    background: var(--surface-hover);
    border-color: var(--surface-border);
}

.p-menubar-mobile-toggle:focus {
    outline: 0 none;
    outline-offset: 0;
    box-shadow: var(--focus-ring);
}

/* Size Variants */
.p-menubar-sm {
    padding: 0.25rem;
}

.p-menubar-sm .p-menubar-item-link {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

.p-menubar-lg {
    padding: 0.75rem;
}

.p-menubar-lg .p-menubar-item-link {
    padding: 1rem 1.25rem;
    font-size: 1.125rem;
}

/* Alignment Options */
.p-menubar-left .p-menubar-menu {
    justify-content: flex-start;
}

.p-menubar-center .p-menubar-menu {
    justify-content: center;
}

.p-menubar-right .p-menubar-menu {
    justify-content: flex-end;
}

.p-menubar-justify .p-menubar-menu {
    justify-content: space-between;
}

/* State Classes */
.p-menubar-expanded {
    /* Expanded state styles */
}

.p-menubar-collapsed {
    /* Collapsed state styles */
}

.p-menubar-transitioning {
    transition: all var(--transition-duration);
}

/* Responsive Behavior */
.p-menubar-responsive {
    /* Auto-responsive behavior */
}

.p-menubar-collapse {
    /* Collapse behavior */
}

.p-menubar-stack {
    /* Stack behavior */
}

/* Mobile Styles */
@media screen and (max-width: 767px) {
    .p-menubar-responsive .p-menubar-mobile-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    .p-menubar-responsive .p-menubar-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--surface-overlay);
        border: 1px solid var(--surface-border);
        border-radius: var(--border-radius);
        box-shadow: var(--overlay-shadow);
        flex-direction: column;
        align-items: stretch;
        padding: 0.5rem 0;
        z-index: 1000;
    }
    
    .p-menubar-responsive .p-menubar-menu-hidden {
        display: none;
    }
    
    .p-menubar-responsive .p-menubar-item {
        width: 100%;
        margin: 0;
    }
    
    .p-menubar-responsive .p-menubar-item-link {
        padding: 0.75rem 1rem;
        border-radius: 0;
    }
    
    .p-menubar-responsive .p-menubar-submenu {
        position: static;
        box-shadow: none;
        border: none;
        background: var(--surface-100);
        margin-left: 1rem;
    }
}

/* Mobile Behavior Variants */
.p-menubar-mobile-hamburger .p-menubar-mobile-toggle {
    /* Hamburger menu styles */
}

.p-menubar-mobile-overlay .p-menubar-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1100;
}

.p-menubar-mobile-overlay .p-menubar-menu > .p-menubar-item {
    background: var(--surface-overlay);
    margin: 2rem;
    border-radius: var(--border-radius);
    box-shadow: var(--overlay-shadow);
}

.p-menubar-mobile-drawer .p-menubar-menu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 16rem;
    height: 100vh;
    background: var(--surface-overlay);
    border-right: 1px solid var(--surface-border);
    box-shadow: var(--overlay-shadow);
    transition: left var(--transition-duration);
    z-index: 1100;
}

.p-menubar-mobile-drawer.p-menubar-mobile-visible .p-menubar-menu {
    left: 0;
}

/* Animation Classes */
.p-menubar-dropdown-fade {
    animation: fadeIn var(--transition-duration);
}

.p-menubar-dropdown-slide {
    animation: slideDown var(--transition-duration);
}

.p-menubar-dropdown-scale {
    animation: scaleIn var(--transition-duration);
}

/* Keyframe Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-0.5rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .p-menubar {
        border: 2px solid ButtonText;
        background: ButtonFace;
        color: ButtonText;
    }
    
    .p-menubar-item-link:hover,
    .p-menubar-item-link:focus {
        background: Highlight;
        color: HighlightText;
        outline: 2px solid Highlight;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .p-menubar,
    .p-menubar-item-link,
    .p-menubar-submenu-icon,
    .p-menubar-menu {
        transition: none;
        animation: none;
    }
}

/*
 * Material Design 2 parity refinements.
 *
 * Styles the shortcut-hint, checkbox/radio indicator, and secondary-description
 * spans that `menubar.rs` already emits but that previously had no rules. This
 * aligns the Leptos menubar dropdown with the React MUI menubar runtime
 * (`rr-menubar-react`): right-aligned muted shortcut hints, a fixed indicator
 * slot for checkbox/radio menu items, and a stacked secondary description.
 */

/* Right-aligned, muted keyboard shortcut hint (MD2 `hint`). */
.p-menubar-item-shortcut {
    margin-left: auto;
    padding-left: 1.5rem;
    flex-shrink: 0;
    color: var(--text-color-secondary);
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
}

/* Fixed-width indicator slot for checkbox/radio menu items (MD2 `Check`). */
.p-menubar-item-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    margin-right: 0.25rem;
    color: var(--primary-color);
    font-size: 0.875rem;
}

/* Stacked label + secondary description (MD2 `ListItemText secondary`). */
.p-menubar-item-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.p-menubar-item-description {
    color: var(--text-color-secondary);
    font-size: 0.75rem;
    line-height: 1.3;
}

/* Group-label subheader inside menubar dropdowns (MD2 `ListSubheader`). */
.p-menubar-group-label {
    display: block;
    padding: 0.5rem 1rem 0.25rem;
    color: var(--text-color-secondary);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}