/* Responsive polish overrides
 * Loaded after existing styles to stabilize overflow and scaling behavior.
 */

:root {
    --responsive-gap-sm: 0.5rem;
    --responsive-gap-md: 0.75rem;
}

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

.main-content,
.admin-main,
.container,
.container-fluid,
.row,
[class*="col-"] {
    min-width: 0;
}

/* Main app navbar: one compact toolbar row on xl+; hamburger + vertical menu below xl */
.custom-navbar .container-fluid {
    flex-wrap: nowrap;
    align-items: center;
}

.custom-navbar .navbar-collapse {
    min-width: 0;
}

.custom-navbar .navbar-nav {
    gap: 0;
}

.custom-navbar .navbar-nav .nav-item {
    min-width: 0;
}

.custom-navbar .dropdown-menu {
    max-width: min(92vw, 24rem);
}

/* Desktop / wide: single horizontal strip, readable but tight */
@media (min-width: 1200px) {
    .custom-navbar .navbar-nav {
        flex-wrap: nowrap;
        align-items: center;
    }

    .custom-navbar .navbar-nav .nav-link,
    .custom-navbar .navbar-nav .nav-link.btn {
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        overflow-wrap: normal;
        word-break: normal;
        text-align: center;
        line-height: 1.2;
        font-size: clamp(0.8125rem, 0.15vw + 0.78rem, 0.9375rem);
        padding: 0.45rem 0.55rem !important;
    }

    .custom-navbar .navbar-nav .nav-link i,
    .custom-navbar .navbar-nav .nav-link.btn i {
        flex-shrink: 0;
    }

    .custom-navbar .navbar-brand {
        margin-right: 0.5rem;
        font-size: clamp(1rem, 0.2vw + 0.95rem, 1.15rem);
    }
}

/* Collapsed / mobile menu: stacked full-width links, no faux second toolbar row */
@media (max-width: 1199.98px) {
    .custom-navbar .navbar-collapse {
        width: 100%;
        margin-top: 0.35rem;
        padding-top: 0.35rem;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
    }

    .custom-navbar .navbar-nav {
        width: 100%;
    }

    .custom-navbar .navbar-nav .nav-item {
        width: 100%;
    }

    .custom-navbar .navbar-nav .nav-link,
    .custom-navbar .navbar-nav .nav-link.btn {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        white-space: normal;
        overflow-wrap: normal;
        word-break: normal;
        text-align: left;
        font-size: 1rem;
        padding: 0.55rem 0.75rem !important;
    }

    .custom-navbar #logout-btn {
        white-space: normal;
    }
}

/* Shared action and button wrapping */
.d-flex,
.btn-toolbar,
.btn-group,
.header-actions,
.action-buttons-container {
    min-width: 0;
}

.d-flex.flex-wrap,
.btn-toolbar,
.header-actions,
.action-buttons-container {
    row-gap: var(--responsive-gap-sm);
}

.btn {
    max-width: 100%;
}

.btn .btn-label,
.btn span,
.btn {
    overflow-wrap: anywhere;
}

/* Admin header: avoid character-by-character breaks from global .btn rule */
.admin-header-actions .btn,
.admin-header-actions .btn span,
.admin-header-actions .header-dropdown > .btn {
    overflow-wrap: break-word;
    word-break: normal;
}

.card-header,
.section-header,
.modal-footer,
.owner-alert-strip__inner,
.owner-alert-strip__actions,
.section-actions {
    min-width: 0;
}

.card-header,
.section-header,
.modal-footer,
.section-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--responsive-gap-sm);
}

/* Data container and table continuity */
.table-responsive,
.users-table-container,
.subscriptions-table-container,
.payments-table-container,
.marketing-table-container,
.content-table-container,
.backup-table-container,
.beta-programs-table-container,
.sla-table-container {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.admin-table,
.sla-table,
table {
    width: 100%;
}

/* Wide admin data tables: intrinsic column width + horizontal scroll (prevents 1-char-wide columns on phones) */
.users-table-container .admin-table,
.support-messages-container .admin-table,
.subscriptions-table-container .admin-table,
.payments-table-container .admin-table,
.marketing-table-container .admin-table,
.content-table-container .admin-table,
.backup-table-container .admin-table,
.beta-programs-table-container .admin-table,
.sla-table-container .admin-table,
.sla-table-container .sla-table,
.admin-container .card-body:has(table.admin-table) .admin-table {
    width: max-content;
    max-width: none;
    min-width: 100%;
}

.admin-table th,
.admin-table td,
.sla-table th,
.sla-table td {
    overflow-wrap: normal;
    word-break: normal;
}

/* Single-line cells in scrollable admin tables: columns size to content, user scrolls horizontally */
.users-table-container .admin-table th,
.support-messages-container .admin-table th,
.subscriptions-table-container .admin-table th,
.payments-table-container .admin-table th,
.marketing-table-container .admin-table th,
.content-table-container .admin-table th,
.backup-table-container .admin-table th,
.beta-programs-table-container .admin-table th,
.sla-table-container .admin-table th,
.sla-table-container .sla-table th,
.admin-container .card-body:has(table.admin-table) .admin-table th,
.users-table-container .admin-table td,
.support-messages-container .admin-table td,
.subscriptions-table-container .admin-table td,
.payments-table-container .admin-table td,
.marketing-table-container .admin-table td,
.content-table-container .admin-table td,
.backup-table-container .admin-table td,
.beta-programs-table-container .admin-table td,
.sla-table-container .admin-table td,
.sla-table-container .sla-table td,
.admin-container .card-body:has(table.admin-table) .admin-table td {
    white-space: nowrap;
}

/* Admin nav and chip controls */
.admin-nav-shell,
.admin-nav-panel,
.admin-nav,
.admin-nav-group,
.admin-nav-group__tabs {
    min-width: 0;
}

.nav-tab {
    white-space: normal;
    text-align: center;
    line-height: 1.25;
    min-height: 2.4rem;
}

.admin-main [style*="white-space: nowrap"] {
    white-space: normal !important;
}

/* Prevent long inline content from forcing viewport width */
img,
video,
canvas,
svg {
    max-width: 100%;
    height: auto;
}

/* Settings page: tab bar, cards, and action rows (avoid overlap / uneven gaps) */
.settings-page {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: clamp(0.75rem, 2vw, 1.25rem);
    padding-right: clamp(0.75rem, 2vw, 1.25rem);
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
}

.settings-page .settings-tabs-card .card-body {
    padding: clamp(0.65rem, 1.5vw, 1.1rem);
}

.settings-page ul#settingsTabs.nav-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    row-gap: 0.45rem;
    justify-content: center;
    align-items: stretch;
}

