/**
 * Orchestrator-specific additions on top of main.css.
 * Keeps main.css a verbatim copy from car/ for easy framework-level sync.
 */

/* Neutralize main.css col-width percentages that target 6/8-column CRUD tables.
   Our tables have different column counts and use explicit inline widths. */
#sync-table col,
#recent-table col {
    width: auto;
}

/* Slimmer table header underline — main.css uses 2px border + 2px inset shadow (visible as ~4px). */
#sync-table thead th,
#recent-table thead th {
    border-bottom-width: 1px;
    box-shadow: inset 0 -1px 0 var(--theme-color);
}

/* Status pill — aligned icon + capitalized label */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .55rem;
    line-height: 1;
}
.status-pill .pill-icon {
    width: .85rem;
    height: .85rem;
    flex-shrink: 0;
    color: currentColor;
}
.status-pill .pill-label {
    line-height: 1;
    vertical-align: middle;
}
.status-pill.status-running .pill-icon {
    animation: orch-spin 1s linear infinite;
}
@keyframes orch-spin {
    to { transform: rotate(360deg); }
}

/* Color variants */
.status-pill.status-success  { background: #e8f5e9; color: #2e7d32; }
.status-pill.status-failed   { background: #fce4ec; color: #c62828; }
.status-pill.status-timeout  { background: #fff3e0; color: #e65100; }
.status-pill.status-running  { background: #e3f2fd; color: #1565c0; }
.status-pill.status-skipped  { background: #f5f5f5; color: #666; }
.status-pill.status-never    { background: #f5f5f5; color: #999; }

/* Table body rows — uniform 0.9rem, inherit Civil Premium from main.css. No monospace anywhere. */
#sync-table tbody td,
#runs-table tbody td {
    font-size: 0.9rem;
}

.counters {
    color: var(--color-text-secondary);
}
.counters b {
    color: var(--color-text);
    font-weight: 600;
}

/* Right-aligned actions cell (pairs with main.css .th-actions) */
.td-actions {
    text-align: right;
    white-space: nowrap;
}
.td-actions .icon {
    margin-left: .3rem;
}

/* Section title between tables */
.section-title {
    margin-top: 2.25rem;
    margin-bottom: .75rem;
    font-size: 1.1rem;
    color: var(--theme-color);
}

/* /runs page filter bar */
.runs-filter {
    display: flex;
    gap: .75rem;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
    padding: .75rem 1rem;
    background: var(--theme-color-mid);
    border-radius: 8px;
}
.runs-filter label {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.runs-filter-label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-secondary);
}
.runs-filter select {
    padding: .35rem .5rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-surface);
    color: var(--color-text);
    font-family: inherit;
    font-size: .85rem;
    min-width: 10rem;
}

/* Reset col widths for runs table too */
#runs-table col {
    width: auto;
}
#runs-table thead th {
    border-bottom-width: 1px;
    box-shadow: inset 0 -1px 0 var(--theme-color);
}

/* Muted utility — main.css may not expose it */
.muted {
    color: var(--color-text-secondary);
}

/* Log overlay meta strip + log body */
.log-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: .5rem 1.25rem;
    margin: 0 0 1rem;
    padding: .75rem 1rem;
    background: var(--theme-color-mid);
    border-radius: 8px;
    font-size: .85rem;
}
.log-meta-item {
    display: flex;
    flex-direction: column;
}
.log-meta-label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-secondary);
    margin-bottom: .15rem;
}
.log-meta-value {
    color: var(--color-text);
    word-break: break-word;
}

.detail-section-title {
    margin: 1.25rem 0 .5rem;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-secondary);
}

.detail-error {
    padding: .6rem .8rem;
    background: #fce4ec;
    border-left: 3px solid #c62828;
    color: #c62828;
    border-radius: 4px;
    font-size: .85rem;
    margin-bottom: 1rem;
    white-space: pre-wrap;
}

.log-pre {
    background: #1e1e1e;
    color: #e0e0e0;
    padding: 1rem;
    border-radius: 6px;
    font-size: .78rem;
    line-height: 1.45;
    max-height: 60vh;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

html.dark .log-pre {
    background: #0f0f0f;
}
html.dark .detail-error {
    background: rgba(198, 40, 40, 0.15);
}
html.dark .log-meta {
    background: var(--theme-color-mid);
}

/* Edit overlay — matches CRUD #edit-form pattern */
#edit-form {
    position: fixed;
    display: block;
    z-index: 1000;
    left: 20%;
    width: 60%;
    top: calc(var(--nav-height) + 2rem);
    max-height: calc(100vh - var(--nav-height) - 4rem);
    overflow-y: auto;
}
#edit-form-container {
    background-color: var(--color-surface);
    border: 1px solid var(--color-modal-border);
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: var(--shadow-lg);
}
#edit-form-body {
    margin-top: .5rem;
}
#edit-form .form-actions {
    margin-top: 1.25rem;
}

/* Form rows match main.css .form-row / .form-row-half. Add the missing bits
   for readonly text, path display, checkbox, deps list, and inline hint. */
.ef-readonly {
    padding: .4rem 0;
    font-size: .9rem;
    color: var(--color-text);
    border-bottom: 1px dashed var(--color-border);
}
.ef-path {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: .8rem;
    word-break: break-all;
    color: var(--color-text-secondary);
}
.ef-warn {
    color: #c62828;
    font-style: italic;
    font-family: inherit;
}
.ef-checkbox-label {
    display: inline-flex !important;
    align-items: center;
    gap: .4rem;
    font-weight: normal !important;
    color: var(--color-text) !important;
    cursor: pointer;
}
.ef-depends {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: .1rem .75rem;
    max-height: 14rem;
    overflow-y: auto;
    padding: .5rem .75rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-surface);
}
.ef-dep-row {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    font-weight: normal !important;
    color: var(--color-text) !important;
    cursor: pointer;
    padding: .1rem 0;
}
.ef-hint {
    font-size: .75rem;
    color: var(--color-text-secondary);
    margin-top: .35rem;
}
.edit-error {
    margin-top: 1rem;
    padding: .5rem .75rem;
    background: #fce4ec;
    color: #c62828;
    border-left: 3px solid #c62828;
    border-radius: 4px;
    font-size: .85rem;
}
html.dark .edit-error {
    background: rgba(198, 40, 40, 0.15);
}