@media (max-width: 767.98px) {
    .form-control,
    .form-select,
    .iti .form-control,
    .iti .iti__tel-input {
        font-size: 16px;
    }

    .panel-actions {
        width: 100%;
    }

    .panel-actions .btn-brand {
        flex: 1;
    }

    .data-table th,
    .data-table td {
        padding: 12px;
    }

    .chat-bubble {
        max-width: 85%;
    }

    .modal-footer .btn {
        width: 100%;
    }
}

@media (min-width: 768px) {
    .stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    :root {
        --page-padding: 24px;
        --grid-gap: 20px;
        --font-2xl: 32px;
    }

    .page-head,
    .panel-head {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }

    .page-actions {
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
    }

    .page-actions .btn {
        width: auto;
    }
}

@media (min-width: 992px) {
    .sticky-panel {
        position: sticky;
        top: 92px;
    }
}

@media (min-width: 1200px) {
    .stat-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .only-mobile {
        display: none;
    }

    .sidebar {
        width: var(--sidebar-width);
        transform: none;
    }

    .sidebar-backdrop {
        display: none !important;
    }

    .app-main {
        margin-left: var(--sidebar-width);
    }
}

@media (max-width: 1199.98px) {
    .sidebar.is-open {
        box-shadow: var(--shadow-pop);
    }
}