/* ==========================================================================
   DealFair mobile responsive overrides — additive layer (loaded globally).
   All rules are scoped inside media queries, so desktop rendering is
   untouched. Extend this file instead of editing existing stylesheets.
   ========================================================================== */

/* ---- Phones & small tablets ---- */
@media (max-width: 991.98px) {

    /* Kill accidental sideways page scroll */
    html, body {
        overflow-x: hidden;
    }

    /* Denser backoffice chrome */
    .backoffice-main .content-wrapper {
        padding: 1rem !important;
    }

    /* Data tables scroll horizontally inside themselves instead of
       blowing up the page width. Skips print/ticket layouts. */
    .content-wrapper table:not(.df-no-scroll),
    .card-body table:not(.df-no-scroll) {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Card header toolbars wrap instead of overflowing */
    .content-wrapper .card-header .d-flex,
    .content-wrapper .card-title.d-flex {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }

    /* Booking stepper pills shrink and wrap tighter */
    .step-indicator {
        gap: 8px;
        margin-bottom: 14px;
    }
    .step {
        font-size: 12.5px;
        padding: 5px 10px;
    }

    /* Long brand names truncate instead of overlapping the toggler */
    .navbar-brand {
        max-width: 62vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Dropdown panels never exceed the viewport */
    .dropdown-menu {
        max-width: calc(100vw - 24px);
    }

    /* Pagination wraps on narrow screens */
    .pagination {
        flex-wrap: wrap;
    }

    /* Inline action button groups in tables stack neatly */
    .table .btn-group .btn {
        padding: 0.2rem 0.45rem;
        font-size: 0.8rem;
    }

    /* Hide the role chip in the backoffice topbar on phones */
    .role-badge {
        display: none;
    }

    /* Notification/permission strips take less vertical space */
    .permission-info {
        margin: 0 1rem;
        font-size: 11px;
    }
}

/* ---- Phones only ---- */
@media (max-width: 575.98px) {

    /* iOS Safari zooms the page when focusing inputs < 16px */
    .content-wrapper input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    .content-wrapper select,
    .content-wrapper textarea,
    .modal input,
    .modal select,
    .modal textarea {
        font-size: 16px !important;
    }

    .content-wrapper h1 { font-size: 1.5rem; }
    .content-wrapper h2 { font-size: 1.3rem; }
    .content-wrapper h3 { font-size: 1.15rem; }
    .content-wrapper h4 { font-size: 1.05rem; }

    /* Wallet/summary stat cards breathe less */
    .content-wrapper .card-body {
        padding: 0.75rem;
    }

    /* Alerts and flash messages fit the screen */
    .alert {
        padding: 0.6rem 0.75rem;
        font-size: 0.88rem;
    }

    /* Modals become near-full-width bottom-friendly sheets */
    .modal-dialog {
        margin: 10px;
    }

    /* Avatar/name clusters in topbars tighten */
    .backoffice-main .navbar {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* Toasts don't cover the install button */
    .toast-container {
        padding-right: 4px;
    }
}