/* ============================================================
   The credentials vault of a product (D-062) — the « Credentials » card
   of the Settings page (views/partials/vault_card.php, assets/js/vault.js).
   Only theme variables, no hardcoded colours. The `vlt-` prefix is this
   card's; it reuses prj-form, form-group, dev-meta, tls-inline / tls-danger
   and empty-state from their areas.

   Every text here is PLAIN TEXT escaped by the view (or written with
   textContent by the script); multi-line notes keep their breaks by
   white-space: pre-wrap — never by markup built out of them.
   ============================================================ */

.vlt__head .prj-card-title { display: inline-flex; align-items: center; gap: var(--space-2); }
.vlt-lead { margin: 0 0 var(--space-2); }

/* ── The one-line notice, and the « vault off » block ── */
.vlt-notice {
    display:          flex;
    align-items:      flex-start;
    gap:              var(--space-2);
    margin:           0 0 var(--space-4);
    padding:          var(--space-2) var(--space-3);
    border:           1px solid var(--color-info-border);
    border-radius:    var(--radius-md);
    background-color: var(--color-info-bg);
    color:            var(--color-info-text);
    font-size:        var(--font-size-sm);
}
.vlt-notice > .icon { flex: none; margin-top: 0.1em; }
.vlt-off {
    display:          flex;
    align-items:      flex-start;
    gap:              var(--space-3);
    padding:          var(--space-3) var(--space-4);
    border:           1px solid var(--color-warning-border);
    border-radius:    var(--radius-md);
    background-color: var(--color-warning-bg);
    color:            var(--color-warning-text);
}
.vlt-off > .icon { flex: none; }
.vlt-off__title { margin: 0 0 var(--space-1); font-weight: var(--font-weight-semibold); }
.vlt-off .form-hint { margin: 0; }

/* ── The list ── */
.vlt-list { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-3); }
.vlt-item {
    padding:       var(--space-3) var(--space-4);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-md);
    min-width:     0;
}
.vlt-item[data-environment="production"] { border-left: 3px solid var(--color-success-border); }
.vlt-item__head {
    display:     flex;
    align-items: flex-start;
    gap:         var(--space-3);
    margin:      0 0 var(--space-2);
}
.vlt-item__icon {
    flex:             none;
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    width:            36px;
    height:           36px;
    border-radius:    var(--radius-md);
    background-color: var(--color-primary-lighter);
    color:            var(--color-primary-dark);
    font-size:        20px;
}
.vlt-item__title { flex: 1 1 auto; min-width: 0; }
.vlt-item__label { margin: 0; font-weight: var(--font-weight-semibold); overflow-wrap: anywhere; }
.vlt-item__kind  { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }

/* The environment badge: production green, test amber, dev and local neutral. */
.vlt-env {
    flex:          none;
    display:       inline-flex;
    align-items:   center;
    gap:           var(--space-1);
    padding:       2px var(--space-2);
    border-radius: var(--radius-full);
    font-size:     var(--font-size-xs);
    font-weight:   var(--font-weight-medium);
    white-space:   nowrap;
    line-height:   1.4;
    background-color: var(--color-badge-default-bg);
    color:            var(--color-badge-default-text);
}
.vlt-env::before { content: ''; width: 6px; height: 6px; border-radius: var(--radius-full); background-color: currentColor; }
.vlt-env--production { background-color: var(--color-success-bg); color: var(--color-success-text); }
.vlt-env--test       { background-color: var(--color-warning-bg); color: var(--color-warning-text); }
.vlt-env--local      { background-color: var(--color-bg-muted);   color: var(--color-text-muted); }

