/* Mobile layout only. Desktop screens stay the same. */
@media (max-width: 991px) {
    html, body {
        max-width: 100%;
    }

    #content {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }

    .middle-content,
    .middle-content.container-xxl,
    .container-xxl,
    .layout-px-spacing {
        max-width: 100% !important;
        width: 100% !important;
    }

    .header-container .navbar {
        margin-left: 8px !important;
        margin-right: 8px !important;
    }

    .header-container .theme-text,
    .header-container .navbar.navbar-expand-sm .navbar-item .nav-item.theme-text {
        display: block !important;
        min-width: 0;
        margin-right: 0 !important;
    }

    .header-container .theme-text a {
        display: block;
        max-width: 42vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 13px !important;
        line-height: 1.2 !important;
        padding: 0 4px !important;
    }

    .sidebarCollapse,
    .header-container .sidebarCollapse {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        min-height: 40px;
    }

    .secondary-nav .breadcrumbs-container .navbar {
        flex-wrap: wrap;
        height: auto !important;
        align-items: center;
    }

    .secondary-nav .breadcrumbs-container .navbar .breadcrumb-content {
        min-width: 0;
        flex: 1;
    }

    .page-title h3 {
        font-size: 18px !important;
        line-height: 1.3;
    }

    .breadcrumb-action-dropdown {
        width: 100%;
        margin-left: 0 !important;
    }

    .breadcrumb-action-dropdown .btn,
    .breadcrumb-action-dropdown button {
        width: calc(100% - 16px);
        margin: 8px !important;
        white-space: normal;
    }

    .widget,
    .widget-content,
    .widget-content-area,
    .widget-four,
    .widget-six,
    .card,
    .card-body {
        max-width: 100%;
    }

    .dataTables_wrapper,
    .table-responsive,
    .widget-content {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table.dataTable {
        min-width: 680px;
    }

    .dt--top-section .row > div,
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        width: 100% !important;
        justify-content: flex-start !important;
        text-align: left !important;
        margin-bottom: 8px;
    }

    .dataTables_wrapper .dataTables_filter input,
    .dataTables_wrapper .dataTables_length select {
        width: 100% !important;
        max-width: 100%;
        margin-left: 0 !important;
    }

    .dt-buttons {
        display: flex !important;
        flex-wrap: wrap;
        gap: 6px;
    }

    .dt-buttons .btn {
        margin: 0 !important;
    }

    .form-control,
    .form-select,
    textarea,
    select,
    input[type="text"],
    input[type="number"],
    input[type="date"],
    input[type="password"],
    input[type="email"],
    input[type="tel"],
    input[type="file"] {
        max-width: 100%;
    }

    .input-group {
        flex-wrap: wrap;
    }

    .modal-dialog {
        max-width: calc(100vw - 16px);
        margin: 8px auto;
    }

    .user-profile-dropdown .dropdown-menu {
        right: 8px !important;
        left: auto !important;
    }

    .footer-wrapper {
        flex-direction: column;
        text-align: center;
        gap: 4px;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .widget-card-five .info-box {
        align-items: flex-start;
    }

    .widget-card-five .balance-info p {
        word-break: break-word;
    }
}

@media (max-width: 767px) {
    #content .middle-content {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .layout-spacing {
        padding-bottom: 12px;
    }

    .widget-content-area,
    .card-body {
        padding: 12px !important;
    }

    .page-title h3 {
        font-size: 16px !important;
    }

    .btn,
    button.btn {
        min-height: 40px;
    }

    .form-control,
    .form-select,
    textarea.form-control,
    select.form-select {
        width: 100% !important;
        min-height: 42px;
    }

    td a {
        display: inline-flex;
        align-items: center;
        margin: 2px;
    }

    body.form {
        background-attachment: scroll !important;
    }

    body.form .auth-container {
        padding: 12px;
    }

    body.form .card {
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 575px) {
    .header-container .theme-text a {
        max-width: 38vw;
        font-size: 12px !important;
    }

    .dt--bottom-section {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .dataTables_paginate {
        white-space: normal !important;
    }
}