/* ============================================================================
   SYNC STATUS INDICATOR
   ============================================================================ */

.sync-status-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    cursor: pointer;
    transition: all var(--transition-fast);
    user-select: none;
}

.sync-status-indicator:hover {
    background: var(--surface-secondary);
}

.sync-status-indicator .sync-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.sync-status-indicator .sync-text {
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Synced state */
.sync-status-indicator[data-state="synced"] .sync-icon {
    color: var(--color-green-text);
}

/* Syncing state with animation */
.sync-status-indicator[data-state="syncing"] .sync-icon {
    color: var(--primary);
    animation: spin 1s linear infinite;
}

/* Pending state */
.sync-status-indicator[data-state="pending"] .sync-icon {
    color: var(--color-amber-text);
}

.sync-status-indicator[data-state="pending"] .sync-badge {
    background: var(--color-amber-fill);
    color: var(--color-on-amber);
    font-size: var(--font-size-2xs);
    padding: 1px 5px;
    border-radius: var(--radius-full);
    font-weight: 600;
}

/* Offline state */
.sync-status-indicator[data-state="offline"] .sync-icon {
    color: var(--text-tertiary);
}

/* Error state */
.sync-status-indicator[data-state="error"] .sync-icon {
    color: var(--color-red-text);
}

/* Optimistic item visual treatment */
.task-row._isOptimistic,
.project-item._isOptimistic,
.area-item._isOptimistic,
.note-item._isOptimistic {
    opacity: 0.7;
}

.task-row._isOptimistic::after,
.project-item._isOptimistic::after,
.area-item._isOptimistic::after,
.note-item._isOptimistic::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(var(--primary-rgb), 0.03) 10px,
        rgba(var(--primary-rgb), 0.03) 20px
    );
}

/* Sidebar sync status - very subtle */
.sidebar-sync-status {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 0;
}

.sidebar-sync-status .sync-status-indicator {
    padding: 0;
    background: none;
}

.sidebar-sync-status .sync-status-indicator:hover {
    background: none;
}

.sidebar-sync-status .sync-status-btn {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
}

.sidebar-sync-status .sync-status-btn:hover {
    background: var(--surface-hover);
}

.sidebar-sync-status .sync-status-icon {
    width: 6px;
    height: 6px;
    display: block;
}

.sidebar-sync-status .sync-status-icon svg {
    display: none;
}

/* Subtle dot indicator */
.sidebar-sync-status .sync-status-icon::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-radius: var(--radius-circle);
    background: var(--text-quaternary);
    transition: all var(--transition-fast);
}

/* Synced - subtle gray, nearly invisible */
.sidebar-sync-status .sync-status-indicator[data-state="synced"] .sync-status-icon::before {
    background: var(--text-quaternary);
    opacity: 0.4;
}

/* Syncing - pulsing primary color */
.sidebar-sync-status .sync-status-indicator[data-state="syncing"] .sync-status-icon::before {
    background: var(--primary);
    animation: pulse-dot 1s ease-in-out infinite;
}

/* Pending - warning color */
.sidebar-sync-status .sync-status-indicator[data-state="pending"] .sync-status-icon::before {
    background: var(--color-amber);
}

/* Offline - muted */
.sidebar-sync-status .sync-status-indicator[data-state="offline"] .sync-status-icon::before {
    background: var(--text-tertiary);
    opacity: 0.5;
}

/* Error - red */
.sidebar-sync-status .sync-status-indicator[data-state="error"] .sync-status-icon::before {
    background: var(--color-red);
}

/* Hide badge in sidebar version */
.sidebar-sync-status .sync-status-badge {
    display: none !important;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

/* ============================================================================
   END SYNC STATUS INDICATOR
   ============================================================================ */