/* ============================================================
   responsive-mobile.css
   Responsive / mobile-friendly overrides for admin panel.
   Loaded AFTER bootstrap + admin-cms + cms.css.
   ============================================================ */

/* ── 1. Container → full-width on mobile ── */
@media (max-width: 767.98px) {
    .container {
        max-width: 100% !important;
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* ── 2. Horizontal-scrollable tables ── */
.table-responsive-wrapper {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
}

/* Thin scrollbar for usability on desktop */
.table-responsive-wrapper::-webkit-scrollbar {
    height: 6px;
}
.table-responsive-wrapper::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.25);
    border-radius: 3px;
}

/* Keep header text from wrapping inside scrollable tables */
.table-responsive-wrapper .table th {
    white-space: nowrap;
}

/* Fade hint at right edge when table overflows (mobile only) */
@media (max-width: 767.98px) {
    .table-responsive-wrapper {
        /* subtle shadow to hint "scroll right" */
        background:
            linear-gradient(to right, #fff 30%, rgba(255,255,255,0)),
            linear-gradient(to left,  #fff 30%, rgba(255,255,255,0)),
            linear-gradient(to right, rgba(0,0,0,.08), rgba(0,0,0,0)),
            linear-gradient(to left,  rgba(0,0,0,.08), rgba(0,0,0,0));
        background-position: left center, right center, left center, right center;
        background-repeat: no-repeat;
        background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
        background-attachment: local, local, scroll, scroll;
    }

    .table-responsive-wrapper .table {
        margin-bottom: 0;
    }
}

/* ── 3. Navbar mobile tweaks ── */
@media (max-width: 767.98px) {
    .navbar {
        padding: 0.35rem 0.5rem;
    }

    .navbar .nav-link {
        padding: 0.4rem 0.5rem;
        font-size: 0.85rem;
    }

    .navbar .dropdown-menu {
        font-size: 0.85rem;
    }
}

/* ── 4. Forms – stack nicely on mobile ── */
@media (max-width: 767.98px) {
    .form-inline .form-group {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .form-inline .form-control,
    .form-inline select {
        width: 100% !important;
    }

    .form-inline .btn {
        width: 100%;
        margin-top: 0.25rem;
    }

    /* Search / filter rows – wrap on small screens */
    .div-content > .row,
    .form-row,
    .form-inline {
        flex-wrap: wrap;
    }

    .col-md-2, .col-md-3, .col-md-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-md-1 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 575.98px) {
    .col-md-1, .col-md-2, .col-md-3, .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ── 5. Buttons – more touch-friendly ── */
@media (max-width: 767.98px) {
    .btn {
        padding: 0.45rem 0.65rem;
        font-size: 0.85rem;
    }

    .btn-sm {
        padding: 0.3rem 0.5rem;
        font-size: 0.8rem;
    }

    /* Action button groups – wrap instead of overflow */
    .btn-group {
        flex-wrap: wrap;
    }
}

/* ── 6. Cards inside views ── */
@media (max-width: 767.98px) {
    .card {
        margin-left: -4px;
        margin-right: -4px;
        border-radius: 0;
    }

    .card-body {
        padding: 0.75rem;
    }
}

/* ── 7. Modals – full-width on mobile ── */
@media (max-width: 575.98px) {
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }

    .modal-lg,
    .modal-xl {
        max-width: calc(100% - 1rem);
    }
}

/* ── 8. Typography & spacing ── */
@media (max-width: 767.98px) {
    body {
        font-size: 14px;
    }

    h2, .h2 {
        font-size: 1.35rem;
    }

    h3, .h3 {
        font-size: 1.15rem;
    }

    h4, .h4 {
        font-size: 1rem;
    }

    /* Reduce default padding/margin */
    .mb-3 {
        margin-bottom: 0.75rem !important;
    }

    .pb-3 {
        padding-bottom: 0.75rem !important;
    }
}

/* ── 9. Footer fix ── */
@media (max-width: 767.98px) {
    .footer {
        position: relative !important;
        font-size: 0.8rem;
        padding: 0.5rem 0;
    }
}

/* ── 10. Badges – readable on small screens ── */
@media (max-width: 767.98px) {
    .badge {
        font-size: 0.7rem;
        padding: 3px 5px;
    }
}

/* ── 11. Pagination – touch-friendly ── */
@media (max-width: 767.98px) {
    .page_nav li {
        width: 38px;
        height: 38px;
    }

    .page_nav li a {
        font-size: 0.85rem;
    }
}

/* ── 12. Chosen / select dropdowns ── */
@media (max-width: 767.98px) {
    .chosen-container {
        width: 100% !important;
    }
}