/**
 * Athena Design System - Administrative Navigation
 * Navigation styles for VklassAdminWeb including app drawer and main menu
 * Based on documentation/ui-admin.md specifications
 */

/* ========================================
   Application Menu (Dark Navigation)
   ======================================== */

.admin-app-menu {
    padding: 0;
}

.admin-menu-group + .admin-menu-group {
    margin-top: var(--gap);
}

.admin-menu-group__subheader {
    font-size: var(--admin-subheader-size);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-looser);
    padding: 11px 16px 7px 23px;
    color: var(--gray-light);
    margin: 0;
}

.admin-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.admin-menu-item {
    display: flex;
    align-items: center;
    padding: 12px 32px;
    text-decoration: none;
    color: var(--gray-light);
    height: 48px;
    transition: all var(--transition-fast);
}

.admin-menu-item + .admin-menu-item {
    margin-top: 7px;
}

.admin-menu-item__graphic {
    margin-right: 16px;
    color: var(--gray-light);
    width: 24px;
    height: 24px;
}

.admin-menu-item__text {
    font-size: var(--admin-menu-text-size);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-loose);
    border-bottom: 2px solid transparent;
    transition: border-color var(--transition-fast);
}

.admin-menu-item:hover,
.admin-menu-item--activated {
    background-color: var(--black);
    color: var(--white);
}

.admin-menu-item:hover .admin-menu-item__graphic,
.admin-menu-item--activated .admin-menu-item__graphic {
    color: var(--white);
}

.admin-menu-item:hover .admin-menu-item__text,
.admin-menu-item--activated .admin-menu-item__text {
    border-bottom-color: var(--white);
}

/* ========================================
   Bottom Navigation Actions
   ======================================== */

.admin-nav-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.admin-nav-action {
    display: flex;
    align-items: center;
    height: 62px;
    padding-left: 28px;
    text-decoration: none;
    color: var(--gray-light);
    text-transform: uppercase;
    border-top: 1px solid var(--gray-dark);
    transition: background-color var(--transition-fast);
}

.admin-nav-action:hover {
    background-color: var(--gray-dark);
}

.admin-nav-action__text {
    margin-left: 14px;
    font-size: var(--admin-menu-text-size);
    letter-spacing: var(--letter-spacing-loose);
}

.admin-nav-action--close {
    bottom: 0;
}

.admin-nav-action--legacy {
    bottom: 62px;
}

/* ========================================
   Main Menu (Light Navigation)
   ======================================== */

.admin-menu-section {
    padding: 0;
}

.admin-menu-item-light {
    display: flex;
    align-items: center;
    height: 35px;
    padding-left: 32px;
    text-decoration: none;
    color: var(--gray-darker);
    transition: background-color var(--transition-fast);
}

.admin-menu-item-light + .admin-menu-item-light {
    margin-top: 7px;
}

.admin-menu-item-light__text {
    font-size: var(--admin-menu-text-size);
    position: relative;
}

.admin-menu-item-light__text:before {
    content: '•';
    margin-right: 20px;
    color: var(--gray-darker);
}

.admin-menu-item-light:hover,
.admin-menu-item-light--activated {
    background-color: var(--gray-darker);
}

.admin-menu-item-light:hover .admin-menu-item-light__text,
.admin-menu-item-light--activated .admin-menu-item-light__text {
    color: var(--admin-background);
}

.admin-menu-item-light:hover .admin-menu-item-light__text:before,
.admin-menu-item-light--activated .admin-menu-item-light__text:before {
    color: var(--admin-background);
}

/* Go Back Button */
.admin-menu-item-light.go-back {
    padding-left: 22px;
}

.admin-menu-item-light.go-back .admin-menu-item-light__text {
    position: relative;
    left: -4px;
}

.admin-menu-item-light.go-back .admin-menu-item-light__text:before {
    content: none;
}

.admin-menu-item-light.go-back:hover {
    background-color: var(--cl-hard);
    color: var(--white);
}

.admin-menu-item-light.go-back:hover .admin-menu-item-light__text {
    color: var(--white);
}

/* ========================================
   Toolbar Actions & Buttons
   ======================================== */

.admin-toolbar-actions {
    display: flex;
    align-items: center;
    gap: var(--gap);
}

.admin-toolbar-button {
    background: none;
    border: none;
    color: var(--gray-lighter);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--admin-button-border-radius);
    transition: background-color var(--transition-fast);
}

.admin-toolbar-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.admin-toolbar-button .material-icons {
    color: var(--gray-light);
}

/* ========================================
   Breadcrumbs
   ======================================== */

.admin-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--admin-menu-text-size);
    color: var(--gray-dark);
}

.admin-breadcrumb-item {
    text-decoration: none;
    color: var(--gray-dark);
    transition: color var(--transition-fast);
}

.admin-breadcrumb-item:hover {
    color: var(--cl-hard);
}

.admin-breadcrumb-separator {
    color: var(--gray);
}

.admin-breadcrumb-item--current {
    color: var(--gray-darker);
    font-weight: var(--font-weight-medium);
}

/* ========================================
   Utility Flex Classes
   ======================================== */

.admin-flex {
    display: flex;
}

.admin-flex--space-between {
    justify-content: space-between;
}

.admin-flex--align-center {
    align-items: center;
}

.admin-flex--gap {
    gap: 16px;
}

.admin-flex--wrap {
    flex-wrap: wrap;
}

/* ========================================
   Text Utilities
   ======================================== */

.admin-text-center {
    text-align: center;
}

.admin-text-right {
    text-align: right;
}

.admin-text-upper {
    text-transform: uppercase;
}

.admin-text-bold {
    font-weight: var(--font-weight-medium);
}

/* ========================================
   Scrollbar Styling for Navigation
   ======================================== */

.admin-app-nav::-webkit-scrollbar {
    width: 8px;
}

.admin-app-nav::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

.admin-app-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.admin-app-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

.admin-main-menu::-webkit-scrollbar {
    width: 8px;
}

.admin-main-menu::-webkit-scrollbar-track {
    background: var(--gray-lighter);
}

.admin-main-menu::-webkit-scrollbar-thumb {
    background: var(--gray-light);
    border-radius: 4px;
}

.admin-main-menu::-webkit-scrollbar-thumb:hover {
    background: var(--gray);
}

/* ========================================
   Mobile Navigation
   ======================================== */

@media (max-width: 768px) {
    .admin-mobile-menu-toggle {
        display: flex;
        align-items: center;
        background: none;
        border: none;
        color: var(--gray-darker);
        border-right: 1px solid var(--gray-dark);
        padding: 8px 16px;
        margin-right: 16px;
        cursor: pointer;
    }

    .admin-mobile-breadcrumb {
        color: var(--gray-darker);
        font-weight: var(--font-weight-medium);
    }

    .admin-mobile-app-toggler {
        background-color: var(--black);
        color: var(--white);
        width: 100%;
        padding: 19px 26px;
        text-align: center;
        text-transform: uppercase;
        font-weight: var(--font-weight-medium);
        position: relative;
        border: none;
        cursor: pointer;
    }

    .admin-mobile-app-toggler .material-icons {
        position: absolute;
        left: 13px;
        top: 50%;
        transform: translateY(-50%);
    }
}