/*
 * Global responsive fixes.
 * Loaded after app.css from layouts/app.blade.php and layouts/guest.blade.php.
 */

/* Never let the page scroll sideways; wide content scrolls inside its own box instead. */
body {
    overflow-x: hidden;
}

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

/* Inputs / selects should never be wider than their container. */
input,
select,
textarea {
    max-width: 100%;
}

/* Wide tables scroll horizontally inside this wrapper instead of breaking the layout. */
.rd-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Content column next to the icon sidebar: allow it to shrink below its content width. */
.rd-content {
    min-width: 0;
    overflow-x: auto;
}

/* Sidebar wrapper stretches the icon column to full height on desktop. */
@media (min-width: 768px) {
    .rd-sidebar {
        display: flex;
        flex-shrink: 0;
    }

    .rd-sidebar > div {
        flex: 1 1 auto;
    }
}

/* Charts keep their aspect ratio and fit their container. */
canvas {
    max-width: 100% !important;
}

/* ---------- Small screens (< 768px) ---------- */
@media (max-width: 767.98px) {
    /* Icon sidebar becomes a horizontal, scrollable strip above the content. */
    .rd-sidebar > div {
        flex-direction: row !important;
        flex-wrap: nowrap;
        align-items: center;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-top: .5rem !important;
        padding-bottom: .5rem !important;
        height: auto !important;
    }

    .rd-sidebar > div > * {
        flex-shrink: 0;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .rd-sidebar > div:empty {
        display: none;
    }

    /* Page padding is smaller on phones. */
    .rd-content > .p-6 {
        padding: .75rem;
    }

    /* Modals: full width, start near the top and scroll, so action buttons stay reachable. */
    .pro-modal {
        z-index: 50 !important;
        -webkit-overflow-scrolling: touch;
    }

    .pro-modal-content {
        top: 0 !important;
        width: auto !important;
        max-width: calc(100vw - 1rem) !important;
        margin: 1rem .5rem !important;
        padding: 1rem !important;
    }
}