/* The Users page, the account dialog and the role pickers. The list reads like a table of
   people, not of controls: one quiet row per account, every row the way
   into its dialog, which is where anything is changed. */

.engy-accounts {
    max-width: 72rem;
}

.engy-accounts-head {
    display: flex;
    align-items: baseline;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.engy-accounts-head h2 {
    margin: 0;
    color: var(--color-accent);
}

.engy-accounts-head input {
    margin-left: auto;
    width: 18rem;
    font: inherit;
    font-size: var(--text-sm);
    color: var(--color-fg);
    background: var(--color-panel);
    border: 1px solid var(--color-line);
    border-radius: 6px;
    padding: var(--space-sm) var(--space-md);
}

.engy-accounts-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--color-line);
    border-radius: 8px;
    overflow: hidden;
}

.engy-accounts-table th {
    text-align: left;
    font-size: var(--text-xs);
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-muted);
    background: var(--color-panel);
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--color-line);
}

.engy-accounts-table td {
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--color-line);
    vertical-align: middle;
}

.engy-accounts-table tbody tr:last-child td {
    border-bottom: none;
}

.engy-accounts-table tbody tr {
    cursor: pointer;
}

.engy-accounts-table tbody tr:hover td {
    background: var(--color-panel);
}

.engy-accounts-table td:first-child {
    width: 30%;
}

.engy-accounts-table td:nth-child(2) {
    width: 30%;
}

.engy-accounts-who {
    color: var(--color-fg);
}

.engy-accounts-meta {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    margin-top: 2px;
    font-size: var(--text-xs);
}

.engy-accounts-product {
    color: var(--color-muted);
}

.engy-accounts-flag {
    color: var(--color-warn);
}

.engy-accounts-roles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.engy-accounts-role {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-xs);
    font-size: var(--text-sm);
    padding: 1px var(--space-sm);
    border-radius: 999px;
    border: 1px solid var(--color-line);
    background: var(--color-panel);
}

.engy-accounts-scope {
    font-size: var(--text-xs);
    color: var(--color-muted);
}

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

/* Two lines of permissions at most; the cell's title carries them all. */
.engy-accounts-list {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.engy-accounts-count {
    float: left;
    min-width: 1.6rem;
    margin: 1px var(--space-sm) 0 0;
    line-height: 1.4;
    text-align: center;
    font-size: var(--text-xs);
    color: var(--color-fg);
    border-radius: 999px;
    background: var(--color-line);
}

.engy-account-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    padding: var(--space-sm) var(--space-xs);
}

.engy-account-section h3 {
    margin: 0 0 var(--space-sm);
    font-size: var(--text-xs);
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-muted);
}

.engy-account-section .engy-muted {
    margin: 0;
    font-size: var(--text-sm);
}

.engy-account-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--color-line);
    border-radius: 6px;
}

.engy-account-list li {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-xs) var(--space-md);
    border-bottom: 1px solid var(--color-line);
    min-height: 2rem;
}

.engy-account-list li:last-child {
    border-bottom: none;
}

.engy-account-name {
    color: var(--color-fg);
}

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

.engy-account-remove {
    margin-left: auto;
    padding: 2px var(--space-sm);
    font-size: var(--text-xs);
    background: transparent;
    color: var(--color-muted);
    border: 1px solid var(--color-line);
}

.engy-account-remove:hover {
    color: var(--color-error);
    border-color: var(--color-error);
}

.engy-account-add {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.engy-account-add select, .engy-account-add input {
    font: inherit;
    font-size: var(--text-sm);
    color: var(--color-fg);
    background: var(--color-panel);
    border: 1px solid var(--color-line);
    border-radius: 4px;
    padding: var(--space-xs) var(--space-sm);
}

.engy-account-add select:first-child, .engy-account-add input {
    flex: 1;
    min-width: 0;
}

.engy-account-add button {
    padding: var(--space-xs) var(--space-md);
    font-size: var(--text-sm);
}

.engy-account-section .engy-chips {
    gap: var(--space-xs);
}

.engy-account-section .engy-chip {
    margin: 0;
    padding: 1px var(--space-sm);
}

/* A role to sign in as: its name, and under it what it lets the person do,
   so the pick is made on what the role is rather than what it is called. */
.engy-auth-role {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    margin-bottom: var(--space-sm);
    text-align: left;
}

.engy-auth-role-name {
    font-weight: bold;
}

.engy-auth-role-desc {
    font-size: var(--text-xs);
    font-weight: normal;
    opacity: 0.8;
    white-space: normal;
}

.engy-accounts-actions {
    display: flex;
    gap: var(--space-xs);
    justify-content: flex-end;
}

.engy-accounts-actions button {
    font-size: 0.85em;
    padding: 2px var(--space-xs);
}