@media (max-width: 768px) {
    /* Prevent horizontal scrolling globally */
    html, body {
        overflow-x: hidden;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    /* Force the main container to the left and lock width */
    .main-content {
        display: block; /* Overrides any flex centering we added earlier */
        width: 100vw;
        padding: 15px;
        box-sizing: border-box; /* Ensures padding doesn't add to width */
        text-align: left;
    }

    /* Ensure cards/stats don't exceed screen width */
    .stats-grid, .card, .search-section {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 768px) {
    /* Position the hamburger on the RIGHT */
    .mobile-menu-toggle {
        display: block;
        position: fixed;
        top: 20px;
        right: 20px; /* Moved from left to right */
        background: #5865f2;
        color: white;
        border: none;
        padding: 12px 15px;
        border-radius: 8px;
        z-index: 1000;
        cursor: pointer;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    }

    /* Sidebar Close Button Style */
    .sidebar-close {
        display: block;
        font-size: 1.5rem;
        color: #949ba4;
        cursor: pointer;
        margin-left: auto; /* Pushes it to the right of the brand logo */
        padding: 5px;
    }

    .sidebar-close:hover {
        color: white;
    }

    /* Ensure the sidebar starts off-screen */
    .sidebar {
        position: fixed;
        left: -100%; /* Fully off-screen */
        top: 0;
        width: 280px;
        height: 100vh;
        z-index: 9999;
        transition: left 0.3s ease-in-out;
    }

    .sidebar.active {
        left: 0;
    }
}

/* Hide mobile-only elements on Desktop */
@media (min-width: 769px) {
    .mobile-menu-toggle, .sidebar-close {
        display: none;
    }
}
/* Make sure header-section text doesnt overlap*/
@media (max-width: 768px) {
    .header-section h1 {
        font-size: 1.5rem;
        padding-right: 60px; /* Leave room for the button */
    }
}

@media (max-width: 768px) {
    .sidebar-overlay {
        display: none; /* Hidden by default */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
        -webkit-backdrop-filter: blur(3px); /* Optional: adds a nice blur effect */
        backdrop-filter: blur(3px); /* Optional: adds a nice blur effect */
        z-index: 9998; /* Just below the sidebar (9999) */
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    /* When the sidebar is active, show the overlay */
    .sidebar.active ~ .sidebar-overlay, 
    .sidebar-overlay.active {
        display: block;
        opacity: 1;
    }
}

@media (max-width: 768px) {
    /* 1. Prevent the container from being wider than the screen */
    .dashboard-container, .main-content {
        width: 100% !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 10px !important;
        overflow-x: hidden;
    }

    /* 2. Force stats cards to stack and stay left */
    .stats-grid {
        display: flex;
        flex-direction: column; /* Stack them vertically */
        align-items: flex-start; /* Align to the left */
        width: 100%;
        gap: 15px;
    }

    /* 3. Ensure the cards don't have a fixed large width */
    .card {
        width: calc(100% - 20px) !important;
        margin-left: 0 !important;
    }
}

@media (max-width: 768px) {
/* 1. Make the form take up the full width minus small padding */
    .report-form {
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px !important;
        margin: 10px 0 !important;
        border-radius: 10px;
        box-sizing: border-box;
    }

    /* 2. Increase tap targets for fingers */
    .report-form input, 
    .report-form textarea {
        font-size: 16px !important; /* Prevents auto-zoom on iPhone */
        padding: 14px !important;
    }

    /* 3. Make the submit button big and easy to press */
    .btn-primary {
        width: 100%;
        padding: 15px !important;
        font-size: 1.1rem;
    }

    /* 4. Input Fields & Textarea (Anti-Zoom for iOS) */
    .report-form input[type="text"],
    .report-form input[type="url"],
    .report-form textarea {
        font-size: 16px !important; /* Prevents auto-zoom on focus */
        padding: 14px !important;
        width: 100%;
        margin-bottom: 15px;
        background: #1e1e1e;
        color: white;
        border: 1px solid #111;
        border-radius: 6px;
    }

    /* 5. Evidence Helper Text */
    .helper-text {
        display: block;
        color: #8e9297;
        font-size: 12px;
        margin-top: -10px;
        margin-bottom: 20px;
        line-height: 1.4;
    }
}