/*
 * THE AUTOMATION CANVAS — the utilities the admin panel does NOT ship.
 *
 * ⚠️ WHY THIS FILE EXISTS. canvas.blade.php is written in Tailwind utility classes, but the admin panel
 * loads only Filament's own stylesheet plus resources/css/panel.css (plain CSS, by design — see the note
 * at the top of that file). It never loads resources/css/app.css, which is where Vite compiles the
 * project's Tailwind. Most of the canvas's classes happen to exist because Filament's own build ships
 * them; the ones below do not, and every one of them silently resolved to NOTHING.
 *
 * That is not cosmetic. `h-[75vh]` missing collapsed the canvas container to 2px, and `overflow-hidden`
 * clipped everything inside it — a BLANK PAGE, with correct markup and correct JS. `left-56` missing put
 * the pannable surface underneath the palette instead of beside it, so dropped nodes landed 14rem off.
 * `origin-top-left` missing made zoom scale from the centre. These were real defects hiding behind a
 * green PHP suite, which asserts on server-rendered HTML and cannot see a stylesheet that never arrived.
 *
 * These are reproduced verbatim from Tailwind's own values, deliberately keyed to the same class names,
 * so the view keeps reading as ordinary Tailwind and nothing in the markup has to know this file exists.
 *
 * ⚠️ ADDING A CLASS TO THE CANVAS VIEW? Check it against a loaded stylesheet first. The check is one line
 * in the browser console — see docs/AUTOMATION_CANVAS_TESTING.md. If it is absent, add it here.
 *
 * Registered with FilamentAsset in AdminPanelProvider and published to public/css/app/ by
 * `php artisan filament:assets`.
 */

/* Structural — the canvas is a blank page without these two. */
.h-\[75vh\] { height: 75vh; }

/* ⚠️ TWO CLASSES ON PURPOSE, NOT A TYPO. The pannable surface carries `inset-0 left-56`, and Filament's
   own stylesheet defines `.inset-0 { inset: 0 }` — a SHORTHAND, which sets left as well. Against a
   single-class `.left-56` the winner is decided by which stylesheet happens to load last, and Filament's
   was winning: the surface sat at left:0, underneath the palette, so a node dropped near the left edge
   landed 14rem off its cursor. Matching both classes raises specificity so this cannot depend on load
   order. Keep it. */
.inset-0.left-56 { left: 14rem; }

/* Layout */
.w-56       { width: 14rem; }
.left-0     { left: 0; }
.left-60    { left: 15rem; }
.top-3      { top: 0.75rem; }
.right-3    { right: 0.75rem; }
.mb-1       { margin-bottom: 0.25rem; }
.border-r   { border-right-width: 1px; border-right-style: solid; }

/* Behavioural — zoom scales from the corner the pan offset is measured from. */
.origin-top-left { transform-origin: top left; }

/* ⚠️ STRUCTURAL — THE EDGE WIRES. The edge <svg> is a 1px×1px box that deliberately draws OUTSIDE its
   own bounds, so it depends entirely on overflow:visible. SVG defaults to overflow:hidden, so without
   this every connection was rendered correctly and then CLIPPED AWAY: the <line> elements were in the
   DOM with correct coordinates and a 300x90 bounding box, and nothing was visible on screen. Nodes
   looked permanently unconnectable. Do not remove. */
.overflow-visible { overflow: visible; }

/* Layout */
.w-44         { width: 11rem; }
.right-0      { right: 0; }
.border-l     { border-left-width: 1px; border-left-style: solid; }
.rounded-t-lg { border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; }
.rounded-b    { border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem; }
.pb-1         { padding-bottom: 0.25rem; }

/* Type */
.uppercase     { text-transform: uppercase; }
.tracking-wide { letter-spacing: 0.025em; }
.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }

/* State colours — these carry MEANING here (publish blockers, save conflicts, parked nodes),
   so a missing one is a silently invisible warning, not a missing flourish. */
