/*
 * VSMS responsive corrections.
 *
 * Loaded last, after the theme's own stylesheets, so these rules win.
 *
 * SCOPE RULE: everything here is inside a max-width media query, with one exception
 * noted below. The desktop layout was never the problem and must not be touched.
 *
 * An earlier version of this file broke the desktop UI. Recording why, so it is not
 * repeated:
 *
 *   td, th, .text-gray-800, .fw-semibold { overflow-wrap: anywhere; }
 *
 * applied at every width. "anywhere" does not merely wrap long text - it lets the
 * browser break inside a word when computing a column's MIN-CONTENT width, so table
 * columns collapsed to a few characters and headings shattered mid-word: "Export"
 * rendered as "Ex por t", "SenderId" as "Sende rId", "Completed" as "Com plete d".
 * Where wrapping is genuinely needed the rule below uses "break-word", which only
 * breaks a word that cannot fit on its own line and leaves intrinsic sizing alone.
 *
 * Two other rules also applied at all widths and are now scoped: overflow-x:hidden
 * on html/body (which hides real overflow rather than fixing it, and can break
 * position:sticky), and overflow-x:auto on every DataTables wrapper.
 */

/* ── dashboard charts ───────────────────────────────────────────────────────────
   The one deliberate exception to the scope rule, because the widths it corrects are
   hard-coded in the markup. Views/Dashboards/Index.cshtml sets .chartWidth to 1100px
   and .pieChartWidth to 500px, with a "mobile" override of a fixed 380px - which
   overflows a 360px Android and wastes space on a 430px iPhone.

   Desktop keeps the original sizes; only the fixed-380px behaviour is replaced. */
@media (max-width: 991.98px) {
    .chartWidth,
    .pieChartWidth {
        width: 100% !important;
        max-width: 100%;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Everything below applies to phones and small tablets only.
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {

    /* ── page must not scroll sideways ──────────────────────────────────────── */
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* ── tables ─────────────────────────────────────────────────────────────────
       Only ~33 views wrap their table in .table-responsive; the rest push the whole
       layout sideways on a phone. DataTables builds its own wrapper, so making that
       scroll fixes every grid at once. A table squeezed into 390px is unreadable, so
       it keeps its natural width and scrolls inside the card instead. */
    .dataTables_wrapper,
    .dt-container,
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .dataTables_wrapper > table,
    .dt-container > table,
    .table-responsive > table {
        min-width: 640px;
    }

    /* DataTables controls stack instead of colliding */
    .dataTables_length,
    .dataTables_filter,
    .dataTables_info,
    .dataTables_paginate {
        float: none !important;
        text-align: start !important;
        margin-bottom: .5rem;
    }

    .dataTables_filter input {
        width: 100%;
        margin-inline-start: 0 !important;
    }

    /* ── card headers and toolbars ──────────────────────────────────────────────
       A title plus three or four buttons in one flex row cannot fit a phone. */
    .card-header {
        flex-wrap: wrap;
        gap: .5rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
        min-height: auto !important;
    }

    .card-header .card-title,
    .card-header .card-toolbar {
        width: 100%;
        margin: 0;
    }

    .card-toolbar {
        flex-wrap: wrap;
        gap: .5rem;
    }

    /* ── forms ──────────────────────────────────────────────────────────────────
       Below 16px iOS zooms the viewport when an input takes focus, which is why
       every form jumps on an iPhone. */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="date"],
    input[type="datetime-local"],
    select,
    textarea,
    .form-control,
    .form-select {
        font-size: 16px !important;
    }

    /* ── modals ─────────────────────────────────────────────────────────────────
       Fixed-width modals are common here and clip on a small screen. */
    .modal-dialog {
        margin: .5rem;
        max-width: calc(100% - 1rem);
    }

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

    /* ── long unbroken strings ──────────────────────────────────────────────────
       API keys, URLs and message bodies are the usual cause of a stubborn strip of
       horizontal overflow. break-word, NOT anywhere: this breaks only a word that
       cannot fit on a line by itself, and leaves column width calculation alone. */
    td,
    th {
        overflow-wrap: break-word;
    }
}