/*
 * Workflow Canvas Window — admin chrome + inside-window styling.
 *
 * Phase 4 of the in-page-mount → window-wrapper refactor (2026-06-27).
 * Two scopes inside this file:
 *
 *   1. `.wfd-launch-section` + `.wfd-open-btn`   — the trigger on the
 *      WorkflowTemplate admin change form. Replaces the prior in-page
 *      mount of #workflow-designer-root.
 *
 *   2. `.wfd-window-host` + `.wfd-loading` + `.wfd-error`   — styling for
 *      the React app's mount node when it lives inside a .kb-popup-modal.
 *      Designer's own bundle CSS (designer.bundle.css) handles the inner
 *      3-pane layout; this file only covers the wrapper container + the
 *      pre-mount loading / error states the window opener renders before
 *      React takes over.
 *
 * Brand tokens (`--bk-*`) mirror static/portal/css/design_tokens.css :root.
 * Tokens are defined here too so this file works standalone on the admin
 * change form (which doesn't pull design_tokens.css).
 */

/* ── Brand tokens (subset needed in this file) ──────────────────────── */
:root {
  --wfd-navy:        #1a1a2e;
  --wfd-navy-deep:   #0d0d18;
  --wfd-gold:        #c29954;
  --wfd-gold-light:  #f5eedd;
  --wfd-gold-dark:   #a07d3f;
  --wfd-tier-red:    #DC2626;
  --wfd-text:        #2d2d3a;
  --wfd-text-muted:  #6c757d;
  --wfd-surface:     #ffffff;
  --wfd-surface-inset: #f0f2f5;
  --wfd-border:      #e2e4e8;
  --wfd-radius-sm:   6px;
  --wfd-radius-md:   10px;
  --wfd-hit:         44px;
  --wfd-shadow-card: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06);
  --wfd-shadow-pop:  0 8px 24px rgba(0,0,0,0.12);
}

/* ─────────────────────────────────────────────────────────────────────
   Launch section on the change form (Phase 4 trigger).
   ───────────────────────────────────────────────────────────────────── */
.wfd-launch-section {
  background: var(--wfd-surface);
  border: 1px solid var(--wfd-border);
  border-radius: var(--wfd-radius-md);
  padding: 18px 22px;
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  box-shadow: var(--wfd-shadow-card);
}

.wfd-launch-section h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--wfd-navy);
  flex: 0 0 auto;
}

.wfd-launch-hint {
  flex: 1 1 auto;
  margin: 0;
  font-size: 0.85rem;
  color: var(--wfd-text-muted);
  min-width: 220px;
}

.wfd-open-btn {
  flex: 0 0 auto;
  min-height: var(--wfd-hit);
  min-width: 240px;
  padding: 10px 22px;
  background: var(--wfd-navy);
  color: var(--wfd-gold-light);
  border: 1px solid var(--wfd-navy);
  border-radius: var(--wfd-radius-sm);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}

.wfd-open-btn:hover {
  background: var(--wfd-navy-deep);
  transform: translateY(-1px);
  box-shadow: var(--wfd-shadow-pop);
}

.wfd-open-btn:focus-visible {
  outline: 3px solid var(--wfd-gold);
  outline-offset: 2px;
}

.wfd-open-btn:active {
  transform: translateY(0);
  box-shadow: var(--wfd-shadow-card);
}

.wfd-open-btn-arrow {
  font-size: 1.15rem;
  line-height: 1;
}

/* ─────────────────────────────────────────────────────────────────────
   Mount host inside the .kb-popup-modal — fills the window's content
   slot. Renamed from `.wfd-container` (which the React app uses for
   its own 3-column grid wrapper, see designer.css) to avoid CSS class
   collision. The React app renders <div class="wfd-container"> INSIDE
   this host, so the host is purely the window-side mount frame.
   ───────────────────────────────────────────────────────────────────── */
.wfd-window-host {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--wfd-surface-inset);
}

/* Override the React app's in-page height/border assumption when its
   .wfd-container is mounted inside a window. designer.css ships:
       height: calc(100vh - 160px);  border: 1px solid #d0d0d0;  border-radius: 8px;
   …which is correct for an in-page mount but breaks when nested in a
   .kb-popup-modal: the calc misreads the viewport, and the border +
   radius double up with the modal's own chrome. */
.wfd-window-host .wfd-container {
  flex: 1;
  height: auto;
  min-height: 0;
  border: none;
  border-radius: 0;
}

/* ─────────────────────────────────────────────────────────────────────
   Pre-mount loading state (rendered by workflow_canvas_window.js while
   the bundle + fragment fetch in parallel).
   ───────────────────────────────────────────────────────────────────── */
.wfd-loading {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 40px;
  text-align: center;
}

.wfd-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--wfd-border);
  border-top-color: var(--wfd-navy);
  border-radius: 50%;
  animation: wfd-spin 0.8s linear infinite;
}

.wfd-loading-text {
  color: var(--wfd-text-muted);
  font-size: 0.9rem;
  font-weight: 500;
}

@keyframes wfd-spin {
  to { transform: rotate(360deg); }
}

/* ─────────────────────────────────────────────────────────────────────
   Pre-mount error state (rendered on fragment fetch / bundle load failure).
   ───────────────────────────────────────────────────────────────────── */
.wfd-error {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px;
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
}

.wfd-error-icon {
  font-size: 2.4rem;
  color: var(--wfd-tier-red);
  line-height: 1;
}

.wfd-error-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--wfd-tier-red);
}

.wfd-error-detail {
  font-size: 0.85rem;
  color: var(--wfd-text-muted);
  word-break: break-word;
  margin-bottom: 4px;
}

.wfd-error-retry {
  margin-top: 8px;
  min-height: var(--wfd-hit);
  padding: 8px 22px;
  background: var(--wfd-navy);
  color: var(--wfd-gold-light);
  border: none;
  border-radius: var(--wfd-radius-sm);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
}

.wfd-error-retry:hover { background: var(--wfd-navy-deep); }
.wfd-error-retry:focus-visible {
  outline: 3px solid var(--wfd-gold);
  outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────────────
   Reduced motion fallback.
   ───────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .wfd-open-btn,
  .wfd-open-btn:hover,
  .wfd-open-btn:active { transition: opacity 0.15s; transform: none; }
  .wfd-spinner { animation: none; border-top-color: var(--wfd-gold); }
}