/* =============================================================
   TRINITY SCHOOL SYSTEM — MOBILE RESPONSIVE LAYER v1.0
   Handles: off-canvas sidebar, mobile header, all page layouts
   Linked in header.php AFTER compact-system.css
   ============================================================= */

/* ── Sidebar Off-Canvas Variables ── */
:root {
    --sidebar-width: 230px;
    --header-height: 56px;
    --transition-speed: 0.28s;
}

/* ────────────────────────────────────────────────────────────
   1. SIDEBAR OFF-CANVAS OVERLAY (mobile backdrop)
   ──────────────────────────────────────────────────────────── */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1020;
    opacity: 0;
    transition: opacity var(--transition-speed) ease;
    backdrop-filter: blur(2px);
}

/* ────────────────────────────────────────────────────────────
   2. MOBILE HAMBURGER BUTTON (hidden on desktop)
   ──────────────────────────────────────────────────────────── */
.mobile-sidebar-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    color: #334155;
    font-size: 20px;
    line-height: 1;
    transition: background 0.18s;
    flex-shrink: 0;
}

.mobile-sidebar-toggle:hover {
    background: #f1f5f9;
    color: #1e293b;
}

/* ────────────────────────────────────────────────────────────
   3. LOGIN PAGE — Full mobile polish
   ──────────────────────────────────────────────────────────── */

/* Prevent body overflow-hidden from clipping on tall phones */
@media (max-width: 768px) {
    body.login-page, html {
        overflow-y: auto !important;
    }

    .login-wrapper {
        flex-direction: column !important;
        width: 94vw !important;
        max-width: 420px !important;
        height: auto !important;
        min-height: unset !important;
        margin: 20px auto !important;
    }

    .login-wrapper .sidebar {
        width: 100% !important;
        padding: 16px 20px !important;
        border-radius: 16px 16px 0 0 !important;
        max-height: 220px;
        overflow: hidden;
    }

    .features-list { display: none !important; }
    .app-store-section { display: none !important; }

    .login-wrapper .main-content {
        width: 100% !important;
        padding: 30px 20px 24px !important;
        border-radius: 0 0 16px 16px !important;
    }

    .login-card {
        max-width: 100% !important;
        width: 100% !important;
    }

    .login-page-footer {
        width: 100% !important;
    }
}

@media (max-width: 480px) {
    .login-wrapper {
        width: 100vw !important;
        border-radius: 0 !important;
        margin: 0 !important;
        min-height: 100vh !important;
    }

    .login-wrapper .sidebar {
        border-radius: 0 !important;
    }

    .login-wrapper .main-content {
        border-radius: 0 !important;
    }
}

/* ────────────────────────────────────────────────────────────
   4. HEADER — Responsive layout
   ──────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
    /* Show mobile toggle, hide desktop toggle */
    .mobile-sidebar-toggle { display: flex !important; align-items: center; }
    .sidebar-toggle.desktop-only { display: none !important; }

    /* Shrink header elements */
    .main-header .header-left h4 {
        font-size: 12px !important;
        max-width: 160px !important;
    }
}

@media (max-width: 768px) {
    /* Header takes full width */
    .main-header {
        margin-left: 0 !important;
        left: 0 !important;
    }

    /* Make navbar wrap so search container falls below */
    .main-header .navbar {
        flex-wrap: wrap !important;
        height: auto !important;
        min-height: 56px !important;
    }

    /* Show search bar on mobile in its own row */
    .header-center.search-container {
        order: 3 !important;
        width: 100% !important;
        margin-top: 10px !important;
        justify-content: center !important;
    }

    /* Tighter right icons */
    .header-right.navbar-icons-group {
        gap: 8px !important;
    }

    /* Hide text labels in sync indicator on mobile */
    #sync-status-text { display: none !important; }
    .user-info-text { display: none !important; }

    /* Subscription badge: show icon only */
    .main-header .header-right a span[style*="font-size:11px"] {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .main-header .navbar {
        padding: 8px 12px !important;
    }

    .main-header .header-left h4 {
        font-size: 11px !important;
        max-width: 100px !important;
    }
}

/* ────────────────────────────────────────────────────────────
   5. SIDEBAR — Off-canvas on mobile
   ──────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
    /* Sidebar goes off-screen to the left */
    .sidebar {
        transform: translateX(calc(-1 * var(--sidebar-width))) !important;
        transition: transform var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1) !important;
        z-index: 1030 !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100vh !important;
    }

    /* Content wrapper fills full screen */
    .content-wrapper {
        margin-left: 0 !important;
        padding-top: calc(var(--header-height) + 10px) !important;
    }

    /* When body has sidebar-open class, slide sidebar in */
    body.sidebar-open .sidebar {
        transform: translateX(0) !important;
        box-shadow: 4px 0 24px rgba(0,0,0,0.25) !important;
    }

    /* Show overlay */
    body.sidebar-open .sidebar-overlay {
        display: block !important;
        opacity: 1 !important;
    }

    /* Offline banner */
    #offline-banner {
        margin-left: 0 !important;
    }
}

