/* ============================================================
   TASKS.CSS — AI Task Panel Styles (Phase 3)
   Task execution UI, progress indicators, dependency states,
   result panels, and task status badges.
   ============================================================ */

/* ─── TASK PANEL CONTAINER ─────────────────────────────────── */
.task-panel {
    margin-top: 20px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    background: var(--bg-card, #fff);
    overflow: hidden;
}

.task-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border, #e5e7eb);
    background: var(--bg-secondary, #f9fafb);
}

.task-panel-header h3 {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary, #1d1d1f);
}

.task-panel-count {
    font-size: 12px;
    color: var(--text-muted, #8e8e93);
}

.task-panel-body {
    padding: 12px 18px;
}

/* ─── INDIVIDUAL TASK ROW ──────────────────────────────────── */
.task-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-light, #f1f5f9);
}

.task-row:last-child {
    border-bottom: none;
}

.task-status-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 13px;
}

.task-status-icon.pending { background: var(--bg-secondary, #f1f5f9); color: var(--text-muted, #8e8e93); }
.task-status-icon.running { background: rgba(249, 114, 22, 0.1); color: #F97216; }
.task-status-icon.complete { background: rgba(249, 114, 22, 0.1); color: #EA580C; }
.task-status-icon.failed { background: rgba(220, 38, 38, 0.1); color: #dc2626; }
.task-status-icon.blocked { background: rgba(142, 142, 147, 0.08); color: #8E8E93; }

.task-info {
    flex: 1;
    min-width: 0;
}

.task-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary, #1d1d1f);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.task-meta {
    font-size: 11px;
    color: var(--text-muted, #8e8e93);
    margin-top: 2px;
}

.task-model-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
    background: rgba(142, 142, 147, 0.08);
    color: var(--text-muted, #8e8e93);
    border: 1px solid rgba(142, 142, 147, 0.15);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.task-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* ─── TASK RESULT PANEL ────────────────────────────────────── */
.task-result {
    margin-top: 8px;
    padding: 10px 14px;
    background: var(--bg-secondary, #f9fafb);
    border-radius: 8px;
    font-size: 12px;
    color: var(--text-secondary, #3a3a3c);
    line-height: 1.5;
}

.task-result-collapse {
    cursor: pointer;
    user-select: none;
}

.task-result-collapse:hover {
    background: var(--bg-hover, #f1f5f9);
}

/* ─── TASK PROGRESS BAR ───────────────────────────────────── */
.task-progress {
    height: 3px;
    background: var(--bg-secondary, #f1f5f9);
    border-radius: 2px;
    margin-top: 6px;
    overflow: hidden;
}

.task-progress-bar {
    height: 100%;
    background: #F97216;
    border-radius: 2px;
    transition: width 0.4s ease;
}

/* ─── DEPENDENCY INDICATOR ─────────────────────────────────── */
.task-dep-tag {
    font-size: 10px;
    color: var(--text-muted, #8e8e93);
    display: flex;
    align-items: center;
    gap: 4px;
}

.task-dep-tag::before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
}

.task-dep-met { color: #EA580C; }
.task-dep-unmet { color: #dc2626; }

/* ─── RUN ALL TASKS BUTTON ─────────────────────────────────── */
.task-run-all {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #F97216;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.task-run-all:hover { background: #e56510; }
.task-run-all:disabled { opacity: 0.5; cursor: not-allowed; }

/* ─── STATUS-SPECIFIC ROW BACKGROUNDS ─────────────────────── */
.task-row[data-task-status="running"] {
    background: #FFF7ED;
    border-radius: 8px;
    padding-left: 12px;
    padding-right: 12px;
    margin: 0 -12px;
}

.task-row[data-task-status="complete"] {
    opacity: 0.8;
}

.task-row[data-task-status="failed"] {
    background: #FEF2F2;
    border-radius: 8px;
    padding-left: 12px;
    padding-right: 12px;
    margin: 0 -12px;
}

/* ─── RUNNING SPINNER ANIMATION ───────────────────────────── */
.task-status-icon.running {
    animation: task-pulse 1.5s ease-in-out infinite;
}

@keyframes task-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ─── INDIVIDUAL RUN BUTTON ───────────────────────────────── */
.task-run-single {
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
    border: 1px solid var(--border, #e5e7eb);
    background: var(--bg-card, #fff);
    color: var(--text-primary, #1d1d1f);
    cursor: pointer;
    transition: all 0.15s ease;
}

.task-run-single:hover:not(:disabled) {
    background: var(--bg-secondary, #f9fafb);
    border-color: #F97216;
    color: #F97216;
}

.task-run-single:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ─── TASK PANEL HEADER LAYOUT ────────────────────────────── */
.task-panel-header > div:first-child {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ═══════════════════════════════════════════════════════════════
   UNIFIED AI BUTTON
   ═══════════════════════════════════════════════════════════════ */

.unified-ai-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-left: 4px solid #F97216;
    border-radius: 12px;
    padding: 20px 24px;
    margin: 16px 0;
}

.unified-ai-header h3 {
    font-size: 16px;
    font-weight: 700;
    color: #1D1D1F;
    margin: 0 0 4px;
}
.unified-ai-header p {
    font-size: 13px;
    color: #8E8E93;
    margin: 0 0 16px;
}

.unified-ai-steps {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.unified-step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #3C3C43;
    padding: 6px 10px;
    background: #F5F5F7;
    border-radius: 6px;
}
.unified-step[data-step-status="complete"] {
    opacity: 0.6;
}
.unified-step-icon {
    font-size: 12px;
    width: 16px;
    text-align: center;
}
.unified-step-icon.complete { color: #EA580C; }
.unified-step-num {
    font-weight: 600;
    color: #8E8E93;
    font-size: 11px;
}
.unified-step-name {
    flex: 1;
    font-weight: 500;
}

.unified-ai-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ─── Unified Progress ──────────────────────────────────────── */

.unified-ai-progress {
    padding: 4px 0;
}

.unified-status-text {
    font-size: 13px;
    font-weight: 500;
    color: #F97216;
    margin-bottom: 8px;
    animation: statusPulse 2s ease-in-out infinite;
    letter-spacing: -0.01em;
}

@keyframes statusPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.unified-progress-bar-wrap {
    height: 4px;
    background: #E5E7EB;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 12px;
}
.unified-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #F97216, #FACC15);
    border-radius: 2px;
    transition: width 0.4s ease;
}

.unified-steps-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.unified-step-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    background: #F5F5F7;
    transition: all 0.2s;
}
.unified-step-row[data-status="running"] {
    background: #FFF7ED;
    border: 1px solid #FED7AA;
}
.unified-step-row[data-status="complete"] {
    opacity: 0.7;
}
.unified-step-row[data-status="failed"] {
    background: #FEF2F2;
    border: 1px solid #FECACA;
}

.unified-step-label {
    flex: 1;
    font-weight: 500;
}

.unified-step-status {
    font-size: 12px;
    font-weight: 500;
    min-width: 80px;
    text-align: right;
}
.unified-step-row[data-status="running"] .unified-step-status { color: #F97216; }
.unified-step-row[data-status="complete"] .unified-step-status { color: #EA580C; }
.unified-step-row[data-status="failed"] .unified-step-status { color: #dc2626; }


.unified-step-time {
    font-size: 11px;
    color: #8E8E93;
    min-width: 50px;
    text-align: right;
}

/* ─── Unified Summary Bar ───────────────────────────────────── */

.unified-ai-summary {
    margin: 16px 0;
    border: 1px solid #FDBA74;
    border-radius: 12px;
    overflow: hidden;
}

.unified-ai-summary-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #FFF7ED;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #9A3412;
    transition: background 0.15s;
}
.unified-ai-summary-bar:hover {
    background: #FFEDD5;
}
.unified-summary-icon {
    font-size: 14px;
    color: #F97216;
}
.unified-summary-expand {
    margin-left: auto;
    font-size: 10px;
    color: #8E8E93;
}

.unified-ai-summary-detail {
    padding: 12px 16px;
    background: #fff;
    border-top: 1px solid #FDBA74;
}

.unified-step-result {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 12px;
    color: #3C3C43;
}
.unified-step-result-icon {
    font-size: 11px;
    width: 16px;
    text-align: center;
}
.unified-step-result-icon.complete { color: #EA580C; }
.unified-step-result-name {
    font-weight: 500;
    flex: 1;
}
.unified-step-result-meta {
    color: #8E8E93;
    font-size: 11px;
}

.unified-ai-rerun-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #e5e7eb;
}

/* ─── MOBILE RESPONSIVE ──────────────────────────────────── */
@media (max-width: 768px) {
    .unified-ai-card { padding: 16px; }
    .unified-ai-header h3 { font-size: 15px; }
    .unified-ai-header p { font-size: 12px; }
    .unified-step { font-size: 12px; padding: 5px 8px; }
    .unified-ai-actions { flex-wrap: wrap; }
    .task-model-badge { font-size: 9px; padding: 1px 5px; }
    .task-panel-body { padding: 10px 14px; }
    .task-row { gap: 8px; }
    .task-name { font-size: 12px; }
    .unified-step-row { font-size: 12px; padding: 6px 10px; }
    .unified-ai-summary-bar { font-size: 12px; padding: 10px 14px; }
    .unified-ai-rerun-actions { flex-wrap: wrap; }
}