/* ============================================================
   NICET — Universal Mobile-First Responsive Overrides
   Loaded on EVERY portal (public, admin, centre, student)
   Strategy: mobile-first base, scale UP at breakpoints
   ============================================================ */

/* ── Base (mobile-first: 320px+) ────────────────────────────── */

html { -webkit-text-size-adjust: 100%; }

img, video, svg, iframe { max-width: 100%; height: auto; }

/* Prevent iOS auto-zoom on focus */
input, select, textarea {
    font-size: 16px !important;
}
@media (min-width: 576px) {
    input, select, textarea { font-size: .95rem !important; }
}

/* Touch-friendly buttons on mobile only */
@media (max-width: 575.98px) {
    .btn { min-height: 40px; }
    .btn-sm { min-height: 34px; }
    .btn-xs { min-height: 28px; }
    .table .btn { min-height: 30px; }
}

/* Smooth horizontal table scrolling on mobile */
.table-responsive {
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
}
@media (max-width: 767.98px) {
    .table-responsive .table {
        font-size: .85rem;
    }
    .table-responsive th,
    .table-responsive td {
        padding: 10px 12px !important;
        white-space: nowrap;
    }
}



/* Card spacing scaledown */
@media (max-width: 575.98px) {
    .card-body { padding: 1rem !important; }
    .card-header { padding: .85rem 1rem !important; font-size: .95rem !important; }
    .card-footer { padding: .85rem 1rem !important; }
}

/* Modals — fullscreen-ish on mobile */
@media (max-width: 575.98px) {
    .modal-dialog {
        margin: .5rem;
        max-width: calc(100% - 1rem);
    }
    .modal-content { border-radius: 14px; }
    .modal-body { padding: 1rem; }
    .modal-header, .modal-footer { padding: .85rem 1rem; }
}

/* Dropdowns full-width on mobile */
@media (max-width: 575.98px) {
    .dropdown-menu {
        min-width: 92vw !important;
        max-width: 96vw;
    }
    .dropdown-menu-end-mobile {
        right: 0;
        left: auto !important;
    }
}

/* Forms */
@media (max-width: 575.98px) {
    .form-label { margin-bottom: 4px !important; font-size: .85rem !important; }
    .form-control, .form-select {
        padding: 10px 12px !important;
    }
    .input-group > .btn, .input-group > .form-control { min-height: 44px; }
}

/* Heading scaledown on mobile */
@media (max-width: 575.98px) {
    h1, .h1 { font-size: 1.6rem !important; line-height: 1.25; }
    h2, .h2 { font-size: 1.35rem !important; line-height: 1.3; }
    h3, .h3 { font-size: 1.2rem !important; line-height: 1.3; }
    h4, .h4 { font-size: 1.1rem !important; }
    h5, .h5 { font-size: 1rem !important; }
    h6, .h6 { font-size: .95rem !important; }
    .display-1, .display-2, .display-3, .display-4 {
        font-size: 2rem !important;
        line-height: 1.15;
    }
}

/* Spacing utilities scaledown */
@media (max-width: 575.98px) {
    .py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
    .py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
    .my-5 { margin-top: 2rem !important; margin-bottom: 2rem !important; }
    .gx-4, .g-4 { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }
    .gx-5, .g-5 { --bs-gutter-x: 1rem; --bs-gutter-y: 1.25rem; }
    .container, .container-fluid { padding-left: 14px; padding-right: 14px; }
}

/* Stat-card text scaledown */
@media (max-width: 575.98px) {
    .stat-card { padding: 16px !important; gap: 12px !important; }
    .stat-card .stat-icon,
    .stat-card .icon-box { width: 44px !important; height: 44px !important; font-size: 1.15rem !important; border-radius: 10px !important; }
    .stat-card .stat-info h3,
    .stat-card .sc-value { font-size: 1.35rem !important; }
    .stat-card .stat-info p,
    .stat-card .sc-label { font-size: .7rem !important; }
}

/* Pagination */
@media (max-width: 575.98px) {
    .pagination { flex-wrap: wrap; gap: 4px; justify-content: center; }
    .page-link { padding: 6px 10px; font-size: .85rem; }
}

/* Alerts */
@media (max-width: 575.98px) {
    .alert { padding: .75rem 1rem; font-size: .9rem; }
}



/* Sticky tables — give them room */
.table thead.sticky-top th { z-index: 5; }

/* Sidebar overlay (used by admin + centre + student) — make sure it's tap-friendly */
.sidebar-overlay, #sidebarOverlay {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Floating action area — bottom safe area on iOS */
@supports (padding: max(0px)) {
    .admin-content, .centre-content, .student-content, main {
        padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
    }
}

/* Prevent horizontal overflow on body */
body { overflow-x: hidden; }

