/* jstree custom theme overrides for KooKoa Folders */
.jstree-default .jstree-node,
.jstree-default .jstree-icon {
    background-image: none;
}

/* ================================================
   Tree Connector Lines (retro green)

   jsTree DOM:
     ul.jstree-children          ← position:relative context
       li.jstree-node            ← margin-left:10px; position:relative
         i.jstree-ocl            ← width:18px (toggle +/−)
         a.jstree-anchor
         ul.jstree-children      ← recurse

   Layout from <ul.jstree-children> left edge:
     0..10px = margin gap (empty space before child node)
     10px    = child node left edge
     10..28px = child OCL (toggle +/−)
     28px+   = child anchor text

   Strategy: vertical line at 5px (center of margin gap),
   horizontal connector from 5px to 10px (just reaching node edge).
   This avoids covering the +/− toggle entirely.
   ================================================ */

/* Vertical line — positioned between OCL and margin, not overlapping toggle */
#kookoawpf-jstree .jstree-node > .jstree-children {
    position: relative;
}

#kookoawpf-jstree .jstree-open > .jstree-children::before {
    content: '';
    position: absolute;
    top: 0;
    left: 8px;
    bottom: 0;
    width: 0;
    border-left: 1px solid rgba(57, 255, 20, 0.45);
    pointer-events: none;
    z-index: 1;
}

/* Horizontal connector — from vertical line to folder icon (after OCL) */
#kookoawpf-jstree .jstree-node > .jstree-children > .jstree-node {
    position: relative;
}

#kookoawpf-jstree .jstree-node > .jstree-children > .jstree-node::before {
    content: '';
    position: absolute;
    top: 16px;
    left: -2px;
    width: 26px;
    height: 0;
    border-top: 1px solid rgba(57, 255, 20, 0.45);
    pointer-events: none;
    z-index: 1;
}

/* OCL toggle must be above connector lines */
#kookoawpf-jstree .jstree-icon.jstree-ocl {
    position: relative;
    z-index: 3;
}

/* Mask the vertical line below the last child */
#kookoawpf-jstree .jstree-node > .jstree-children > .jstree-node:last-child::after {
    content: '';
    position: absolute;
    left: -3px;
    top: 17px;
    bottom: 0;
    width: 3px;
    background: #0d1117;
    background: var(--kookoawpf-bg, #0d1117);
    pointer-events: none;
    z-index: 2;
}

/* No connector lines at root level */
#kookoawpf-jstree > .jstree-container-ul::before,
#kookoawpf-jstree > .jstree-container-ul::after,
#kookoawpf-jstree > .jstree-container-ul > .jstree-node::before,
#kookoawpf-jstree > .jstree-container-ul > .jstree-node::after {
    display: none !important;
}

/* ================================================
   DnD Visual Feedback (competitor approach)
   Classes added by check_callback during drag:
   - drag-up  = cursor above node → border-top (reorder before)
   - drag-in  = cursor inside node → background (drop inside)
   - drag-bot = cursor below node → border-bottom (reorder after)
   ================================================ */

/* BEFORE: green line at top — full width */
#kookoawpf-jstree .drag-up > .jstree-anchor {
    position: relative;
    background: transparent !important;
    color: var(--kookoawpf-text, #c9d1d9) !important;
}
#kookoawpf-jstree .drag-up > .jstree-anchor::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -40px;
    right: -20px;
    height: 3px;
    background: #39FF14;
    box-shadow: 0 0 8px rgba(57, 255, 20, 0.5);
    z-index: 10;
    pointer-events: none;
}

/* AFTER: green line at bottom — full width */
#kookoawpf-jstree .drag-bot > .jstree-anchor {
    position: relative;
    background: transparent !important;
    color: var(--kookoawpf-text, #c9d1d9) !important;
}
#kookoawpf-jstree .drag-bot > .jstree-anchor::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: -40px;
    right: -20px;
    height: 3px;
    background: #39FF14;
    box-shadow: 0 0 8px rgba(57, 255, 20, 0.5);
    z-index: 10;
    pointer-events: none;
}

/* INSIDE: green highlight on the whole row */
#kookoawpf-jstree .drag-in > .jstree-anchor {
    background: rgba(57, 255, 20, 0.18) !important;
    color: #39FF14 !important;
    outline: 2px dashed var(--kookoawpf-green-dim);
}

/* Hide jsTree's default marker triangle — we use border styling instead */
#jstree-marker {
    display: none !important;
}

/* ================================================
   DnD Drag Helper Styling
   ================================================ */
#jstree-dnd {
    background: #0d1117 !important;
    border: 1px solid #39FF14 !important;
    color: #e6edf3 !important;
    padding: 4px 10px !important;
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 12px !important;
    border-radius: 0 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6), 0 0 6px rgba(57, 255, 20, 0.2) !important;
    white-space: nowrap;
}

#jstree-dnd .jstree-icon {
    display: inline-block !important;
    margin-right: 6px !important;
}

#jstree-dnd .jstree-ok {
    background-image: none !important;
    background-color: transparent !important;
}
#jstree-dnd .jstree-ok::after {
    content: '✓';
    color: #39FF14;
    font-size: 14px;
    font-weight: bold;
}

#jstree-dnd .jstree-er {
    background-image: none !important;
    background-color: transparent !important;
}
#jstree-dnd .jstree-er::after {
    content: '✗';
    color: #FF3B30;
    font-size: 14px;
    font-weight: bold;
}

/* ================================================
   Move Animation — flash + slide after drop
   ================================================ */
@keyframes kookoawpf-drop-land {
    0%   { opacity: 0; transform: translateY(-8px); background: rgba(57, 255, 20, 0.25); }
    30%  { opacity: 1; transform: translateY(2px);  background: rgba(57, 255, 20, 0.15); }
    60%  { transform: translateY(0); background: rgba(57, 255, 20, 0.08); }
    100% { opacity: 1; transform: translateY(0); background: transparent; }
}
#kookoawpf-jstree .kookoawpf-just-moved > .jstree-anchor {
    animation: kookoawpf-drop-land 0.45s ease-out;
}
.media-modal .kookoawpf-just-moved > .jstree-anchor {
    animation: none !important;
}
/* ================================================
   External drag drop hover on tree nodes
   ================================================ */
#kookoawpf-jstree .kookoawpf-drop-hover > .jstree-anchor {
    background: rgba(57, 255, 20, 0.15) !important;
    box-shadow: inset 0 0 0 1px rgba(57, 255, 20, 0.4);
}