/**
 * SmartCemic Mobile Audit Fixes v2.0
 * Generated 2026-02-16 — Comprehensive mobile responsiveness patch
 * Covers 53 grid classes across all templates
 * Loaded AFTER all other CSS for proper cascade
 */

/* ================================================================
   GLOBAL — Prevent Horizontal Overflow
   ================================================================ */
html, body { max-width: 100vw; }

@media (max-width: 768px) {
    .container, .content-wrapper, .main-content, .app-content {
        max-width: 100vw;
        overflow-x: hidden;
    }
    .hero::before, .hero::after { display: none; }
}

/* ================================================================
   TABLE RESPONSIVENESS
   ================================================================ */
.specs-table, .data-table, .billing-table { width: 100%; border-collapse: collapse; }

@media (max-width: 640px) {
    .specs-table th, .specs-table td,
    .data-table th, .data-table td,
    .billing-table th, .billing-table td {
        padding: 8px 10px;
        font-size: 0.85rem;
    }
    .specs-table th { min-width: 120px; }
}

/* ================================================================
   INDEX / LANDING PAGE
   ================================================================ */
@media (max-width: 768px) {
    .hero-container { grid-template-columns: 1fr !important; text-align: center; gap: 2rem; }
    .metrics-grid { grid-template-columns: 1fr !important; gap: 1rem; }
    .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem; }
    .correction-details { grid-template-columns: 1fr !important; }
    .manual-input-grid { grid-template-columns: 1fr !important; }
    .skin-tone-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 480px) {
    .stats-grid { grid-template-columns: 1fr !important; }
    .skin-tone-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ================================================================
   ABOUT PAGE
   ================================================================ */
@media (max-width: 768px) {
    .mission-grid,
    .tech-grid,
    .cert-grid,
    .team-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .journey-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
    .mission-grid,
    .tech-grid,
    .cert-grid,
    .team-grid,
    .journey-grid { grid-template-columns: 1fr !important; }
}

/* ================================================================
   SETTINGS PAGE
   ================================================================ */
@media (max-width: 768px) {
    .settings-grid { grid-template-columns: 1fr !important; gap: 1rem; }
    .integration-grid { grid-template-columns: 1fr !important; }
}

/* ================================================================
   WELLNESS PAGE — All Grids
   ================================================================ */
@media (max-width: 768px) {
    .score-breakdown { grid-template-columns: 1fr !important; width: 100% !important; }
    .amh-markers-grid,
    .insight-grid,
    .recovery-factors,
    .ovarian-grid,
    .ovarian-indicators,
    .fertility-stats,
    .hormone-phases,
    .hr-zones,
    .sdk-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .amh-ranges-grid,
    .amh-ref-grid,
    .amh-reference,
    .amh-actions,
    .cycle-info,
    .insights-grid,
    .menopause-symptoms,
    .symptom-grid { grid-template-columns: 1fr !important; }
    .cycle-calendar { grid-template-columns: repeat(7, 1fr) !important; gap: 2px !important; }
    .goals-grid { grid-template-columns: repeat(3, 1fr) !important; }
    .recovery-section { grid-template-columns: 1fr !important; }
    .symptom-grid-container { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
    .amh-markers-grid,
    .insight-grid,
    .recovery-factors,
    .ovarian-grid,
    .ovarian-indicators,
    .fertility-stats,
    .hormone-phases,
    .hr-zones,
    .sdk-grid { grid-template-columns: 1fr !important; }
    .goals-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ================================================================
   DEVICES PAGE
   ================================================================ */
@media (max-width: 768px) {
    .action-row { grid-template-columns: 1fr !important; }
    .command-grid { grid-template-columns: 1fr !important; }
    .comparison-grid { grid-template-columns: 1fr !important; }
    .device-metrics { grid-template-columns: 1fr !important; }
}

/* ================================================================
   CALIBRATION PAGE
   ================================================================ */
@media (max-width: 768px) {
    .calibration-grid { grid-template-columns: 1fr !important; }
    .coef-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .action-buttons { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
    .coef-grid { grid-template-columns: 1fr !important; }
}

/* ================================================================
   DIAGNOSTICS PAGE
   ================================================================ */
@media (max-width: 768px) {
    .status-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .action-buttons { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
    .status-grid { grid-template-columns: 1fr !important; }
}

/* ================================================================
   HISTORY PAGE
   ================================================================ */
@media (max-width: 768px) {
    .analyte-checkboxes { grid-template-columns: 1fr !important; }
}

/* ================================================================
   REPORTS PAGE
   ================================================================ */
@media (max-width: 768px) {
    .format-options { grid-template-columns: 1fr !important; }
}

/* ================================================================
   MFG TEST PAGE
   ================================================================ */
@media (max-width: 768px) {
    .mir-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .qcl-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
    .mir-grid { grid-template-columns: 1fr !important; }
}

/* ================================================================
   HELP PAGE
   ================================================================ */
@media (max-width: 768px) {
    .tutorials-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .contact-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
    .tutorials-grid { grid-template-columns: 1fr !important; }
}

/* ================================================================
   PRIVACY & TERMS PAGES
   ================================================================ */
@media (max-width: 768px) {
    .toc-grid { grid-template-columns: 1fr !important; }
    .rights-grid { grid-template-columns: 1fr !important; }
    .security-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .disclaimer-list { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
    .security-grid { grid-template-columns: 1fr !important; }
}

/* ================================================================
   SECURITY PAGE
   ================================================================ */
@media (max-width: 768px) {
    .cert-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ================================================================
   PUBLIC PAGE HEROES (community, developers, docs, hipaa, tutorials, security)
   ================================================================ */
@media (max-width: 768px) {
    .community-hero,
    .dev-hero,
    .docs-hero,
    .hipaa-hero,
    .tutorials-hero,
    .security-hero {
        grid-template-columns: 1fr !important;
    }
}

/* ================================================================
   FOOTER SYMMETRY — All Pages
   ================================================================ */
@media (max-width: 640px) {
    .footer-main {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
        text-align: center;
    }
    .footer-links-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 380px) {
    .footer-links-grid { grid-template-columns: 1fr !important; }
}