/**
 * Schools4SA Universal Mobile Fluid Stylesheet & Ad Confinement (edu_fluid_tools.css)
 * 
 * Ensures every educational tool operates smoothly on mobile devices (320px - 768px):
 * 1. Fluid container width & horizontal scroll prevention.
 * 2. Responsive grid auto-wrap for number pads, button selectors, stats, and options.
 * 3. Mobile touch-target sizing (min 44px height).
 * 4. Strict confinement for commercial ad banners to prevent layout blowouts.
 */

/* 1. Global Tool Viewport Confinement & Horizontal Overflow Prevention */
html, body {
    max-width: 100vw;
}

.edu-tool-container,
.edu-app-workspace,
[class*="-app"],
[class*="-container"],
.main-content {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden;
}

/* 2. Canvas & Media Fluidity */
canvas {
    max-width: 100% !important;
    height: auto !important;
    touch-action: pan-y pinch-zoom;
}

img, svg, video {
    max-width: 100%;
    height: auto;
}

/* 3. Table & Ledger Grid Fluid Touch Scrolling */
.table-wrapper,
.ledger-table-wrap,
.overflow-x-auto,
table {
    box-sizing: border-box;
}

.table-wrapper,
.ledger-table-wrap,
.table-responsive {
    width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* 4. Responsive Grid Fallbacks on Small Screens (< 640px) */
@media (max-width: 640px) {
    /* Auto-wrap rigid 6-col / 12-col grids */
    .table-selector,
    .grid-cols-6,
    .grid-cols-8,
    .grid-cols-12 {
        grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)) !important;
        gap: 6px !important;
    }

    .grid-cols-4,
    .grid-cols-3 {
        grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)) !important;
        gap: 8px !important;
    }

    /* Auto-wrap 4-item stats rows to 2x2 or auto-fit */
    .stats-row,
    [class*="stats-grid"],
    [class*="-stats"] {
        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) !important;
        gap: 0.5rem !important;
    }

    /* Cards & Containers Fluid Padding */
    .times-card,
    .quiz-card,
    .tool-card,
    .lang-card,
    [class*="-card"] {
        padding: 1.1rem 0.9rem !important;
        border-radius: 1rem !important;
    }

    /* Fluid Problem & Math Displays */
    .problem-display,
    .question-display,
    .display-text,
    .equation-box,
    [class*="display-box"] {
        font-size: clamp(1.8rem, 7vw, 3.2rem) !important;
        padding: 1.25rem 0.5rem !important;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* Fluid Inputs */
    .answer-input,
    input[type="number"].text-center,
    input[type="text"].text-center {
        font-size: clamp(1.6rem, 6vw, 2.5rem) !important;
        padding: 0.75rem !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Mode Toggles and Pill Bars */
    .mode-toggle,
    .category-tabs,
    .filter-bar,
    .tab-group {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    /* Fluid Typography */
    h1, .text-3xl, .text-4xl {
        font-size: clamp(1.35rem, 4.8vw, 2.1rem) !important;
        line-height: 1.25 !important;
    }

    /* Touch Targets (Minimum 44px) */
    button, 
    .btn, 
    .table-btn, 
    .quiz-opt, 
    .media-btn,
    .mode-btn,
    .cat-tab,
    select {
        min-height: 44px !important;
        touch-action: manipulation;
    }
}

/* 5. Safe Ad Zone Confinement (Phase 4 Standards) */
.edu-ad-slot-top,
.edu-ad-slot-bottom,
[id^="cf-ad-zone-"],
.adsbygoogle {
    max-width: 100% !important;
    overflow: hidden !important;
    margin-left: auto;
    margin-right: auto;
}

.edu-ad-slot-top {
    margin-bottom: 1.25rem;
}

.edu-ad-slot-bottom {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e2e8f0;
}

.edu-ad-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a3b8;
    text-align: center;
    margin-bottom: 4px;
}

/* 6. Print Safety (Phase 8 Standard) */
@media print {
    .edu-tool-nav,
    .edu-nav-trigger,
    .edu-ad-slot-top,
    .edu-ad-slot-bottom,
    .edu-save-prompt,
    [id^="cf-ad-zone-"],
    .adsbygoogle,
    nav,
    footer,
    .no-print {
        display: none !important;
    }
    body {
        padding-top: 0 !important;
        background: #ffffff !important;
    }
}