/* =====================================================
   Dcat Admin – Mobile Layout (Production Pattern)
   Applies to ALL admin pages
   ===================================================== */

@media (max-width: 992px) {

    /* -----------------------------
       Global reset
       ----------------------------- */
    body {
        overflow-x: hidden;
    }
    
    .modal{
        width: 100vw;
    }

    /* -----------------------------
       Content area
       ----------------------------- */
    .content-wrapper {
        margin-left: 0 !important;
        padding: 12px !important;
        padding-top: 62px !important;
    }

    .content-header {
        padding: 8px 12px;
    }

    /* -----------------------------
       Sidebar (off-canvas)
       ----------------------------- */
    .sidebar {
        position: fixed;
        top: 0;
        left: -260px;
        width: 260px;
        height: 100vh;
        z-index: 1050;
        background: #fff;
        transition: left 0.3s ease;
    }

    body.sidebar-open .sidebar {
        left: 0;
    }

    /* -----------------------------
       Navbar
       ----------------------------- */
    .navbar {
        padding: 0 12px;
    }

    .navbar .navbar-brand {
        font-size: 14px;
    }

    /* -----------------------------
       Grid / Table (MOST IMPORTANT)
       ----------------------------- */
    .table-responsive {
        overflow-x: auto;
    }

    table {
        width: 100%;
    }

    .has-many-table-items {
        width: 360px;
        overflow-x: overlay;
    }

    .table th,
    .table td {
        white-space: nowrap;
        font-size: 13px;
        padding: 8px;
    }

    /* -----------------------------
       Grid actions (buttons)
       ----------------------------- */
    .grid-actions .btn,
    .grid-row-actions .btn {
        width: 100%;
        margin-bottom: 6px;
    }

    .grid-row-actions {
        display: flex;
        flex-direction: column;
    }

    /* -----------------------------
       Filters (search area)
       ----------------------------- */
    .filter-box {
        padding: 10px;
    }

    .filter-box .row > div {
        width: 100%;
        margin-bottom: 8px;
    }

    .filter-box .btn {
        width: 100%;
    }

    /* -----------------------------
       Forms
       ----------------------------- */
    .form-horizontal .form-group {
        margin-bottom: 12px;
    }

    .form-horizontal .col-sm-2,
    .form-horizontal .col-sm-3,
    .form-horizontal .col-sm-4 {
        width: 100%;
        text-align: left;
        padding-bottom: 4px;
    }

    .form-horizontal .col-sm-8,
    .form-horizontal .col-sm-9,
    .form-horizontal .col-sm-10 {
        width: 100%;
    }

    input,
    select,
    textarea {
        font-size: 14px;
    }

    /* -----------------------------
       Cards / boxes
       ----------------------------- */
    .card,
    .box {
        margin-bottom: 12px;
    }

    .card-body,
    .box-body {
        padding: 12px;
        overflow-x: overlay;
    }

    /* -----------------------------
       Pagination
       ----------------------------- */
    .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* -----------------------------
       Modal
       ----------------------------- */
    .modal-dialog {
        margin: 10px;
        max-width: 100%;
    }
}