/* retoor <retoor@molodetz.nl> */

/* ---------------- shared ---------------- */

.cm-badge {
    font-size: 0.7rem;
    font-weight: 500;
    padding: 0.125rem var(--space-base);
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: var(--border);
    color: var(--text-secondary);
}
.cm-badge.cm-running { background: var(--success); color: var(--white); }
.cm-badge.cm-crashed { background: var(--danger); color: var(--white); }
.cm-badge.cm-paused { background: var(--warning); color: var(--white); }
.cm-badge.cm-stopped { background: var(--text-muted); color: var(--white); }
.cm-badge.cm-removed { background: var(--text-muted); color: var(--white); }
.cm-badge.cm-created,
.cm-badge.cm-starting,
.cm-badge.cm-restarting { background: var(--info); color: var(--white); }
.cm-badge.cm-success { background: var(--success); color: var(--white); }
.cm-badge.cm-failed { background: var(--danger); color: var(--white); }
.cm-badge.cm-building,
.cm-badge.cm-queued { background: var(--info); color: var(--white); }
.cm-badge.cm-cancelled { background: var(--text-muted); color: var(--white); }

.cm-muted { color: var(--text-muted); }

/* ---------------- project manager ---------------- */

.cm-page { display: flex; flex-direction: column; gap: 1rem; }
.cm-header { display: flex; align-items: center; gap: 1rem; }
.cm-header-link { margin-left: auto; color: var(--text-secondary); font-size: 0.875rem; }
.cm-header-link:hover { color: var(--accent); }

