/* FlowHub - the registry views: status cards with a light, the timeline of a message, the day chart.
 * Same rules as app.css: mobile first, touch targets of at least 44 px, no horizontal scroll at 390 px. */

.fh-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 700px) { .fh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1150px) { .fh-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.fh-flow { display: block; padding: 14px 16px; color: inherit; text-decoration: none; cursor: pointer; border-left: 5px solid var(--line); min-width: 0; }
.fh-flow:hover { background: #f8fafc; }
.fh-flow:focus-visible { outline: 3px solid rgba(29, 111, 184, .35); outline-offset: 1px; }
.fh-flow.ok { border-left-color: var(--teal); }
.fh-flow.warn { border-left-color: #d9920a; }
.fh-flow.down { border-left-color: var(--red); }
.fh-flow.idle, .fh-flow.off { border-left-color: #b5c0cc; }
.fh-flow .head { display: flex; align-items: flex-start; gap: 10px; }
.fh-flow .name { font-weight: 700; font-size: 1.02rem; line-height: 1.25; overflow-wrap: anywhere; }
.fh-flow .what { color: var(--ink-2); font-size: .86rem; margin-top: 2px; }
.fh-flow .lines { margin-top: 10px; font-size: .88rem; color: var(--ink-2); display: grid; gap: 3px; }
.fh-flow .lines b { color: var(--ink); font-weight: 600; }
.fh-flow .problem { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: var(--red-soft); color: var(--red); font-size: .88rem; font-weight: 600; overflow-wrap: anywhere; }
.fh-flow .problem.warn { background: var(--amber-soft); color: #6b4a0c; }
.fh-flow .counts { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }

.fh-light { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; margin-top: 4px; background: #b5c0cc; box-shadow: 0 0 0 3px rgba(181, 192, 204, .25); }
.fh-light.ok { background: var(--teal); box-shadow: 0 0 0 3px rgba(14, 124, 102, .18); }
.fh-light.warn { background: #d9920a; box-shadow: 0 0 0 3px rgba(217, 146, 10, .2); }
.fh-light.down { background: var(--red); box-shadow: 0 0 0 3px rgba(180, 35, 24, .2); }

.fh-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.fh-summary .badge { font-size: .84rem; padding: 6px 12px; }

.fh-incident { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-bottom: 1px solid var(--line-2); }
.fh-incident:last-child { border-bottom: 0; }
.fh-incident > i { color: var(--red); margin-top: 3px; font-size: 1.1rem; }
.fh-incident.closed > i { color: var(--teal); }
.fh-incident .t { font-weight: 700; overflow-wrap: anywhere; }
.fh-incident .s { color: var(--ink-2); font-size: .88rem; margin-top: 2px; overflow-wrap: anywhere; }
.fh-incident .meta { color: var(--ink-3); font-size: .8rem; margin-top: 4px; }
.fh-incident .btn { flex: 0 0 auto; }
@media (max-width: 639px) { .fh-incident { flex-wrap: wrap; } .fh-incident .btn { width: 100%; } }

/* A row of the message list: a link, the whole row is the target. */
.fh-msg { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line-2); color: inherit; text-decoration: none; cursor: pointer; min-height: 60px; }
.fh-msg:last-child { border-bottom: 0; }
.fh-msg:hover { background: #f8fafc; }
.fh-msg .dir { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--blue-soft); color: #134a7c; }
.fh-msg .dir.out { background: var(--teal-soft); color: #0b5e4e; }
.fh-msg .t { font-weight: 600; overflow-wrap: anywhere; }
.fh-msg .s { font-size: .84rem; color: var(--ink-3); overflow-wrap: anywhere; }
.fh-msg .right { margin-left: auto; text-align: right; flex: 0 0 auto; display: grid; gap: 4px; justify-items: end; }
.fh-msg .right .when { font-size: .8rem; color: var(--ink-3); white-space: nowrap; }
@media (max-width: 479px) { .fh-msg { flex-wrap: wrap; } .fh-msg .right { margin-left: 48px; text-align: left; justify-items: start; display: flex; align-items: center; gap: 8px; } }

.fh-filters { display: grid; grid-template-columns: 1fr; gap: 0 12px; }
@media (min-width: 700px) { .fh-filters { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 699px) { .fh-filters.closed { display: none; } }
@media (min-width: 700px) { .fh-filter-toggle { display: none !important; } }
.fh-searchbar { display: flex; gap: 8px; margin-bottom: 12px; }
.fh-searchbar .search { flex: 1; min-width: 0; }

.fh-timeline { list-style: none; margin: 0; padding: 0; }
.fh-timeline li { position: relative; padding: 0 0 16px 28px; }
.fh-timeline li:last-child { padding-bottom: 0; }
.fh-timeline li::before { content: ""; position: absolute; left: 6px; top: 6px; width: 11px; height: 11px; border-radius: 50%; background: var(--blue); }
.fh-timeline li::after { content: ""; position: absolute; left: 11px; top: 20px; bottom: 0; width: 1px; background: var(--line); }
.fh-timeline li:last-child::after { display: none; }
.fh-timeline li.bad::before { background: var(--red); }
.fh-timeline li.good::before { background: var(--teal); }
.fh-timeline li.console::before { background: #d9920a; }
.fh-timeline .t { font-weight: 600; }
.fh-timeline .s { font-size: .86rem; color: var(--ink-2); overflow-wrap: anywhere; }
.fh-timeline .when { font-size: .8rem; color: var(--ink-3); }

.fh-kv { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; }
.fh-kv > div { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-2); }
.fh-kv > div:last-child { border-bottom: 0; }
.fh-kv dt { flex: 0 0 38%; max-width: 190px; color: var(--ink-3); font-size: .86rem; margin: 0; }
.fh-kv dd { margin: 0; flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }

.fh-preview { margin: 0; padding: 12px; background: #0f1b28; color: #dfe8f1; border-radius: 10px; font-family: Consolas, "SF Mono", Menlo, monospace; font-size: .8rem; line-height: 1.45; overflow: auto; max-height: 420px; white-space: pre; }

/* Thirty days as thirty thin columns; the numbers are in the title of each column and in the totals beside. */
.fh-days { display: flex; align-items: flex-end; gap: 2px; height: 90px; padding-top: 6px; }
.fh-days .d { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.fh-days .d span { display: block; width: 100%; }
.fh-days .d .done { background: var(--teal); border-radius: 2px 2px 0 0; }
.fh-days .d .skip { background: #9db4c8; }
.fh-days .d .bad { background: var(--red); }
.fh-days .d .wait { background: #d9920a; }
.fh-days .d.empty-day span.base { height: 2px; background: var(--line); }
.fh-days-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: .8rem; color: var(--ink-2); margin-top: 8px; }
.fh-days-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; }

.fh-two { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 1000px) { .fh-two { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; } }

.fh-days-row { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.fh-set-row { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line-2); min-height: 60px; }
.fh-set-row:last-child { border-bottom: 0; }
.fh-set-row .t { font-weight: 600; overflow-wrap: anywhere; }
.fh-set-row .s { font-size: .84rem; color: var(--ink-3); overflow-wrap: anywhere; }
.fh-set-row .acts { margin-left: auto; display: flex; gap: 8px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 639px) { .fh-set-row { flex-wrap: wrap; } .fh-set-row .acts { width: 100%; margin-left: 0; } .fh-set-row .acts .btn { flex: 1; } }
code.fh-code { font-family: Consolas, "SF Mono", Menlo, monospace; font-size: .84rem; background: var(--line-2); padding: 1px 6px; border-radius: 6px; }