/* ────────────────────────────────────────────────────────────
   6. CONTENT WRAPPER — All pages
   ──────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .content-wrapper {
        padding: 8px 8px 24px !important;
        padding-top: calc(var(--header-height) + 10px) !important;
    }

    .content-header {
        padding: 6px 0 10px !important;
    }

    .content-header h1 {
        font-size: 14px !important;
    }

    .content-header .breadcrumb {
        font-size: 10px !important;
    }
}

/* ────────────────────────────────────────────────────────────
   7. BOOTSTRAP GRID — Force stacking on small screens
   ──────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    /* All grid columns become full-width below 768px */
    .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4,
    .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8,
    .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12,
    .col-md-1, .col-md-2, .col-md-3, .col-md-4,
    .col-md-5, .col-md-6, .col-md-7, .col-md-8,
    .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
        width: 100% !important;
        float: none !important;
    }

    /* Exception: Allow 2-column grid for small stat cards */
    .col-xs-6 { width: 50% !important; float: left !important; }
}

@media (min-width: 768px) and (max-width: 991px) {
    /* Tablet: 2-col layout for md-6, full for md-12 */
    .col-md-6 { width: 50% !important; float: left !important; }
    .col-md-4 { width: 50% !important; float: left !important; }
    .col-md-3 { width: 50% !important; float: left !important; }
    .col-md-12 { width: 100% !important; float: none !important; }

    /* lg columns stack on tablet */
    .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5 {
        width: 50% !important;
        float: left !important;
    }
    .col-lg-7, .col-lg-8 {
        width: 100% !important;
        float: none !important;
    }
}

/* ────────────────────────────────────────────────────────────
   8. DASHBOARD STAT CARDS — 2-per-row on phones
   ──────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .stat-card {
        padding: 12px 14px !important;
        margin-bottom: 10px !important;
    }

    .stat-icon {
        width: 30px !important;
        height: 30px !important;
        font-size: 16px !important;
    }

    .stat-value {
        font-size: 18px !important;
    }

    .stat-label {
        font-size: 8px !important;
    }

    .stat-footer {
        font-size: 9px !important;
    }

    /* Make stat cards 2-per-row on phones */
    .row > .col-md-3:has(.stat-card) {
        width: 50% !important;
        float: left !important;
    }
}

/* ────────────────────────────────────────────────────────────
   9. OVERVIEW/CHART CARDS
   ──────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .overview-card {
        padding: 12px !important;
        margin-bottom: 12px !important;
    }

    .overview-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .header-legend {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .chart-full canvas {
        max-height: 200px !important;
    }
}

/* ────────────────────────────────────────────────────────────
   10. TABLES — Horizontal scroll on mobile
   ──────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    /* Wrap every table in scroll container */
    .box-body .table,
    .overview-card .table {
        min-width: 480px;
    }

    .box-body {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .table > thead > tr > th {
        padding: 8px 8px !important;
        font-size: 9px !important;
        white-space: nowrap !important;
    }

    .table > tbody > tr > td {
        padding: 7px 8px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
    }

    /* Table action buttons smaller */
    .table td .btn {
        padding: 2px 6px !important;
        font-size: 10px !important;
    }

    /* Student/staff photos in tables */
    .table td img {
        width: 24px !important;
        height: 24px !important;
    }
}

/* ────────────────────────────────────────────────────────────
   11. FORMS — Stack fields on mobile
   ──────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .form-group {
        margin-bottom: 5px !important;
    }

    .form-control {
        height: 30px !important;
        font-size: 12px !important;
    }

    /* Filter rows become vertical on mobile */
    .box-body form .row,
    .filter-row {
        flex-direction: column !important;
    }

    .box-body form .row > div[class*="col-"] {
        width: 100% !important;
        margin-bottom: 8px !important;
    }

    /* Submit button full width on mobile */
    .box-body form .btn[type="submit"],
    .box-body form button[type="submit"] {
        width: 100% !important;
    }

    /* Input groups */
    .input-group .form-control {
        width: 100% !important;
    }
}

