/* ============================================================
   Qanciye POS — Global Responsive Polish
   -----------------------------------------------------------------
   Waxaa lagu xidhay dhammaan bogagga (files/head.php) ka dib
   style.css. Kani waa lakab additive oo keliya — desktop layout
   isma beddelayo; rules-ka intooda badan waxay ku shaqeeyaan
   kaliya marka screen-ku yaraado.

   Selectors below must stay generic & safe:
   - no element padding overrides (respects utility classes like p-0)
   - no display/visibility resets
   ============================================================ */

/* 1) Prevent a stray wide element from pushing the whole page sideways */
html,
body {
    overflow-x: hidden;
}

/* 2) Big images/videos scale down inside cards, content & modals */
.page-wrapper img,
.page-content img,
.modal-content img {
    max-width: 100%;
    height: auto;
}

/* 3) Tables & DataTables stay inside their container and scroll
      horizontally instead of breaking the layout */
.table-responsive,
.dataTables_wrapper,
.dataTables_scroll {
    max-width: 100%;
}
.dataTables_wrapper {
    overflow-x: auto;
}

/* 4) Page / card headers wrap their action buttons on small screens */
.page-header,
.card-header {
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}
.page-header .d-flex,
.card-header .d-flex {
    flex-wrap: wrap;
    row-gap: 0.5rem;
}

/* ---- Tablets / small laptops -------------------------------- */
@media (max-width: 1199.98px) {
    .dataTables_wrapper .dataTables_length {
        float: none;
    }
}

/* ---- Tablets & big phones ----------------------------------- */
@media (max-width: 991.98px) {
    .page-wrapper .content {
        padding: 16px 14px;
    }

    /* DataTables 1.x (row) + DataTables 2.x (dt-layout-row) stack controls */
    .dataTables_wrapper > .row,
    .dataTables_wrapper .dt-layout-row {
        flex-wrap: wrap;
    }
}

/* ---- Phones (landscape + portrait) -------------------------- */
@media (max-width: 767.98px) {
    .page-wrapper .content {
        padding: 12px;
    }

    /* Modals use the available phone width & scroll their body */
    .modal-dialog {
        margin: 0.5rem auto;
        max-width: calc(100vw - 1rem);
    }
    .modal-body {
        max-height: calc(100vh - 130px);
        overflow-y: auto;
    }

    /* DataTables controls stack cleanly (length/search/info/paginate) */
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_info {
        text-align: left;
        float: none;
        margin-bottom: 0.5rem;
    }
    .dataTables_wrapper .dataTables_paginate {
        float: none;
        text-align: center;
        margin-top: 0.5rem;
    }
    .dataTables_wrapper .dataTables_filter input {
        margin-left: 0;
        width: 100%;
    }
}

/* ---- Small phones -------------------------------------------- */
@media (max-width: 575.98px) {
    .page-wrapper .content {
        padding: 10px;
    }

    .page-header h3,
    .page-header h4,
    .card-header h4,
    .card-header h5 {
        font-size: 1rem;
    }

    /* Let each DataTables control take a full row when it does not fit */
    .dataTables_wrapper .dt-layout-cell,
    .dataTables_wrapper .dt-layout-row > div {
        min-width: 0;
    }

    /* Ensure form controls never overflow the screen */
    .form-group,
    .input-group,
    .form-control,
    .form-select {
        max-width: 100%;
    }
}