/* =============================================================================
 * blockly-cyberneon.css — cyberneon (neon-on-navy) skin for the automate
 * Blockly editor. Copy to admin/assets/css/ and load AFTER automate.css in
 * admin/automate/index.html:
 *     <link rel="stylesheet" href="../assets/css/automate.css">
 *     <link rel="stylesheet" href="../assets/css/blockly-cyberneon.css">  <-- add
 *
 * Selectors mirror automate.css exactly; later source order + equal specificity
 * + !important wins, so this re-skins the dark widget surfaces without editing
 * automate.css. All targets are the html.dark-theme branches (the editor runs
 * dark). Light-theme rules are intentionally left to automate.css.
 * ========================================================================== */

/* ---- Legacy theme-var compat shim --------------------------------------
 * ARCHITECTURE NOTE (corrects the original shim — see ADDENDUM §2):
 * --purple, --space-deep, --space-light, --focus ALREADY exist in index.html's
 * html.dark-theme block (L228/245/270-272) and, being later in document source
 * order, WIN over a linked stylesheet. So redefining them here is inert. They
 * are now owned in index.html (ADDENDUM §1 gives their cyberneon values).
 * Only --dark-bg genuinely has no other home, so it is the only token defined
 * here. Targets html.dark-theme only — cyberneon is the look of dark-theme,
 * not a separate html.theme-cyberneon class (ADDENDUM §3). */
:root,
html.dark-theme {
  --dark-bg: #0f3460;       /* timepicker input bg fallback — the only legacy var with no other home */

  /* DS23 neon-curation tokens — toolbox category icons + curated chrome.
   * Panel/rule/ink mirror the editor theme componentStyles; category hues
   * match buildToolbox() colours in index.html (and palette.py COLORS intent). */
  --ne-panel: #0c1018;      /* toolbox / flyout shell */
  --ne-rule: rgba(0, 212, 255, 0.14);   /* cyan-tinted hairline */
  --ne-ink: #eaf6ff;        /* category label ink */
  --cat-triggers: #ff9e3d;
  --cat-sources: #00e5d4;
  --cat-conditions: #13d6e8;
  --cat-actions: #b14dff;
  --cat-ml: #00bfa5;
  --cat-analyze: #ff2e88;
}

