/* APP CHECK LIGHT THEME
   Aligns App Check with approved Homepage and About page visual system
   Scoped to .app-check-page body class only
   Does not affect other pages */

/* Override dark theme for App Check page only */
.app-check-page {
    background-color: #FFFFFF;
    color: #000000;
}

.app-check-page html {
    background-color: #FFFFFF;
}

/* Navbar remains gradient (brand element) */
.app-check-page .navbar-simple {
    background: linear-gradient(135deg, #FF6B6B 0%, #4ECDC4 100%);
}

/* Main container */
.app-check-page main.container {
    background-color: #FFFFFF;
    color: #000000;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

/* Page heading */
.app-check-page h1 {
    font-size: 2.5rem;
    font-weight: 800;
    color: #000000;
    margin-bottom: 1rem;
    line-height: 1.2;
}

/* Subtitle */
.app-check-page .subtitle {
    color: #333333;
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

/* Instructional text */
.app-check-page p[style*="text-align: center"],
.app-check-page p[style*="color: var(--text-gray)"] {
    color: #333333 !important;
}

/* Search input and controls */
.app-check-page #appSearch {
    background: #FFFFFF;
    color: #000000;
    border-color: #E8E8E8;
}

.app-check-page #appSearch::placeholder {
    color: #999999;
}

.app-check-page #appSearch:focus {
    outline: 2px solid #4ECDC4;
    outline-offset: 0;
}

/* Filter sections - light background with border */
.app-check-page div[style*="background: var(--bg-light)"] {
    background: #F9F9F9 !important;
}

.app-check-page div[style*="color: var(--text-dark)"] {
    color: #000000 !important;
}

/* Age filter buttons */
.app-check-page .age-filter-btn {
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
    border-radius: 6px;
    border: none;
}

.app-check-page .age-filter-btn[style*="background: var(--primary)"] {
    background: #4ECDC4 !important;
    color: white !important;
}

.app-check-page .age-filter-btn[style*="background: var(--border-color)"] {
    background: #E8E8E8 !important;
    color: #000000 !important;
}

.app-check-page .age-filter-btn:hover {
    opacity: 0.85;
}

/* Category dropdown */
.app-check-page #categoryFilter {
    background: #FFFFFF;
    color: #000000;
    border-color: #E8E8E8;
}

.app-check-page #categoryFilter:focus {
    outline: 2px solid #4ECDC4;
    outline-offset: 0;
}

/* App cards - rendered dynamically */
.app-check-page .app-card[style*="background: var(--bg-white)"] {
    background: #FFFFFF !important;
    border-color: #E8E8E8 !important;
}

.app-check-page .app-card h3[style*="color: var(--text-dark)"] {
    color: #000000 !important;
}

.app-check-page .app-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* App card text - category and description */
.app-check-page span[style*="color: var(--text-gray)"],
.app-check-page p[style*="color: var(--text-gray)"] {
    color: #333333 !important;
}

/* App card details button */
.app-check-page .app-card-details-btn[style*="color: var(--secondary)"] {
    color: #4ECDC4 !important;
}

/* Recommended Age badge */
.app-check-page div[style*="background: var(--bg-light)"][style*="Recommended Age"],
.app-check-page div[style*="📍"] {
    background: #F9F9F9 !important;
    color: #333333 !important;
}

/* Alert/Warning box (red flags) */
.app-check-page div[style*="background: rgba(231, 76, 60"] {
    background: rgba(231, 76, 60, 0.05) !important;
    border-left-color: #D32F2F !important;
}

.app-check-page p[style*="color: var(--danger)"] {
    color: #D32F2F !important;
}

/* Section headers in expanded view */
.app-check-page h4[style*="color: var(--primary)"] {
    color: #000000 !important;
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 0.75rem 0;
}

/* Detail section backgrounds */
.app-check-page div[style*="background: var(--bg-light)"][style*="padding"] {
    background: #F9F9F9 !important;
}

.app-check-page div[style*="border-left: 3px solid var(--secondary)"] {
    border-left-color: #4ECDC4 !important;
}

/* Exposure section - preserve semantic colors */
.app-check-page div[style*="background: rgba(76, 175, 80"] {
    background: rgba(76, 175, 80, 0.05) !important;
    border-left-color: #4CAF50 !important;
}

.app-check-page h5[style*="color: #4CAF50"] {
    color: #4CAF50 !important;
}

/* List and descriptive text */
.app-check-page ul,
.app-check-page ol {
    color: #333333;
}

.app-check-page li {
    color: #333333;
}

/* Strong text emphasis */
.app-check-page strong {
    color: #000000;
}

/* Link styling in "What Can I Do Next?" section */
.app-check-page a[href*="/talk"],
.app-check-page a[href*="protect.html"],
.app-check-page a[href*="respond.html"] {
    background: #F9F9F9 !important;
    color: #FF6B6B !important;
    text-decoration: none;
    transition: background 0.2s ease;
}

.app-check-page a[href*="/talk"]:hover,
.app-check-page a[href*="protect.html"]:hover,
.app-check-page a[href*="respond.html"]:hover {
    background: #EFEFEF !important;
}

