/* The Secrets page: a secret per row, grouped by project, its status and
   the box a value is typed into. */

.engy-secrets-head {
    display: flex;
    align-items: baseline;
    gap: var(--space-lg);
}

.engy-secrets-head input[type=search] {
    margin-left: auto;
    min-width: 16em;
}

.engy-secrets-lead {
    max-width: 60em;
    font-size: var(--text-sm);
}

.engy-secrets-toggle {
    font-size: var(--text-sm);
    color: var(--color-muted);
}

.engy-secrets-table {
    border-collapse: collapse;
    width: 100%;
    font-size: var(--text-sm);
}

.engy-secrets-table th,
.engy-secrets-table td {
    border-bottom: 1px solid var(--color-line);
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    vertical-align: top;
}

.engy-secrets-table th {
    color: var(--color-muted);
}

.engy-secrets-project td {
    padding-top: var(--space-lg);
    font-weight: 600;
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

.engy-secrets-name {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    font-family: var(--font-mono, monospace);
}

.engy-secrets-desc {
    font-size: var(--text-xs);
    margin-top: 2px;
    max-width: 36em;
}

.engy-secrets-users {
    font-size: var(--text-xs);
    color: var(--color-muted);
    max-width: 22em;
}

.engy-secrets-tag {
    padding: 0 var(--space-xs);
    border: 1px solid var(--color-line);
    border-radius: 3px;
    font-size: var(--text-xs);
    color: var(--color-muted);
}

.engy-secrets-state {
    display: inline-block;
    padding: 0 var(--space-sm);
    border-radius: 3px;
    border: 1px solid var(--color-line);
}

.engy-secrets-set {
    color: var(--color-ok);
    border-color: var(--color-ok);
}

.engy-secrets-unset {
    color: var(--color-error);
    border-color: var(--color-error);
}

.engy-secrets-idle {
    color: var(--color-muted);
}

.engy-secrets-form {
    display: flex;
    gap: var(--space-xs);
}

.engy-secrets-form input {
    min-width: 14em;
}

.engy-secrets-cancel {
    background: transparent;
    color: var(--color-fg);
    border: 1px solid var(--color-line);
}

.engy-secrets-busy {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--color-muted);
}

.engy-secrets-spinner {
    width: 0.9em;
    height: 0.9em;
    border: 2px solid var(--color-line);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: engy-secrets-spin 0.8s linear infinite;
}

.engy-secrets-done {
    color: var(--color-ok);
    font-weight: 600;
}

.engy-secrets-failed {
    color: var(--color-error);
    font-size: var(--text-xs);
    margin-top: var(--space-xs);
}

@keyframes engy-secrets-spin {
    to {
        transform: rotate(360deg);
    }
}