/* Battle Planner styles, scoped under #bp-root so the planner's own controls
 * keep their look without leaking into the SC:X Manager app shell. Derived from
 * the standalone planner's <style>; the global html/body rules are replaced by
 * #bp-root sizing so the planner sits as a contained widget inside our layout. */

#bp-root, #bp-root * { box-sizing: border-box; }

#bp-root {
  display: flex;
  flex-direction: column;
  /* Fill the viewport (the footer sits just below); no app padding, no border. */
  height: calc(100vh - 5rem);
  min-height: 520px;
  background: #1a1a1a;
  color: #eee;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

#bp-root #toolbar {
  background: #2a2a2a;
  padding: 8px 12px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  border-bottom: 1px solid #444;
  flex-shrink: 0;
}
#bp-root .group { display: flex; gap: 6px; align-items: center; padding-right: 10px; border-right: 1px solid #444; }
#bp-root .group:last-child { border-right: none; }
#bp-root button, #bp-root select, #bp-root input[type=text], #bp-root input[type=number] {
  background: #3a3a3a;
  color: #eee;
  border: 1px solid #555;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}
#bp-root button:hover { background: #4a4a4a; }
#bp-root button.active { background: #5a8fff; border-color: #5a8fff; color: #fff; }
#bp-root button.danger:hover { background: #803333; border-color: #aa4444; }
#bp-root button.primary { background: #2e7d32; border-color: #2e7d32; }
#bp-root button.primary:hover { background: #3a9c40; }
#bp-root button.share { background: #1976d2; border-color: #1976d2; }
#bp-root button.share:hover { background: #2196f3; }
#bp-root input[type=text] { width: 70px; cursor: text; }
#bp-root input[type=number] { width: 56px; cursor: text; }
#bp-root input[type=color] {
  width: 36px; height: 30px;
  border: 1px solid #555;
  border-radius: 4px;
  cursor: pointer;
  background: none;
  padding: 2px;
}
#bp-root label { font-size: 12px; color: #aaa; }
#bp-root #canvas-wrap {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
  overflow: auto;
  background:
    linear-gradient(45deg, #222 25%, transparent 25%) 0 0/20px 20px,
    linear-gradient(-45deg, #222 25%, transparent 25%) 0 10px/20px 20px,
    linear-gradient(45deg, transparent 75%, #222 75%) 10px -10px/20px 20px,
    linear-gradient(-45deg, transparent 75%, #222 75%) -10px 0/20px 20px,
    #1a1a1a;
}
#bp-root #canvas {
  background: #000;
  box-shadow: 0 4px 24px rgba(0,0,0,0.6);
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  cursor: crosshair;
  display: block;
}
#bp-root #canvas.tool-select { cursor: default; }
#bp-root #status {
  font-size: 12px;
  color: #888;
  padding: 6px 12px;
  background: #2a2a2a;
  border-top: 1px solid #444;
  flex-shrink: 0;
}
#bp-root #status .err { color: #ff8080; }
#bp-root #status .ok { color: #80d080; }

/* Note modal */
#bp-root #note-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.65);
  display: none;
  align-items: center; justify-content: center;
  z-index: 1000;
}
#bp-root #note-modal.open { display: flex; }
#bp-root .modal-card {
  background: #2a2a2a;
  border: 1px solid #444;
  border-radius: 8px;
  padding: 14px;
  width: 540px; max-width: 92vw;
  box-shadow: 0 12px 48px rgba(0,0,0,0.6);
}
#bp-root .modal-card h3 {
  margin: 0 0 10px;
  font-size: 12px; color: #aaa;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.7px;
}
#bp-root .rich-toolbar { display: flex; gap: 6px; margin-bottom: 8px; align-items: center; flex-wrap: wrap; }
#bp-root .rich-toolbar .spacer { flex: 1; }
#bp-root .rich-toolbar button[data-cmd] { min-width: 36px; padding: 6px 8px; }
#bp-root #note-editor {
  min-height: 140px;
  max-height: 360px;
  overflow-y: auto;
  background: #1a1a1a;
  color: #fff;
  border: 1px solid #555;
  border-radius: 4px;
  padding: 12px;
  font: 16px sans-serif;
  outline: none;
  line-height: 1.45;
}
#bp-root #note-editor:focus { border-color: #5a8fff; }
#bp-root #note-editor ul { padding-left: 22px; margin: 4px 0; }
#bp-root #note-editor p { margin: 0 0 6px; }