@media (max-width: 991.98px) {
    .settings-page ul#settingsTabs.nav-pills.nav-fill > .nav-item {
        flex: 1 1 0;
        min-width: min(100%, 10.5rem);
        max-width: 100%;
    }
}

.settings-page ul#settingsTabs.nav-pills .nav-link {
    width: 100%;
    height: 100%;
    white-space: normal;
    line-height: 1.25;
    text-align: center;
    padding: 0.5rem 0.65rem;
    font-size: clamp(0.8rem, 0.35vw + 0.76rem, 0.93rem);
    min-height: 2.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.settings-page ul#settingsTabs.nav-pills .nav-link i {
    flex-shrink: 0;
}

@media (max-width: 575.98px) {
    .settings-page ul#settingsTabs.nav-pills.nav-fill > .nav-item {
        flex: 1 1 100%;
        min-width: 100%;
    }
}

/* Wide screens: single scrollable tab row (avoids a sparse two-row strip and wasted width) */
@media (min-width: 992px) {
    .settings-page ul#settingsTabs.nav-pills {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .settings-page ul#settingsTabs.nav-pills.nav-fill > .nav-item {
        flex: 0 0 auto;
        max-width: none;
    }

    .settings-page ul#settingsTabs.nav-pills .nav-link {
        white-space: nowrap;
    }
}

.settings-page .card-header.d-flex {
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
}

.settings-page .card-header.d-flex > h5,
.settings-page .card-header.d-flex > h6 {
    min-width: 0;
    flex: 1 1 12rem;
    margin-bottom: 0;
}

.settings-page .card-header.d-flex > .btn {
    flex-shrink: 0;
}

.settings-page .settings-inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
}

.settings-page .settings-inline-actions .btn {
    margin: 0 !important;
}

.settings-page .subscription-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    align-items: center;
}

.settings-page .subscription-actions .btn {
    margin: 0 !important;
}

.settings-page .tab-pane .row.mb-4 {
    margin-bottom: 1.35rem !important;
}

/* Settings user cards: action row stays inside the card when wrapping */
.settings-page .user-card .card-body {
    overflow-x: clip;
}

.settings-page #users.tab-pane > .row.user-management-layout {
    align-items: stretch;
}

/* Points history is full-width; keep long lists scrollable inside the card */
.settings-page .settings-points-history .points-list {
    max-height: min(70vh, 560px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.settings-page #users .card .card-body {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

/* Bailey FAB sits bottom-right by default and covers the Settings sidebar; dock it bottom-left here */
@supports selector(:has(*)) {
    body:has(.settings-page) .bailey-chat-button {
        right: auto;
        left: max(1rem, env(safe-area-inset-left, 0px));
    }

    body:has(.settings-page) .bailey-chat-widget {
        right: auto;
        left: max(1rem, env(safe-area-inset-left, 0px));
        max-width: min(400px, calc(100vw - 2rem));
    }
}

/* Settings: demo replay tiles + reset row (keep label text inside controls) */
.demo-replay-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
    text-align: left;
    min-height: auto;
    line-height: 1.35;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}

.demo-replay-btn .demo-replay-meta {
    white-space: normal;
}

.demo-reset-launcher .input-group {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.5rem;
    width: 100%;
}

.demo-reset-launcher .input-group > .form-select {
    flex: 1 1 220px;
    min-width: 0;
    width: auto;
}

.demo-reset-launcher .input-group > .btn {
    flex: 1 1 140px;
    min-width: 0;
    white-space: normal;
    line-height: 1.25;
    text-align: center;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

@media (max-width: 576px) {
    .demo-reset-launcher .input-group > .form-select,
    .demo-reset-launcher .input-group > .btn {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .btn,
    .nav-tab {
        font-size: 0.85rem;
    }

    .custom-navbar .dropdown-menu {
        max-width: 100%;
    }

    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100vw - 1rem);
    }

    .card-header,
    .section-header,
    .modal-footer,
    .section-actions {
        align-items: stretch;
    }

    .card-header > *,
    .section-header > *,
    .section-actions > * {
        min-width: 0;
    }

    .section-actions .btn,
    .card-header .btn,
    .modal-footer .btn {
        width: 100%;
    }

    .admin-main [style*="min-width: 220px"],
    .admin-main [style*="min-width: 160px"],
    .admin-main [style*="min-width: 120px"] {
        min-width: 0 !important;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .btn {
        min-height: 2.25rem;
    }

    .nav-tab {
        width: 100%;
    }

    .admin-nav-group {
        align-items: flex-start;
    }
}