/* ═══════════════════════════════════════════
   FLRR MOBILE CSS
   Blue-themed mobile overrides for all pages
   Linked by: all pages
═══════════════════════════════════════════ */

/* ── Extra small screens (phones ≤ 480px) ── */
@media (max-width: 480px) {
    .container {
        padding: 0.5rem;
    }

    .header-content {
        gap: 0.4rem;
    }

    .page-title {
        font-size: 1.25rem;
    }

    .category-link {
        padding: 0.6rem;
    }
}

/* ── Mobile ≤ 768px — Blue-themed accent styles ── */
@media (max-width: 768px) {

    /* Native accent-color override — ensures form controls render blue */
    input, select, textarea, button {
        accent-color: #3b82f6;
    }

    /* Force text selection to use blue */
    ::selection {
        background: rgba(59, 130, 246, 0.35);
        color: #fff;
    }

    /* Header blue border */
    .header {
        border-bottom-color: rgba(59, 130, 246, 0.25);
    }

    /* Category link hover/active blue styling */
    .category-link:hover,
    .category-link.active {
        border-color: rgba(59, 130, 246, 0.35);
        box-shadow: 0 0 12px rgba(59, 130, 246, 0.12);
    }

    /* Accent text */
    .accent,
    .text-accent {
        color: #3b82f6;
    }

    /* Active/selected state accents */
    .active-indicator,
    .selected-indicator {
        background: #3b82f6;
    }

    /* Button primary blue */
    .btn-primary,
    .btn.primary {
        background: #3b82f6;
        border-color: #3b82f6;
    }

    .btn-primary:active,
    .btn.primary:active {
        background: #2563eb;
    }

    /* Focus outlines in blue */
    :focus-visible {
        outline: 2px solid #3b82f6;
        outline-offset: 2px;
    }

    /* Scrollbar in blue */
    ::-webkit-scrollbar-thumb {
        background: rgba(59, 130, 246, 0.5);
        border-radius: 3px;
    }

    /* Progress bars / activity bars */
    .activity-bar-fill,
    .progress-bar-fill,
    [class*="bar-fill"] {
        background: #3b82f6;
    }

    /* Status/badge indicators */
    .badge-accent,
    .status-active,
    .status-online {
        background: rgba(59, 130, 246, 0.15);
        color: #3b82f6;
        border-color: rgba(59, 130, 246, 0.3);
    }

    /* Links */
    a[class*="accent"],
    .link-accent {
        color: #3b82f6;
    }

    a[class*="accent"]:hover,
    .link-accent:hover {
        color: #60a5fa;
    }

    /* Input focus state */
    input:focus,
    select:focus,
    textarea:focus {
        border-color: rgba(59, 130, 246, 0.5) !important;
        outline: none;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
    }

    /* Glow animation keyframe for mobile */
    @keyframes glowPulseMobile {
        0%   { box-shadow: 0 0 0 rgba(59, 130, 246, 0); }
        50%  { box-shadow: 0 0 24px rgba(59, 130, 246, 0.4), 0 0 48px rgba(59, 130, 246, 0.15); }
        100% { box-shadow: 0 0 0 rgba(59, 130, 246, 0); }
    }

    /* Apply blue glow to active animated elements */
    .glow-in.active {
        animation: glowPulseMobile 0.8s ease 0.5s;
    }

    /* ── Mobile blue accent color guard ── */
    :root {
        --accent: #3b82f6 !important;
        --accent-dark: #2563eb !important;
        --accent-hover: #1d4ed8 !important;
        --accent-dk: #2563eb !important;
        --warning: #3b82f6 !important;
        accent-color: #3b82f6 !important;
    }

    /* Force blue chat bubble on mobile — hardcoded to prevent cached orange */
    .chat-bubble {
        background: #3b82f6 !important;
    }

    .chat-bubble:hover {
        background: #2563eb !important;
    }
}