/* ── Mobile "device-native" layer ──────────────────────────────────
   Touch targets, responsive table→card pattern, bottom tab bar and
   off-canvas drawer support for the mobile navigation shell.
   Scoped to small screens; desktop (>=992px) is unaffected. */

* {
    -webkit-tap-highlight-color: transparent;
}

a, button, .btn {
    touch-action: manipulation;
}

/* ── Responsive table → stacked cards ──
   Add class="table-cards-mobile" to a <table> and data-label="Column Name"
   to each <td> to enable. Falls back to normal table above 600px. */
@media screen and (max-width: 600px) {
    table.table-cards-mobile {
        border: 0;
        width: 100%;
    }
    table.table-cards-mobile thead {
        display: none;
    }
    table.table-cards-mobile tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid #ddd;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
        overflow: hidden;
    }
    table.table-cards-mobile td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        text-align: right;
        padding: 8px 12px;
        border: none;
        border-bottom: 1px solid #eee;
    }
    table.table-cards-mobile td:last-child {
        border-bottom: none;
    }
    table.table-cards-mobile td[data-label]:before {
        content: attr(data-label);
        font-weight: 600;
        color: #555;
        text-align: left;
        flex-shrink: 0;
    }
    table.table-cards-mobile td:not([data-label]) {
        text-align: left;
    }
}

@media screen and (max-width: 576px) {
    .w-100-mobile {
        width: 100%;
    }
    .w-100-mobile select,
    .w-100-mobile .form-control {
        width: 100%;
    }
}

/* Generic fallback: wrap any table in <div class="table-responsive"> to
   scroll horizontally instead of blowing out the viewport (Bootstrap 4
   utility already provides this — used here just as a documented pattern
   reference for pages we didn't fully convert to cards). */

/* Safety net for wide data tables (e.g. batch_detail.html's many
   #chimputable tables) that weren't individually wrapped in
   .table-responsive: make the table itself scroll horizontally on small
   screens rather than forcing the whole page to zoom/scroll sideways. */
@media screen and (max-width: 767.98px) {
    #chimputable:not(.table-cards-mobile),
    .chimputable:not(.table-cards-mobile) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
}

/* ── Mobile top app bar (hamburger) ── */
.mobile-topbar {
    display: none;
}

@media (max-width: 991.98px) {
    .mobile-topbar {
        display: flex;
        align-items: center;
        gap: 10px;
        position: sticky;
        top: 0;
        z-index: 1030;
        background: var(--sidebar-bg, #065a84);
        color: #fff;
        padding: 8px 12px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
        min-height: 48px;
    }
    .mobile-topbar .hamburger-btn {
        background: transparent;
        border: none;
        color: #fff;
        font-size: 22px;
        line-height: 1;
        padding: 8px;
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
    .mobile-topbar .mobile-topbar-title {
        font-weight: 700;
        font-size: 1.05rem;
    }

    /* Off-canvas drawer + backdrop */
    .sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.45);
        z-index: 999;
    }
    .sidebar-backdrop.active {
        display: block;
    }

    /* Bottom tab bar (students/guardians only) */
    .mobile-tabbar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1020;
        background: #fff;
        border-top: 1px solid #ddd;
        box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    .mobile-tabbar a {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 6px 2px;
        min-height: 52px;
        color: #555;
        text-decoration: none;
        font-size: 11px;
        font-weight: 600;
    }
    .mobile-tabbar a .tabbar-icon {
        font-size: 20px;
        line-height: 1;
    }
    .mobile-tabbar a.active {
        color: #0097CF;
    }
    body.has-mobile-tabbar #main {
        padding-bottom: 72px;
    }
}

@media (min-width: 992px) {
    .mobile-tabbar,
    .sidebar-backdrop {
        display: none !important;
    }
}