/*
 * Shared viewport safety for every existing NoSpoon page.
 * This file only changes layout at narrow viewport widths; it does not
 * create alternate pages or change application behavior.
 */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
}

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

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

.row > *,
.d-flex > *,
.d-inline-flex > *,
.input-group > *,
[class*="col-"] {
    min-width: 0;
}

pre, code {
    max-width: 100%;
}

pre {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    html, body {
        width: 100%;
    }

    .container,
    .container-fluid {
        width: 100%;
        max-width: 100%;
        padding-left: 12px;
        padding-right: 12px;
    }

    .row {
        --bs-gutter-x: 1rem;
    }

    .navbar .container {
        min-width: 0;
    }

    .navbar-brand {
        min-width: 0;
        max-width: calc(100% - 58px);
        overflow-wrap: anywhere;
    }

    .navbar-collapse,
    .navbar-nav {
        min-width: 0;
        max-width: 100%;
    }

    .navbar-nav .nav-link {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .st-nav-container {
        min-width: 0;
        max-width: 100%;
    }

    .table-responsive {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }

    .table-responsive table {
        min-width: 560px;
    }

    .card,
    .modal-content,
    .alert,
    .form-control,
    .form-select,
    .input-group {
        max-width: 100%;
    }

    .input-group {
        flex-wrap: wrap;
    }

    .input-group > .form-control,
    .input-group > .form-select,
    .input-group > .btn {
        min-width: 0;
        flex: 1 1 160px;
    }

    .btn-toolbar,
    .btn-group,
    .button-row,
    .form-actions {
        flex-wrap: wrap;
    }

    .modal-dialog {
        width: auto;
        max-width: calc(100% - 1rem);
        margin: .5rem auto;
    }

    .modal-body {
        overflow-wrap: anywhere;
    }

    /* Existing multi-column workspaces reflow instead of forcing a
       desktop-width canvas into a narrow Android viewport. */
    .blocking-container {
        grid-template-columns: 1fr !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 8px !important;
    }

    .blocking-container > .panel,
    .blocking-container > .chat-panel {
        width: 100%;
        max-height: none;
        min-height: 0;
    }

    .main-content {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 12px !important;
    }

    .video-column {
        max-height: none;
        overflow: visible;
    }

    .card-grid,
    .talent-grid,
    .chunk-grid,
    .clip-grid {
        grid-template-columns: 1fr !important;
    }

    .settings-row,
    .lo-tiles,
    .detail-stats-grid,
    .hire-field-group,
    .sf-row,
    .msg-row {
        grid-template-columns: 1fr !important;
    }

    .sf-facts-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .fund-card {
        grid-template-columns: 1fr !important;
    }

    #camera-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .dbsearch-wrap,
    .xfeed-input {
        min-width: 0 !important;
        width: 100%;
    }
}

@media (max-width: 420px) {
    .container,
    .container-fluid {
        padding-left: 8px;
        padding-right: 8px;
    }

    .modal-dialog {
        max-width: calc(100% - .5rem);
        margin: .25rem auto;
    }

    .btn {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .sf-facts-grid,
    #camera-grid {
        grid-template-columns: 1fr !important;
    }
}