/*
        * Ravenbreath Internal Portal - Navigation Component
        * Left sidebar navigation with hierarchical menu structure
        */

        /* Navigation container */


        nav {
            background: var(--net-bg-secondary);
            border-radius: var(--net-spacing-md);
            margin-top: var(--net-spacing-md);
            margin-bottom: var(--net-spacing-md);
            box-shadow: var(--net-shadow-sm);
            border: 1px solid var(--net-border-light);
            overflow:hidden;
            padding: 0px;
            /*padding-bottom: var(--net-spacing-md, 1.0rem);*/
            font-size: 0.95rem;
        }

        /* Navigation list */
        nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        nav li {
            margin: 0;
        }

        nav li[hidden] {
            display: none !important;
        }

        .nav-actions {
            padding: var(--net-spacing-xs) var(--net-spacing-sm);
            list-style: none;
        }

        .nav-actions-row {
            display: flex;
            gap: var(--net-spacing-xs);
            width: 100%;
        }

        .nav-actions-row button,
        .nav-actions-row .btn {
            flex: 1 1 0;
            min-width: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Navigation items */
        .nav-item {
            transition: var(--net-transition-fast);
            padding: 0px; 
            padding-bottom: var(--net-spacing-xxs, 0.125rem);
            padding-top: var(--net-spacing-xxs, 0.125rem);
        }

        /* Indentation is driven by indent-level-* classes generated by navigation.php */
        .nav-item.indent-level-1 > a,
        .nav-item.indent-level-1.selected {
            padding-left: calc(var(--net-spacing-sm) + var(--net-spacing-md));
        }

        .nav-item.indent-level-2 > a,
        .nav-item.indent-level-2.selected {
            padding-left: calc(var(--net-spacing-sm) + (var(--net-spacing-md) * 2));
        }

        .nav-item.indent-level-3 > a,
        .nav-item.indent-level-3.selected {
            padding-left: calc(var(--net-spacing-sm) + (var(--net-spacing-md) * 3));
        }

        .nav-item a {
            display: flex;
            align-items: center;
            /*padding: var(--net-spacing-xs) var(--net-spacing-xs) 0px 0px;*/
            padding-left:var(--net-spacing-sm);
            color: var(--net-text-primary);
            text-decoration: none;
            transition: var(--net-transition-fast);
            font-weight: 500;
        }



        /* Selected navigation item */
        .nav-item.selected {
            background: var(--net-nav-item-selected);
            color: var(--net-text-primary);
            padding: var(--net-spacing-xs) var(--net-spacing-xs);
            padding-left: var(--net-spacing-sm);
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: var(--net-spacing-sm);
        }

        /* Navigation items */
        .nav-item:last-child {
            padding-bottom: var(--net-spacing-md, 0.125rem);
        }


        /* Navigation headers (section dividers) */

        .nav-header {
            background: var(--net-nav-header-bg);
            color: var(--net-nav-header-color);
            padding:00.25rem;
            padding-left: 2px;
            font-weight: 700;
            letter-spacing: 0.5px;
            xxx-margin-bottom: var(--net-spacing-sm, 0.5rem);
            border-radius: var(--net-border-radius-sm);
            display: flex;
            align-items: center;
            gap: var(--net-spacing-sm);
        }
        .nav-header-toggle {
            width: 100%;
            display: flex;
            align-items: center;
            gap: var(--net-spacing-sm);
            padding: 0;
            margin: 0;
            background: transparent;
            border: 0;
            color: inherit;
            font: inherit;
            text-align: left;
            cursor: pointer;
        }

        .nav-header-caret {
            width: 1.1em;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
        }

        .nav-header-icon {
            flex: 0 0 auto;
        }

        .nav-header-title {
            flex: 1 1 auto;
        }

        .nav-header-toggle:focus {
            outline: 2px solid var(--net-color-primary);
            outline-offset: 2px;
        }
        .nav-header:not(:first-of-type){
        /*margin-top: var(--net-spacing-sm, 0.125rem);*/

        }
        .nav-item:first-of-type{
            font-size: larger;
        }
        .nav-item:not(:first-of-type){
            padding-top: var(--net-spacing-xs, 0.125rem);
            padding-bottom: var(--net-spacing-sm, 0.125rem);
        }
        /* Navigation separators */
        .nav-separator {
            height: 1px;
            background: var(--net-nav-separator);
            margin: var(--net-spacing-sm) var(--net-spacing-md);
            opacity: 0.3;
        }
        /* Focus states for accessibility */
        .nav-item {
            font-size: 0.85rem;  
        }

        /* Navigation icons (emojis) */
        .nav-item a::before,
        .nav-item.selected::before,
        .nav-header::before {
            font-style: normal;
            margin-right: 0;
        }

        /* Hover effects for better UX */
        .nav-item:hover {
            transform: scale(1.02);
        }

        .nav-item:hover, .nav-item.selected:hover {
            transform: none;

        }
        .nav-item:hover:not(.selected) {
            transform: none;
            background: color-mix(in srgb, var(--net-nav-item-selected) 70%, white 30%);
            color: var(--net-text-primary);

        }

        /* Focus states for accessibility */
        .nav-item a:focus {
            outline: 0px solid var(--net-color-primary);
            outline-offset: 1px;
        }

        /* Smooth scrolling for navigation */
        nav {
            scroll-behavior: smooth;
        }



        /* Navigation responsive design */
        @media (max-width: 768px) {
            nav {
                margin-bottom: var(--net-spacing-sm);
            }
            
            .nav-item a {
                padding: var(--net-spacing-xs) var(--net-spacing-sm);
                font-size: var(--net-font-size-sm);
            }
            
            .nav-header {
                padding: var(--net-spacing-xs) var(--net-spacing-sm);
                font-size: 0.8em;
            }
        }