/* Small accent layer on top of Bootstrap 5.3's native dark theme - not a re-skin. */

html, body {
    height: 100%;
}

.pulse-boot-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

/* Hidden by default - Blazor's own JS sets this to "block" only when an actual unrecoverable
   error occurs. Omitting this rule (as this file did) leaves the banner permanently visible on
   every page load, indistinguishable from a real crash. */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1050;
    padding: 0.75rem 1.25rem;
    background: #fff3cd;
    color: #664d03;
    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.3);
}

#blazor-error-ui .reload {
    color: #0d6efd;
    text-decoration: underline;
    cursor: pointer;
    margin-left: 0.5rem;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: 0.6rem;
}

/* ---- Status pill (StatusPill.razor) ---- */
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 0.4rem;
}

.status-dot.online {
    background: var(--bs-success);
    box-shadow: 0 0 6px var(--bs-success);
    animation: pulse-dot 2s infinite;
}

.status-dot.offline {
    background: var(--bs-danger);
    box-shadow: 0 0 6px var(--bs-danger);
    animation: pulse-dot 1.5s infinite;
}

.status-dot.unknown {
    background: var(--bs-secondary);
}

@keyframes pulse-dot {
    0% { opacity: 1; }
    50% { opacity: 0.35; }
    100% { opacity: 1; }
}

/* ---- Pulse logo (the bi-activity "wave" icon) - reuses the same pulse-dot keyframes the
   online status dot already animates with, so the brand mark itself visibly "pulses". ---- */
.pulse-logo-icon {
    animation: pulse-dot 1.8s infinite;
}

.navbar-brand {
    font-size: 1.25em;
    text-align: center;
}

/* ---- App shell ---- */
.pulse-sidebar {
    width: 260px;
    flex-shrink: 0;
    background: var(--bs-tertiary-bg);
    border-right: 1px solid var(--bs-border-color);
}

.pulse-sidebar .nav-link {
    color: var(--bs-body-color);
}

.pulse-sidebar .nav-link.active {
    background: var(--bs-primary);
    color: #fff;
}

/* ---- Sidebar group tree ---- */
.group-tree {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.group-tree ul {
    list-style: none;
    padding-left: 0.9rem;
    margin: 0;
    border-left: 1px dashed var(--bs-border-color);
    margin-left: 0.55rem;
}

.group-node {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.3rem 0.5rem;
    border-radius: 0.375rem;
    cursor: pointer;
    gap: 0.4rem;
}

.group-node:hover {
    background: var(--bs-tertiary-bg);
}

.group-node.active {
    background: var(--bs-primary);
    color: #fff;
}

.group-node .edit-icon {
    opacity: 0;
    transition: opacity 0.15s;
}

.group-node:hover .edit-icon {
    opacity: 0.7;
}

.group-node .edit-icon:hover {
    opacity: 1;
}

/* ---- Sparkline containers ---- */
.sparkline-container {
    position: relative;
    height: 60px;
    width: 100%;
}

/* ---- Misc ---- */
.cursor-pointer {
    cursor: pointer;
}

pre.pulse-output {
    background: var(--bs-tertiary-bg);
    padding: 0.6rem;
    border-radius: 0.375rem;
    font-size: 0.8rem;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 220px;
    overflow-y: auto;
}