.cm-body { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
.cm-col { min-width: 0; }
.cm-col-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.cm-col-head h2 { font-size: 1.1rem; margin: 0; }

.cm-list { list-style: none; margin: 0; padding: 0; }
.cm-item { border-radius: var(--radius); }
.cm-item + .cm-item { margin-top: 0.25rem; }
.cm-item:not(:has(.cm-item-link)) { padding: 0.5rem 0.75rem; cursor: pointer; display: flex; justify-content: space-between; gap: 0.5rem; }
.cm-item:not(:has(.cm-item-link)):hover { background: var(--bg-card-hover); }
.cm-item.active { background: var(--accent-light); }
.cm-item-link { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; color: var(--text-primary); border-radius: var(--radius); }
.cm-item-link:hover { background: var(--bg-card-hover); }

.cm-detail { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.cm-detail-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
.cm-detail-name { font-weight: 600; flex: 1; }
.cm-editor { width: 100%; min-height: 260px; font-family: var(--font-mono); font-size: 0.85rem; background: var(--bg-input); color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.5rem; resize: vertical; }
.cm-builds { margin-top: 1rem; }
.cm-builds h3 { font-size: 0.95rem; margin: 0 0 0.5rem; }

.cm-log { background: var(--bg-input); color: var(--text-secondary); font-family: var(--font-mono); font-size: 0.8rem; padding: 0.75rem; border-radius: var(--radius); max-height: 320px; overflow: auto; white-space: pre-wrap; margin-top: 0.75rem; }

.cm-modal-form .auth-field select { width: 100%; }
.cm-build-label { cursor: pointer; flex: 1; }
.cm-build-link { color: var(--text-muted); font-size: 0.8rem; }
.cm-build-link:hover { color: var(--accent); }
.cm-modal-form .topic-label { display: flex; align-items: center; justify-content: flex-start; gap: 0.5rem; }
.cm-modal-form .topic-label input { width: auto; margin: 0; }

/* ---------------- admin list ---------------- */

.admin-toolbar-action { margin-left: auto; }
.cm-row-name { color: var(--accent); font-weight: 600; }
.cm-row-project { color: var(--text-secondary); }
.cm-row-project:hover { color: var(--accent); }

/* ---------------- instance detail ---------------- */

.ci-page { display: flex; flex-direction: column; gap: 1rem; }
.ci-header { display: flex; flex-direction: column; gap: 0.5rem; }
.ci-titlebar { display: flex; align-items: center; gap: 0.75rem; }
.ci-title { font-size: 1.5rem; margin: 0; }
.ci-project { color: var(--text-secondary); font-size: 0.875rem; }
.ci-project:hover { color: var(--accent); }

.ci-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.ci-card { min-width: 0; }
.ci-card h2 { font-size: 1.05rem; margin: 0 0 0.75rem; }
.ci-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.ci-card-head h2 { margin: 0; }

.ci-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.ci-actions .ci-danger { color: var(--danger); border-color: var(--danger); }

.ci-runtime { display: flex; flex-direction: column; gap: 0.4rem; }
.ci-kv { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.85rem; }
.ci-kv span { color: var(--text-muted); }
.ci-kv code { font-family: var(--font-mono); color: var(--text-secondary); word-break: break-all; text-align: right; }

.ci-ingress { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.85rem; }
.ci-ingress-label { color: var(--text-muted); }

.ci-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.ci-metric { display: flex; flex-direction: column; gap: 0.2rem; }
.ci-metric-label { color: var(--text-muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; }
.ci-metric-value { font-family: var(--font-mono); font-size: 1.1rem; color: var(--text-primary); }

.ci-schedules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.ci-schedule { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; font-size: 0.85rem; }
.ci-schedule-action { font-weight: 600; text-transform: uppercase; font-size: 0.7rem; padding: 0.125rem var(--space-base); border-radius: 10px; background: var(--accent-light); color: var(--accent); }
.ci-schedule-next { color: var(--text-secondary); font-family: var(--font-mono); }
.ci-schedule button { margin-left: auto; }

.ci-exec { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.ci-exec input { flex: 1; min-width: 200px; padding: 0.5rem 0.75rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-input); color: var(--text-primary); font-family: var(--font-mono); }

.ci-log { background: var(--bg-input); color: var(--text-secondary); font-family: var(--font-mono); font-size: 0.8rem; padding: 0.75rem; border-radius: var(--radius); max-height: 360px; overflow: auto; white-space: pre-wrap; margin: 0; }
.ci-log:focus { outline: 1px solid var(--accent); }
.ci-log.ci-empty { color: var(--text-muted); font-style: italic; }

.cb-tag { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); }
.cb-error { color: var(--danger); font-size: 0.85rem; margin: 0.75rem 0 0; }
.cb-dockerfile { max-height: 420px; }

.ci-terminal { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.ci-terminal .ci-term-output { border: none; border-radius: 0; max-height: 320px; }
.ci-term-bar { display: flex; align-items: center; gap: 0.5rem; background: var(--bg-input); border-top: 1px solid var(--border); padding: 0.25rem 0.6rem; }
.ci-term-prompt { color: var(--success); font-family: var(--font-mono); font-weight: 600; }
.ci-term-input { flex: 1; background: transparent; border: none; color: var(--text-primary); font-family: var(--font-mono); font-size: 0.8rem; padding: 0.4rem 0; }
.ci-term-input:focus { outline: none; }
.ci-term-input:disabled { color: var(--text-muted); }

@media (max-width: 1024px) {
    .cm-body { grid-template-columns: 1fr; }
    .ci-grid { grid-template-columns: 1fr; }
}

.cm-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cm-form.cm-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    max-width: 720px;
}

.cm-form label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    position: relative;
}

.cm-form input[type="text"],
.cm-form input[type="number"],
.cm-form select,
.cm-form textarea {
    width: 100%;
    padding: 0.5rem 0.65rem;
    background: var(--bg-input, var(--bg-card));
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font: inherit;
}

.cm-form textarea {
    font-family: var(--font-mono, monospace);
    resize: vertical;
}

.cm-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.cm-check {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.cm-suggest {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    max-height: 200px;
    overflow-y: auto;
}

.cm-suggest:empty {
    display: none;
}

.cm-suggest li {
    padding: 0.4rem 0.65rem;
    cursor: pointer;
    color: var(--text-primary);
}

.cm-suggest li:hover,
.cm-suggest li.cm-suggest-active {
    background: var(--bg-hover, var(--border));
}

.cm-suggest li.cm-suggest-active {
    outline: 2px solid var(--accent, var(--border));
    outline-offset: -2px;
}

.cm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

@media (max-width: 768px) {
    .cm-form-row { grid-template-columns: 1fr; }
}

.ci-events {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 320px;
    overflow-y: auto;
}

.ci-event {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
}

.ci-event-name {
    font-weight: 600;
    color: var(--text-primary);
}

.ci-event-time {
    margin-left: auto;
    color: var(--text-muted);
    font-family: var(--font-mono, monospace);
}