/* Final color and mobile-layout corrections for the game skill tree. */

/* Quick modules use the same color language as real skill nodes. */
#canvasModuleKit [data-canvas-module] {
  position: relative;
  overflow: hidden;
}

#canvasModuleKit [data-canvas-module] i {
  border: 1px solid transparent !important;
  color: #fff !important;
}

#canvasModuleKit [data-canvas-module="learn"] i {
  background: #4d86cf !important;
  border-color: #285587 !important;
}

#canvasModuleKit [data-canvas-module="practice"] i {
  background: #48a074 !important;
  border-color: #286247 !important;
}

#canvasModuleKit [data-canvas-module="program"] i {
  background: #cf6259 !important;
  border-color: #86342f !important;
}

#canvasModuleKit [data-canvas-module="milestone"] i {
  background: #d5aa47 !important;
  border-color: #8f681c !important;
}

#canvasModuleKit [data-canvas-module="milestone"] i {
  transform: rotate(45deg);
}

#canvasModuleKit [data-canvas-module="milestone"] i::first-letter {
  transform: rotate(-45deg);
}

/* Explicit fallbacks in case an older canvas render omits the expected class. */
#skillCanvas.game-skill-tree .map-node.ui-type-learn .node-orb,
#skillCanvas.game-skill-tree .map-node[data-tree-type="learn"] .node-orb {
  background: radial-gradient(circle at 34% 27%, rgba(255,255,255,.38), transparent 29%), linear-gradient(145deg, #4d86cf, #285587) !important;
}

#skillCanvas.game-skill-tree .map-node.ui-type-practice .node-orb,
#skillCanvas.game-skill-tree .map-node[data-tree-type="practice"] .node-orb {
  background: radial-gradient(circle at 34% 27%, rgba(255,255,255,.38), transparent 29%), linear-gradient(145deg, #48a074, #286247) !important;
}

#skillCanvas.game-skill-tree .map-node.ui-type-program .node-orb,
#skillCanvas.game-skill-tree .map-node[data-tree-type="program"] .node-orb {
  background: radial-gradient(circle at 34% 27%, rgba(255,255,255,.38), transparent 29%), linear-gradient(145deg, #cf6259, #86342f) !important;
}

#skillCanvas.game-skill-tree .map-node.ui-type-milestone .node-orb,
#skillCanvas.game-skill-tree .map-node[data-tree-type="milestone"] .node-orb {
  background: radial-gradient(circle at 34% 27%, rgba(255,255,255,.38), transparent 29%), linear-gradient(145deg, #d5aa47, #8f681c) !important;
}

#skillCanvas.game-skill-tree .map-node.locked .node-orb {
  background: linear-gradient(145deg, #aaa59a, #706d66) !important;
}

/* The selected node type is visible while editing, before the node is saved. */
#nodeDialog[data-node-visual-type] #nodeType,
#nodeDialog[data-node-visual-type] #nodeDeliveryMode {
  border-left: 8px solid var(--dialog-node-color) !important;
}

#nodeDialog[data-node-visual-type] .node-stepper button.active {
  border-color: var(--dialog-node-color) !important;
  box-shadow: inset 0 -3px 0 var(--dialog-node-color) !important;
}

/* Prevent CTA labels and compact controls from splitting awkwardly. */
#creatorStepNext,
#creatorStepBack,
#nodeDialogCancel,
#nodeStepBack,
#nodeStepNext,
#nodeDialogSave,
#addNodeButton,
#addNodeTail,
#addCurriculumNode,
.curriculum-view-switch button,
.canvas-mode-switch button {
  white-space: nowrap !important;
}

#creatorStepNext span,
#creatorStepBack span,
#nodeStepNext span,
#nodeDialogSave span,
#addNodeButton span,
#addCurriculumNode span {
  white-space: nowrap !important;
}

@media (max-width: 800px) {
  /* Keep the skill-tree module legend readable and color coded. */
  #canvasModuleKit .canvas-module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #canvasModuleKit [data-canvas-module] {
    min-width: 0 !important;
    padding: 10px 12px !important;
    gap: 10px !important;
  }

  #canvasModuleKit [data-canvas-module] span,
  #canvasModuleKit [data-canvas-module] b,
  #canvasModuleKit [data-canvas-module] small {
    min-width: 0 !important;
  }

  #canvasModuleKit [data-canvas-module] b {
    white-space: nowrap !important;
  }

  /* Mobile node editor: status on its own row, three stable action columns. */
  .node-dialog-footer {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 14px max(14px, env(safe-area-inset-left)) calc(14px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-right)) !important;
  }

  .node-dialog-footer > span {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    margin: 0 0 2px !important;
    text-align: center !important;
  }

  .node-dialog-footer > span b,
  .node-dialog-footer > span small {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #nodeDialogCancel {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  #nodeStepBack {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  #nodeStepNext,
  #nodeDialogSave {
    grid-column: 3 !important;
    grid-row: 2 !important;
  }

  .node-dialog-footer button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 52px !important;
    padding: 0 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .node-dialog-footer button span,
  .node-dialog-footer button b {
    display: inline !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  /* The page-level wizard footer also remains a single line. */
  .creator-wizard-footer {
    grid-template-columns: minmax(84px, auto) minmax(0, 1fr) minmax(100px, auto) !important;
  }

  .creator-wizard-footer button {
    min-width: 0 !important;
    padding-inline: 10px !important;
    white-space: nowrap !important;
  }

  .creator-wizard-footer button span {
    white-space: nowrap !important;
  }

  /* Long field labels may wrap naturally, but controls and option text should not. */
  #nodeDialog select,
  #nodeDialog option,
  #nodeDialog button {
    text-wrap: nowrap;
  }

  #nodeDialog .split-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #nodeDialog .split-fields label,
  #nodeDialog .split-fields select,
  #nodeDialog .split-fields input {
    min-width: 0 !important;
  }
}