/* ============================================================
   TABLET: 1025px - 1280px (12.1-inch tablet)
   ============================================================ */

@media (min-width: 1025px) and (max-width: 1280px) {
    /* Als SEO panel zichtbaar is op 12.1" tablet: smaller panel zodat artikel meer ruimte krijgt */
    .results-two-col:not(.seo-panel-hidden) {
        grid-template-columns: 1fr 300px;
    }

    /* Sidebar smaller - meer ruimte voor content */
    .sidebar {
        width: 160px;
        padding: 1.25rem 0.75rem;
    }

    .sidebar-item {
        font-size: 0.8rem;
        padding: 0.6rem 0.5rem;
    }

    /* Main content gebruikt beschikbare ruimte */
    .main-content {
        padding: 1.25rem;
        min-width: 0;
    }

    /* Containers full-width */
    .container,
    #context-confirmation-container,
    .context-confirmation-modern,
    .article-browser-card {
        max-width: 100%;
    }

    /* Grids: 2 kolommen op 12.1" */
    .stats-grid,
    .coverage-grid,
    .sources-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }

    /* Data tables: horizontale scroll */
    .cost-table-container,
    .unibet-table-container,
    .f1-table,
    table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        display: block;
        max-width: 100%;
    }

    /* Tap targets */
    .radio-option,
    .checkbox-option,
    .btn,
    .sidebar-item {
        min-height: 44px;
    }
}

/* ============================================================
   MOBILE: 320px - 768px
   Responsive CSS for mobile devices
   ============================================================ */

/* --- Blok 1: Step navigation compact --- */
@media (max-width: 768px) {
    /* Step labels: fix 0.6rem (9.6px) → 0.75rem (12px) minimum */
    .step-label {
        font-size: 0.75rem !important;
        max-width: 64px;
    }

    /* Steps horizontaal scrollbaar (versterkt bestaande index.html regels) */
    .workflow-progress {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        white-space: nowrap;
        padding-bottom: 0.5rem;
    }

    .workflow-progress::-webkit-scrollbar {
        display: none;
    }
}

/* --- Blok 2: Sidebar verbergen op small mobile --- */
@media (max-width: 640px) {
    .sidebar {
        display: none;
    }

    .main-content {
        width: 100%;
        padding: 0.75rem;
    }

    /* App shell: geen flex row meer nodig */
    .app-shell {
        flex-direction: column;
    }
}

