/* ============================================================
   Development requests of a product (D-056) — the pending card, the valid
   approval, the history and the small form. Only theme variables, no
   hardcoded colors. The `dpr-` prefix is this area's: no rule is shared
   with the tickets (`tkt-`) or the support tickets (`sup-`).

   Every text on this page (titles, notes, versions, labels) is PLAIN TEXT
   escaped by the view; the notes keep their line breaks HERE, by
   white-space: pre-wrap — never by markup built out of what was typed.
   ============================================================ */

/* ── The rule, under the header, before anything else ── */
.dpr-rule {
    display:          flex;
    align-items:      flex-start;
    gap:              var(--space-2);
    margin:           0 0 var(--space-4);
    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);
    font-size:        var(--font-size-sm);
    font-weight:      var(--font-weight-medium);
}
.dpr-rule .icon { flex: 0 0 auto; margin-top: 1px; }

/* ── Status pills ── */
.dpr-status {
    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;
}
.dpr-status::before {
    content:          '';
    width:            6px;
    height:           6px;
    border-radius:    var(--radius-full);
    background-color: currentColor;
}
.dpr-status--pending    { background-color: var(--color-warning-bg);       color: var(--color-warning-text); }
.dpr-status--approved   { background-color: var(--color-success-bg);       color: var(--color-success-text); }
.dpr-status--rejected   { background-color: var(--color-error-bg);         color: var(--color-error-text); }
.dpr-status--used       { background-color: var(--color-primary-lighter);  color: var(--color-primary-dark); }
.dpr-status--superseded { background-color: var(--color-badge-default-bg); color: var(--color-badge-default-text); }

/* ── The cards (pending, approved) ── */
.dpr-card { margin: 0; }
.dpr-card__title {
    display:       flex;
    flex-wrap:     wrap;
    align-items:   center;
    gap:           var(--space-2);
    margin:        0 0 var(--space-2);
    font-size:     var(--font-size-lg);
    font-weight:   var(--font-weight-semibold);
    overflow-wrap: anywhere;
}
.dpr-card__meta, .dpr-item__meta {
    display:       flex;
    flex-wrap:     wrap;
    gap:           var(--space-3);
    margin:        0 0 var(--space-2);
    color:         var(--color-text-muted);
    font-size:     var(--font-size-sm);
    overflow-wrap: anywhere;
}
.dpr-card__decision {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    margin:      0 0 var(--space-2);
    color:       var(--color-success-text);
    font-size:   var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}
.dpr-card__notes, .dpr-history .tls-notes__body {
    margin:        0 0 var(--space-3);
    padding:       var(--space-3);
    border-radius: var(--radius-md);
    background:    var(--color-bg-muted);
    font-size:     var(--font-size-sm);
    white-space:   pre-wrap;
    overflow-wrap: anywhere;
}
.dpr-card__actions {
    display:   flex;
    flex-wrap: wrap;
    gap:       var(--space-2);
    margin-top: var(--space-3);
}
.dpr-version {
    display:     inline-flex;
    align-items: center;
    gap:         2px;
    font-family: var(--font-family-mono);
    font-size:   var(--font-size-xs);
}
.dpr-empty { margin: 0; }

/* ── History ── */
.dpr-list { list-style: none; margin: 0; padding: 0; }
.dpr-item {
    padding:    var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-border);
}
.dpr-item__main {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         var(--space-2);
    margin:      0 0 var(--space-1);
}
.dpr-item__title { font-weight: var(--font-weight-medium); overflow-wrap: anywhere; }
.dpr-item__meta { margin: 0; font-size: var(--font-size-xs); }
.dpr-history .tls-notes { margin-top: var(--space-2); }

/* ── The deploy report (D-058): a <details> block, no script ── */
.dpr-report {
    margin:        var(--space-3) 0 0;
    border:        1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size:     var(--font-size-sm);
}
.dpr-report summary {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    padding:     var(--space-2) var(--space-3);
    cursor:      pointer;
    font-weight: var(--font-weight-medium);
}
.dpr-report--failed { border-color: var(--color-error-border); }
.dpr-report--failed summary { color: var(--color-error-text); background-color: var(--color-error-bg); }
.dpr-report--ok { border-color: var(--color-success-border); }
.dpr-report--ok summary { color: var(--color-success-text); background-color: var(--color-success-bg); }
.dpr-report__dl {
    display:               grid;
    grid-template-columns: max-content 1fr;
    gap:                   var(--space-1) var(--space-3);
    margin:                0;
    padding:               var(--space-3);
}
.dpr-report__dl dt { color: var(--color-text-muted); }
.dpr-report__dl dd { margin: 0; overflow-wrap: anywhere; }
.dpr-report__details {
    margin:        0;
    padding:       var(--space-3);
    border-top:    1px solid var(--color-border);
    background:    var(--color-bg-muted);
    font-family:   var(--font-family-mono);
    font-size:     var(--font-size-xs);
    white-space:   pre-wrap;
    overflow-wrap: anywhere;
    max-height:    24rem;
    overflow-y:    auto;
}

/* ── The form ── */
.dpr-form { max-width: 60ch; }
.dpr-note { margin: var(--space-3) 0 0; }