/* Employee Layout Responsive Styles */

/* MudTabs Dark Theme Styling */
:global(.mud-tabs) {
    background: transparent;
    color: white;
}

:global(.mud-tab-panel) {
    color: white;
}

:global(.mud-tabs :deep(.mud-tab)) {
    color: #999;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 12px 16px;
}

:global(.mud-tabs :deep(.mud-tab.active)) {
    color: #4db8a8;
}

:global(.mud-tabs :deep(.mud-tab-content)) {
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

:global(.mud-tabs :deep(.mud-tab.active .mud-tab-content)) {
    border-bottom-color: #4db8a8;
}

/* Header Mobile Optimization */
@media (max-width: 768px) {
    .user-details {
        display: none;
    }

    .user-info {
        gap: 0;
    }

    .user-avatar {
        width: 36px;
        height: 36px;
        font-size: 12px;
    }

    .header-icon-btn {
        width: 36px;
        height: 36px;
    }
}

/* Bottom Nav Mobile Optimization */
@media (max-width: 768px) {
    .nav-item {
        padding: 8px 4px;
    }

    .nav-icon {
        width: 20px;
        height: 20px;
    }

    .nav-label {
        font-size: 9px;
    }
}

@media (max-width: 480px) {
    .main-content {
        padding-bottom: 20px;
    }

    .bottom-nav {
        gap: 0;
    }

    .nav-item {
        padding: 6px 2px;
        font-size: 8px;
        gap: 2px;
    }

    .nav-icon {
        width: 18px;
        height: 18px;
    }

    .nav-label {
        font-size: 7px;
    }
}