/* --- Blok 3: TipTap toolbar en bubble menu mobiel --- */
@media (max-width: 640px) {
    /* Tone bubble menu: beperk breedte */
    .tone-bubble-menu {
        max-width: calc(100vw - 2rem);
    }

    /* Tone pills: wrap en compacter */
    .tone-pills {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .tone-pill {
        font-size: 0.65rem;
        padding: 0.3rem 0.5rem;
    }

    /* Context headlines toolbar: scroll als nodig */
    .context-headlines-toolbar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .toolbar-right {
        flex-wrap: wrap;
        gap: 0.25rem;
    }
}

/* --- Blok 4: Grids naar 1 kolom op mobiel --- */
@media (max-width: 640px) {
    /* Sport dashboard grids (was minmax(300px/400px, 1fr) → overflow) */
    .stats-grid,
    .coverage-grid,
    .sources-grid {
        grid-template-columns: 1fr !important;
    }

    /* Context confirmation grids */
    .angle-grid,
    .checkbox-grid {
        grid-template-columns: 1fr !important;
    }

    /* Budget monitor + subscription grids */
    .budget-monitor-grid,
    .subscription-cards-grid,
    .sub-edit-grid {
        grid-template-columns: 1fr !important;
    }

    /* Search queries editor grids */
    .search-queries-grid,
    .search-query-tags {
        grid-template-columns: 1fr !important;
    }
}

/* --- Blok 5: Touch targets en form inputs --- */
@media (max-width: 768px) {
    /* Touch targets >= 44px voor radio/checkbox opties */
    .radio-option,
    .checkbox-option,
    .option-card,
    .match-option,
    .headline-item {
        min-height: 44px;
        padding: 0.625rem 0.75rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    /* Vergroot radio/checkbox visueel */
    input[type="radio"],
    input[type="checkbox"] {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

    /* Font >= 16px op inputs voorkomt iOS auto-zoom */
    input[type="text"],
    input[type="email"],
    input[type="search"],
    input[type="number"],
    input[type="url"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* --- Blok 6: Font sizes mobiel --- */
@media (max-width: 768px) {
    /* Minimum leesbare fonts voor kleine tekst (was 11-12px) */
    .stat-text,
    .stat-value,
    .stat-label,
    .category-row,
    .badge,
    .status-badge,
    .step-info-badge {
        font-size: 13px !important;
    }

    body {
        font-size: 15px;
    }

    /* Cards: iets compacter padding */
    .stat-card,
    .coverage-card,
    .source-card {
        padding: 0.75rem;
    }
}

/* --- Blok 7: Modals full-screen op mobiel --- */
@media (max-width: 640px) {
    /* Source modal */
    .source-modal-content {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        margin: 0 !important;
        overflow-y: auto;
    }

    /* Article preview modal */
    .article-preview-modal {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        margin: 0 !important;
        overflow-y: auto;
    }

    /* Generic modal overlay + content */
    .modal-overlay .modal-content {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        margin: 0 !important;
        overflow-y: auto;
    }
}

/* --- Blok 8: Q&A input boven keyboard --- */
@media (max-width: 768px) {
    .qa-input-container,
    .chat-input-container {
        position: sticky;
        bottom: 0;
        background: var(--bg-primary);
        padding: 0.75rem;
        border-top: 1px solid var(--border-color);
        z-index: 100;
    }
}

/* --- Blok 9: Search actions & Browse/Odds panels mobile --- */
@media (max-width: 768px) {
    /* Search actions button row */
    .search-actions {
        display: flex;
        gap: 6px;
        width: 100%;
        flex-wrap: nowrap;
    }

    .search-actions .search-btn {
        flex: 1.5;
        min-width: 0;
    }

    .search-actions .search-btn-secondary {
        flex: 1;
        min-width: 0;
        min-height: 44px;
    }

    .search-actions .kill-btn {
        flex: 1;
        min-width: 0;
        margin-left: 0;
        margin-top: 0;
    }

    /* Browse panel: full-width, stacked layout */
    #browsePanel {
        padding: 12px !important;
    }

    #browsePanel > div:first-child {
        flex-direction: column !important;
        gap: 8px !important;
    }

    #browsePanel > div:first-child > div {
        min-width: 100% !important;
        width: 100% !important;
    }

    #browsePanel input[type="date"] {
        width: 100% !important;
        min-height: 44px;
        font-size: 16px !important;
    }

    #browsePanel select {
        width: 100% !important;
        min-height: 44px;
        font-size: 16px !important;
    }

    #browsePanel button {
        width: 100% !important;
        justify-content: center !important;
        min-height: 48px !important;
    }

    #browseResults {
        max-height: 300px !important;
    }

    /* Browse actions (selected count + button) */
    #browseActions {
        flex-direction: column !important;
        gap: 8px !important;
    }

    #browseActions button {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Odds upload panel: full-width, stacked layout */
    #oddsUploadPanel {
        padding: 12px !important;
        border-radius: 0 !important;
    }

    #oddsImagePreview > div:first-child {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    #oddsImagePreview img {
        max-width: 100% !important;
        max-height: 200px !important;
    }
}

/* --- Blok 10: Search actions for smallest screens --- */
@media (max-width: 400px) {
    /* On very small screens, hide button text and show icons only */
    .search-btn-secondary .btn-text {
        display: none;
    }

    .search-actions .search-btn {
        flex: 2;
    }

    .search-actions .search-btn-secondary {
        flex: 1;
        padding: 0.75rem;
    }
}