/* Mobile Status Icons Optimization - Ultra Compact */

/* Override default scanner header layout for mobile */
@media (max-width: 768px) {
    /* Make scanner header single line with title and status inline */
    .scanner-header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
        flex-wrap: nowrap;
    }

    .scanner-header h2 {
        margin-bottom: 0;
        font-size: 1.1rem;
        flex-shrink: 1;
        min-width: 0;
    }

    /* Ultra compact horizontal status container */
    .scanner-status-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
        flex-shrink: 0;
        flex-wrap: nowrap;
    }

    /* Minimal status badges - just colored dots with tiny text */
    .scanner-status,
    .sync-status-compact {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.25rem 0.5rem;
        border-radius: 12px;
        font-size: 0.7rem;
        font-weight: 500;
        min-width: auto;
        flex-shrink: 0;
        cursor: pointer;
        transition: all 0.2s ease;
        border: 1px solid transparent;
    }

    /* Scanner status colors */
    .scanner-status.ready,
    .scanner-status:not(.error):not(.warning) {
        background: #d4edda;
        color: #155724;
        border-color: #c3e6cb;
    }

    .scanner-status.warning {
        background: #fff3cd;
        color: #856404;
        border-color: #ffeaa7;
    }

    .scanner-status.error {
        background: #f8d7da;
        color: #721c24;
        border-color: #f5c6cb;
    }

    /* Sync status colors */
    .sync-status-compact.online {
        background: #d4edda;
        color: #155724;
        border-color: #c3e6cb;
    }

    .sync-status-compact.syncing {
        background: #fff3cd;
        color: #856404;
        border-color: #ffeaa7;
    }

    .sync-status-compact:not(.online):not(.syncing),
    .sync-status-compact.offline,
    .sync-status-compact.error {
        background: #f8d7da;
        color: #721c24;
        border-color: #f5c6cb;
    }

    /* Tiny status indicators */
    .scanner-indicator,
    .sync-status-indicator {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        flex-shrink: 0;
        margin-right: 0.125rem;
    }

    .scanner-indicator.ready {
        background: #28a745;
    }

    .scanner-indicator.warning {
        background: #ffc107;
    }

    .scanner-indicator.error {
        background: #dc3545;
    }

    .sync-status-indicator.online {
        background: #28a745;
    }

    .sync-status-indicator.syncing {
        background: #ffc107;
        animation: pulse-mini 1.5s infinite;
    }

    .sync-status-indicator.offline,
    .sync-status-indicator.error {
        background: #dc3545;
    }

    /* Compact status text */
    .scanner-text,
    .sync-status-text {
        font-weight: 500;
        white-space: nowrap;
        line-height: 1;
    }

    /* Status legend removed completely - no longer needed */

    /* Hover effects for better mobile interaction */
    .scanner-status:active,
    .sync-status-compact:active {
        transform: scale(0.95);
        opacity: 0.8;
    }
}

/* Extra small screens - icon only mode */
@media (max-width: 480px) {
    .scanner-header {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

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

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

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

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

    .scanner-indicator,
    .sync-status-indicator {
        width: 8px;
        height: 8px;
        margin: 0;
    }

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

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

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

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

/* Force single line layout - override any existing styles */
@media (max-width: 768px) {
    .scanner-status-container {
        flex-wrap: nowrap !important;
        overflow: visible;
    }

    /* Ensure no vertical stacking */
    .scanner-status,
    .sync-status-compact {
        margin: 0 !important;
        display: inline-flex !important;
    }

    /* Remove any margins that might cause vertical spacing */
    .scanner-header > * {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

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

    .scanner-status,
    .sync-status-compact {
        padding: 0.25rem;
        font-size: 0.65rem;
        width: 28px;
        height: 28px;
    }

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