/* ================================================================
   Shared mobile nav (hamburger) + responsive helpers.
   For pages that DON'T use landing.css (performance, app/admin, chart).
   IMPORTANT: include this <link> AFTER the page's own inline <style> so
   these rules win at <=640px (equal specificity -> later source wins).
   ================================================================ */

.nav-toggle {
    display: none; flex-direction: column; gap: 5px;
    background: none; border: 0; padding: 8px; cursor: pointer; margin-left: auto;
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--text-bright); border-radius: 2px; transition: transform .2s, opacity .2s; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 640px) {
    .nav-toggle { display: flex; }
    .nav-inner { position: relative; flex-wrap: wrap; }
    .nav-links {
        position: absolute; top: 100%; right: 0; left: 0; margin-top: 8px;
        flex-direction: column; align-items: stretch; gap: 0 !important;
        background: #0d1117; border: 1px solid rgba(255,255,255,0.10);
        border-radius: 10px; padding: 8px; display: none !important;
        box-shadow: 0 16px 44px rgba(0,0,0,0.6); z-index: 200;
    }
    .nav-links.open { display: flex !important; }
    .nav-links a { padding: 12px 14px; font-size: 15px; }
    /* Keep wide tables usable on a phone (horizontal scroll instead of overflow). */
    .table-scroll, .dash-tw, .tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    /* App/admin tables live inside .card — let them scroll sideways rather than squish/overflow. */
    .card table { display: block; width: 100%; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
    .wrap, .container { padding-left: 16px; padding-right: 16px; }
}