/* ---- Toolbox selection (covers §5 even if inline block is left as-is) ---- */
html.dark-theme .blocklyToolboxRow:hover {
  background: var(--accent-bg, rgba(0, 212, 255, 0.12)) !important;
}
html.dark-theme .blocklyToolboxSelected {
  background: rgba(0, 212, 255, 0.22) !important;
  box-shadow: inset 3px 0 0 var(--accent, #00d4ff) !important;
}

/* ---- Minislider toggle ---- */
.blocklyMinisliderTrack { fill: #3a4258; }            /* off — cool slate (was #9e9e9e) */
.blocklyMinisliderTrack.minislider-on { fill: var(--accent, #00d4ff); }  /* on — already accent */
html.dark-theme .blocklyMinisliderKnob { fill: #ffffff; }

/* ---- Field text input (the editor that opens on a field) ---- */
html.dark-theme .blocklyHtmlInput,
html.dark-theme ~ .blocklyWidgetDiv .blocklyHtmlInput {
  background: #101626 !important;                      /* was #2a2a40 */
  color: #eaf6ff !important;
  border-color: rgba(0, 212, 255, 0.22) !important;    /* was #454560 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45) !important;
}
html.dark-theme .blocklyHtmlInput:focus,
html.dark-theme ~ .blocklyWidgetDiv .blocklyHtmlInput:focus {
  background: #16213e !important;                      /* was #32324a */
  border-color: var(--accent, #00d4ff) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45),
              0 0 0 2px var(--accent-bg, rgba(0, 212, 255, 0.18)),
              0 0 14px rgba(0, 212, 255, 0.28) !important;
}

/* ---- In-block field background rects: tint the dark overlay cyan ---- */
html.dark-theme .blocklyEditableField > rect.blocklyFieldRect:not([style]),
html.dark-theme .blocklySvg .blocklyEditableField > rect.blocklyFieldRect:not([style]) {
  fill: rgba(0, 212, 255, 0.10) !important;
}
html.dark-theme .blocklyEditableField:hover > rect.blocklyFieldRect:not([style]),
html.dark-theme .blocklySvg .blocklyEditableField:hover > rect.blocklyFieldRect:not([style]) {
  fill: rgba(0, 212, 255, 0.18) !important;
}

/* ---- Dropdown arrow ---- */
html.dark-theme .blocklyDropdownArrow { fill: rgba(255, 255, 255, 0.72) !important; }

/* ---- Dropdown menu (field dropdowns) ---- */
html.dark-theme .blocklyDropDownDiv {
  border-color: rgba(0, 212, 255, 0.22) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55),
              0 0 0 1px rgba(0, 212, 255, 0.10) !important;
}
html.dark-theme .blocklyMenu { background: #0b1018 !important; }       /* was #1e1e2e */
html.dark-theme .blocklyMenu .blocklyMenuItem { color: #dbeeff !important; }
html.dark-theme .blocklyMenu .blocklyMenuItem:hover {
  background: var(--accent-bg, rgba(0, 212, 255, 0.12)) !important;     /* was #2a2a40 */
  color: var(--accent, #00d4ff) !important;
}
html.dark-theme .blocklyMenu .blocklyMenuItemDisabled { color: #5a6680 !important; }
html.dark-theme .blocklyMenu .blocklyMenuItemCheckbox { color: var(--accent, #00d4ff) !important; }

/* ---- Context menu (right-click) ---- */
html.dark-theme .blocklyContextMenu {
  background: #0b1018 !important;
  border-color: rgba(0, 212, 255, 0.22) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55) !important;
}
html.dark-theme .blocklyContextMenu .blocklyMenuItem { color: #dbeeff !important; }
html.dark-theme .blocklyContextMenu .blocklyMenuItem:hover {
  background: var(--accent-bg, rgba(0, 212, 255, 0.12)) !important;
  color: var(--accent, #00d4ff) !important;
}
html.dark-theme .blocklyContextMenu .blocklyMenuItemDisabled { color: #5a6680 !important; }
html.dark-theme .blocklyContextMenu hr,
html.dark-theme .blocklyContextMenu .blocklyMenuSeparator {
  border-top-color: rgba(0, 212, 255, 0.18) !important;
}

/* ---- Angle field in-block arc (the classes angle.js draws; see custom-fields §1) ---- */
.blocklyAngleFieldArc { stroke: var(--accent, #00d4ff); }
.blocklyAngleFieldText { fill: var(--text-primary, #eaf6ff); font-family: 'Poppins', sans-serif; }

/* ---- Multiselect plugin (shift+click / shift+drag rubber-band) ---------- */
/* The @blockly/plugin-multiselect draws an SVG selection rect; class name can
 * vary by version — confirm against the loaded plugin and adjust if needed. */
.blocklyMultiselectRect,
svg .blocklyMultiselectRect {
  fill: rgba(0, 212, 255, 0.10) !important;
  stroke: var(--accent, #00d4ff) !important;
  stroke-width: 1.4px !important;
  stroke-dasharray: 4 3 !important;
}

/* ---- Minimap plugin (corner overview) ----------------------------------- */
/* @blockly/workspace-minimap mounts a container + a draggable viewport box.
 * Class names vary by version — confirm and adjust. */
.blockly-minimap, .blocklyMinimap {
  background: #0b1018 !important;
  border: 1px solid rgba(0, 212, 255, 0.18) !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5) !important;
}
.blockly-minimap .blockly-minimap-marker,
.blocklyMinimapMarker,
.minimapViewport {
  border-color: var(--accent, #00d4ff) !important;
  background: rgba(0, 212, 255, 0.08) !important;
  box-shadow: 0 0 12px -2px var(--accent, #00d4ff) !important;
}

/* ---- Block icons (FieldImage, white 20x20) -- GAP 1 --------------------- */
/* Icons are baked #fff in icons-blockly.js; keep them white (do NOT tint to the
 * block hue -- white reads as "lit" against the neon-sign body and matches the
 * white label) and add a faint glow so they sit in the same luminous layer as
 * the label. Dark-theme only. */
html.dark-theme .blocklyImage {
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.45));
}

/* ---- ZoomToFit control + zoom chrome (GAP 4, DS17) ---------------------- */
/* The @blockly/zoom-to-fit plugin appends its own <image>; index.html gives it
 * a host class on creation (zoomToFit.svgGroup_.classList.add('blocklyZoomToFit'))
 * so this rule lands. Dark-glass chrome: #0b1018 fill, rgba(0,212,255,.22)
 * border, accent on hover. */
.blocklyZoom > image,
.blocklyZoomToFit image {
  /* tint the stock control glyph toward cyberneon cyan */
  filter: brightness(0) saturate(100%) invert(72%) sepia(64%)
          saturate(2400%) hue-rotate(150deg) brightness(101%) contrast(101%);
  opacity: 0.85;
}
.blocklyZoom > image:hover,
.blocklyZoomToFit image:hover { opacity: 1; }
.blocklyZoomToFit,
.blockly-zoom-to-fit {
  fill: #0b1018 !important;
  stroke: rgba(0, 212, 255, 0.22) !important;
}
.blocklyZoomToFit:hover,
.blockly-zoom-to-fit:hover { stroke: var(--accent, #00d4ff) !important; }

/* ---- Broken / warning state -- CONFIRMED class for Blockly 12.3.1 (DS17) - */
/* Verified live: the warning glyph is .blocklyWarningIcon (NOT bare
 * .blocklyWarning). The codebase also adds .blocklyHasWarning on the block <g>.
 * This is now the single home for the broken state -- index.html dropped its
 * inline copy and the bare .blocklyWarning hedge. */
.blocklyWarningIcon path { fill: var(--gold, #ffc24d) !important; stroke: none !important; }
g.blocklyDraggable:has(.blocklyWarningIcon) > .blocklyPath,
g.blocklyDraggable.blocklyHasWarning > .blocklyPath {
  stroke: var(--danger, #ff3b3b) !important;
  stroke-width: 2.4px !important;
  animation: broken-pulse 2s ease-in-out infinite;
}
@keyframes broken-pulse {
  0%, 100% { stroke-opacity: 1; }
  50% { stroke-opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce) {
  g.blocklyDraggable:has(.blocklyWarningIcon) > .blocklyPath,
  g.blocklyDraggable.blocklyHasWarning > .blocklyPath { animation: none; }
}
/* Warning bubble: dark glass + gold edge, not Blockly default yellow */
.blocklyBubbleCanvas rect {
  fill: #0b1018 !important;
  stroke: rgba(255, 194, 77, 0.5) !important;
}
.blocklyBubbleCanvas text { fill: #ffe6ad !important; }

/* =============================================================================
 * DS23 — Neon curation: toolbox category icons + curated chrome + a11y.
 * §1 category icons, §2 toolbox/flyout/scrollbar chrome, §3 accessibility.
 * Category glyphs are rendered by paintCategoryIcons() (index.html) into the
 * .cat-ico span; the .cat-<hue> class colours them via currentColor. Chrome
 * is scoped to html.dark-theme (the editor's curated look); icon sizing and
 * focus rings are unscoped so they hold in both themes.
 * ========================================================================== */

/* ---- §1 · category icon span (FA glyph from cssConfig.icon) ---- */
.cat-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; margin-right: 9px; flex: 0 0 auto; vertical-align: middle;
}
.cat-ico .cat-ico-svg,
.cat-ico svg { width: 15px; height: 15px; }
.cat-triggers   { color: var(--cat-triggers, #ff9e3d); }
.cat-sources    { color: var(--cat-sources, #00e5d4); }
.cat-conditions { color: var(--cat-conditions, #13d6e8); }
.cat-actions    { color: var(--cat-actions, #b14dff); }
.cat-ml         { color: var(--cat-ml, #00bfa5); }
.cat-analyze    { color: var(--cat-analyze, #ff2e88); }

/* ---- §2 · toolbox shell + category rows (dark editor look) ---- */
html.dark-theme .blocklyToolboxDiv {
  background: var(--ne-panel, #0c1018) !important;
  border-right: 1px solid var(--ne-rule, rgba(0, 212, 255, 0.14)) !important;
  padding: 10px 8px !important;
}
html.dark-theme .blocklyToolboxCategory { border-radius: 10px; margin: 2px 0; }
html.dark-theme .blocklyTreeRow {
  display: flex !important; align-items: center !important;
  padding: 9px 11px !important; border-radius: 10px;
  transition: background 140ms ease, box-shadow 140ms ease;
}
html.dark-theme .blocklyToolboxCategoryLabel,
html.dark-theme .blocklyTreeLabel {
  font-family: 'Poppins', sans-serif !important; font-weight: 500 !important;
  font-size: 14px !important; color: var(--ne-ink, #eaf6ff) !important;
  text-transform: lowercase;
}
html.dark-theme .blocklyToolboxCategory:hover .blocklyTreeRow {
  background: rgba(0, 212, 255, 0.08);
}

/* ---- §2 · flyout + scrollbars ---- */
html.dark-theme .blocklyFlyoutBackground {
  fill: #0c1018 !important; fill-opacity: 0.98 !important;
}
html.dark-theme .blocklyFlyoutLabelText {
  fill: var(--accent, #00d4ff) !important; font-weight: 600 !important;
  font-family: 'Poppins', sans-serif !important;
}
html.dark-theme .blocklyScrollbarHandle { fill: #243049 !important; }
html.dark-theme .blocklyScrollbarHandle:hover { fill: #2f4060 !important; }

/* ---- §2 · subtle neon lift on blocks ---- */
html.dark-theme .blocklyDraggable:not(.blocklyDisabled) > .blocklyPath {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

/* ---- §3 · accessibility: focus-visible rings (both themes) ---- */
#workspace-controls button:focus-visible,
.blocklyToolboxCategory:focus-visible .blocklyTreeRow,
.blocklyTreeRow:focus-visible {
  outline: 2px solid var(--accent, #00d4ff) !important; outline-offset: 2px;
}
.blocklyTreeRow:focus {
  outline: 2px solid var(--accent, #00d4ff) !important; outline-offset: -2px;
}
@media (prefers-reduced-motion: reduce) {
  html.dark-theme .blocklyTreeRow { transition: none !important; }
}

/* ---- §3 · screen-reader-only live region (admin.css not linked here) ---- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}