/* COMPREHENSIVE MOBILE STATUS FIX */
/* This file provides complete fixes for ALL status icons and alignment issues */

/* Force single-line horizontal layout on mobile */
@media (max-width: 768px) {
    /* Override scanner header to be truly horizontal */
    .scanner-header {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 1rem !important;
        flex-wrap: nowrap !important;
        gap: 0.75rem !important;
    }

    .scanner-header h2 {
        margin: 0 !important;
        font-size: 1.1rem !important;
        flex-shrink: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* UNIFIED STATUS CONTAINER - All status elements in one row */
    .scanner-status-container {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.375rem !important;
        flex-shrink: 0 !important;
        flex-wrap: nowrap !important;
        margin: 0 !important;
    }

    /* Include ALL status elements in the container */
    .scanner-status-container,
    .status-indicator-container {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.375rem !important;
        flex-shrink: 0 !important;
        flex-wrap: nowrap !important;
        margin: 0 !important;
    }

    /* SIMPLIFIED STATUS BADGE STYLING - Only sync status and details button */
    .sync-status-compact,
    .status-details-btn {
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.25rem !important;
        padding: 0.25rem 0.5rem !important;
        border-radius: 12px !important;
        font-size: 0.7rem !important;
        font-weight: 500 !important;
        white-space: nowrap !important;
        margin: 0 !important;
        min-width: auto !important;
        flex-shrink: 0 !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        position: relative !important;
        border: 1px solid transparent !important;
    }

    /* SIMPLIFIED STATUS COLORS - Only sync status needs colors */
    
    /* Online (Green) */
    .sync-status-compact.online {
        background: #d4edda !important;
        color: #155724 !important;
        border-color: #c3e6cb !important;
    }

    /* Syncing (Yellow) */
    .sync-status-compact.syncing {
        background: #fff3cd !important;
        color: #856404 !important;
        border-color: #ffeaa7 !important;
    }

    /* Offline/Error (Red) */
    .sync-status-compact:not(.online):not(.syncing),
    .sync-status-compact.offline,
    .sync-status-compact.error {
        background: #f8d7da !important;
        color: #721c24 !important;
        border-color: #f5c6cb !important;
    }

    /* SPECIFIC TEXT COLORS: Override rgba(255, 255, 255, 0.8) with proper status colors */
    .sync-status-compact.online .sync-status-text {
        color: #155724 !important; /* Dark green for online */
    }

    .sync-status-compact.syncing .sync-status-text {
        color: #856404 !important; /* Dark yellow for syncing */
    }

    .sync-status-compact.offline .sync-status-text,
    .sync-status-compact.error .sync-status-text,
    .sync-status-compact:not(.online):not(.syncing) .sync-status-text {
        color: #721c24 !important; /* Dark red for offline/error */
    }

    /* Details button styling */
    .status-details-btn {
        background: #e9ecef !important;
        color: #495057 !important;
        border-color: #ced4da !important;
        padding: 0.2rem 0.4rem !important;
    }

    .status-details-btn:hover {
        background: #dee2e6 !important;
        border-color: #adb5bd !important;
    }

    /* SIMPLIFIED STATUS DOTS - Only sync indicator */
    .sync-status-indicator {
        width: 6px !important;
        height: 6px !important;
        border-radius: 50% !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        animation: none !important; /* Remove distracting animations on mobile */
    }

    /* Simplified sync indicator colors */
    .sync-status-indicator.online {
        background: #28a745 !important;
        box-shadow: 0 0 4px rgba(40, 167, 69, 0.4) !important;
    }

    .sync-status-indicator.syncing {
        background: #ffc107 !important;
        box-shadow: 0 0 4px rgba(255, 193, 7, 0.4) !important;
    }

    .sync-status-indicator.offline,
    .sync-status-indicator.error {
        background: #dc3545 !important;
        box-shadow: 0 0 4px rgba(220, 53, 69, 0.4) !important;
    }

    /* HOVER TOOLTIPS for all status elements */
    .scanner-status::before,
    .sync-status-compact::before,
    .status-indicator::before,
    .status-details-btn::before {
        content: attr(title) !important;
        position: absolute !important;
        bottom: 100% !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        background: rgba(0, 0, 0, 0.9) !important;
        color: white !important;
        padding: 0.375rem 0.5rem !important;
        border-radius: 4px !important;
        font-size: 0.65rem !important;
        white-space: nowrap !important;
        z-index: 1000 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: all 0.2s ease !important;
        margin-bottom: 0.25rem !important;
        pointer-events: none !important;
    }

    .scanner-status:hover::before,
    .sync-status-compact:hover::before,
    .status-indicator:hover::before,
    .status-details-btn:hover::before {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* SIMPLE STATUS TEXT COLOR FIX */
    .sync-status-text {
        color: #2c3e50 !important; /* Override rgba(255, 255, 255, 0.8) */
        font-weight: 500 !important;
        line-height: 1 !important;
    }

    /* Specific colors for each status state - more specific selectors */
    .scanner-status.ready .scanner-text,
    .scanner-status.ready span:not(.scanner-indicator),
    .scanner-status:not(.error):not(.warning) .scanner-text,
    .scanner-status:not(.error):not(.warning) span:not(.scanner-indicator),
    .sync-status-compact.online .sync-status-text,
    .sync-status-compact.online span:not(.sync-status-indicator),
    .status-indicator.success .status-text,
    .status-indicator.success span:not(.status-light) {
        color: #155724 !important; /* Dark green for ready/success states */
    }

    .scanner-status.warning .scanner-text,
    .scanner-status.warning span:not(.scanner-indicator),
    .sync-status-compact.syncing .sync-status-text,
    .sync-status-compact.syncing span:not(.sync-status-indicator),
    .status-indicator.warning .status-text,
    .status-indicator.warning span:not(.status-light) {
        color: #856404 !important; /* Dark yellow for warning states */
    }

    .scanner-status.error .scanner-text,
    .scanner-status.error span:not(.scanner-indicator),
    .sync-status-compact:not(.online):not(.syncing) .sync-status-text,
    .sync-status-compact:not(.online):not(.syncing) span:not(.sync-status-indicator),
    .sync-status-compact.offline .sync-status-text,
    .sync-status-compact.offline span:not(.sync-status-indicator),
    .sync-status-compact.error .sync-status-text,
    .sync-status-compact.error span:not(.sync-status-indicator),
    .status-indicator.error .status-text,
    .status-indicator.error span:not(.status-light) {
        color: #721c24 !important; /* Dark red for error states */
    }

    .status-indicator.unknown .status-text,
    .status-indicator.unknown span:not(.status-light),
    .status-indicator.disabled .status-text,
    .status-indicator.disabled span:not(.status-light) {
        color: #495057 !important; /* Dark gray for unknown/disabled states */
    }

    /* Apply specific status colors */
    .sync-status-compact.online .sync-status-text {
        color: #155724 !important; /* Dark green for online */
    }

    .sync-status-compact.syncing .sync-status-text {
        color: #856404 !important; /* Dark yellow for syncing */
    }

    .sync-status-compact.offline .sync-status-text,
    .sync-status-compact.error .sync-status-text {
        color: #721c24 !important; /* Dark red for offline/error */
    }

    /* STATUS ICONS - Consistent sizing */
    .status-icon {
        font-size: 0.75rem !important;
        line-height: 1 !important;
    }

    /* Status legend removed - no longer needed with simplified status */

    /* Ensure no vertical stacking anywhere */
    .scanner-header > *,
    .scanner-status-container > *,
    .status-indicator-container > * {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Force any status containers to be horizontal */
    .status-indicator-container {
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.375rem !important;
    }

    /* CRITICAL: Prevent connectivity status from creating separate rows */
    #connectivityStatus,
    .connectivity-status {
        display: none !important; /* Hide old separate container */
    }

    /* Ensure connectivity validator elements integrate with main container */
    .scanner-status-container .status-indicator,
    .scanner-status-container .status-details-btn {
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.25rem !important;
        padding: 0.25rem 0.5rem !important;
        border-radius: 12px !important;
        font-size: 0.7rem !important;
        font-weight: 500 !important;
        white-space: nowrap !important;
        margin: 0 !important;
        min-width: auto !important;
        flex-shrink: 0 !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        position: relative !important;
        border: 1px solid transparent !important;
    }

    /* Remove any margins or positioning that might cause line breaks */
    .scanner-header > *,
    .scanner-status-container > * {
        margin: 0 !important;
        float: none !important;
        position: static !important;
    }
}

/* Small screens - even more compact */
@media (max-width: 480px) {
    .scanner-header {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    .scanner-header h2 {
        width: 100% !important;
        margin-bottom: 0.5rem !important;
        font-size: 1rem !important;
    }

    .scanner-status-container {
        width: 100% !important;
        justify-content: center !important;
        gap: 0.5rem !important;
    }

    /* Icon-only mode for very small screens */
    .scanner-status,
    .sync-status-compact,
    .status-indicator,
    .status-details-btn {
        padding: 0.375rem !important;
        border-radius: 50% !important;
        width: 32px !important;
        height: 32px !important;
        justify-content: center !important;
        position: relative !important;
    }

    /* Hide text labels on small screens */
    .scanner-text,
    .sync-status-text,
    .status-text {
        display: none !important;
    }

    .scanner-indicator,
    .sync-status-indicator,
    .status-light {
        width: 8px !important;
        height: 8px !important;
    }

    /* Emoji labels below icons for identification */
    .scanner-status::after {
        content: "📱" !important;
        position: absolute !important;
        bottom: -1.25rem !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        font-size: 0.6rem !important;
        opacity: 0.7 !important;
    }

    .sync-status-compact::after {
        content: "☁️" !important;
        position: absolute !important;
        bottom: -1.25rem !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        font-size: 0.6rem !important;
        opacity: 0.7 !important;
    }

    .status-indicator::after {
        content: "ℹ️" !important;
        position: absolute !important;
        bottom: -1.25rem !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        font-size: 0.6rem !important;
        opacity: 0.7 !important;
    }

    .status-details-btn::after {
        content: "📋" !important;
        position: absolute !important;
        bottom: -1.25rem !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        font-size: 0.6rem !important;
        opacity: 0.7 !important;
    }

    /* Add space for icon labels */
    .scanner-header {
        margin-bottom: 1.75rem !important;
    }

    /* Adjust tooltip position for small screens */
    .scanner-status::before,
    .sync-status-compact::before,
    .status-indicator::before,
    .status-details-btn::before {
        bottom: 120% !important;
        font-size: 0.6rem !important;
        padding: 0.25rem 0.375rem !important;
    }
}

/* Ultra-compact mode for very tight spaces */
@media (max-width: 360px) {
    .scanner-header h2 {
        font-size: 0.9rem !important;
    }

    .scanner-status,
    .sync-status-compact,
    .status-indicator,
    .status-details-btn {
        width: 28px !important;
        height: 28px !important;
        padding: 0.25rem !important;
    }

    .scanner-indicator,
    .sync-status-indicator,
    .status-light {
        width: 6px !important;
        height: 6px !important;
    }

    .scanner-status-container {
        gap: 0.375rem !important;
    }
}

/* Pulse animation for syncing - only on larger screens */
@media (min-width: 481px) {
    .sync-status-indicator.syncing,
    .status-light.warning {
        animation: pulse-mini 1.5s infinite !important;
    }
}

@keyframes pulse-mini {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

/* Touch feedback for mobile */
@media (max-width: 768px) {
    .scanner-status:active,
    .sync-status-compact:active,
    .status-indicator:active,
    .status-details-btn:active {
        transform: scale(0.95) !important;
        opacity: 0.8 !important;
    }
}

/* Small screens - even more compact */
@media (max-width: 480px) {
    .scanner-header {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    .scanner-header h2 {
        width: 100% !important;
        margin-bottom: 0.5rem !important;
        font-size: 1rem !important;
    }

    .scanner-status-container {
        width: 100% !important;
        justify-content: center !important;
        gap: 0.75rem !important;
    }

    /* Icon-only mode */
    .scanner-status,
    .sync-status-compact {
        padding: 0.375rem !important;
        border-radius: 50% !important;
        width: 32px !important;
        height: 32px !important;
        justify-content: center !important;
        position: relative !important;
    }

    .scanner-text,
    .sync-status-text {
        display: none !important;
    }

    .scanner-indicator,
    .sync-status-indicator {
        width: 8px !important;
        height: 8px !important;
    }

    /* Emoji labels below icons */
    .scanner-status::after {
        content: "📱" !important;
        position: absolute !important;
        bottom: -1.25rem !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        font-size: 0.6rem !important;
    }

    .sync-status-compact::after {
        content: "☁️" !important;
        position: absolute !important;
        bottom: -1.25rem !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        font-size: 0.6rem !important;
    }

    .scanner-header {
        margin-bottom: 1.5rem !important;
    }
}

/* Pulse animation for syncing */
@keyframes pulse-mini {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

.sync-status-indicator.syncing {
    animation: pulse-mini 1.5s infinite !important;
}

/* Touch feedback */
@media (max-width: 768px) {
    .scanner-status:active,
    .sync-status-compact:active {
        transform: scale(0.95) !important;
        opacity: 0.8 !important;
    }
}