.bg-amber-50      { background-color: #fffbeb; }
.bg-red-100       { background-color: #fee2e2; }
.border-amber-300 { border-color: #fcd34d; }
.border-amber-400 { border-color: #fbbf24; }
.text-amber-500   { color: #f59e0b; }
.text-amber-600   { color: #d97706; }
.text-amber-800   { color: #92400e; }
.text-red-700     { color: #b91c1c; }

/* Filament ships .ring-1/.ring-2 but not our primary ring COLOURS; these feed its --tw-ring-color.
   The ring is the "you are connecting to this node" affordance — without it the connect mode is
   invisible. Values match the primary ramp in AdminPanelProvider. */
.ring-primary-400 { --tw-ring-color: rgb(45 184 176); }
.ring-primary-500 { --tw-ring-color: rgb(20 148 143); }

/*
 * CONNECT MODE — the armed state has to be impossible to miss.
 *
 * Someone who does not know this app has a "connect mode" clicks an output, sees a faint ring, and
 * concludes nothing happened. So: the armed output PULSES, every legal target node glows, and a banner
 * says in words what the app is waiting for. Written as plain CSS here rather than Tailwind utilities
 * because the panel does not load the bundle those would come from.
 */
.canvas-armed-handle {
    background-color: rgb(13 119 116) !important;
    color: #fff !important;
    box-shadow: 0 0 0 3px rgb(45 184 176 / 45%);
    animation: canvasArmPulse 1.3s ease-in-out infinite;
}

@keyframes canvasArmPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgb(45 184 176 / 45%); }
    50%      { box-shadow: 0 0 0 7px rgb(45 184 176 / 15%); }
}

.canvas-connect-target {
    box-shadow: 0 0 0 2px rgb(45 184 176 / 85%);
    border-color: rgb(45 184 176) !important;
}

/* ⚠️ BOTTOM, NOT TOP. At the top it sat on the Import / Export / zoom controls. Centred over the
   CANVAS AREA rather than the whole box: the palette owns the leftmost 14rem, so the midpoint of the
   usable area is 50% + 7rem. Positioned here rather than with a left-1/2 utility — that class is not in
   any stylesheet this panel loads, so the banner drifted left and clipped on the first attempt. */
/* Anchored TOP-LEFT of the canvas area — just right of the 14rem palette, clear of the toolbar which
   lives top-right. Not bottom-centred: the canvas is 75vh, so its bottom edge is usually below the fold
   and a message down there is a message nobody reads. The two are mutually exclusive by design. */
.canvas-connect-banner,
.canvas-tip {
    position: absolute;
    top: 0.75rem;
    left: calc(14rem + 0.75rem);
    white-space: nowrap;
}

.canvas-connect-banner {
    background-color: rgb(13 119 116);
    color: #fff;
}

.canvas-connect-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background-color: #fff;
    animation: canvasArmPulse 1.3s ease-in-out infinite;
}

/* x-cloak keeps the banner from flashing before Alpine boots. */
[x-cloak] { display: none !important; }

/* Respect a reduced-motion preference: keep the emphasis, drop the movement. */
@media (prefers-reduced-motion: reduce) {
    .canvas-armed-handle, .canvas-connect-dot { animation: none; }
}

/*
 * ══════════════════════════════════════════════════════════════════════════════════════════════
 * CONNECTION HANDLES — the fix for "I built this and could not find how to connect two nodes".
 *
 * The outputs used to be grey text pills sitting in a row inside the card. They read as LABELS, so
 * nobody clicked them and the canvas appeared to have no way to link steps at all. Now each output is
 * a filled DOT straddling the node's right edge — the universally understood "start a link here"
 * affordance — with the human phrase as a caption beside it. The dot is the target; the word is not.
 *
 * Every rule here is written out because the panel does not load the Tailwind bundle these would
 * otherwise come from. Do not swap them back for utility classes without checking they resolve.
 * ══════════════════════════════════════════════════════════════════════════════════════════════
 */
.canvas-handles {
    position: absolute;
    top: 2rem;
    left: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: flex-start;
}

.canvas-handle {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-left: -0.5rem;      /* the dot straddles the card's right border */
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    line-height: 1;
}

.canvas-handle-dot {
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
    border-radius: 9999px;
    background-color: rgb(13 119 116);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgb(13 119 116 / 45%);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.canvas-handle:hover .canvas-handle-dot {
    transform: scale(1.25);
    box-shadow: 0 0 0 4px rgb(45 184 176 / 30%);
}

.canvas-handle-caption {
    font-size: 10px;
    color: #6b7280;
    white-space: nowrap;
    background-color: rgb(255 255 255 / 85%);
    border-radius: 0.25rem;
    padding: 0 0.25rem;
}

.dark .canvas-handle-caption,
:is(.dark) .canvas-handle-caption {
    color: #9ca3af;
    background-color: rgb(31 41 55 / 85%);
}

/* The armed dot is the loudest thing on the canvas — it is the one that says "I am waiting". */
.canvas-handle.is-armed .canvas-handle-dot {
    background-color: rgb(20 148 143);
    transform: scale(1.35);
    animation: canvasArmPulse 1.3s ease-in-out infinite;
}

.canvas-handle.is-armed .canvas-handle-caption {
    color: rgb(13 119 116);
    font-weight: 600;
}

/* One-line summary line on the node card, in place of the internal key that used to sit there. */
.canvas-node-summary {
    padding: 0.25rem 0.5rem;
    font-size: 11px;
    line-height: 1.3;
    color: #6b7280;
}

/* ── The plain-English summary above the canvas ─────────────────────────────────────────────── */
.canvas-summary {
    margin-bottom: 0.5rem;
    padding: 0.625rem 0.875rem;
    border-radius: 0.5rem;
    background-color: rgb(13 119 116 / 8%);
    border: 1px solid rgb(13 119 116 / 25%);
}

.canvas-summary-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgb(13 119 116);
}

.canvas-summary-issue {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: #b45309;
}

/* ── Empty state ───────────────────────────────────────────────────────────────────────────── */
.canvas-empty {
    position: absolute;
    top: 50%;
    left: calc(50% + 7rem);
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
}

.canvas-empty-title { font-size: 1rem; font-weight: 600; color: #6b7280; }
.canvas-empty-sub   { margin-top: 0.25rem; font-size: 0.8125rem; color: #9ca3af; }

/* ── The connect tip ───────────────────────────────────────────────────────────────────────── */
.canvas-tip {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    background-color: rgb(17 24 39 / 85%);
    color: #f3f4f6;
    z-index: 30;
}

.canvas-tip-close { color: #9ca3af; line-height: 1; }
.canvas-tip-close:hover { color: #fff; }

/* ── Variable chips ────────────────────────────────────────────────────────────────────────── */
.canvas-chip {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.05rem;
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
    background-color: #f3f4f6;
    font-size: 11px;
    cursor: pointer;
    text-align: left;
}

.canvas-chip:hover { background-color: rgb(204 243 239); }

.canvas-chip-token {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 9px;
    color: #9ca3af;
}

:is(.dark) .canvas-chip { background-color: #374151; color: #e5e7eb; }

/* Spacing + misc the panel does not ship. mb-3/mt-4 are the inspector's field rhythm — without them
   every form field collapses against the next one. Found by sweeping the live DOM, not by eye. */
.mb-3       { margin-bottom: 0.75rem; }
.mt-4       { margin-top: 1rem; }
.opacity-75 { opacity: 0.75; }
.bg-white\/20 { background-color: rgb(255 255 255 / 20%); }
.hover\:bg-white\/30:hover { background-color: rgb(255 255 255 / 30%); }
.hover\:text-gray-600:hover { color: #4b5563; }

/* Interaction feedback */
.hover\:bg-gray-50:hover      { background-color: #f9fafb; }
.hover\:bg-primary-100:hover  { background-color: rgb(204 243 239); }
.hover\:text-red-500:hover    { color: #ef4444; }
.disabled\:opacity-50:disabled { opacity: 0.5; }