@use '../_sass_variables' as *;

.vertical-submenu {
    width: 200px;
    background: var(--surface-0);
    border-right: 1px solid var(--surface-border);
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: relative;
    /* Prevent layout shift during route changes */
    contain: layout style;
}

/* Section headers: same font/size/weight/spacing as main sidebar (.layout-menu-section-header), color adapted for subsidebar.
   Margin-top matches main sidebar section distance (mt-4 = 1rem); first header gets no extra top margin via adjacent sibling. */
.vertical-submenu-section-header {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.375rem 0.75rem;
    color: var(--text-muted-color);
    margin-top: 1rem;
}

.vertical-submenu-nav > *:first-child.vertical-submenu-section-header {
    margin-top: 0;
}

.vertical-submenu-nav {
    padding: $maestro-left-padding;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    overflow-y: auto;
}

.vertical-submenu-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--border-radius);
    color: var(--text-color);
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

/* Hover: same pattern as main sidebar menu – surface-hover bg + contrasting text (light/dark aware) */
.vertical-submenu-item:hover {
    background: var(--surface-hover);
    color: var(--text-color);
}

.vertical-submenu-item.active {
    background: var(--primary-color);
    color: var(--primary-contrast-color);
}

/* Ensure active item text has contrast in both themes */
:root:not(.app-dark) .vertical-submenu-item.active {
    color: #ffffff;
}

.app-dark .vertical-submenu-item.active {
    color: var(--primary-contrast-color);
}

.vertical-submenu-icon {
    font-size: 0.875rem;
}

.vertical-submenu-label {
    font-size: 0.875rem;
    font-weight: 500;
}

.vertical-submenu-chevron {
    margin-left: auto;
    font-size: 0.625rem;
    opacity: 0.85;
}

/* Parent as toggle (no route): same look as link, chevron indicates expand/collapse */
.vertical-submenu-item--toggle {
    width: 100%;
    text-align: left;
    border: none;
    background: none;
    cursor: pointer;
    font: inherit;
}

.vertical-submenu-item--toggle:hover {
    background: var(--surface-hover);
    color: var(--text-color);
}


/* Nested subitems (e.g. Auth → Crud, Login, …) */
.vertical-submenu-group {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.vertical-submenu-nav--nested {
    padding-left: 0.75rem;
    padding-top: 0.125rem;
    padding-bottom: 0.25rem;
    gap: 0.125rem;
    border-left: 2px solid var(--surface-border);
    margin-left: 0.5rem;
}

.vertical-submenu-item--nested {
    padding: 0.35rem 0.5rem;
    font-size: 0.8125rem;
}

.vertical-submenu-item--nested .vertical-submenu-icon {
    font-size: 0.75rem;
}

// Responsive styles – keep subsidebar on all screen sizes
// Smaller screens: narrower submenu
@media screen and (max-width: ($breakpoint - 1)) {
    .vertical-submenu {
        width: 160px;
    }
    
    .vertical-submenu-nav {
        padding: 0.75rem; /* slightly smaller on mobile */
    }
    
    .vertical-submenu-item {
        padding: 0.4rem 0.5rem;
    }
    
    .vertical-submenu-label {
        font-size: 0.8125rem;
    }
}

// Medium screens
@media screen and (min-width: $breakpoint) and (max-width: 1200px) {
    .vertical-submenu {
        width: 180px;
    }
}

// Standard desktop width
@media screen and (min-width: 1201px) {
    .vertical-submenu {
        width: 200px;
    }
}
