/* Node Graph page — supplements style.css (inherits all CSS custom properties) */

/* ---- Page header extra ---- */
.header-node-count {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--clr-text-muted);
    align-self: flex-start;
    margin-top: 6px;
    background: var(--clr-surface-2);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-sm);
    padding: 3px 10px;
}

/* ---- Graph layout ---- */
.node-graph-page {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ---- Toolbar ---- */
.graph-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 12px 16px;
}

.toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    color: var(--clr-text-muted);
    cursor: pointer;
    user-select: none;
}

.toggle-label input[type="checkbox"] {
    accent-color: var(--clr-accent);
    width: 14px;
    height: 14px;
    cursor: pointer;
}

/* ---- Canvas card ---- */
.canvas-card {
    padding: 10px;
}

#graph-canvas {
    background: #070709;
    border-radius: var(--radius-md);
    display: block;
    width: 100%;
    height: 480px;
    cursor: default;
}

/* ---- Side panels ---- */
.side-panels {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
}

.panel-box {
    padding: 14px 16px;
    min-height: 120px;
}

.empty-hint {
    color: var(--clr-text-faint);
    font-size: 0.82rem;
}

/* ---- Selected node info ---- */
#selected-info .field {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: 1px solid var(--clr-border);
    font-size: 0.82rem;
}

#selected-info .label { color: var(--clr-text-muted); }
#selected-info .value { color: var(--clr-text); font-family: var(--font-mono); }

/* ---- Plugin list ---- */
#plugin-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.plugin-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid var(--clr-border);
    font-size: 0.82rem;
}

.plugin-row .name  { color: var(--clr-purple); font-weight: 500; }
.plugin-row .type  { color: var(--clr-text-faint); font-size: 0.75rem; margin-left: 5px; }

.state-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 20px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.state-badge.active     { background: rgba(5,150,105,0.18); color: #34d399; border: 1px solid rgba(52,211,153,0.25); }
.state-badge.registered { background: rgba(59,130,246,0.15); color: #60a5fa; border: 1px solid rgba(96,165,250,0.25); }
.state-badge.loaded     { background: rgba(245,158,11,0.15); color: #fbbf24; border: 1px solid rgba(251,191,36,0.25); }
.state-badge.failed     { background: rgba(239,68,68,0.15);  color: #f87171; border: 1px solid rgba(248,113,113,0.25); }

/* ---- Graph log ---- */
#graph-log {
    font-family: var(--font-mono);
    font-size: 0.77rem;
    max-height: 100px;
    overflow-y: auto;
}

/* ---- Status bar ---- */
.graph-status-bar {
    margin: 0;
    font-size: 0.75rem;
    font-family: var(--font-mono);
    color: var(--clr-text-faint);
    text-align: right;
    padding: 0 2px;
}

/* ---- Responsive ---- */
@media (max-width: 800px) {
    .side-panels { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .graph-toolbar { gap: 6px; }
    #graph-canvas  { height: 320px; }
}