/* ==========================================================================
   tabs.css — page-specific styles (Launch, Overview, Monitor, AI, Reports)
   ========================================================================== */

/* ================== LAUNCH ================== */
.launch-hero { text-align: left; margin-bottom: 18px; }
.launch-hero h1 { margin-bottom: 4px; }
.launch-hero p  { font-size: 13px; color: var(--text-secondary); }

.launch-card { padding: 28px 32px 30px; }

.launch-form { display: flex; flex-direction: column; gap: 16px; }
.launch-field { display: flex; flex-direction: column; gap: 6px; }

.launch-input-wrap { position: relative; display: flex; }
.launch-prompt {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--accent);
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -1px;
    pointer-events: none;
}
.launch-input {
    width: 100%;
    padding: 13px 16px 13px 44px;
    background: var(--bg-app);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: 'JetBrains Mono', monospace;
    font-size: 13.5px;
    transition: var(--transition);
}
.launch-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.12);
}
.launch-input::placeholder { color: var(--text-dim); }

.launch-controls {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 10px;
    align-items: end;
}
.launch-auth-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    height: 42px;
    background: var(--bg-app);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    transition: var(--transition);
}
.launch-auth-toggle:hover { border-color: var(--accent); color: var(--accent); }
.launch-auth-toggle[aria-expanded="true"] {
    border-color: var(--term-green);
    color: var(--term-green);
    background: rgba(0, 212, 138, 0.08);
}

.launch-auth-panel {
    padding: 14px 16px;
    background: rgba(0, 212, 138, 0.04);
    border: 1px solid rgba(0, 212, 138, 0.2);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.launch-auth-panel[hidden] { display: none; }
.launch-auth-help {
    font-size: 11.5px;
    color: var(--text-dim);
    line-height: 1.5;
}
.launch-auth-help code {
    background: var(--bg-app);
    color: var(--accent);
    padding: 1px 6px;
    border-radius: 3px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
}

.launch-import {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    background: var(--bg-card);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    transition: var(--transition);
    cursor: pointer;
}
.launch-import:hover,
.launch-import.dragover {
    border-color: var(--accent);
    border-style: solid;
    background: rgba(233, 69, 96, 0.03);
}
.launch-import-icon { font-size: 22px; opacity: 0.6; flex-shrink: 0; }
.launch-import-body { flex: 1; min-width: 0; }
.launch-import-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.launch-import-hint  { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }

/* ================== OVERVIEW ================== */
.charts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.chart-container {
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gauge-container {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ================== MONITOR ================== */
.monitor-meta {
    display: flex;
    gap: 16px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}
.monitor-meta span strong { color: var(--text-primary); font-weight: 600; }

.pipeline {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 14px;
}
.pipeline-phase {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px 5px 10px;
    background: var(--bg-app);
    color: var(--text-dim);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    transition: var(--transition);
}
.pipeline-phase::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-dim);
    flex-shrink: 0;
    transition: var(--transition);
}
.pipeline-phase.active {
    color: var(--term-amber);
    border-color: rgba(245, 158, 11, 0.5);
    background: rgba(245, 158, 11, 0.08);
    animation: pipeline-pulse 1.5s ease-in-out infinite;
}
.pipeline-phase.active::before {
    background: var(--term-amber);
    box-shadow: 0 0 8px var(--term-amber);
}
.pipeline-phase.done {
    color: var(--term-green);
    border-color: rgba(0, 212, 138, 0.3);
    background: rgba(0, 212, 138, 0.07);
}
.pipeline-phase.done::before { background: var(--term-green); }
.pipeline-phase.error {
    color: var(--term-red);
    border-color: rgba(255, 71, 87, 0.4);
    background: rgba(255, 71, 87, 0.08);
}
.pipeline-phase.error::before { background: var(--term-red); }
@keyframes pipeline-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.3); }
    50%      { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0); }
}

.terminal {
    background: var(--bg-terminal);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 520px;
}
.terminal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-sidebar);
}
.terminal-head-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.terminal-head-actions { display: flex; gap: 8px; }
.terminal-head-btn {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--text-dim);
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-app);
    transition: var(--transition);
}
.terminal-head-btn:hover { color: var(--accent); border-color: var(--accent); }
.terminal-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-terminal);
}
.terminal-line {
    white-space: pre-wrap;
    word-break: break-word;
}
.terminal-line-ts    { color: var(--term-cyan); }
.terminal-line-phase { color: var(--accent); font-weight: 600; }
.terminal-line-ok    { color: var(--term-green); }
.terminal-line-warn  { color: var(--term-amber); }
.terminal-line-err   { color: var(--term-red); }
.terminal-empty {
    color: var(--text-dim);
    font-style: italic;
    padding: 20px;
    text-align: center;
}

/* ================== AI ANALYSIS ================== */
.plan-step {
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 10px;
    background: var(--bg-app);
    transition: var(--transition);
}
.plan-step:hover { border-color: var(--accent); }
.plan-step-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.plan-step-title { font-weight: 600; color: var(--text-primary); }
.plan-step-body  { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }

/* ================== REPORTS ================== */
.report-preview {
    background: #fff;
    color: #222;
    padding: 40px;
    border-radius: var(--radius);
    font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    line-height: 1.6;
}
.report-preview h1,
.report-preview h2,
.report-preview h3 { color: #111; }
.report-preview a   { color: #0366d6; }
@media print {
    .app > *:not(.main)          { display: none !important; }
    .main                        { padding: 0 !important; overflow: visible !important; }
    body                         { overflow: auto !important; }
    .card:not(.report-preview)   { display: none !important; }
}