/* =====================================================================
   Admin Responsive Layer
   Global fixes so every CRUD page (GridView tables, forms, headers)
   works on mobile. Loaded after dashboard.css in the main layout.
   ===================================================================== */

/* ---- Prevent page-level horizontal overflow everywhere ---- */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

.main-container,
.main-content,
.page-content {
    max-width: 100%;
    min-width: 0;
}

/* ---- Make every Yii GridView table horizontally scrollable ----
   GridView renders: <div class="grid-view"> <table class="table"> ...
   Wrapping the table in an auto-scroll box keeps all columns reachable
   on small screens instead of getting clipped. */
.grid-view {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.grid-view > table,
.grid-view .table {
    width: 100%;
    margin-bottom: 0.5rem;
}

/* Keep cells from wrapping into unreadable narrow columns on mobile;
   the scroll container handles the width instead. */
.grid-view th,
.grid-view td {
    white-space: nowrap;
    vertical-align: middle;
}

/* A subtle scrollbar so users know there's more to scroll */
.grid-view::-webkit-scrollbar {
    height: 8px;
}
.grid-view::-webkit-scrollbar-thumb {
    background: #c7ccd1;
    border-radius: 8px;
}
.grid-view::-webkit-scrollbar-track {
    background: #f1f3f5;
}

/* ---- Container padding consistency across modules ---- */
.page-content,
.products-container,
.banners-container,
.coupons-index,
.coupons-form,
.coupons-view,
.coupons-create,
.coupons-update {
    box-sizing: border-box;
}

/* ---- Catch-all: any standalone table in the content area gets
   wrapped in a scroll context via its parent. Bootstrap's
   .table-responsive is honoured if present; otherwise we guard the
   common custom containers below. ---- */
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

/* Custom report / staff / details containers shouldn't exceed viewport */
.main-container .container,
.main-content .container {
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    /* Any raw table that isn't already in a scroll wrapper: let it
       scroll within its container rather than pushing the page wide. */
    .main-container .container table,
    .main-content table:not(.detail-view) {
        display: block;
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
}

/* =====================================================================
   Tablet and below
   ===================================================================== */
@media (max-width: 1024px) {
    .page-content {
        padding: 16px;
    }
    .page-header {
        flex-wrap: wrap;
        gap: 12px;
    }
}

/* =====================================================================
   Mobile
   ===================================================================== */
@media (max-width: 768px) {
    .page-content {
        padding: 12px;
    }

    /* Stack header title + action button */
    .page-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 12px;
        padding: 16px !important;
    }
    .page-header > div:last-child {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .page-title {
        font-size: 20px !important;
    }
    .page-subtitle {
        font-size: 13px !important;
    }

    /* Primary "Add / Create" buttons go full width and easy to tap */
    .btn-primary {
        width: 100%;
        justify-content: center;
    }

    /* Card / list containers */
    .banners-container,
    .products-container,
    .form-card {
        padding: 14px !important;
        border-radius: 8px;
    }

    /* Forms: stack any side-by-side rows */
    .form-row {
        flex-direction: column !important;
        gap: 0 !important;
    }
    .form-card {
        max-width: 100% !important;
    }

    /* Grid tables: compact + always scrollable */
    .grid-view table.table {
        font-size: 13px;
    }
    .grid-view th,
    .grid-view td {
        padding: 8px 10px !important;
    }

    /* Filter row inputs shouldn't blow out the width */
    .grid-view .filters input,
    .grid-view .filters select,
    .grid-view .form-control {
        min-width: 110px;
        font-size: 13px;
    }

    /* Action button cluster wraps neatly */
    .action-buttons {
        flex-wrap: wrap;
        gap: 4px;
    }
    .action-buttons .btn {
        width: 30px;
        height: 30px;
    }

    /* Pagination centred and tappable */
    .grid-pagination,
    .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }
    .pagination .page-link {
        padding: 6px 10px;
    }

    /* DetailView (view pages) */
    .detail-view th {
        width: 40%;
        font-size: 13px;
    }
    .detail-view td {
        font-size: 13px;
        word-break: break-word;
    }
}

/* =====================================================================
   Small phones
   ===================================================================== */
@media (max-width: 480px) {
    .page-content {
        padding: 10px;
    }
    .page-title {
        font-size: 18px !important;
    }
    .grid-view table.table {
        font-size: 12px;
    }
    .grid-view th,
    .grid-view td {
        padding: 6px 8px !important;
    }
    /* Stack DetailView rows vertically for very narrow screens */
    .detail-view tr {
        display: block;
        margin-bottom: 6px;
    }
    .detail-view th,
    .detail-view td {
        display: block;
        width: 100% !important;
    }
    .detail-view th {
        border-bottom: 0;
        padding-bottom: 2px;
        color: #6c757d;
    }
}