/* ═══════════════════════════════════════════════════════════════════════════
   ZB.MOM.WW.Overview — app-local styles.

   Everything here is what the shared ZB.MOM.WW.Theme kit does NOT already
   provide. The kit owns the design tokens, the shell, and the generic
   vocabulary this file builds on: .chip-*, .panel, .panel-foot, .kv, .agg-*,
   .card-grid, .conn-pill, .rail-btn, .mono, .rise. None of those are
   redefined here — this file adds only the dashboard-specific anatomy from
   docs/mockups/overview-dashboard-mockup.html (page-head, app/group headers,
   the instance card, the check-detail list).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Page header ────────────────────────────────────────────────────────── */
.page-head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin: 0 0 1rem; }
.page-head h1 { font-size: 1.25rem; font-weight: 600; letter-spacing: 0.01em; margin: 0; text-wrap: balance; }
.page-head .spacer { flex: 1; }
.page-meta { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-soft); }

/* KPI variants the kit does not carry (it ships .alert / .caution only). */
.agg-card.good .agg-value { color: var(--ok); }
.agg-card.quiet .agg-value { color: var(--idle); }
.kv .v.idle { color: var(--idle); }

/* ── Application sections ───────────────────────────────────────────────── */
.app-section { margin-bottom: 1.5rem; }
.app-head {
    display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
    padding-bottom: 0.4rem; border-bottom: 1px solid var(--rule-strong); margin-bottom: 0.75rem;
}
.app-head h2 { font-size: 1.02rem; font-weight: 600; margin: 0; }
.app-head .spacer { flex: 1; }
.app-meta { font-family: var(--mono); font-size: 0.76rem; color: var(--ink-faint); }

.group { margin-bottom: 0.9rem; }
.group-head { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.group-name {
    font-size: 0.74rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.07em; color: var(--ink-soft);
}
.group-meta { font-family: var(--mono); font-size: 0.74rem; color: var(--ink-faint); }

/* ── Instance card ──────────────────────────────────────────────────────── */
.inst {
    background: var(--card); border: 1px solid var(--rule); border-radius: 8px;
    overflow: hidden; display: flex; flex-direction: column;
}

/* Status is carried by the top stripe. Unreachable additionally goes DASHED:
   colour alone cannot distinguish it from Down, and the two send an operator
   to completely different places (network vs. the application itself). */
.inst.up { border-top: 3px solid var(--ok); }
.inst.degraded { border-top: 3px solid var(--warn); }
.inst.down { border-top: 3px solid var(--bad); }
.inst.unreachable { border-top: 3px solid var(--bad); border-style: dashed; border-top-style: solid; }
.inst.pending { border-top: 3px solid var(--rule-strong); }
.inst.stale { border-top: 3px solid var(--idle); }
.inst.stale .inst-body,
.inst.stale .inst-head .inst-host { opacity: 0.55; }

.inst-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 0.6rem; padding: 0.6rem 0.9rem 0.45rem;
}
.inst-name { font-weight: 600; font-size: 0.92rem; }
.inst-host {
    display: block; font-family: var(--mono); font-size: 0.72rem;
    color: var(--ink-faint); margin-top: 0.15rem;
}
.inst-chips { display: flex; gap: 0.3rem; flex-wrap: wrap; justify-content: flex-end; }

.inst .panel-foot {
    margin-top: auto; display: flex; align-items: center;
    justify-content: space-between; gap: 0.6rem;
}
.foot-note { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-faint); }

/* ── Check detail (native <details>, no JS) ─────────────────────────────── */
details.checks { border-top: 1px solid var(--rule); }
details.checks summary {
    list-style: none; cursor: pointer; padding: 0.45rem 0.9rem; font-size: 0.72rem;
    font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--ink-faint); user-select: none;
}
details.checks summary::-webkit-details-marker { display: none; }
details.checks summary::before { content: '\25B6'; font-size: 0.55rem; margin-right: 0.4rem; }
details.checks[open] summary::before { content: '\25BC'; }
details.checks summary:hover { color: var(--ink); }

.check-row { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.28rem 0.9rem; font-size: 0.8rem; }
.check-row:nth-child(even) { background: var(--zebra-bg); }
.check-name { font-family: var(--mono); font-size: 0.78rem; min-width: 9.5rem; }
.check-desc { color: var(--ink-soft); font-size: 0.78rem; }
.check-dot { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 8px; align-self: center; }
.check-dot.ok { background: var(--ok); }
.check-dot.warn { background: var(--warn); }
.check-dot.bad { background: var(--bad); }
.check-dot.idle { background: var(--idle); }

.check-data {
    margin: 0.35rem 0.9rem 0.6rem; padding: 0.4rem 0.6rem; background: var(--zebra-bg);
    border: 1px solid var(--rule); border-radius: 4px;
    font-family: var(--mono); font-size: 0.72rem; color: var(--ink-soft); line-height: 1.6;
    /* Scrolls inside its own box: an Akka address plus member counts is wider than a
       310px card, and letting it widen the card would break the whole grid. */
    overflow-x: auto; white-space: nowrap;
}
.check-data b { color: var(--accent-deep); font-weight: 500; }

.rail-note {
    padding: 0 0.6rem 0.6rem; font-family: var(--mono); font-size: 0.72rem;
    color: var(--ink-faint); line-height: 1.5;
}
