/* sync-status.css */
/* Styles for the sync status indicator in the control bar */

.sync-status {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    transition: opacity 0.3s ease, background-color 0.3s ease;
    margin-right: 8px;
}

/* Icon animation for syncing state */
.sync-status-icon {
    display: inline-block;
    font-size: 14px;
    line-height: 1;
}

.sync-status.syncing .sync-status-icon {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* State: Idle - Hidden */
.sync-status.idle {
    opacity: 0;
    pointer-events: none;
}

/* State: Syncing - Blue/Neutral */
.sync-status.syncing {
    background-color: rgba(66, 153, 225, 0.15);
    color: #4299e1;
}

/* State: Saved - Green */
.sync-status.saved {
    background-color: rgba(72, 187, 120, 0.15);
    color: #48bb78;
}

.sync-status.saved .sync-status-icon {
    color: #48bb78;
}

/* State: Offline - Yellow/Orange */
.sync-status.offline {
    background-color: rgba(237, 137, 54, 0.15);
    color: #ed8936;
    cursor: help;
}

.sync-status.offline .sync-status-icon {
    color: #ed8936;
}

/* State: Error - Red */
.sync-status.error {
    background-color: rgba(245, 101, 101, 0.15);
    color: #f56565;
    cursor: pointer;
}

.sync-status.error .sync-status-icon {
    color: #f56565;
}

.sync-status.error:hover {
    background-color: rgba(245, 101, 101, 0.25);
}

/* State: External - Purple (another user made changes) */
.sync-status.external {
    background-color: rgba(159, 122, 234, 0.15);
    color: #9f7aea;
}

.sync-status.external .sync-status-icon {
    color: #9f7aea;
    animation: bounce 0.5s ease 2;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* Dark theme adjustments */
[data-theme="dark"] .sync-status.syncing {
    background-color: rgba(66, 153, 225, 0.2);
    color: #63b3ed;
}

[data-theme="dark"] .sync-status.saved {
    background-color: rgba(72, 187, 120, 0.2);
    color: #68d391;
}

[data-theme="dark"] .sync-status.offline {
    background-color: rgba(237, 137, 54, 0.2);
    color: #f6ad55;
}

[data-theme="dark"] .sync-status.error {
    background-color: rgba(245, 101, 101, 0.2);
    color: #fc8181;
}

[data-theme="dark"] .sync-status.external {
    background-color: rgba(159, 122, 234, 0.2);
    color: #b794f4;
}

/* Light theme adjustments */
[data-theme="light"] .sync-status.syncing {
    background-color: rgba(49, 130, 206, 0.1);
    color: #3182ce;
}

[data-theme="light"] .sync-status.saved {
    background-color: rgba(56, 161, 105, 0.1);
    color: #38a169;
}

[data-theme="light"] .sync-status.offline {
    background-color: rgba(221, 107, 32, 0.1);
    color: #dd6b20;
}

[data-theme="light"] .sync-status.error {
    background-color: rgba(229, 62, 62, 0.1);
    color: #e53e3e;
}

[data-theme="light"] .sync-status.external {
    background-color: rgba(128, 90, 213, 0.1);
    color: #805ad5;
}

/* Blue theme adjustments */
[data-theme="blue"] .sync-status.syncing {
    background-color: rgba(99, 179, 237, 0.15);
    color: #90cdf4;
}

[data-theme="blue"] .sync-status.saved {
    background-color: rgba(104, 211, 145, 0.15);
    color: #9ae6b4;
}

[data-theme="blue"] .sync-status.offline {
    background-color: rgba(246, 173, 85, 0.15);
    color: #fbd38d;
}

[data-theme="blue"] .sync-status.error {
    background-color: rgba(252, 129, 129, 0.15);
    color: #feb2b2;
}

[data-theme="blue"] .sync-status.external {
    background-color: rgba(183, 148, 244, 0.15);
    color: #d6bcfa;
}

/* Tooltip for offline/error states */
.sync-status[title]:hover::after {
    content: attr(title);
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    background: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    z-index: 9999;
}

/* Responsive - hide text on very small screens */
@media (max-width: 500px) {
    .sync-status-text {
        display: none;
    }
    
    .sync-status {
        padding: 4px 6px;
    }
}