/*
 * ============================================================
 *  LOOM — Component Styles
 *
 *  Sections:
 *    1. Empty States
 *    2. Run Details — details.cshtml
 *    3. New Run — new.cshtml
 *  View-specific styles that were previously inline <style> blocks.
 *  All colors use LOOM tokens — no hardcoded hex or rgba values.
 * ============================================================
 */

/* ── 1. Empty States ─────────────────────────────────────────── */

.loom-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-12) var(--space-6);
    color: var(--loom-text-muted);
}
.loom-empty-icon {
    font-size: 2.25rem;
    margin-bottom: var(--space-3);
    opacity: 0.45;
    color: var(--loom-blue-bright);
}
.loom-empty-title {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--loom-text-secondary);
    margin-bottom: var(--space-1);
}
.loom-empty-msg {
    font-size: var(--text-sm);
    color: var(--loom-text-muted);
    margin-bottom: var(--space-4);
}
/* Table cell that wraps a .loom-empty — removes default cell padding */
td.loom-empty-cell {
    padding: 0 !important;
}
/* MvcGrid built-in empty message (.Empty("...") call) */
.mvc-grid-empty {
    padding: var(--space-10) var(--space-6) !important;
    text-align: center !important;
}
.loom-grid-empty {
    color: var(--loom-text-muted);
    font-size: var(--text-sm);
    font-style: italic;
}

/* ── 2. Run Details — details.cshtml ─────────────────────────── */

@keyframes spin { to { transform: rotate(360deg); } }
.spinning {
    display: inline-block;
    animation: spin 1s linear infinite;
    will-change: transform; /* promotes to own compositor layer — keeps animation off the paint thread */
}

.run-debug-info {
    display: none;
    font-size: var(--text-2xs);
    color: var(--loom-grey);
    margin-top: var(--space-1);
    padding-top: var(--space-1);
    border-top: 1px dashed var(--loom-border);
}
.dev-mode-active .run-debug-info { display: block; }

.logic-summary-row {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .4rem 0;
    border-bottom: 1px solid var(--loom-border);
    font-size: var(--text-sm);
    line-height: 1.5;
}
.logic-summary-label {
    font-weight: 600;
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--loom-grey);
}

/* Logic chevron rotation is handled via JS in details.cshtml */

/* ── 3. New Run — new.cshtml ──────────────────────────────────── */

.vendor-select-card {
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background .15s;
    border: 1px solid var(--loom-border);
    background: var(--loom-bg-surface);
}
.vendor-select-card:hover {
    border-color: var(--loom-blue-bright) !important;
    box-shadow: 0 0 0 3px var(--loom-blue-bg);
}
.vendor-select-card.selected {
    border-color: var(--loom-blue-bright) !important;
    background: var(--loom-blue-bg);
}

.task-select-item { cursor: pointer; transition: background .12s; }
.task-select-item:hover  { background: var(--loom-bg-inset); }
.task-select-item.selected { background: var(--loom-blue-bg); }

.task-info-btn { opacity: .6; line-height: 1; }
.task-info-btn:hover,
.task-info-btn:focus { opacity: 1; box-shadow: none; }

.task-logic-panel {
    background: var(--loom-bg-inset);
    border-left: 3px solid var(--loom-blue-border);
    margin: 0;
    padding: .75rem 1rem .75rem 1.25rem;
    font-size: var(--text-sm);
}

.logic-row {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: var(--space-2);
    padding: .35rem 0;
    border-bottom: 1px solid var(--loom-border);
    align-items: start;
    line-height: 1.5;
}
.logic-label {
    font-weight: 600;
    color: var(--loom-text-muted);
    white-space: nowrap;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .03em;
    padding-top: .1rem;
}