/* MOBILE FIXES - Targeted improvements to existing design */

/* Ensure proper mobile layout for main content */
@media screen and (max-width: 768px) {
    /* Fix body padding for nav */
    body.paper,
    main.container .paper {
        padding-top: 100px;
    }

    /* Ensure proper container width */
    .paper {
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Fix stats grid on very small screens */
    .stats {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px;
    }

    /* Better code block handling */
    pre {
        font-size: 9pt;
        padding: 10px;
        margin-left: -15px;
        margin-right: -15px;
        border-left: none;
        border-right: none;
    }

    /* Better table handling */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 9pt;
    }

    /* Mobile navigation improvements */
    .nav-wrapper {
        max-height: 70vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Touch target improvements */
    .internal-nav a,
    .external-nav a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Better spacing for mobile content */
    h1 {
        font-size: 18pt;
        margin: 25px 0 15px 0;
    }

    h2 {
        font-size: 14pt;
        margin: 20px 0 12px 0;
    }

    /* Warning boxes mobile */
    .warning-box,
    .abstract {
        margin-left: -15px;
        margin-right: -15px;
        border-left: none;
        border-right: none;
    }
}

/* Very small screens (< 480px) */
@media screen and (max-width: 480px) {
    .stats {
        grid-template-columns: 1fr !important;
    }

    .stat .value {
        font-size: 16pt;
    }

    h1 {
        font-size: 16pt;
    }
}

/* Landscape mobile */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .nav-wrapper {
        max-height: 60vh;
    }
}

/* Fix navigation overflow on desktop */
@media screen and (min-width: 769px) {
    .nav-wrapper {
        overflow: visible;
    }
}

/* Ensure scrollbars are visible on overflow */
pre::-webkit-scrollbar,
table::-webkit-scrollbar,
.nav-wrapper::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

pre::-webkit-scrollbar-track,
table::-webkit-scrollbar-track,
.nav-wrapper::-webkit-scrollbar-track {
    background: #f0f0f0;
}

pre::-webkit-scrollbar-thumb,
table::-webkit-scrollbar-thumb,
.nav-wrapper::-webkit-scrollbar-thumb {
    background: #999;
}

pre::-webkit-scrollbar-thumb:hover,
table::-webkit-scrollbar-thumb:hover,
.nav-wrapper::-webkit-scrollbar-thumb:hover {
    background: #666;
}