@media (max-width: 768px) {
    /* ── Toolbar: stack buttons vertically ─────────────────────── */
    .kt-card-toolbar {
        flex-wrap: wrap !important;
        width: 100%;
        gap: 0.375rem !important;
    }

    .kt-card-toolbar .kt-btn,
    .kt-card-toolbar a.kt-btn,
    .kt-card-toolbar button,
    .kt-card-toolbar form {
        flex: 1 1 auto;
        min-width: 0;
        text-align: center;
    }

    .kt-card-toolbar form {
        display: flex;
    }

    .kt-card-toolbar form button,
    .kt-card-toolbar form .kt-btn {
        flex: 1;
    }

    /* ── Card header: stack title + toolbar vertically ─────────── */
    .kt-card-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem;
    }

    /* ── Fixed-width inputs: full width on mobile ─────────────── */
    .kt-card-toolbar input[type="text"],
    .kt-card-toolbar input[type="search"],
    .kt-card-toolbar .kt-input {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ── Tables: horizontal scroll with shadow hint ────────────── */
    .kt-scrollable-x-auto {
        position: relative;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .kt-scrollable-x-auto::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 30px;
        background: linear-gradient(to right, transparent, rgba(0,0,0,0.06));
        pointer-events: none;
    }

    .kt-table {
        font-size: 0.8125rem;
    }

    .kt-table th,
    .kt-table td {
        padding: 0.375rem 0.5rem !important;
        white-space: nowrap;
    }

    /* ── Card content: reduce padding ─────────────────────────── */
    .kt-card-content {
        padding: 0.75rem !important;
    }

    /* ── Container: tighter margins ───────────────────────────── */
    .kt-container-fixed {
        padding-inline: 0.75rem !important;
    }

    /* ── DL grids (Details pages): stack labels/values ─────────── */
    dl.grid-cols-3,
    dl.grid.grid-cols-3 {
        grid-template-columns: 1fr !important;
        gap: 0.25rem !important;
    }

    dl.grid-cols-3 dt,
    dl.grid.grid-cols-3 dt {
        font-weight: 600;
        font-size: 0.75rem;
        color: var(--muted-foreground);
    }

    dl.grid-cols-3 dd,
    dl.grid.grid-cols-3 dd {
        margin-bottom: 0.5rem;
    }

    /* ── Forms: full-width selects and inputs ──────────────────── */
    .kt-card-content select,
    .kt-card-content input[type="text"],
    .kt-card-content input[type="number"],
    .kt-card-content input[type="email"],
    .kt-card-content input[type="date"],
    .kt-card-content input[type="datetime-local"],
    .kt-card-content textarea {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ── Action buttons in table rows: smaller ────────────────── */
    .kt-table .kt-btn-sm {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.75rem !important;
    }

    /* ── Main content area: reduce margin ─────────────────────── */
    #kt_app_main {
        margin: 0.25rem !important;
    }

    /* ── Sidebar offset: remove on mobile ─────────────────────── */
    #kt_app_main {
        margin-left: 0 !important;
    }
}

@media (max-width: 480px) {
    /* ── Extra small: even tighter ─────────────────────────────── */
    .kt-card-toolbar .kt-btn,
    .kt-card-toolbar a.kt-btn {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.5rem !important;
    }

    .kt-table {
        font-size: 0.75rem;
    }

    .kt-container-fixed {
        padding-inline: 0.5rem !important;
    }
}
