/* ========================================
   RESPONSIVE LIST + PAGINATION PASS
======================================== */
.list-pagination,
.pagination-wrap,
.pager-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.pager-meta {
    color: rgba(248, 250, 252, 0.72);
    font-size: 0.9rem;
}

.pager-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pager-actions .btn,
.list-pagination .btn,
.pagination-wrap .btn {
    min-width: 88px;
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.custom-table,
.table {
    table-layout: auto;
}

.custom-table td,
.custom-table th,
.table td,
.table th {
    overflow-wrap: anywhere;
}

.toolbar,
.filter-bar,
.header-box,
.page-head,
.glass-card .d-flex,
.glass-box .d-flex {
    min-width: 0;
}

.mobile-card,
.issue-card,
.user-card,
.template-card,
.role-card,
.plan-card,
.glass-box {
    overflow-wrap: anywhere;
}

@media (max-width: 768px) {

    html,
    body {
        background-attachment: scroll;
        overflow-x: hidden;
    }

    img.navlogo {
        width: 130px;
    }

    .app-navbar {
        min-height: 64px;
    }

    .app-navbar .navbar-collapse {
        max-height: calc(100vh - 80px);
        margin-top: 10px;
        padding: 12px;
        overflow-y: auto;
        border: 1px solid rgba(15, 23, 42, .08);
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 18px 40px rgba(15, 23, 42, .14);
    }

    .app-nav-link {
        width: 100%;
        border-radius: 10px;
    }

    .app-nav-actions {
        flex-direction: row;
        justify-content: space-between;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid #e2e8f0;
    }

    .app-user-copy strong {
        max-width: 170px;
    }

    .navbar .container,
    .navbar .container-fluid {
        gap: 8px;
    }

    .navbar-nav {
        gap: 4px;
    }

    .header-box,
    .page-head,
    .dashboard-header,
    .glass-card>.d-flex.justify-content-between,
    .glass-box>.d-flex.justify-content-between {
        align-items: stretch !important;
        flex-direction: column;
    }

    .header-box .btn,
    .page-head .btn,
    .page-head .btn-main,
    .glass-card>.d-flex.justify-content-between .btn,
    .glass-box>.d-flex.justify-content-between .btn {
        width: 100%;
    }

    .modal-mask,
    .modal-scrim,
    .modal-backdrop-custom,
    .drawer-backdrop {
        align-items: flex-start;
        padding: 12px;
        overflow-y: auto;
    }

    .modal-panel,
    .modal-box,
    .drawer-box {
        max-height: none;
        width: 100%;
    }

    .modal-head,
    .modal-bodyx,
    .modal-foot {
        padding: 14px;
    }

    .list-pagination,
    .pagination-wrap,
    .pager-wrap {
        align-items: stretch;
        flex-direction: column;
    }

    .pager-actions,
    .pagination-wrap {
        width: 100%;
    }

    .pager-actions {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
    }

    .pager-actions .btn {
        flex: 1 1 0;
    }

    .pagination-wrap {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center !important;
    }

    .pager-actions .btn,
    .list-pagination .btn,
    .pagination-wrap .btn {
        width: 100%;
        min-width: 0;
    }

    .pager-meta {
        text-align: center;
    }

    .settings-wrap .side-menu {
        display: flex;
        gap: 8px;
        padding: 8px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
    }

    .settings-wrap .menu-btn {
        flex: 0 0 auto;
        width: auto;
        min-width: 110px;
        margin: 0;
        scroll-snap-align: start;
    }

    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .stat-card,
    .stat-box,
    .stat-tile,
    .stat {
        min-height: 112px;
        padding: 14px;
    }

    .pill-grid,
    .perm-grid {
        grid-template-columns: 1fr;
    }

    .d-flex.gap-2,
    .d-flex.gap-3,
    .d-flex.flex-wrap.gap-2,
    .d-flex.flex-wrap.gap-3 {
        min-width: 0;
    }
}

@media (max-width: 420px) {
    .stats-grid {
        grid-template-columns: 1fr !important;
    }

    .page-title,
    .hero-title,
    h2,
    h3 {
        font-size: 1.25rem;
    }

    .badge {
        white-space: normal;
    }
}