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

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

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

.table-responsive,
.dataTables_wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive .table,
.dataTables_wrapper .table {
    min-width: 720px;
}

.card-body.row {
    row-gap: 0.75rem;
}

/* Stat-card rows auto-arrange: cards flex to fill the row evenly no matter how
   many actually render (some are permission-gated) or how wide their content
   is, instead of leaving a gap when Bootstrap's fixed-width columns don't
   divide evenly into the row. */
.stat-row {
    display: flex;
    flex-wrap: wrap;
    row-gap: 1rem;
}

/* :has(.small-box, .info-box) scopes this to actual stat-card columns, leaving
   a section heading's own full-width col-12 (e.g. "Insurer Metrics") sharing
   the same .stat-row unaffected. */
.stat-row > [class*="col-"]:has(.small-box, .info-box) {
    flex: 1 1 200px;
    width: auto;
    max-width: none;
}

.form-group.row > [class*="col-"],
.card-body.row > [class*="col-"] {
    margin-bottom: 0.5rem;
}

.select2-container {
    max-width: 100% !important;
}

@media (max-width: 991.98px) {
    .content-wrapper,
    .container,
    .container-fluid {
        padding-left: 12px;
        padding-right: 12px;
    }

    .card-body {
        padding: 0.75rem;
    }

    .main-header .navbar-nav {
        flex-wrap: wrap;
    }

    #chat-widget {
        right: 10px !important;
        left: 10px !important;
        width: auto !important;
    }
}

@media (max-width: 767.98px) {
    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.3rem;
    }

    h3 {
        font-size: 1.15rem;
    }

    .content-header .breadcrumb {
        float: none !important;
        margin-top: 0.5rem;
    }

    .small-box h3 {
        font-size: 1.35rem;
    }

    .content-header .row > [class*="col-"] {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .form-group.row > [class*="col-"],
    .card-body.row > [class*="col-"] {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .card .card-body .btn {
        width: 100%;
    }

    .card-footer .flex {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .btn,
    .dropdown-item,
    .nav-link {
        white-space: normal;
    }
}