/* Features Bar Desktop Fix */
.features-bar {
    overflow-x: auto;
    overflow-y: visible;
    margin-top: 0 !important;
    position: sticky;
    top: 0;
    z-index: 40;
    background-color: rgb(240 253 244) !important;
    -webkit-overflow-scrolling: touch;
}

.features-bar .flex-container {
    min-width: max-content;
    width: auto;
}

/* Ensure text doesn't get cut off on any screen size */
.features-bar .flex {
    min-width: max-content;
    width: auto;
}

.features-bar span {
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

.features-bar .flex {
    flex-shrink: 0 !important;
    min-width: max-content !important;
}

.features-bar .min-w-max {
    min-width: max-content !important;
}

/* Reduce header spacing on document preview pages */
.document-preview-page .navbar {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    z-index: 50 !important;
    position: relative !important;
}

.document-preview-page .navbar-brand {
    font-size: 1.25rem !important;
}

.document-preview-page .nav-link {
    padding: 0.25rem 0.5rem !important;
}

/* Ensure features bar is visible and properly positioned */
.document-preview-page .features-bar {
    position: sticky !important;
    top: 60px !important; /* Adjust based on navbar height */
    z-index: 30 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

/* Desktop specific fixes */
@media (min-width: 768px) {
    .features-bar .grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

@media (min-width: 1024px) {
    .features-bar .grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .features-bar .flex {
        justify-content: flex-start;
    }
}

@media (min-width: 1280px) {
    .features-bar .grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
    }
}