/* =============================================
   PluginMainLayout - Custom Styles
   Gescoped unter .plugin-main-layout
   ============================================= */

.plugin-main-layout {
    --plugin-sidebar-width: 280px;
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    overflow: hidden !important;
}

.plugin-main-row {
    display: flex !important;
    flex: 1 !important;
    overflow: hidden !important;
    position: relative !important;
}

.plugin-content-area {
    flex: 1 !important;
    overflow: auto !important;
    min-width: 0 !important;
    background: var(--lumo-base-color) !important;
    height: 100% !important;
}

/* =============================================
   Sidebar / Drawer
   ============================================= */

.plugin-sidebar {
    position: relative !important;
    width: 0 !important;
    height: 100% !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--lumo-base-color) !important;
    border-right: 1px solid var(--lumo-contrast-10pct) !important;
    overflow: hidden !important;
    transition: width 0.3s ease-in-out !important;
    z-index: 1050 !important;
}

.plugin-sidebar[open] {
    width: var(--plugin-sidebar-width) !important;
}

/* =============================================
   Drawer Header
   ============================================= */

.drawer-header {
    display: flex !important;
    align-items: center !important;
    gap: var(--lumo-space-s) !important;
    padding: var(--lumo-space-m) !important;
    border-bottom: 1px solid var(--lumo-contrast-10pct) !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

/* =============================================
   SideNav / Navigation Styling
   ============================================= */

.plugin-main-layout vaadin-side-nav-item::part(item) {
    padding: var(--lumo-space-s) var(--lumo-space-m) !important;
    border-radius: var(--lumo-radius-s) !important;
    margin: 2px 0 !important;
    color: var(--lumo-primary-text-color) !important;
}

.plugin-main-layout vaadin-side-nav-item::part(hover-overlay) {
    background: var(--lumo-shade-5pct) !important;
    border-radius: var(--lumo-radius-s) !important;
}

.plugin-main-layout vaadin-side-nav-item[active]::part(item) {
    background: var(--lumo-primary-color) !important;
    color: var(--lumo-primary-contrast-color) !important;
}

.plugin-main-layout vaadin-side-nav::part(nav) {
    padding: var(--lumo-space-xs) !important;
}

/* =============================================
   Sidebar Footer / User Menu
   ============================================= */

.sidebar-footer {
    border-top: 1px solid var(--lumo-contrast-10pct) !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
}

.sidebar-footer-user {
    display: flex !important;
    align-items: center !important;
    gap: var(--lumo-space-s) !important;
    padding: var(--lumo-space-s) var(--lumo-space-m) !important;
    border-bottom: 1px solid var(--lumo-contrast-10pct) !important;
    cursor: pointer !important;
}

/* =============================================
   App Logo Avatar
   ============================================= */

.drawer-header vaadin-avatar {
    border-radius: var(--lumo-radius-s) !important;
}

/* =============================================
   View Heading in Sidebar
   ============================================= */

.drawer-header aura-view-heading {
    display: flex !important;
    flex-direction: column !important;
}

/* SideNav Section Labels */
.plugin-main-layout vaadin-side-nav[aria-label]:not([aria-label=""])::part(nav) > :first-child {
    font-size: var(--lumo-font-size-xs) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--lumo-secondary-text-color) !important;
    padding: var(--lumo-space-m) var(--lumo-space-m) var(--lumo-space-xs) !important;
}

/* =============================================
   Mobile Responsive
   ============================================= */

.mobile-overlay {
    display: none !important;
}

@media (max-width: 768px) {
    .plugin-sidebar {
        position: fixed !important;
        top: 56px !important;
        left: 0 !important;
        height: calc(100vh - 56px) !important;
        width: var(--plugin-sidebar-width) !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease-in-out !important;
        box-shadow: none !important;
    }

    .plugin-sidebar[open] {
        width: var(--plugin-sidebar-width) !important;
        transform: translateX(0) !important;
        box-shadow: var(--lumo-box-shadow-l, 0 0 50px 0 rgba(0,0,0,0.3)) !important;
    }

    .mobile-overlay {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 1045 !important;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s;
        background: rgba(0,0,0,0.5) !important;
    }
}