/* Pipeline Dashboard Styles - Spreadsheet Mode */

#pipeline-screen {
    background-color: #f1f5f9;
    /* Slate-100 */
    min-height: 100vh;
    padding: 20px;
}

#pipeline-screen.active {
    display: flex;
    flex-direction: column;
}

/* Toolbar */
.pipeline-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    background: white;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.search-box input {
    padding: 8px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 14px;
    width: 250px;
}

.toolbar-stats {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
}

/* Spreadsheet Container */
.pipeline-spreadsheet-container {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
    overflow: auto;
    /* Enable scrolling */
    flex: 1;
    max-height: calc(100vh - 120px);
    /* Fill remaining height */
    position: relative;
}

.pipeline-spreadsheet {
    border-collapse: collapse;
    width: max-content;
    /* Force table to expand via col widths */
    font-size: 13px;
    font-family: 'Inter', sans-serif;
}

/* Headers */
.pipeline-spreadsheet thead th {
    background: #f8fafc;
    color: #475569;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
    padding: 10px 12px;
    border-bottom: 2px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
    text-align: left;
    position: sticky;
    top: 0;
    z-index: 1;
    /* Default z-index for headers */
}

/* Cells */
.pipeline-spreadsheet td {
    padding: 0;
    /* Padding handled by editable-cell div */
    border-bottom: 1px solid #f1f5f9;
    border-right: 1px solid #f1f5f9;
    color: #334155;
    background: white;
    /* Important for sticky columns overlay */
}

.pipeline-spreadsheet tr:hover td {
    background-color: #f8fafc;
}

/* Editable Cells */
.editable-cell {
    padding: 8px 12px;
    min-height: 20px;
    outline: none;
    cursor: text;
    transition: background 0.2s;
    white-space: pre-wrap;
    /* Preserve line breaks */
    line-height: 1.4;
}

.editable-cell:focus {
    background-color: #eff6ff;
    /* Blue tint on focus */
    box-shadow: inset 0 0 0 2px #3b82f6;
}

/* Status Indicators for Save/Error */
.editable-cell.saving {
    color: #94a3b8;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"><path fill="%2394a3b8" d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z"/><path fill="%2394a3b8" d="M12 6a6 6 0 1 0 6 6 6 6 0 0 0-6-6z" opacity=".5"><animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="1s" repeatCount="indefinite"/></path></svg>');
    background-repeat: no-repeat;
    background-position: right 4px center;
}

.editable-cell.saved {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%2310b981" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>');
    background-repeat: no-repeat;
    background-position: right 4px center;
}

.editable-cell.error {
    background-color: #fef2f2;
    box-shadow: inset 0 0 0 2px #ef4444;
}

/* Select Dropdown */
.pipeline-select {
    width: 100%;
    border: none;
    background: transparent;
    padding: 8px 12px;
    font-size: 13px;
    color: #334155;
    cursor: pointer;
    -webkit-appearance: none;
    /* Hide default arrow to look clean */
}

.pipeline-select:focus {
    background-color: #eff6ff;
    outline: none;
}

/* Sticky Column Shadows (optional enhancement) */
.pipeline-spreadsheet th:nth-child(2)::after,
.pipeline-spreadsheet td:nth-child(2)::after {
    content: '';
    position: absolute;
    top: 0;
    right: -5px;
    bottom: 0;
    width: 5px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.05), transparent);
    pointer-events: none;
}