/* Live Status wallboard — incident-response triage board.
   Shared by the production page and the design mockup. */

.sb-page { max-width: 1100px; margin: 0 auto; }

.sb-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap;
}
.sb-title { display: flex; align-items: center; gap: .6rem; }
.sb-live-dot {
    width: 12px; height: 12px; border-radius: 50%;
    background: #23d160; box-shadow: 0 0 0 0 rgba(35, 209, 96, .6);
    animation: sb-pulse 2s infinite;
}
@keyframes sb-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(35, 209, 96, .6); }
    70%  { box-shadow: 0 0 0 10px rgba(35, 209, 96, 0); }
    100% { box-shadow: 0 0 0 0 rgba(35, 209, 96, 0); }
}

/* Stale data: amber, no pulse — the board is showing the last good snapshot,
   not a live refresh. Toggled by the afterRequest handler on a failed poll. */
.sb-live-dot.sb-stale {
    background: #ffaa00;
    box-shadow: 0 0 0 0 rgba(255, 170, 0, .6);
    animation: none;
}

.sb-stale-banner {
    display: flex; align-items: center; gap: .5rem;
    margin: 0 0 1rem; padding: .65rem 1rem; border-radius: 8px;
    background: #fff8ec; border: 1px solid #f3d79b; color: #946000;
    font-size: .9rem;
}
/* `[hidden]` must win over the display:flex above. */
.sb-stale-banner[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
    .sb-live-dot { animation: none; }
}

.sb-banner {
    display: flex; align-items: center; gap: 1rem;
    padding: 1.5rem 1.75rem; border-radius: 10px; margin-bottom: 1.5rem;
}
.sb-banner-ok    { background: #edfbf3; border: 1px solid #c6efd8; color: #1c7b43; }
.sb-banner-alert { background: #fff5f5; border: 1px solid #f7c9c9; color: #b32020; }
.sb-banner-title { font-size: 1.35rem; font-weight: 700; line-height: 1.2; }
.sb-banner-detail { font-size: .95rem; opacity: .85; margin-top: .15rem; }

.sb-section { margin-bottom: 1.5rem; border-left: 4px solid #dbdbdb; padding-left: 1rem; }
.sb-section-title {
    display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem;
    font-weight: 700; color: #363636;
}
.sb-count {
    background: #f0f0f0; border-radius: 999px; padding: 0 .6rem;
    font-size: .8rem; font-weight: 700; color: #555;
}
.sb-hint { font-weight: 400; font-style: italic; color: #8a8a8a; font-size: .85rem; }

.sb-grid {
    display: grid; gap: .85rem;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.sb-card {
    background: #fff; border: 1px solid #ececec; border-radius: 10px;
    padding: 1rem 1.1rem; box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}
.sb-card-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.sb-card-host { font-weight: 700; font-size: 1.05rem; display: inline-flex; align-items: center; gap: .35rem; word-break: break-all; }
.sb-card-error {
    margin: .5rem 0; font-family: monospace; font-size: .85rem;
    color: #555; background: #fafafa; padding: .3rem .5rem; border-radius: 6px;
}
.sb-card-meta { color: #6b6b6b; font-size: .85rem; display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.sb-card-meta .sb-dot { margin: 0 .15rem; color: #ccc; }
.sb-actions { margin-top: .85rem; display: flex; flex-wrap: wrap; gap: .4rem; }

/* Category accents (down=red, dns=purple, ssl=orange, keyword=amber) */
.sb-accent-down    { --sb: #e74c3c; }
.sb-accent-dns     { --sb: #8e44ad; }
.sb-accent-ssl     { --sb: #e67e22; }
.sb-accent-keyword { --sb: #f39c12; }

.sb-section.sb-accent-down    { border-left-color: #e74c3c; }
.sb-section.sb-accent-dns     { border-left-color: #8e44ad; }
.sb-section.sb-accent-ssl     { border-left-color: #e67e22; }
.sb-section.sb-accent-keyword { border-left-color: #f39c12; }

.sb-badge {
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    color: #fff; background: var(--sb); padding: .2rem .55rem; border-radius: 999px; white-space: nowrap;
}
.sb-btn-primary {
    background: var(--sb); border-color: var(--sb); color: #fff; font-weight: 600;
}
.sb-btn-primary:hover { filter: brightness(.93); color: #fff; }