/* Status Styles */
:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --light-gray: #f8f9fa;
    --border-color: #e0e0e0;
    --text-color: #333;
    --text-secondary: #666;
}

/* Financial Status Styles */
.order-status {
    text-align: right;
    padding: 0rem 0.5rem;
    border-radius: 4px;
    font-weight: 500;
}

.status-wrapper {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    min-width: 0;
    max-width: 100%;
}

.dual-status {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    min-width: 0;
    max-width: 100%;
}

.status-text {
    padding: 2px 6px;
    border-radius: 16px;
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    white-space: nowrap;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 1 auto;
}

/* Financial status colors */
.status-text.paid {
    background-color: #e3fcef;
    color: #0c6b58;
}

.status-text.pending {
    background-color: #fef3c7;
    color: #92400e;
}

.status-text.authorized {
    background-color: #e0f2fe;
    color: #075985;
}

.status-text.partially_paid {
    background-color: #f0fdf4;
    color: #166534;
}

.status-text.partially_refunded {
    background-color: #fae8ff;
    color: #86198f;
}

.status-text.refunded {
    background-color: #ede9fe;
    color: #5b21b6;
}

.status-text.voided {
    background-color: #f3f4f6;
    color: #4b5563;
}

.status-text.expired {
    background-color: #fee2e2;
    color: #991b1b;
}

.status-text.on_hold {
    background-color: #e3f2fd;
    color: #1976d2;
}

.status-text.layby {
    background-color: #fff3e0;
    color: #e65100;
}

/* Tag-driven configurable badges (colors set inline from Admin rules) */
.status-text.tag-badge {
    max-width: 7.5rem;
}

/* Connection Status */
.connection-status {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    padding: 0.5rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    transition: all 0.3s ease;
}

.connection-status .status-icon {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    /* Boot default: red (not grey) before JS applies a phase */
    background: var(--danger-color, #dc3545);
    transition: all 0.3s ease;
    position: relative;
}

/* Status States
 * red  = boot / offline / disconnected / error
 * orange = connecting
 * green = connected / refreshing
 * blue = syncing
 */
.connection-status.boot,
.connection-status.offline,
.connection-status.disconnected,
.connection-status.error {
    background: rgba(220, 53, 69, 0.1);
}

.connection-status.boot .status-icon,
.connection-status.offline .status-icon,
.connection-status.disconnected .status-icon,
.connection-status.error .status-icon {
    background: var(--danger-color, #dc3545);
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.2);
}

.connection-status.connected {
    background: rgba(40, 167, 69, 0.1);
}

.connection-status.connected .status-icon {
    background: var(--success-color, #28a745);
    box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.2);
}

.connection-status.connecting {
    background: rgba(255, 160, 0, 0.1);
}

.connection-status.connecting .status-icon {
    background: #ffa000;
    box-shadow: 0 0 0 2px rgba(255, 160, 0, 0.2);
}

.connection-status.syncing {
    background: rgba(47, 111, 237, 0.1);
}

.connection-status.syncing .status-icon {
    background: #2f6fed;
    box-shadow: 0 0 0 2px rgba(47, 111, 237, 0.2);
}

/* Status Icon Animation */
.connection-status.connecting .status-icon.pulse {
    animation: pulse-orange 1.5s infinite;
}

.connection-status.syncing .status-icon.pulse {
    animation: pulse-blue 1.5s infinite;
}

@keyframes pulse-orange {
    0% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 160, 0, 0.4);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.2);
        box-shadow: 0 0 0 4px rgba(255, 160, 0, 0);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 160, 0, 0);
    }
}

@keyframes pulse-blue {
    0% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(47, 111, 237, 0.4);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.2);
        box-shadow: 0 0 0 4px rgba(47, 111, 237, 0);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(47, 111, 237, 0);
    }
}

/* Responsive adjustments moved to responsive.css */