/* ═══════════════════════════════════════════════════════════════════════════
   Admin Responsive — Global responsive fixes for ALL admin pages
   Covers: 320px (mobile) → 1920px+ (desktop)
   Loads after responsive.css and user-management.css
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── 0. Uniform layout spacing — applied to ALL pages ───────────────────── */

/* Consistent horizontal gutter for every container-fluid inside page-body */
.page-body .container-fluid {
    padding-left: 20px;
    padding-right: 20px;
}

/* Page-title: breathing room top + bottom */
.page-body .page-title {
    padding-top: 24px;
    padding-bottom: 16px;
}

/* Cards: compact, uniform header padding */
.page-body .card .card-header {
    padding: 14px 20px;
}

/* Cards: uniform body padding (Bootstrap p-0/p-2/p-3 utilities override via !important) */
.page-body .card .card-body {
    padding: 20px;
}

/* Cards: equal vertical gap between blocks */
.page-body .card {
    margin-bottom: 20px;
}

/* Remove double bottom gap on last card inside a container */
.page-body .container-fluid > .card:last-child,
.page-body .container-fluid > form > .card:last-child {
    margin-bottom: 0;
}

/* Consistent top padding for page-body on desktop */
.page-wrapper.compact-wrapper .page-body-wrapper .page-body {
    padding-top: 8px;
}


/* ── A. Page title + action buttons (ALL pages) ──────────────────────────── */
/* On screens < 768px, stack action buttons below title */
@media (max-width: 767px) {
    .page-title .row {
        flex-direction: column;
    }
    .page-title .col-sm-6.text-end,
    .page-title .col-sm-6.justify-content-end {
        text-align: left !important;
        justify-content: flex-start !important;
        margin-top: 8px;
    }
    /* Also catches inline d-flex justify-content-end on col-sm-6 */
    .page-title .col-sm-6.d-flex.justify-content-end {
        justify-content: flex-start !important;
    }
    .page-title .col-sm-6 .btn {
        margin-bottom: 4px;
    }
}


/* ── B. Stats cards row (userlist, analytics, dashboard) ─────────────────── */
/* Stack stat cards single-column on extra-small screens */
@media (max-width: 575px) {
    .um-stats-row .col-xl-3.col-sm-6 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }
    .um-stat-card .card-body {
        padding: 12px;
    }
    .um-stat-value {
        font-size: 1.2rem;
    }
}


/* ── C. Filter forms (userlist and other filter pages) ───────────────────── */
/* On xs screens, every filter column becomes full width */
@media (max-width: 575px) {
    .um-filter-card .row > [class*="col-"] {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }
    .um-filter-card .d-flex.gap-1 {
        flex-direction: row;
    }
}
/* At lg (992-1199px): 3+1+1+2+1+1+1+1+1=12 cols — no min-width override needed */
/* At md (768-991px): search takes full row, dropdowns wrap to next row — no overflow */
@media (max-width: 767.98px) {
    .um-filter-card .d-flex.gap-1 .btn { min-height: 36px; }
}


/* ── D. DataTables on mobile ──────────────────────────────────────────────── */
/* Wrap the length / filter controls and force horizontal table scroll */
@media (max-width: 991px) {
    .dataTables_wrapper .row:first-child {
        flex-wrap: wrap;
        gap: 8px;
    }
    .dataTables_wrapper .col-sm-12:first-child,
    .dataTables_wrapper .col-sm-12:last-child {
        width: 100%;
    }
    table.dataTable {
        min-width: 600px;
    }
}
@media (max-width: 767px) {
    .dataTables_length label,
    .dataTables_filter label {
        font-size: 0.8rem;
    }
    .dataTables_info {
        font-size: 0.8rem;
    }
    .dataTables_paginate .paginate_button {
        padding: 4px 8px !important;
        font-size: 0.8rem;
    }
}


/* ── E. Action buttons inside table rows ─────────────────────────────────── */
@media (max-width: 767px) {
    .um-actions {
        gap: 3px;
    }
    .um-action-btn {
        width: 26px;
        height: 26px;
        font-size: 11px;
    }
}


/* ── F. Page breadcrumb / title text on small screens ────────────────────── */
@media (max-width: 575px) {
    .page-title h3 {
        font-size: 1.1rem;
    }
    .page-title .breadcrumb {
        font-size: 0.75rem;
    }
}


/* ── G. Card headers with flex layouts ───────────────────────────────────── */
@media (max-width: 575px) {
    .card-header.d-flex {
        flex-wrap: wrap;
        gap: 8px;
    }
    .card-header .btn-group,
    .card-header .d-flex {
        flex-wrap: wrap;
    }
}


/* ── H. Analytics page charts ────────────────────────────────────────────── */
@media (max-width: 767px) {
    .chart-widget-top,
    .chart-block {
        overflow-x: auto;
    }
}


/* ── I. Tab navigation (user_info.php and other tabbed pages) ────────────── */
@media (max-width: 767px) {
    .um-nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .um-nav-tabs .nav-link {
        font-size: 0.75rem;
        padding: 6px 10px;
        white-space: nowrap;
    }
}


/* ── J. Staff management — permission badges ─────────────────────────────── */
@media (max-width: 767px) {
    .badge-perm {
        font-size: 0.65rem;
        padding: 1px 5px;
    }
}


/* ── K. General container and card padding on mobile ─────────────────────── */
@media (max-width: 575px) {
    .page-body .container-fluid {
        padding-left: 12px;
        padding-right: 12px;
    }
    .page-body .card .card-body {
        padding: 12px;
    }
    .page-body .card .card-header {
        padding: 10px 12px;
    }
    .page-body .page-title {
        padding-top: 12px;
        padding-bottom: 10px;
    }
}


/* ── L. Sidebar / page-body margin on mobile ─────────────────────────────── */
/* The template collapses the sidebar on < 992px; ensure page-body has no left margin */
@media (max-width: 991px) {
    .page-wrapper.compact-wrapper .page-body-wrapper .page-body {
        margin-left: 0 !important;
        padding-top: 80px;
    }
}


/* ── M. Welcome banner quick actions (dashboard.php) ─────────────────────── */
@media (max-width: 575px) {
    .welcome-banner-content {
        flex-direction: column;
        gap: 12px;
    }
    .quick-actions {
        flex-wrap: wrap;
        gap: 6px;
    }
    .quick-action-btn {
        flex: 1 1 calc(50% - 6px);
        text-align: center;
    }
}


/* ── N. Status / action button groups (user_info and similar pages) ──────── */
@media (max-width: 575px) {
    .status-action-group {
        flex-wrap: wrap;
        gap: 4px;
    }
}


/* ── O. Table-responsive safety net ─────────────────────────────────────── */
/* Ensures every .table-responsive wrapper actually scrolls on narrow screens */
@media (max-width: 767px) {
    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }
}