/* Client (user panel) - Responsive fixes */

html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Header: wrap and shrink on small screens */
header {
    flex-wrap: wrap;
    gap: 0.5rem;
    min-height: 64px;
    padding-left: 1rem;
    padding-right: 1rem;
}
@media (max-width: 767px) {
    header {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    header .flex.items-center.gap-4 {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}

/* Content area: no overflow */
main .content-container,
main .glass-panel {
    max-width: 100%;
    overflow-x: hidden;
}

/* Table wrappers: horizontal scroll on small screens */
.overflow-x-auto,
.custom-scroll {
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}
.overflow-x-auto table,
.custom-scroll table {
    min-width: 600px;
}
@media (max-width: 640px) {
    .overflow-x-auto table,
    .custom-scroll table {
        font-size: 0.8125rem;
    }
    .overflow-x-auto th,
    .overflow-x-auto td,
    .custom-scroll th,
    .custom-scroll td {
        padding: 0.5rem 0.375rem !important;
    }
}

/* Status tabs / filter tabs: scroll if needed */
.flex.flex-wrap.gap-2.overflow-x-auto {
    -webkit-overflow-scrolling: touch;
}

/* Dropdowns: stay within viewport */
#lang-dropdown,
#theme-dropdown {
    max-width: calc(100vw - 2rem);
    right: 0;
    left: auto;
}

/* Pagination: wrap on mobile */
#paginationContainer {
    flex-wrap: wrap;
    gap: 0.75rem;
}
@media (max-width: 640px) {
    #paginationContainer {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    #paginationContainer .flex.items-center.gap-2 {
        flex-wrap: wrap;
    }
}

/* Sidebar logo: don't overflow */
#sidebar img {
    max-width: 100%;
    height: auto;
}

/* Form inputs and selects: full width, no overflow */
.content-container input,
.content-container select,
.content-container textarea {
    max-width: 100%;
    box-sizing: border-box;
}

/* Grid forms: single column on mobile (if using form-grid) */
@media (max-width: 767px) {
    .form-grid {
        grid-template-columns: 1fr !important;
    }
}

/* WhatsApp / fixed bottom button: safe area on small screens */
.whatsapp-button {
    bottom: 1rem;
    right: 1rem;
}
@media (max-width: 640px) {
    .whatsapp-button {
        bottom: 0.75rem;
        right: 0.75rem;
        width: 52px;
        height: 52px;
    }
}

/* Modal / overlay: scrollable on small screens */
[class*="modal"] {
    max-width: 100vw;
    max-height: 100vh;
    overflow: auto;
}

/* Search suggestions: max width */
#searchSuggestions {
    max-width: 100%;
}

/* Balance badge and user menu on header: shrink text on small screens */
@media (max-width: 480px) {
    header .text-xs,
    header .text-sm {
        font-size: 0.6875rem !important;
    }
}