/*
 * HunchHatch Layout Overrides
 * 
 * Applied via filter.rootClass='hh-layout' on ot-tree-view-renderer.
 * Uses CSS custom properties to override structural tree chrome on mapped nodes
 * without specificity conflicts with Vue scoped styles.
 *
 * Three-column zone layout: outcomeZone | requestZone | capabilityZone
 * The --inline class is only present on nodes with a resolved componentMap entry,
 * so unmapped grouping nodes (outcomeZone, requestZone, capabilityZone) retain full tree chrome.
 */

/* --- Dark theme for the entire HunchHatch tree --- */
.hh-layout.ot-tree-view-renderer {
    --ot-tree-text: #e0e0e0;
    --ot-tree-bg-hover: rgba(255, 255, 255, 0.06);
    --ot-tree-border: #2a2a4a;
    --ot-tree-badge-bg: #2a2a4a;
    --ot-tree-badge-text: #a0a0c0;
    --ot-tree-toggle: #8888aa;
    --ot-tree-toggle-leaf: #555577;
}

/* Container styling only on the root node */
.hh-layout.ot-tree-view-renderer--depth-0 {
    background: #0f0f1a;
    border-radius: 6px;
    padding: 0.75rem;
    --pointer-events-interact-non-ui: all;
    --pointer-events-interact-ui: all;
}

/* --- Structural overrides for mapped (inline) nodes --- */
/* Hide header only on depth-2 nodes (zone children mapped to HH components).
   Leaf nodes (depth 3+) keep their header visible so key labels show. */
.hh-layout .ot-tree-view-renderer--depth-2.ot-tree-view-renderer--inline {
    --ot-tree-header-display: none;
    --ot-tree-children-padding: 0;
    --ot-tree-children-border: none;
    --ot-tree-children-margin: 0;
    --ot-tree-embedded-padding: 0;
    --ot-tree-font-size: inherit;
}

/* --- ot-overlay wrapper styling (applied via filter.layoutClass='hh-layout') --- */
.hh-layout.ot-overlay-out {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* --- Panel spacing between sibling mapped components --- */
.hh-layout + .hh-layout {
    margin-top: 0.5rem;
}

/* --- Grouping node label styling (outcomeZone, requestZone, capabilityZone) --- */
.hh-layout .ot-tree-view-renderer--depth-1 > .ot-tree-view-renderer__header .ot-tree-view-renderer__label {
    font-size: 1rem;
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: 0.02em;
    color: #c8c8e0;
}

/* --- Children border in dark theme --- */
.hh-layout .ot-tree-view-renderer__children {
    border-left-color: #2a2a4a;
}

/* --- Root children: outcomeZone + requestZone + capabilityZone vertical layout --- */
.hh-layout.ot-tree-view-renderer--depth-0 > .ot-tree-view-renderer__children {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hh-layout.ot-tree-view-renderer--depth-0 > .ot-tree-view-renderer__children > .ot-overlay-out {
    width: 100%;
    padding: 0;
}

/* Remove column-specific flex and border rules */

/* --- Components stack vertically within each grouping column --- */
.hh-layout .ot-tree-view-renderer--depth-1 > .ot-tree-view-renderer__children {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.hh-layout .ot-tree-view-renderer--depth-1 > .ot-tree-view-renderer__children > .ot-overlay-out {
    width: 100%;
}

/* --- State Layer Visual Treatments (Req 4.1, 4.6) --- */

/* Live state: default, no special indicator */
.hh-state-live {
    /* No visual treatment — this is the default */
}

/* Proposed state: dashed border + slight opacity */
.hh-state-proposed {
    border: 1px dashed #6a6aaa;
    opacity: 0.85;
    position: relative;
}

.hh-state-proposed::before {
    content: 'proposed';
    position: absolute;
    top: -0.6rem;
    right: 0.5rem;
    font-size: 0.65rem;
    color: #8888cc;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Recorded state: muted palette + timestamp prominence */
.hh-state-recorded {
    opacity: 0.7;
    border-left: 2px solid #444466;
    padding-left: 0.5rem;
}