/* Copyright (c) 2025-2026 William Chesher | MIT License */
/* Automate editor styles - Cyberpunk Neon theme */

:root {
  /* Background colors - deep space dark (used by modals) */
  --darker-bg: #0a0a14;
  --dark-bg: #0d0d1a;
  --panel-bg: #12121f;

  /* Cyberpunk neon colors */
  --neon-cyan: #00d4ff;
  --neon-magenta: #ff00ff;
  --neon-orange: #ff6b35;
  --neon-green: #39ff14;
  --neon-purple: #bf00ff;
  --neon-yellow: #ffff00;

  /* Semantic colors */
  --primary: #00d4ff;
  --primary-hover: #00a8cc;
  --success: #39ff14;
  --warning: #ffff00;
  --error: #ff6b35;
  /* --accent is defined by user color scheme in shell.css */

  /* Block category colors (hex) */
  --cat-events: #ff6b35;
  --cat-control: #00d4ff;
  --cat-sensing: #39ff14;
  --cat-devices: #ff00ff;
  --cat-data: #bf00ff;
  --cat-logic: #ffff00;
}

/* Loading screen */
.loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--darker-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.3s;
}

.loading.hidden {
  opacity: 0;
  pointer-events: none;
}

.loading-text {
  color: var(--neon-cyan);
  font-size: 1.2em;
  text-transform: uppercase;
  letter-spacing: 2px;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* Neon glow effect for interactive elements */
.neon-glow {
  box-shadow: 0 0 5px var(--neon-cyan),
              0 0 10px var(--neon-cyan),
              0 0 20px rgba(0, 212, 255, 0.3);
}

/* Neon border effect */
.neon-border {
  border: 1px solid var(--neon-cyan);
  box-shadow: inset 0 0 10px rgba(0, 212, 255, 0.1);
}

/* =========================================================================
 * Icon Picker Modal
 * ========================================================================= */
.icon-picker-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-picker-modal {
  background: var(--panel-bg, #1a1a2e);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 8px;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.icon-picker-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0, 212, 255, 0.1);
  background: var(--darker-bg, #16213e);
  border-radius: 8px 8px 0 0;
}

.icon-picker-title {
  font-weight: 600;
  color: #eee;
  flex-shrink: 0;
}

.icon-picker-search {
  flex: 1;
  background: var(--dark-bg, #0f3460);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 4px;
  padding: 6px 10px;
  color: #eee;
  font-size: 14px;
}

.icon-picker-search:focus {
  outline: none;
  border-color: var(--neon-cyan, var(--focus));
}

.icon-picker-close {
  background: none;
  border: none;
  color: #888;
  font-size: 24px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.icon-picker-close:hover {
  color: var(--error);
}

.icon-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
  padding: 16px;
  overflow-y: auto;
  max-height: calc(80vh - 60px);
}

.icon-picker-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
  border: 2px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  background: var(--dark-bg, #16213e);
}

.icon-picker-item:hover {
  background: var(--panel-bg, #0f3460);
  border-color: var(--neon-cyan);
  box-shadow: 0 0 15px rgba(0, 212, 255, 0.2);
}

.icon-picker-item.selected {
  border-color: var(--neon-purple, var(--focus));
  background: #1a2a2e;
  box-shadow: 0 0 15px rgba(191, 0, 255, 0.3);
}

.icon-picker-item img {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
  margin-bottom: 4px;
}

.icon-picker-label {
  font-size: 11px;
  color: #aaa;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.icon-picker-none {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-size: 10px;
  border: 1px dashed #444;
  border-radius: 4px;
  margin-bottom: 4px;
}

.icon-picker-fallback {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888;
  font-size: 8px;
  background: var(--dark-bg, #0f3460);
  border-radius: 4px;
  margin-bottom: 4px;
  word-break: break-all;
  text-align: center;
}

.icon-picker-tabs {
  display: flex;
  gap: 4px;
  margin-right: auto;
}

.icon-picker-tab {
  background: var(--dark-bg, #0f3460);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 4px;
  padding: 6px 12px;
  color: #aaa;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}

.icon-picker-tab:hover {
  background: rgba(0, 212, 255, 0.1);
  color: #eee;
}

.icon-picker-tab.active {
  background: var(--neon-cyan, var(--focus));
  border-color: var(--neon-cyan, var(--focus));
  color: #000;
}

.icon-picker-fa-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #fff;
  margin-bottom: 4px;
}

.icon-picker-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: #888;
  padding: 40px;
  font-size: 14px;
}

.icon-picker-section-header {
  grid-column: 1 / -1;
  font-size: 12px;
  font-weight: 600;
  color: var(--neon-purple, var(--focus));
  padding: 12px 4px 6px 4px;
  border-bottom: 1px solid rgba(191, 0, 255, 0.3);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  user-select: none;
}

.icon-picker-section-header:hover {
  color: #fff;
}

.icon-picker-toggle {
  display: inline-block;
  width: 14px;
  font-family: monospace;
  color: #888;
}

/* Background Picker Overrides (wider items for LED backgrounds) */
.bg-picker-grid {
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
}

.bg-picker-item {
  padding: 6px;
}

.bg-picker-item img {
  width: 64px;
  height: 32px;
  image-rendering: pixelated;
  border-radius: 2px;
  margin-bottom: 4px;
}

.bg-picker-none {
  width: 64px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-size: 10px;
  border: 1px dashed #444;
  border-radius: 4px;
  margin-bottom: 4px;
}

/* =========================================================================
 * Print Icon Picker (teenyprint redesign)
 * ========================================================================= */

/* Modal override for wider layout */
.print-icon-modal {
  max-width: 740px;
  width: 92%;
}

/* Category pill bar - horizontal scrolling strip */
.print-icon-pills {
  display: flex;
  gap: 6px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(0, 212, 255, 0.1);
  overflow-x: auto;
  flex-shrink: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 212, 255, 0.2) transparent;
}

.print-icon-pills::-webkit-scrollbar {
  height: 4px;
}

.print-icon-pills::-webkit-scrollbar-thumb {
  background: rgba(0, 212, 255, 0.2);
  border-radius: 2px;
}

.print-icon-pill {
  background: var(--dark-bg, #16213e);
  border: 1px solid rgba(0, 212, 255, 0.15);
  border-radius: 16px;
  padding: 5px 14px;
  color: #999;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}

.print-icon-pill:hover {
  color: #eee;
  border-color: rgba(0, 212, 255, 0.4);
  background: rgba(0, 212, 255, 0.08);
}

.print-icon-pill.active {
  background: var(--neon-cyan, #00d4ff);
  border-color: var(--neon-cyan, #00d4ff);
  color: #000;
  font-weight: 600;
}

/* Icon grid - larger tiles for visibility */
.print-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  padding: 16px;
  overflow-y: auto;
  max-height: calc(80vh - 120px);
}

/* Section headers in "All" view */
.print-icon-section {
  grid-column: 1 / -1;
  font-size: 11px;
  font-weight: 600;
  color: var(--neon-purple, #bf00ff);
  padding: 10px 4px 4px 4px;
  border-bottom: 1px solid rgba(191, 0, 255, 0.2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.print-icon-section:first-child {
  padding-top: 0;
}

/* Individual icon tile */
.print-icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px 8px 8px;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  background: var(--dark-bg, #16213e);
  min-height: 80px;
  justify-content: center;
}

.print-icon-item:hover {
  background: rgba(0, 212, 255, 0.06);
  border-color: var(--neon-cyan, #00d4ff);
  box-shadow: 0 0 12px rgba(0, 212, 255, 0.15);
}

.print-icon-item.selected {
  border-color: var(--neon-purple, #bf00ff);
  background: rgba(191, 0, 255, 0.08);
  box-shadow: 0 0 16px rgba(191, 0, 255, 0.25);
}

/* Large FA icon preview - 40px for easy visual scanning */
.print-icon-preview {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: #ddd;
  margin-bottom: 6px;
  transition: color 0.15s;
}

.print-icon-item:hover .print-icon-preview {
  color: #fff;
}

.print-icon-item.selected .print-icon-preview {
  color: var(--neon-cyan, #00d4ff);
}

/* Icon name label */
.print-icon-label {
  font-size: 10px;
  color: #888;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  text-transform: capitalize;
}

.print-icon-item:hover .print-icon-label {
  color: #ccc;
}

/* "No Icon" option */
.print-icon-none {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
  font-size: 11px;
  border: 1px dashed #444;
  border-radius: 6px;
}

/* =========================================================================
 * Block Icon Alignment
 * ========================================================================= */
/* Vertically center block icons with text */
.blocklyBlockCanvas image,
.blocklySvg image {
  /* Align icon center with text baseline - icons sit slightly above text center */
  transform: translateY(2px);
}

/* =========================================================================
 * Minislider Toggle Styling
 * ========================================================================= */
.blocklyMinisliderTrack {
  fill: #9e9e9e;
  transition: fill 0.2s ease;
}

.blocklyMinisliderTrack.minislider-on {
  fill: var(--accent, #00d4ff);
}

.blocklyMinisliderKnob {
  fill: #000000;
  transition: cx 0.2s ease;
}

/* Dark theme: white knob for visibility */
html.dark-theme .blocklyMinisliderKnob,
html.dark-theme .blocklyMinisliderKnob {
  fill: #ffffff;
}

/* =========================================================================
 * Time Picker Modal
 * ========================================================================= */
.time-picker-modal {
  max-width: 320px;
}

.time-picker-content {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  padding: 24px 16px;
}

.time-picker-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.time-picker-label {
  font-size: 11px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.time-picker-input {
  width: 72px;
  height: 56px;
  background: var(--dark-bg, #0f3460);
  border: 2px solid rgba(0, 212, 255, 0.3);
  border-radius: 8px;
  color: #fff;
  font-size: 28px;
  font-weight: 600;
  text-align: center;
  font-family: 'Poppins', monospace;
}

.time-picker-input:focus {
  outline: none;
  border-color: var(--neon-cyan, var(--focus));
  box-shadow: 0 0 15px rgba(0, 212, 255, 0.3);
}

.time-picker-input::-webkit-inner-spin-button,
.time-picker-input::-webkit-outer-spin-button {
  opacity: 1;
  height: 40px;
}

.time-picker-sep {
  font-size: 36px;
  font-weight: 600;
  color: #888;
  margin-bottom: 8px;
}

.time-picker-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 16px 16px;
  justify-content: center;
}

.time-picker-preset {
  background: var(--dark-bg, #16213e);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 16px;
  padding: 6px 12px;
  color: #aaa;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}

.time-picker-preset:hover {
  background: rgba(0, 212, 255, 0.1);
  border-color: var(--neon-cyan);
  color: #fff;
}

.time-picker-preset.selected {
  background: var(--neon-cyan, var(--focus));
  border-color: var(--neon-cyan, var(--focus));
  color: #000;
}

.time-picker-footer {
  padding: 12px 16px;
  border-top: 1px solid rgba(0, 212, 255, 0.1);
  display: flex;
  justify-content: center;
}

.time-picker-confirm {
  background: var(--neon-cyan, var(--focus));
  border: none;
  border-radius: 20px;
  padding: 10px 32px;
  color: #000;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.time-picker-confirm:hover {
  filter: brightness(1.1);
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.4);
}

/* =========================================================================
 * Blockly Input Fields
 * Text input that appears when editing a field on a block
 * Blockly widgets are appended outside normal DOM, so we use explicit selectors
 * ========================================================================= */

/* Light theme (default) */
.blocklyHtmlInput {
  background: #f8f8f8 !important;
  color: #333 !important;
  border: 1px solid #d0d0d0 !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 12px !important;
  min-width: 50px !important;
  outline: none !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.blocklyHtmlInput:focus {
  background: #fff !important;
  border-color: var(--accent, #00d4ff) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1),
              0 0 0 2px var(--accent-bg, rgba(131, 132, 189, 0.15)) !important;
}

/* Dark theme input */
html.dark-theme .blocklyHtmlInput,
html.dark-theme .blocklyHtmlInput,
html.dark-theme ~ .blocklyWidgetDiv .blocklyHtmlInput {
  background: #2a2a40 !important;
  color: #eee !important;
  border-color: #454560 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

html.dark-theme .blocklyHtmlInput:focus,
html.dark-theme .blocklyHtmlInput:focus,
html.dark-theme ~ .blocklyWidgetDiv .blocklyHtmlInput:focus {
  background: #32324a !important;
  border-color: var(--accent, #00d4ff) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3),
              0 0 0 2px var(--accent-bg, rgba(131, 132, 189, 0.2)) !important;
}

/* =========================================================================
 * Blockly Field Background Rects (SVG)
 * The background rects inside blocks for text/dropdown fields
 * Use :not([style]) to exclude colour fields which set fill via inline style
 * ========================================================================= */

/* Light theme - subtle gray background */
.blocklyEditableField > rect.blocklyFieldRect:not([style]),
.blocklySvg .blocklyEditableField > rect.blocklyFieldRect:not([style]) {
  fill: rgba(0, 0, 0, 0.06) !important;
  transition: fill 0.1s;
}

.blocklyEditableField:hover > rect.blocklyFieldRect:not([style]),
.blocklySvg .blocklyEditableField:hover > rect.blocklyFieldRect:not([style]) {
  fill: rgba(0, 0, 0, 0.1) !important;
}

/* Dark theme - light overlay for visibility */
html.dark-theme .blocklyEditableField > rect.blocklyFieldRect:not([style]),
html.dark-theme .blocklyEditableField > rect.blocklyFieldRect:not([style]),
html.dark-theme .blocklySvg .blocklyEditableField > rect.blocklyFieldRect:not([style]),
html.dark-theme .blocklySvg .blocklyEditableField > rect.blocklyFieldRect:not([style]) {
  fill: rgba(255, 255, 255, 0.12) !important;
}

html.dark-theme .blocklyEditableField:hover > rect.blocklyFieldRect:not([style]),
html.dark-theme .blocklyEditableField:hover > rect.blocklyFieldRect:not([style]),
html.dark-theme .blocklySvg .blocklyEditableField:hover > rect.blocklyFieldRect:not([style]),
html.dark-theme .blocklySvg .blocklyEditableField:hover > rect.blocklyFieldRect:not([style]) {
  fill: rgba(255, 255, 255, 0.18) !important;
}

/* Dropdown arrow indicator */
.blocklyDropdownArrow {
  fill: #333 !important;
  opacity: 0.7;
}

html.dark-theme .blocklyDropdownArrow,
html.dark-theme .blocklyDropdownArrow {
  fill: #ddd !important;
}

/* =========================================================================
 * Blockly Dropdown Menu
 * Appears when clicking dropdown fields on blocks
 * ========================================================================= */

/* Light theme dropdown */
.blocklyDropDownDiv {
  border-radius: 8px !important;
  border: 1px solid #d0d0d0 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
  overflow: hidden !important;
}

.blocklyMenu {
  background: #fff !important;
  border-radius: 8px !important;
  padding: 4px 0 !important;
}

.blocklyMenu .blocklyMenuItem {
  padding: 8px 14px !important;
  color: #333 !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 13px !important;
  transition: background 0.1s, color 0.1s;
  border-radius: 0 !important;
}

.blocklyMenu .blocklyMenuItem:first-child {
  border-radius: 4px 4px 0 0 !important;
}

.blocklyMenu .blocklyMenuItem:last-child {
  border-radius: 0 0 4px 4px !important;
}

.blocklyMenu .blocklyMenuItem:only-child {
  border-radius: 4px !important;
}

.blocklyMenu .blocklyMenuItem:hover {
  background: #f0f0f0 !important;
  color: var(--accent, #00d4ff) !important;
}

.blocklyMenu .blocklyMenuItemDisabled {
  color: #999 !important;
}

.blocklyMenu .blocklyMenuItemDisabled:hover {
  background: transparent !important;
  color: #999 !important;
}

.blocklyMenu .blocklyMenuItemCheckbox {
  color: var(--accent, #00d4ff) !important;
}

/* Dark theme dropdown */
html.dark-theme .blocklyDropDownDiv,
html.dark-theme .blocklyDropDownDiv {
  border-color: #454560 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

html.dark-theme .blocklyMenu,
html.dark-theme .blocklyMenu {
  background: #1e1e2e !important;
}

html.dark-theme .blocklyMenu .blocklyMenuItem,
html.dark-theme .blocklyMenu .blocklyMenuItem {
  color: #ddd !important;
}

html.dark-theme .blocklyMenu .blocklyMenuItem:hover {
  background: #2a2a40 !important;
  color: var(--accent, #00d4ff) !important;
}

html.dark-theme .blocklyMenu .blocklyMenuItemDisabled,
html.dark-theme .blocklyMenu .blocklyMenuItemDisabled {
  color: #666 !important;
}

/* =========================================================================
 * Blockly Context Menu
 * Right-click menu on workspace/blocks
 * ========================================================================= */

/* Light theme context menu */
.blocklyContextMenu {
  background: #fff !important;
  border: 1px solid #d0d0d0 !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
  padding: 4px 0 !important;
  min-width: 140px !important;
}

.blocklyContextMenu .blocklyMenuItem {
  padding: 8px 14px !important;
  color: #333 !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 13px !important;
  transition: background 0.1s, color 0.1s;
}

.blocklyContextMenu .blocklyMenuItem:hover {
  background: #f0f0f0 !important;
  color: var(--accent, #00d4ff) !important;
}

.blocklyContextMenu .blocklyMenuItemDisabled {
  color: #999 !important;
}

.blocklyContextMenu .blocklyMenuItemDisabled:hover {
  background: transparent !important;
}

.blocklyContextMenu hr,
.blocklyContextMenu .blocklyMenuSeparator {
  border: none !important;
  border-top: 1px solid #e0e0e0 !important;
  margin: 4px 8px !important;
}

/* Dark theme context menu */
html.dark-theme .blocklyContextMenu,
html.dark-theme .blocklyContextMenu {
  background: #1e1e2e !important;
  border-color: #454560 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

html.dark-theme .blocklyContextMenu .blocklyMenuItem,
html.dark-theme .blocklyContextMenu .blocklyMenuItem {
  color: #ddd !important;
}

html.dark-theme .blocklyContextMenu .blocklyMenuItem:hover {
  background: #2a2a40 !important;
  color: var(--accent, #00d4ff) !important;
}

html.dark-theme .blocklyContextMenu .blocklyMenuItemDisabled,
html.dark-theme .blocklyContextMenu .blocklyMenuItemDisabled {
  color: #666 !important;
}

html.dark-theme .blocklyContextMenu hr,
html.dark-theme .blocklyContextMenu .blocklyMenuSeparator,
html.dark-theme .blocklyContextMenu hr,
html.dark-theme .blocklyContextMenu .blocklyMenuSeparator {
  border-top-color: #454560 !important;
}