/* ── Address, user, secret ── */
.vlt-fields {
    display:               grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap:                   var(--space-2) var(--space-4);
    align-items:           center;
    margin:                0 0 var(--space-2);
}
.vlt-fields dt { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.vlt-fields dd { margin: 0; min-width: 0; }
.vlt-fields__value { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.vlt-code {
    font-family:      var(--font-family-mono);
    font-size:        var(--font-size-sm);
    padding:          2px var(--space-2);
    border-radius:    var(--radius-sm);
    background-color: var(--color-bg-muted);
    overflow-wrap:    anywhere;
    min-width:        0;
}
.vlt-url { overflow-wrap: anywhere; }
.vlt-secret { letter-spacing: 0.08em; white-space: pre-wrap; }
.vlt-secret.is-shown {
    letter-spacing:   normal;
    background-color: var(--color-warning-bg);
    color:            var(--color-warning-text);
    user-select:      all;
}
.vlt-btn.is-done   { color: var(--color-success-text); }
.vlt-btn.is-failed { color: var(--color-error-text); }
.vlt-nosecret { font-size: var(--font-size-sm); }

.vlt-notes {
    margin:        0 0 var(--space-2);
    padding:       var(--space-2) var(--space-3);
    border-left:   3px solid var(--color-border);
    color:         var(--color-text-muted);
    font-size:     var(--font-size-sm);
    white-space:   pre-wrap;
    overflow-wrap: anywhere;
}
.vlt-msg {
    margin:    0 0 var(--space-2);
    color:     var(--color-error-text);
    font-size: var(--font-size-sm);
}
.vlt-meta { margin: 0 0 var(--space-2); }

/* ── Edit / History / Delete: an open panel takes the whole row ── */
.vlt-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-2); }
.vlt-panel > summary { list-style: none; cursor: pointer; }
.vlt-panel > summary::-webkit-details-marker { display: none; }
.vlt-panel[open] {
    flex:          1 1 100%;
    order:         2;
    padding:       var(--space-3);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-bg-muted);
}
.vlt-panel[open] > summary { margin-bottom: var(--space-3); }

.vlt-history__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.vlt-event { padding: var(--space-2) 0; border-top: 1px solid var(--color-border); }
.vlt-event:first-child { border-top: 0; padding-top: 0; }
.vlt-event__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); font-size: var(--font-size-sm); }
.vlt-event__action { font-weight: var(--font-weight-semibold); }
.vlt-event--revealed .vlt-event__action { color: var(--color-warning-text); }
.vlt-event--deleted  .vlt-event__action { color: var(--color-error-text); }
.vlt-event__who  { overflow-wrap: anywhere; }
.vlt-event__time { color: var(--color-text-muted); font-size: var(--font-size-xs); white-space: nowrap; }
.vlt-event__fields { margin: 2px 0 0; color: var(--color-text-muted); font-size: var(--font-size-xs); overflow-wrap: anywhere; }

/* ── The forms ── */
.vlt-add { margin-top: var(--space-2); }
.vlt-add > summary { list-style: none; cursor: pointer; display: inline-flex; }
.vlt-add > summary::-webkit-details-marker { display: none; }
.vlt-add[open] > summary { margin-bottom: var(--space-3); }
.vlt-add[open] .vlt-form {
    padding:       var(--space-4);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.vlt-form__title { margin: 0 0 var(--space-3); font-size: var(--font-size-base); }
.vlt-form__row {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap:                   0 var(--space-4);
}
.vlt-typed { display: flex; align-items: stretch; gap: var(--space-2); }
.vlt-typed > input { flex: 1 1 auto; min-width: 0; }
.vlt-typed__toggle { flex: none; }
.vlt-check {
    display:     flex;
    align-items: flex-start;
    gap:         var(--space-2);
    margin-top:  var(--space-2);
    font-size:   var(--font-size-sm);
    cursor:      pointer;
}
.vlt-check input { margin-top: 3px; }

/* The throwaway box the copy fallback selects: never seen. */
.vlt-offscreen { position: fixed; top: -1000px; left: -1000px; width: 1px; height: 1px; opacity: 0; }

@media (max-width: 560px) {
    .vlt-item { padding: var(--space-3); }
    .vlt-fields { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
    .vlt-fields dd { margin-bottom: var(--space-2); }
    .vlt-item__head { flex-wrap: wrap; }
    .vlt-env { margin-left: calc(36px + var(--space-3)); }
}