/* ────────────────────────────────────────────────────────────
   12. BOX / CARD HEADERS — Wrap on small screens
   ──────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .box-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        padding: 10px 12px !important;
    }

    .box-header .box-tools {
        width: 100% !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .box-header .pull-right {
        float: none !important;
        width: 100% !important;
    }

    .box-body {
        padding: 10px 12px !important;
    }
}

/* ────────────────────────────────────────────────────────────
   13. MODALS — Full screen on mobile
   ──────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .modal-dialog {
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 100vh !important;
    }

    .modal-content {
        border-radius: 0 !important;
        min-height: 100vh !important;
    }

    .modal-header {
        padding: 14px 16px !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
    }

    .modal-body {
        padding: 14px 16px !important;
        overflow-y: auto !important;
    }

    .modal-footer {
        padding: 12px 16px !important;
        position: sticky !important;
        bottom: 0 !important;
        background: #fff !important;
        border-top: 1px solid #eef1f5 !important;
    }
}

/* ────────────────────────────────────────────────────────────
   14. BUTTONS — Mobile sizing
   ──────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .btn {
        font-size: 11px !important;
        padding: 5px 12px !important;
    }

    .btn-sm {
        font-size: 10px !important;
        padding: 4px 9px !important;
    }

    .btn-xs {
        font-size: 9px !important;
        padding: 2px 6px !important;
    }
}

/* ────────────────────────────────────────────────────────────
   15. PAGINATION — Compact on mobile
   ──────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .pagination {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 3px !important;
    }

    .pagination > li > a,
    .pagination > li > span {
        padding: 4px 9px !important;
        font-size: 10px !important;
        margin: 0 !important;
    }
}

/* ────────────────────────────────────────────────────────────
   16. DATATABLES CONTROLS — Mobile friendly
   ──────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length {
        float: none !important;
        text-align: left !important;
        margin-bottom: 8px !important;
    }

    .dataTables_wrapper .dataTables_filter input {
        width: 100% !important;
        margin-left: 0 !important;
        margin-top: 4px !important;
        display: block !important;
    }

    .dataTables_info,
    .dataTables_paginate {
        float: none !important;
        text-align: center !important;
        margin-top: 10px !important;
    }
}

/* ────────────────────────────────────────────────────────────
   17. PROFILE/VIEW PAGES — Stack photo and details
   ──────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    /* Student/staff profile photo */
    .col-md-3 img[style*="border-radius:50%"],
    .col-md-3 img[style*="border-radius: 50%"] {
        display: block !important;
        margin: 0 auto 16px !important;
    }

    /* Profile detail tables */
    .table th { width: 45% !important; }
}

/* ────────────────────────────────────────────────────────────
   18. ALERT BOXES — Full width on mobile
   ──────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .alert {
        font-size: 12px !important;
        padding: 9px 12px !important;
        border-radius: 6px !important;
    }
}

/* ────────────────────────────────────────────────────────────
   19. PRINT — Keep print layout clean
   ──────────────────────────────────────────────────────────── */

@media print {
    .sidebar,
    .main-header,
    .sidebar-overlay,
    .mobile-sidebar-toggle,
    .content-header {
        display: none !important;
    }

    .content-wrapper {
        margin-left: 0 !important;
        padding: 0 !important;
    }

    /* Restore all column widths for print */
    .col-md-1, .col-md-2, .col-md-3, .col-md-4,
    .col-md-5, .col-md-6, .col-md-7, .col-md-8,
    .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
        width: auto !important;
        float: left !important;
    }

    .col-md-3 { width: 25% !important; }
    .col-md-4 { width: 33.333% !important; }
    .col-md-6 { width: 50% !important; }
    .col-md-12 { width: 100% !important; }
}

/* ────────────────────────────────────────────────────────────
   20. UTILITY — Touch-friendly sizing
   ──────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    /* Minimum touch target size (44px) for all clickable elements */
    .sidebar-menu > li > a {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Select dropdowns easier to tap */
    select.form-control {
        min-height: 40px !important;
    }

    /* Checkbox / radio labels bigger tap area */
    .checkbox label,
    .radio label {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
        min-height: 36px !important;
        display: flex !important;
        align-items: center !important;
    }
}