/* Shutdown-history list. Shared by mesa_gen_tracker (its own panel + the note
 * history, which reuses .history-*) and the gen modal on the status and mobile
 * pages. One definition rather than three copies drifting apart. */
.history-item {
    padding: 7px 9px;
    background: #1a1a1a;
    border-radius: 4px;
    margin-bottom: 6px;
    font-size: 12px;
    border-left: 3px solid #2f3742;
}
.history-item.mesa { border-left-color: #4a9eff; }
.history-item.sh-live { border-left-color: #ff6666; }
.history-date {
    color: #8b98a6;
    font-size: 10px;
    display: flex;
    justify-content: space-between;
}
/* The note text is the payload — read it at a readable size, with the metadata
   line staying deliberately quieter above it. */
.history-note { color: #e8eef5; margin-top: 3px; line-height: 1.45; }
.history-status {
    display: inline-block;
    padding: 1px 4px;
    border-radius: 2px;
    font-size: 9px;
    margin-left: 4px;
}
.sh-summary { margin-bottom: 8px; font-size: 12px; color: #e8eef5; }
.sh-empty { color: #888; font-size: 12px; padding: 4px 0; }
.sh-ongoing { color: #ff6666; font-weight: bold; }
.sh-dim { color: #888; }
.sh-src { color: #666; font-size: 10px; }

/* Size the shutdown-history modal on desktop.
 *
 * It borrows .modal-content from whichever page hosts it, and those are sized for
 * something else: styles.css gives the status page 98% width and 95vh height for
 * the gen detail modal's two chart columns, so a plain list arrived nearly
 * full-screen. gen_manager's is 450px, too narrow for a row of date, duration,
 * cause and chip.
 *
 * Deliberately behind a min-width query. On a phone mobile.css turns
 * .modal-content into a bottom sheet, and this stylesheet loads AFTER mobile.css,
 * so an unscoped rule here would silently beat it. */
@media (min-width: 700px) {
    #shutdownHistModal .modal-content {
        width: min(760px, 92%);
        max-width: 760px;
        height: auto;
        max-height: 85vh;
        margin: 5vh auto;
    }
}