/*
 * EWAS Atlas responsive foundation.
 *
 * Keep page-specific presentation in the page stylesheet. This file only
 * provides safe, shared behaviour for narrow screens and touch devices.
 */

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

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

.table-responsive,
.fixed-table-body {
    -webkit-overflow-scrolling: touch;
}

/* Give charts a fluid outer boundary without changing their chosen height. */
.js-plotly-plot,
.plot-container,
.plotly,
.echarts-container,
#cy-container,
#cy {
    max-width: 100%;
}

@media (max-width: 767px) {
    html {
        -webkit-text-size-adjust: 100%;
    }

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

    /* Shared fixed header: retain both brands and keep the menu button usable. */
    #nav_container {
        width: 100%;
        padding-right: 10px !important;
        padding-left: 10px !important;
    }

    #nav_container .navbar-header {
        width: 100%;
        margin-right: 0;
        margin-left: 0;
    }

    #nav_container .navbar-header > a {
        min-width: 0;
        margin-left: 0;
    }

    #nav_container .ngdc-brand {
        margin-right: 6px;
    }

    #nav_container .ngdc-brand img {
        width: auto;
        max-width: 112px;
        height: 36px !important;
        object-fit: contain;
    }

    #nav_container .navbar-brand:not(.ngdc-brand) img {
        width: auto;
        max-width: 96px !important;
        height: 32px !important;
    }

    #nav_container .navbar-toggle {
        margin-right: 0;
    }

    #nav_container .navbar-collapse.collapse.in {
        max-height: calc(100vh - 100px);
        padding-right: 0;
        padding-left: 0;
        overscroll-behavior: contain;
    }

    #nav_container .navbar-nav > li {
        width: 100%;
        text-align: left;
    }

    #nav_container .navbar-nav > li > a {
        padding: 11px 15px;
    }

    #nav_container .navbar-nav > li.dropdown:hover > .dropdown-menu {
        display: none !important;
    }

    #nav_container .navbar-nav > li.dropdown.open > .dropdown-menu {
        position: static;
        display: block !important;
        float: none;
        width: 100%;
        margin: 0;
        padding: 0 0 6px 24px;
        border: 0;
        box-shadow: none;
    }

    /* Bootstrap's desktop containers and grids should use the whole phone. */
    .container,
    .container-fluid {
        max-width: 100%;
    }

    .container-fluid {
        padding-right: 12px;
        padding-left: 12px;
    }

    h1,
    .h1 {
        font-size: 28px;
    }

    h2,
    .h2 {
        font-size: 24px;
    }

    h3,
    .h3 {
        font-size: 20px;
    }

    /* Long scientific identifiers and links must not widen the viewport. */
    p,
    td,
    th,
    dd,
    pre,
    code,
    a {
        overflow-wrap: anywhere;
    }

    pre {
        max-width: 100%;
        overflow-x: auto;
        white-space: pre-wrap;
    }

    /* Forms: stack Bootstrap's desktop-only inline layouts on phones. */
    .form-inline .form-group,
    .form-horizontal .form-group > [class*="col-"] {
        min-width: 0;
    }

    .form-inline .form-group,
    .form-inline .form-control,
    .form-inline .input-group,
    .form-inline select,
    .select2-container {
        width: 100% !important;
        max-width: 100%;
    }

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

    .form-inline .btn {
        margin-top: 8px;
    }

    /* Horizontal scrolling is preferable to clipped scientific data. */
    .table-responsive,
    .fixed-table-body,
    .bootstrap-table,
    .tab-pane,
    .panel-body,
    .well {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .fixed-table-toolbar .search,
    .fixed-table-toolbar .columns,
    .fixed-table-toolbar .bs-bars {
        float: none !important;
        width: 100%;
        margin-right: 0;
        margin-left: 0;
    }

    .fixed-table-toolbar .search .form-control {
        width: 100%;
    }

    .fixed-table-pagination .pagination-detail,
    .fixed-table-pagination .pagination {
        float: none !important;
    }

    .fixed-table-pagination .pagination-detail {
        white-space: normal;
    }

    /* Tabs remain one row and become swipeable instead of wrapping awkwardly. */
    .nav-tabs {
        display: flex;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .nav-tabs::before,
    .nav-tabs::after {
        display: none;
    }

    .nav-tabs > li {
        flex: 0 0 auto;
        float: none;
    }

    /* Bootstrap 3 modals otherwise keep desktop widths from inline styles. */
    .modal-dialog,
    .modal-dialog.modal-lg,
    .modal-dialog.modal-sm {
        width: auto !important;
        max-width: calc(100vw - 20px);
        margin: 10px;
    }

    .modal-content,
    .modal-body {
        max-width: 100%;
    }

    .modal-body {
        overflow-x: auto;
    }

    /* Common graph containers: JS will resize initialized ECharts instances. */
    .echarts-container,
    #cy-container,
    #cy,
    [id$="Chart"],
    [id$="_pic"] {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .js-plotly-plot,
    .plot-container,
    .plotly,
    .svg-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Network and toolkit pages contain intentional desktop canvases. */
    #cy-container {
        overflow: hidden;
    }

    .progress {
        max-width: 100%;
    }

    .btn-group,
    .btn-toolbar {
        max-width: 100%;
    }
}

@media (max-width: 420px) {
    #nav_container .ngdc-brand img {
        max-width: 92px;
    }

    #nav_container .navbar-brand:not(.ngdc-brand) img {
        max-width: 78px !important;
    }

    .container,
    .container-fluid {
        padding-right: 10px;
        padding-left: 10px;
    }
}