/* Simulator-specific styles */
.sim-header {
    background: linear-gradient(135deg, #696cff 0%, #5f61e6 100%);
    color: #fff;
    border-radius: 0.5rem;
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
}
.sim-header h4,
.sim-header span { color: #fff; }
.sim-header .badge { font-size: 0.85rem; }

.progress { height: 1.25rem; border-radius: 0.5rem; }
.progress-bar { font-size: 0.75rem; line-height: 1.25rem; }

.mqtt-status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.mqtt-status.connected { background: #71dd37; }
.mqtt-status.disconnected { background: #ff3e1d; }

.upload-zone {
    border: 2px dashed #d9dee3;
    border-radius: 0.5rem;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}
.upload-zone:hover { border-color: #696cff; background: rgba(105, 108, 255, 0.04); }
.upload-zone.uploaded { border-color: #71dd37; background: rgba(113, 221, 55, 0.04); }
.upload-zone i { font-size: 2.5rem; color: #a1acb8; }
.upload-zone.uploaded i { color: #71dd37; }

.step-completed {
    background-color: #71dd37 !important;
    border-color: #71dd37 !important;
}

.config-preview {
    background: #f5f5f9;
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 0.8125rem;
}

.setup-step {
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.setup-step:last-child { border-bottom: none; }
.setup-step .step-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.setup-step .step-icon.done { background: rgba(113, 221, 55, 0.16); color: #71dd37; }
.setup-step .step-icon.running { background: rgba(105, 108, 255, 0.16); color: #696cff; }
.setup-step .step-icon.pending { background: rgba(161, 172, 184, 0.16); color: #a1acb8; }

.conn-status { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.conn-status.ok { background: #71dd37; }
.conn-status.fail { background: #ff3e1d; }
.conn-status.unknown { background: #a1acb8; }

.inbound-item {
    padding: 0.75rem;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.inbound-item:last-child { border-bottom: none; }
.inbound-item:hover { background: rgba(105, 108, 255, 0.04); }