/* Responsive Layout Styles for MudBlazor */

/* Mobile First Approach */
:root {
    --app-bar-height: 42px;
}

/* Small screens (phones) */
@media (max-width: 599px) {
    :root {
        --app-bar-height: 42px;
    }
    
    .mud-appbar {
        height: var(--app-bar-height) !important;
        min-height: var(--app-bar-height) !important;
    }
    
    .mud-main-content {
        padding-top: 16px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    .mud-drawer {
        width: 200px !important;
    }
    
    .mud-container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

/* Medium screens (tablets) */
@media (min-width: 600px) and (max-width: 959px) {
    :root {
        --app-bar-height: 42px;
    }
    
    .mud-appbar {
        height: var(--app-bar-height) !important;
        min-height: var(--app-bar-height) !important;
    }

    .mud-main-content {
        padding-top: 16px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    .mud-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* Large screens (desktops) */
@media (min-width: 960px) {
    :root {
        --app-bar-height: 42px;
    }
    
    .mud-appbar {
        height: var(--app-bar-height) !important;
        min-height: var(--app-bar-height) !important;
    }

    .mud-main-content {
        padding-top: 16px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    .mud-drawer-mini .mud-nav-item {
        text-align: center;
    }
    
    .mud-drawer-mini .mud-nav-link-text {
        display: none;
    }
}

/* Navigation improvements */
.mud-nav-menu {
    padding-top: 8px;
    width: 100%;
    overflow-x: hidden;
}

.mud-nav-item {
    margin-bottom: 4px;
    width: 100%;
}

.mud-nav-link {
    border-radius: 8px;
    margin: 0 4px;
    transition: all 0.2s ease-in-out;
    width: calc(100% - 8px);
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mud-nav-link:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.08);
}

.mud-nav-link.active {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.12);
    color: var(--mud-palette-primary);
}

.mud-nav-group {
    margin-bottom: 8px;
    width: 100%;
}

.mud-nav-group .mud-nav-item {
    padding-left: 16px;
}

/* Fix drawer content overflow */
.mud-drawer .mud-drawer-content {
    overflow-x: hidden;
    overflow-y: auto;
    max-width: 100%;
}

.mud-drawer .mud-list {
    overflow-x: hidden;
}

.mud-drawer .mud-nav-menu {
    max-width: 100%;
    box-sizing: border-box;
}

/* Mini drawer specific styles */
.mud-drawer-mini .mud-nav-link {
    justify-content: center;
    text-align: center;
    margin: 0 4px;
}

.mud-drawer-mini .mud-nav-link span {
    display: none;
}

.mud-drawer-mini .mud-nav-group {
    display: none;
}

/* Responsive drawer - ensure text shows when expanded */
.mud-drawer-responsive.mud-drawer-open .mud-nav-link {
    justify-content: flex-start;
    text-align: left;
}

.mud-drawer-responsive.mud-drawer-open .mud-nav-link span {
    display: inline;
    margin-left: 12px;
}

/* Temporary drawer - always show text when open */
.mud-drawer-temporary .mud-nav-link span {
    display: inline;
    margin-left: 12px;
}

/* Container responsiveness */
.responsive-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding-left: 16px;
    padding-right: 16px;
}

@media (min-width: 600px) {
    .responsive-container {
        max-width: 960px;
    }
}

@media (min-width: 960px) {
    .responsive-container {
        max-width: 1280px;
    }
}

@media (min-width: 1280px) {
    .responsive-container {
        max-width: 1920px;
    }
}

/* Drawer overlay for mobile */
@media (max-width: 959px) {
    .mud-overlay {
        background-color: rgba(0, 0, 0, 0.5);
    }
}

/* App bar responsiveness */
.mud-appbar .mud-toolbar {
    padding-left: 16px;
    padding-right: 16px;
}

@media (max-width: 599px) {
    .mud-appbar .mud-toolbar {
        padding-left: 8px;
        padding-right: 8px;
    }
    
    .mud-appbar .mud-typography {
        font-size: 1.1rem;
    }
}

/* Touch-friendly navigation on mobile */
@media (max-width: 959px) {
    .mud-nav-link {
        min-height: 48px;
        padding: 12px 16px;
    }
    
    .mud-button-root {
        min-height: 44px;
    }
}