/*
 * Regra móvel única da TUDIIM: conteúdo desce em cartões e nunca obriga o
 * usuário a arrastar a tela para os lados.
 */
@media (max-width: 767.98px) {
    html,
    body,
    .tudiim-panel-ui,
    .tudiim-panel-ui .page-content,
    .tudiim-panel-ui .content-wrapper,
    .wrap {
        max-width: 100%;
        overflow-x: hidden !important;
    }

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

    .table-responsive,
    .table-responsive-sm,
    .table-responsive-md,
    .table-responsive-lg,
    .table-responsive-xl,
    .dataTables_wrapper,
    .dataTables_scroll,
    .dataTables_scrollBody {
        overflow-x: visible !important;
        width: 100% !important;
        max-width: 100%;
    }

    table.tudiim-mobile-card-table {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100%;
        border: 0 !important;
        background: transparent !important;
    }

    table.tudiim-mobile-card-table thead {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    table.tudiim-mobile-card-table tbody,
    table.tudiim-mobile-card-table tfoot {
        display: grid;
        width: 100%;
        gap: 12px;
    }

    table.tudiim-mobile-card-table tr {
        display: grid;
        width: 100%;
        min-width: 0;
        overflow: hidden;
        border: 1px solid #dce5ee !important;
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 4px 14px rgba(15, 42, 70, .06);
    }

    table.tudiim-mobile-card-table td,
    table.tudiim-mobile-card-table th[scope="row"] {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        gap: 5px;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100%;
        padding: 11px 12px !important;
        border: 0 !important;
        border-bottom: 1px solid #edf1f5 !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        text-align: left !important;
    }

    table.tudiim-mobile-card-table td:last-child,
    table.tudiim-mobile-card-table th[scope="row"]:last-child {
        border-bottom: 0 !important;
    }

    table.tudiim-mobile-card-table td::before,
    table.tudiim-mobile-card-table th[scope="row"]::before {
        display: block;
        content: attr(data-mobile-label);
        color: #50647a;
        font-size: 11px;
        font-weight: 800;
        line-height: 1.35;
        letter-spacing: .035em;
        text-transform: uppercase;
    }

    table.tudiim-mobile-card-table td[data-mobile-full="1"] {
        display: block !important;
    }

    table.tudiim-mobile-card-table td[data-mobile-full="1"]::before {
        display: none;
    }

    table.tudiim-mobile-card-table td > *,
    table.tudiim-mobile-card-table td form,
    table.tudiim-mobile-card-table td .input-group,
    table.tudiim-mobile-card-table td .form-inline {
        min-width: 0;
        max-width: 100%;
    }

    table.tudiim-mobile-card-table td .form-inline,
    table.tudiim-mobile-card-table td .input-group {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    table.tudiim-mobile-card-table td .btn,
    table.tudiim-mobile-card-table td input,
    table.tudiim-mobile-card-table td select,
    table.tudiim-mobile-card-table td textarea {
        max-width: 100%;
        white-space: normal;
    }

    table.tudiim-mobile-card-table td .btn {
        width: 100%;
    }

    .form-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .tudiim-panel-ui .content .row,
    .tudiim-panel-ui .card-body > .row {
        width: 100%;
        max-width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .form-row > [class*="col-"],
    .form-row > .col {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .form-inline,
    .btn-group,
    .btn-group-vertical,
    .input-group.tudiim-mobile-stack {
        max-width: 100%;
        flex-wrap: wrap;
    }

    .tudiim-context-chat,
    .tudiim-context-chat * {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .tudiim-context-chat__tabs {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .tudiim-context-chat__tabs button,
    .tudiim-private-call-start,
    .tudiim-context-chat form button {
        width: 100%;
        min-height: 44px;
        white-space: normal;
    }

    #driver-location-box {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 16px 0 0 !important;
    }

    pre,
    code {
        max-width: 100%;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }
}