/* ══════════════════════════════════════════════════════════════════
   Flow Designer — Visual Configurator Styles
   Uses Bootstrap 5.3 / Odoo CSS custom properties so light + dark
   mode are handled automatically — zero manual overrides needed.
   ══════════════════════════════════════════════════════════════════ */

.fd-designer {
    background: var(--bs-body-bg);
    height: 100vh !important;
    max-height: 100vh;
    overflow: hidden;
}

/* ── Toolbar ── */
.fd-toolbar {
    background: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color);
    min-height: 48px;
    z-index: 10;
    flex-shrink: 0;
}

.fd-toolbar-title {
    font-size: 1rem;
    color: var(--bs-body-color);
    max-width: 250px;
}

/* Measurement button — no inline styles, uses a custom class */
.fd-btn-measure {
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);

    &:hover,
    &:focus {
        background-color: var(--bs-tertiary-bg);
        border-color: var(--bs-secondary-color);
        color: var(--bs-emphasis-color);
    }
}

/* ── SVG Canvas ── */
.fd-canvas-wrapper {
    flex: 1;
    min-height: 0;
}

.fd-svg-canvas {
    width: 100%;
    height: 100%;
    background: var(--bs-secondary-bg);
    cursor: grab;

    &:active {
        cursor: grabbing;
    }
}

/* SVG grid dots — themed */
.fd-grid-dot {
    fill: var(--bs-border-color);
}

/* ── Nodes ── */
.fd-node-group {
    &:hover .fd-node-rect {
        filter: brightness(0.97);
    }
}

.fd-node-content {
    user-select: none;
    -webkit-user-select: none;
}

/* Node text adapts to theme */
.fd-node-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--bs-emphasis-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fd-node-detail {
    font-size: 10px;
    color: var(--bs-secondary-color);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Ports ── */

/* Visible decorative port circle — no pointer events */
.fd-port-visual {
    stroke: var(--bs-body-bg);
    stroke-width: 2;
    pointer-events: none;
    transition: r 0.15s ease, stroke-width 0.15s ease;
}

/* Invisible hit area — this is the actual click target */
.fd-port-hit {
    fill: transparent;
    stroke: none;
    stroke-width: 0;
    pointer-events: all;
    cursor: crosshair;

    /* Grow the visible sibling on hover via CSS ~  */
    &:hover + .fd-port-visual {
        r: 9;
        stroke-width: 3;
    }
}

/* Input port fill is now set directly as SVG attribute (#8b95a1) */

/* Port labels — concrete color; var() doesn't resolve reliably in SVG */
.fd-port-label {
    fill: #8b95a1;
    font-size: 9px;
    pointer-events: none;
}

/* ── Connections ── */

/* Custom property so both light & dark themes get a visible stroke.
   Defined on SVG so markers and all children inherit reliably. */
.fd-svg-canvas {
    --fd-conn-stroke: #8b95a1;
    --fd-conn-label-bg: rgba(55, 65, 81, 0.85);   /* slate-700 @ 85 — visible on dark bg */
    --fd-conn-label-color: #e5e7eb;                 /* gray-200 — bright text */
}

@media (prefers-color-scheme: light) {
    .fd-svg-canvas {
        --fd-conn-stroke: #9ca3af;
        --fd-conn-label-bg: rgba(255, 255, 255, 0.9);
        --fd-conn-label-color: #4b5563;
    }
}

.fd-connection-path {
    transition: stroke 0.15s ease, stroke-width 0.15s ease;
}

.fd-connection-temp {
    stroke: var(--fd-conn-stroke);
    stroke-width: 2.5;
    stroke-dasharray: 8 4;
    stroke-linecap: round;
    fill: none;
    pointer-events: none;
}

/* Label background pill */
.fd-conn-label-bg {
    fill: var(--fd-conn-label-bg);
    pointer-events: none;
}

.fd-conn-label {
    fill: var(--fd-conn-label-color);
    user-select: none;
    pointer-events: none;
}

/* Arrow marker fills are set directly as SVG attributes
   because CSS custom properties don't cascade into marker contexts */

/* ── Properties Panel ── */
.fd-properties-panel {
    width: 320px;
    min-width: 320px;
    background: var(--bs-body-bg);
    border-left: 1px solid var(--bs-border-color);
    overflow-y: auto;
    flex-shrink: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
}

.fd-panel-header {
    background: var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color);
    min-height: 42px;
    flex-shrink: 0;
}

.fd-panel-body {
    flex: 1;
    overflow-y: auto;
}

.fd-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color);
    margin-bottom: 0.25rem;
}

/* Option list items */
.fd-option-row {
    padding: 4px 0;
}

.fd-option-bullet {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Loading Overlay ── */
.fd-loading-overlay {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--bs-body-bg) 85%, transparent);
    z-index: 50;
}
