/* resources/css/rete-dark.css
   Rete v2 + React classic preset (styled-components) overrides using stable data-testid hooks.
   Assumes your Livewire mount element has: id="rete-editor"
*/

/* ===== Root / canvas ===== */
#rete-editor {
    background: #020617;              /* slate-950 */
    color: #e5e7eb;                    /* gray-200 */
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}

/* Helps with crisp edges on SVG */
#rete-editor svg {
    overflow: visible;
}

/* ===== Node ===== */
#rete-editor [data-testid="node"] {
    background: #0b1220;              /* deep slate */
    border: 1px solid #273449;        /* slate-ish */
    border-radius: 14px;
    color: #e5e7eb;
    min-width: 190px;
    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.35),
        0 2px 8px rgba(0, 0, 0, 0.25);
    overflow: hidden;                 /* keeps title rounding clean */
}

/* Node hover lift */
#rete-editor [data-testid="node"]:hover {
    border-color: #3b82f6;            /* blue-500 */
    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.45),
        0 0 0 2px rgba(59, 130, 246, 0.22);
}

/* ===== Title ===== */
#rete-editor [data-testid="title"] {
    background: linear-gradient(180deg, #050b16 0%, #020617 100%);
    padding: 9px 12px;
    font-weight: 700;
    letter-spacing: 0.2px;
    border-bottom: 1px solid #162033;
}

/* ===== Ports rows ===== */
#rete-editor [data-testid^="output-"],
#rete-editor [data-testid^="input-"] {
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

#rete-editor [data-testid="output-title"],
#rete-editor [data-testid="input-title"] {
    font-size: 12px;
    color: #cbd5e1;                   /* slate-300 */
    user-select: none;
}

/* ===== Sockets =====
   Your DOM:
   <span data-testid="output-socket" class="output-socket">
     <span>
       <div class="...">
         <div title="default" class="..."></div>
       </div>
     </span>
   </span>
   We'll style the inner "title=default" dot and add a glow ring via the wrapper.
*/

/* Wrapper alignment */
#rete-editor [data-testid="output-socket"],
#rete-editor [data-testid="input-socket"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Outer ring/glow (target the first div under > span > div) */
#rete-editor [data-testid="output-socket"] > span > div,
#rete-editor [data-testid="input-socket"] > span > div {
    width: 18px !important;
    height: 18px !important;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.35); /* slate-900 */
    box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.15) inset;
}

/* The actual socket dot (title="default") */
#rete-editor [data-testid="output-socket"] div[title="default"],
#rete-editor [data-testid="input-socket"] div[title="default"] {
    width: 10px !important;
    height: 10px !important;
    border-radius: 9999px;
    background: #38bdf8;               /* sky-400 */
    box-shadow:
        0 0 0 2px rgba(2, 6, 23, 0.85),  /* dark outline */
        0 0 12px rgba(56, 189, 248, 0.35);
    transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

/* Differentiate input vs output sockets */
#rete-editor [data-testid="input-socket"] div[title="default"] {
    background: #a78bfa;               /* violet-400 */
    box-shadow:
        0 0 0 2px rgba(2, 6, 23, 0.85),
        0 0 12px rgba(167, 139, 250, 0.35);
}

/* Socket hover */
#rete-editor [data-testid="output-socket"]:hover div[title="default"],
#rete-editor [data-testid="input-socket"]:hover div[title="default"] {
    transform: scale(1.12);
}

/* ===== Controls (inputs inside nodes) ===== */
#rete-editor input,
#rete-editor select,
#rete-editor textarea {
    background: rgba(2, 6, 23, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 10px;
    color: #e5e7eb;
    padding: 6px 8px;
    outline: none;
}

#rete-editor input:focus,
#rete-editor select:focus,
#rete-editor textarea:focus {
    border-color: rgba(56, 189, 248, 0.65);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18);
}

/* ===== Connections (animated) =====
   Most Rete connection renderers draw SVG <path>. We animate stroke-dashoffset to simulate flow.
*/

/* Base connection style */
#rete-editor svg path {
    stroke: rgba(56, 189, 248, 0.85) !important;  /* sky */
    stroke-width: 3.25px !important;
    stroke-linecap: round;
    fill: none;
    filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.18));
}

/* Animated "flow" effect */
#rete-editor svg path {
    stroke-dasharray: 10 8;
    animation: rete-flow 1.05s linear infinite;
}

/* Optional: slow down animation for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    #rete-editor svg path {
        animation: none;
        stroke-dasharray: none;
    }
}

@keyframes rete-flow {
    to {
        stroke-dashoffset: -36;
    }
}

/* Optional: highlight a connection on hover if your renderer adds pointer events to path */
#rete-editor svg path:hover {
    stroke: rgba(34, 197, 94, 0.95) !important;   /* green */
    filter: drop-shadow(0 0 10px rgba(34, 197, 94, 0.25));
}

/* ===== Optional: grid background if your area uses a plain container ===== */
#rete-editor {
    background-image:
        radial-gradient(rgba(148, 163, 184, 0.08) 1px, transparent 1px),
        radial-gradient(rgba(148, 163, 184, 0.05) 1px, transparent 1px);
    background-position: 0 0, 12px 12px;
    background-size: 24px 24px;
}