/* UI Responsive Fix Pack - dashboard + public pages */
:root {
    --ui-safe-x: clamp(0.75rem, 2vw, 1.5rem);
    --ui-safe-y: clamp(0.75rem, 2vh, 1.25rem);
    --ui-radius: clamp(1rem, 2vw, 1.75rem);
}

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

body {
    min-height: 100dvh;
}

button, a, input, select, textarea {
    min-width: 0;
}

input, select, textarea {
    max-width: 100%;
}

img, svg, canvas, video, iframe {
    max-width: 100%;
}

/* Dashboard shell */
.dashboard-layout {
    width: 100%;
    max-width: 100vw;
    min-height: 100dvh;
    height: 100dvh;
}

.dashboard-main,
.dashboard-content {
    min-width: 0;
}

.dashboard-content {
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
}

.dashboard-header {
    position: relative;
    flex-shrink: 0;
}

#mobileMenuBtn {
    z-index: 80;
}

.stats-container {
    scroll-snap-type: x proximity;
}

.stats-container .stat-card {
    scroll-snap-align: start;
}

#keysPagination,
.responsive-pagination {
    flex-wrap: wrap;
    gap: 0.75rem;
}

#keysPagination > *,
.responsive-pagination > * {
    min-width: 0;
}

.desktop-create-form {
    max-width: 100%;
    flex-wrap: wrap;
}

.desktop-create-form input,
.desktop-create-form select {
    min-height: 38px;
}

@media (max-width: 1180px) and (min-width: 768px) {
    .desktop-create-form {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 767px) {
    .dashboard-layout {
        height: 100dvh;
        min-height: 100dvh;
    }

    #mobileMenuBtn {
        top: calc(0.75rem + env(safe-area-inset-top)) !important;
        left: calc(0.75rem + env(safe-area-inset-left)) !important;
        width: 2.75rem !important;
        height: 2.75rem !important;
    }

    .dashboard-header {
        padding: calc(0.75rem + env(safe-area-inset-top)) 0.75rem 0.75rem 4.25rem !important;
        gap: 0.75rem !important;
    }

    .header-title {
        margin-left: 0 !important;
        width: 100%;
        min-width: 0;
    }

    .dashboard-content {
        padding: 0.85rem !important;
        padding-bottom: calc(5.25rem + env(safe-area-inset-bottom)) !important;
    }

    .stats-container {
        gap: 0.5rem !important;
        margin-left: -3.5rem;
        width: calc(100% + 3.5rem) !important;
        padding-left: 0;
    }

    .stats-container .stat-card {
        min-width: 84px !important;
        padding: 0.55rem 0.75rem !important;
    }

    #keysPagination,
    .responsive-pagination {
        justify-content: center !important;
        padding: 0.85rem !important;
    }

    #keysPagination > div,
    .responsive-pagination > div {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* Modal system: fixes desktop/mobile overflow and cut-off save buttons */
[data-modal] {
    padding: clamp(0.5rem, 2vw, 1rem) !important;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

[data-modal] [data-modal-content] {
    min-height: 0;
    max-height: calc(100dvh - clamp(1rem, 4vw, 2rem)) !important;
    overscroll-behavior: contain;
}

[data-modal] .overflow-y-auto,
[data-modal] form {
    min-height: 0;
}

#settingsModal [data-modal-content],
#freekeyModal [data-modal-content],
#downloadModal [data-modal-content],
#onlineModal [data-modal-content],
#promoModal [data-modal-content],
#updatesModal [data-modal-content],
#usersModal [data-modal-content],
#apiLogsModal [data-modal-content],
#sessionsModal [data-modal-content],
#ipRulesModal [data-modal-content],
#webhooksModal [data-modal-content],
#cacheModal [data-modal-content],
#hwidModal [data-modal-content],
#bannedHwidsModal [data-modal-content],
#hwidResetModal [data-modal-content] {
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
}

#settingsModal #settingsForm {
    flex: 1 1 auto;
    overflow-y: auto;
    padding-right: 0.25rem;
}

#settingsModal [data-settings-content] .grid.grid-cols-2,
#settingsModal [data-settings-content] .grid.grid-cols-3,
#settingsModal [data-settings-content] .grid.grid-cols-4 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important;
}

#settingsModal .settings-tab-btn {
    min-height: 40px;
}

#freekeyModal [data-modal-content] {
    max-width: min(1120px, calc(100vw - 2rem)) !important;
}

#freekeyModal [data-modal-content] > div:first-child {
    flex: 0 0 auto;
}

#freekeyModal [data-modal-content] > div:nth-child(2) {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable;
}

#freekeyModal .xl\:sticky {
    position: static !important;
}

#freekeyModal a[href^="#freekey-"] {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

#freekeyModal input,
#freekeyModal button,
#freekeyModal a {
    min-width: 0;
}

@media (max-width: 767px) {
    [data-modal] {
        align-items: flex-end !important;
        justify-content: center !important;
        padding: 0.5rem !important;
    }

    [data-modal] [data-modal-content] {
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(100dvh - 1rem) !important;
        border-radius: 1.25rem !important;
    }

    [data-modal] [data-modal-content].p-6 {
        padding: 1rem !important;
    }

    #settingsModal [data-modal-content] > div:first-child,
    #downloadModal [data-modal-content] > div:first-child,
    #onlineModal [data-modal-content] > div:first-child,
    #promoModal [data-modal-content] > div:first-child,
    #updatesModal [data-modal-content] > div:first-child,
    #usersModal [data-modal-content] > div:first-child,
    #freekeyModal [data-modal-content] > div:first-child {
        padding: 1rem !important;
    }

    #freekeyModal [data-modal-content] > div:nth-child(2) {
        padding: 1rem !important;
    }

    #freekeyModal [data-modal-content] > div:first-child .mt-5,
    #settingsModal .flex.gap-1.p-1 {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        padding-bottom: 0.25rem;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    #freekeyModal [data-modal-content] > div:first-child .mt-5::-webkit-scrollbar,
    #settingsModal .flex.gap-1.p-1::-webkit-scrollbar {
        display: none;
    }

    #freekeyModal section,
    #freekeyModal .rounded-3xl {
        border-radius: 1.15rem !important;
    }

    #freekeyModal .p-5 {
        padding: 1rem !important;
    }

    #freekeyModal .gap-6 {
        gap: 1rem !important;
    }
}

/* Tables and generated lists */
.table-container,
.table-responsive,
.overflow-x-auto {
    max-width: 100%;
}

table {
    width: 100%;
}

@media (max-width: 767px) {
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
}

/* Public pages */
.container,
.app-shell,
main,
.page-shell {
    max-width: 100%;
}

.card,
.app-card,
.glass,
.page-card {
    max-width: 100%;
}

.ad-slot {
    overflow: hidden;
}

.toast {
    max-width: calc(100vw - 1.5rem);
}

@media (max-width: 480px) {
    .card {
        border-radius: 1.35rem !important;
    }

    .card-footer {
        padding: 0.9rem !important;
        gap: 0.75rem !important;
        flex-wrap: wrap;
    }

    .toast {
        width: calc(100vw - 1.5rem);
        text-align: center;
    }

    pre, code {
        white-space: pre-wrap;
        word-break: break-word;
    }
}

/* App settings page */
.app-grid {
    min-width: 0;
}

@media (max-width: 980px) {
    .app-grid {
        grid-template-columns: 1fr !important;
    }

    .app-chip-row {
        grid-template-columns: 1fr !important;
    }

    .app-hero {
        flex-direction: column;
        padding: 1rem !important;
    }
}