/* Photos & avatars never overflow */
.rounded-circle, .img-thumbnail, .card img { max-width: 100%; }

/* Print-friendly small fix */
@media print {
    .admin-sidebar, .centre-sidebar, .student-sidebar,
    .admin-topbar, .centre-topbar, .student-topbar,
    .sidebar-overlay { display: none !important; }
    .admin-content, .centre-content, .student-content {
        margin: 0 !important; padding: 0 !important;
    }
}

/* ============================================================
   EXTENDED MOBILE-FIRST RULES (universal)
   ============================================================ */

/* Any raw .table inside a card/section gets horizontal scroll
   on mobile even if author forgot the .table-responsive wrapper. */
@media (max-width: 767.98px) {
    .card-body > .table,
    .card > .table,
    section > .table,
    .table-card > .table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    .card-body { overflow-x: auto; }
}

/* Action bars / filter toolbars — stack on mobile */
@media (max-width: 767.98px) {
    .action-bar,
    .filter-bar,
    .toolbar,
    .page-actions {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: .5rem !important;
    }
    .action-bar > *,
    .filter-bar > *,
    .toolbar > *,
    .page-actions > * { width: 100%; }
    .action-bar form,
    .filter-bar form { width: 100%; display: flex; flex-wrap: wrap; gap: .5rem; }
    .action-bar form > *,
    .filter-bar form > * { flex: 1 1 140px; min-width: 0; }
}

/* Common "title + button" header rows -> stack on mobile */
@media (max-width: 575.98px) {
    .d-flex.justify-content-between:not(.flex-nowrap) {
        flex-wrap: wrap;
        gap: .5rem;
    }
    .d-flex.justify-content-between > .btn,
    .d-flex.justify-content-between > .btn-group { width: 100%; }
}

/* Page title row scaledown */
@media (max-width: 575.98px) {
    .page-title { font-size: 1.1rem !important; }
    .page-header,
    .content-header {
        padding: .75rem 1rem !important;
        flex-direction: column;
        align-items: flex-start !important;
        gap: .5rem;
    }
}

/* Stat-card grids — auto-fit responsive on every portal */
.stats-grid,
.stat-grid,
.dashboard-stats,
.row.stats-row {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}
@media (max-width: 575.98px) {
    .stats-grid,
    .stat-grid,
    .dashboard-stats {
        grid-template-columns: 1fr 1fr;
        gap: .65rem;
    }
}

/* Sidebars — hidden off-canvas under 992px (covers tablet portrait) */
@media (max-width: 991.98px) {
    .admin-sidebar,
    .centre-sidebar,
    .student-sidebar {
        position: fixed !important;
        top: 0; left: 0;
        height: 100vh;
        z-index: 1050;
        transform: translateX(-100%);
        transition: transform .25s ease;
        box-shadow: 0 0 24px rgba(0,0,0,.18);
    }
    .admin-sidebar.show,
    .centre-sidebar.show,
    .student-sidebar.show,
    body.sidebar-open .admin-sidebar,
    body.sidebar-open .centre-sidebar,
    body.sidebar-open .student-sidebar { transform: translateX(0); }

    .admin-content,
    .centre-content,
    .student-content { margin-left: 0 !important; width: 100% !important; }
}

/* Login/auth cards — full width on mobile */
@media (max-width: 575.98px) {
    .login-card,
    .auth-card,
    .login-box {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 14px;
    }
    .login-wrap,
    .auth-wrap { padding: 16px !important; }
}

/* Hero / banner sections shrink */
@media (max-width: 767.98px) {
    .hero,
    .page-hero,
    .banner-section {
        padding: 2rem 1rem !important;
        text-align: center;
    }
    .hero h1, .page-hero h1 { font-size: 1.75rem !important; }
    .hero p,  .page-hero p  { font-size: .95rem !important; }
}

/* DataTables responsive helpers */
@media (max-width: 767.98px) {
    .dataTables_wrapper .row > div { width: 100%; text-align: center !important; }
    .dataTables_length, .dataTables_filter { margin-bottom: .5rem; }
    .dataTables_filter input { width: 100% !important; margin-left: 0 !important; }
}

/* Code & pre — break properly */
pre, code { word-break: break-word; white-space: pre-wrap; }

/* Long URLs / emails inside cards */
.card a, .card span, .card td { word-break: break-word; }

/* Image grids (gallery, course thumbs) — auto-fit */
.gallery-grid,
.thumb-grid,
.course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
}

/* Disabled-look for locked nav items */
.sidebar a .fa-lock { opacity: .85; }

/* Fix any element using inline width that overflows mobile */
@media (max-width: 575.98px) {
    [style*="width:"][style*="px"] { max-width: 100% !important; }
}