/* Publishing history: a flat list in the Forma style (see app.js refreshPublishingHistory). */

#publishingHistoryModal .credentials-modal-content { border: 0; border-radius: 4px; box-shadow: var(--fm-shadow); font-family: var(--fm-font); }
#publishingHistoryModal .credentials-modal-header { background: #fff; border-radius: 4px 4px 0 0; }
#publishingHistoryModal .credentials-modal-header h3 { font-family: var(--fm-font); font-size: 18px; font-weight: 700; color: var(--fm-text); }

.hist-scroll { flex: 1; overflow-y: auto; border: 1px solid var(--fm-divider); border-radius: 2px; background: #fff; }
.hist-list { display: flex; flex-direction: column; }
.hist-item {
    display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 12px;
    padding: 14px 16px; border-bottom: 1px solid var(--fm-row-line);
}
.hist-item:last-child { border-bottom: 0; }
.hist-status { display: flex; margin-top: 1px; color: var(--fm-text-3); }
.hist-success { color: var(--fm-success); }
.hist-error { color: var(--fm-error); }
.hist-warning { color: var(--fm-warning); }
.hist-pending { color: var(--fm-blue); }
.hist-noop { color: var(--fm-text-3); }

.hist-main { min-width: 0; }
.hist-name { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 21px; }
.hist-name strong { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-project { font-size: 12px; line-height: 18px; color: var(--fm-text-2); }
.hist-message { margin: 6px 0 0; font-size: 14px; line-height: 21px; color: var(--fm-text); }
.hist-note { margin: 4px 0 0; font-size: 13px; line-height: 20px; color: var(--fm-text-2); }
.hist-note-warn { color: #7A5000; }

.hist-details { margin-top: 6px; font-size: 13px; }
.hist-details summary { display: inline-block; cursor: pointer; color: var(--fm-link); user-select: none; }
.hist-details summary:focus-visible { outline: 2px solid #006EAF; outline-offset: 2px; }
.hist-details pre {
    margin: 8px 0 0; padding: 10px 12px; overflow-x: auto; border-radius: 2px;
    background: var(--fm-panel); color: var(--fm-text); font-size: 12px; line-height: 18px;
}

.hist-when { display: flex; flex-direction: column; align-items: flex-end; font-size: 12px; line-height: 18px; color: var(--fm-text-2); white-space: nowrap; }
.hist-when time { font-variant-numeric: tabular-nums; }

@media (max-width: 700px) {
    .hist-item { grid-template-columns: 20px minmax(0, 1fr); }
    .hist-when { grid-column: 2; flex-direction: row; gap: 12px; align-items: baseline; }
}