/* SPDX-License-Identifier: AGPL-3.0-or-later */

.tb-root {
    display: flex;
    height: 100%;
    background: var(--bg);
}

.tb-palette {
    width: 180px;
    border-right: 1px solid var(--border);
    background: var(--bg-elevated);
    padding: 12px 10px;
    overflow-y: auto;
    flex-shrink: 0;
}

.tb-canvas {
    flex: 1;
    position: relative;
    overflow: auto;
    background:
        linear-gradient(var(--border) 1px, transparent 1px) 0 0 / 20px 20px,
        linear-gradient(90deg, var(--border) 1px, transparent 1px) 0 0 / 20px 20px,
        var(--bg);
    background-blend-mode: overlay;
    opacity: 1;
}

.tb-detail {
    width: 260px;
    border-left: 1px solid var(--border);
    background: var(--bg-elevated);
    padding: 14px;
    overflow-y: auto;
    flex-shrink: 0;
}

/* Node */
.tb-node {
    position: absolute;
    background: var(--bg-card);
    border: 1.5px solid var(--accent);
    border-radius: 6px;
    padding: 6px 10px;
    font-family: ui-monospace, monospace;
    font-size: 11px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    min-width: 110px;
    cursor: grab;
    user-select: none;
}
.tb-node.dragging { cursor: grabbing; opacity: 0.85; }
.tb-node.root { background: #f3f0ff; border-color: #5b3ed4; }
.tb-node.slot { background: var(--warning-soft); border-color: var(--warning); border-style: dashed; }
.tb-node.selected { box-shadow: 0 0 0 2px var(--accent), 0 1px 4px rgba(0,0,0,0.15); }
.tb-node .cls { font-weight: 600; color: var(--accent); font-size: 10px; }
.tb-node.root .cls { color: #5b3ed4; }
.tb-node.slot .cls { color: var(--warning); }
.tb-node .nm { color: var(--text); margin-top: 2px; }
.tb-node .pd { color: var(--text-soft); font-size: 9px; margin-top: 2px; }

/* SVG edge container */
.tb-edges { position: absolute; inset: 0; pointer-events: none; width: 100%; height: 100%; }
.tb-edges path { stroke: var(--accent); stroke-width: 1.5; fill: none; }

/* Palette */
.tb-palette .ph {
    font-weight: 600;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 9px;
    margin-bottom: 6px;
}
.tb-palette .chip {
    display: block;
    background: var(--accent-soft);
    color: var(--accent-strong);
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    padding: 5px 8px;
    margin-bottom: 4px;
    cursor: pointer;
    font-size: 11px;
    font-family: ui-monospace, monospace;
    text-align: left;
    width: 100%;
}
.tb-palette .chip:hover { background: var(--accent); color: white; }
.tb-palette .empty {
    color: var(--text-soft);
    font-style: italic;
    font-size: 11px;
    padding: 8px;
    text-align: center;
}

/* Detail panel */
.tb-detail .dh {
    font-size: 9px;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 12px;
    margin-bottom: 4px;
}
.tb-detail .dh:first-child { margin-top: 0; }
.tb-detail .empty {
    color: var(--text-soft);
    font-style: italic;
    font-size: 11px;
    text-align: center;
    padding: 30px 8px;
}
.tb-detail input, .tb-detail select {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 4px 7px;
    font-family: inherit;
    font-size: 11px;
    color: var(--text);
    width: 100%;
}
.tb-detail label.toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text);
    cursor: pointer;
}
.tb-detail .delete-btn {
    background: var(--error-soft);
    color: var(--error);
    border: 1px solid var(--error);
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 11px;
    margin-top: 14px;
    width: 100%;
    cursor: pointer;
}

.tb-mid { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tb-viewbar { display: flex; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.tb-vbtn { font-size: 11px; padding: 4px 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; color: var(--text-muted); cursor: pointer; }
.tb-vbtn.active { color: var(--text); border-color: var(--accent); }

.tb-node .lyr { font-size: 9px; color: var(--accent); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tb-list { flex: 1; overflow: auto; padding: 8px 0; }
.tl-row { display: flex; align-items: center; gap: 8px; padding: 4px 8px; cursor: pointer; font-size: 12px; }
.tl-row:hover { background: var(--bg-card); }
.tl-selected { background: var(--bg-card); outline: 1px solid var(--accent); }
.tl-caret { width: 12px; color: var(--text-soft); cursor: pointer; }
.tl-leaf { cursor: default; }
.tl-cls { font-family: ui-monospace, monospace; color: var(--accent); }
.tl-nm { color: var(--text); }
.tl-pd { font-size: 10px; color: var(--text-muted); }
.tl-lyr { font-size: 10px; color: var(--accent); margin-left: auto; }

.pal-grp { font-size: 10px; color: var(--text-soft); text-transform: uppercase; margin: 8px 0 4px; }