/* Back to Top button */
.app-check-page #backToTopBtn {
    background-color: #4ECDC4;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.app-check-page #backToTopBtn:hover {
    background-color: #2B9E92;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.app-check-page #backToTopBtn:focus {
    outline: 2px solid #4ECDC4;
    outline-offset: 2px;
}

/* Footer */
.app-check-page .footer {
    background-color: #F5F5F5;
    color: #555555;
    padding: 2rem;
    text-align: center;
    font-size: 0.95rem;
}

.app-check-page .footer a {
    color: #4ECDC4;
    text-decoration: none;
}

.app-check-page .footer a:hover {
    text-decoration: underline;
}

/* Buttons */
.app-check-page .btn {
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
}

.app-check-page .btn-secondary {
    background: #E8E8E8;
    color: #000000;
    border: none;
    padding: 0.75rem 1rem;
    border-radius: 6px;
}

.app-check-page .btn-secondary:hover {
    background: #D0D0D0;
}

.app-check-page .btn-secondary:focus {
    outline: 2px solid #4ECDC4;
    outline-offset: 2px;
}

/* Loading and empty state text */
.app-check-page p[style*="color: var(--text-gray)"][style*="padding"],
.app-check-page p[style*="color: red"] {
    color: #333333 !important;
}

/* COMPREHENSIVE DARK-THEME VARIABLE OVERRIDES */

/* All text using var(--text-gray) = #B0B0B0 (pale) → #333333 (readable) */
.app-check-page span[style*="color: var(--text-gray)"],
.app-check-page p[style*="color: var(--text-gray)"],
.app-check-page li[style*="color: var(--text-gray)"],
.app-check-page ul[style*="color: var(--text-gray)"],
.app-check-page div[style*="color: var(--text-gray)"],
.app-check-page strong[style*="color: var(--text-gray)"] {
    color: #333333 !important;
}

/* All headings using var(--text-dark) = #E8E8E8 (pale) → #000000 (black) */
.app-check-page h2[style*="color: var(--text-dark)"],
.app-check-page h3[style*="color: var(--text-dark)"],
.app-check-page h4[style*="color: var(--text-dark)"],
.app-check-page h5[style*="color: var(--text-dark)"],
.app-check-page p[style*="color: var(--text-dark)"],
.app-check-page span[style*="color: var(--text-dark)"],
.app-check-page strong[style*="color: var(--text-dark)"],
.app-check-page div[style*="color: var(--text-dark)"] {
    color: #000000 !important;
}

/* All backgrounds using var(--bg-light) = #1A1A1A (dark) → #F9F9F9 (light) */
.app-check-page div[style*="background: var(--bg-light)"],
.app-check-page section[style*="background: var(--bg-light)"] {
    background: #F9F9F9 !important;
}

/* All backgrounds using var(--bg-white) = #2D2D2D (dark charcoal) → #FFFFFF (white) */
.app-check-page input[style*="background: var(--bg-white)"],
.app-check-page select[style*="background: var(--bg-white)"],
.app-check-page div[style*="background: var(--bg-white)"],
.app-check-page section[style*="background: var(--bg-white)"] {
    background: #FFFFFF !important;
}

/* Category dropdown specific fix */
.app-check-page #categoryFilter {
    background: #FFFFFF !important;
    color: #000000 !important;
    border-color: #E8E8E8 !important;
}

.app-check-page #categoryFilter option {
    background: #FFFFFF;
    color: #000000;
}

/* Form labels and field descriptions */
.app-check-page div[style*="font-weight: 600"] {
    color: #000000 !important;
}

/* Links within dynamic content */
.app-check-page a[style*="color: var(--text-gray)"] {
    color: #FF6B6B !important;
    text-decoration: underline;
}

.app-check-page a[style*="color: var(--text-dark)"] {
    color: #FF6B6B !important;
    text-decoration: underline;
}

/* Borders */
.app-check-page div[style*="border-color: var(--border-color)"],
.app-check-page section[style*="border-color: var(--border-color)"] {
    border-color: #E8E8E8 !important;
}

/* Tablet adjustments */
@media (max-width: 1024px) {
    .app-check-page main.container {
        max-width: 100%;
        padding: 1.5rem;
    }

    .app-check-page h1 {
        font-size: 2rem;
    }

    .app-check-page .subtitle {
        font-size: 1rem;
    }
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .app-check-page main.container {
        padding: 1rem;
    }

    .app-check-page h1 {
        font-size: 1.8rem;
        margin-bottom: 0.75rem;
    }

    .app-check-page .subtitle {
        font-size: 0.95rem;
    }

    .app-check-page .age-filter-btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }

    .app-check-page #backToTopBtn {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }

    .app-check-page #categoryFilter {
        width: 100%;
        max-width: 100%;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .app-check-page main.container {
        padding: 0.75rem;
    }

    .app-check-page h1 {
        font-size: 1.5rem;
    }

    .app-check-page .subtitle {
        font-size: 0.9rem;
    }

    .app-check-page #categoryFilter {
        width: 100%;
    }
}