/* Update existing user-layout to remove drawer grid area */
.user-layout {
    height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 1fr;
    grid-template-areas:
        "appbar"
        "main"
        "footer";
}

/* Keep existing appbar styling */
.user-appbar {
    grid-area: appbar;
    background-color: var(--mud-palette-appbar-background) !important;
    z-index: 1200;
    padding: 0 16px;
}

/* Header navigation specific styles */
.nav-logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    height: 100%;
    margin-right: 16px;
}

.header-logo {
    height: 40px;
    width: auto;
    object-fit: contain;
}

.header-nav-menu {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-right: 16px;
}

.header-nav-button {
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    color: var(--mud-palette-text-primary) !important;
    font-weight: 500;
    text-transform: none !important;
    padding: 8px 16px !important;
    margin: 0 2px;
}

    .header-nav-button:hover {
        background-color: rgba(var(--mud-palette-primary-rgb), 0.1) !important;
        color: var(--mud-palette-primary) !important;
    }

    .header-nav-button .mud-button-start-icon {
        transition: transform 0.2s ease;
    }

    .header-nav-button:hover .mud-button-start-icon {
        transform: scale(1.1);
    }

/* Keep existing styles */
.appbar-title {
    font-weight: 600;
    color: var(--mud-palette-text-primary) !important;
}

.user-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Update main content to use full width */
.user-main-content {
    grid-area: main;
    background-color: var(--mud-palette-background) !important;
    overflow-y: auto;
    padding-top: 64px !important; /* Appbar height */
    padding-bottom: 48px !important; /* Footer height */
}

.user-footer {
    grid-area: footer;
    background-color: var(--mud-palette-surface) !important;
    z-index: 1200;
    padding: 8px 16px;
}

/* Mobile responsiveness */
@media (max-width: 960px) {
    .header-nav-menu {
        display: none !important;
    }

    .nav-logo-container {
        min-width: 50px;
        margin-right: 8px;
    }

    .header-logo {
        height: 32px;
    }

    .appbar-title {
        font-size: 1.1rem !important;
    }
}

@media (max-width: 600px) {
    .header-logo {
        height: 28px;
    }

    .appbar-title {
        font-size: 1rem !important;
    }

    .user-main-content {
        padding-top: 56px !important;
        padding-bottom: 56px !important;
    }
}

/* Keep existing scrollbar styles */
.user-main-content::-webkit-scrollbar {
    width: 6px;
}

.user-main-content::-webkit-scrollbar-track {
    background: var(--mud-palette-background-grey);
}

.user-main-content::-webkit-scrollbar-thumb {
    background: var(--mud-palette-primary);
    border-radius: 3px;
}

    .user-main-content::-webkit-scrollbar-thumb:hover {
        background: var(--mud-palette-primary-darken);
    }

/* Dark mode adjustments */
.mud-theme-dark .header-nav-button {
    color: var(--mud-palette-text-primary) !important;
}

    .mud-theme-dark .header-nav-button:hover {
        background-color: rgba(var(--mud-palette-primary-rgb), 0.1) !important;
        color: var(--mud-palette-primary) !important;
    }