/*
  Stylesheet for the offline mind‑map editor

  This sheet defines the look and feel of the application.  It includes
  styles for the toolbar, the drawing canvas, individual nodes and their
  various shapes, as well as the expand/collapse buttons and simple
  transitions.  The aim is to provide a clean, modern interface with
  subtle shading and intuitive controls while remaining compact enough
  to embed in a single file.
*/

/* Reset some default margins/paddings and prevent text selection on
   interactive areas to improve the drag/pan experience. */
/* NỀN TOÀN TRANG */
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  overflow: hidden;
  background-color: #fff8dc; /* giấy vàng nhạt (Cornsilk) */
}
/* KHU VỰC MAP */
.mindmap-container {
  position: absolute;
  top: 48px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  background-color: #fff8dc; /* đồng bộ nền giấy vàng nhạt */
  cursor: grab;
}
/* Top toolbar contains all control buttons and selectors.  It is
   styled with a light background and subtle shadow. */
/* THANH CÔNG CỤ TRÊN – MÀU ĐÀ */
.toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background-color: #eed9b7;   /* màu đà nhẹ */
  border-bottom: 1px solid #d9b48a; /* viền đậm hơn cùng tông */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  font-size: 14px;
  overflow-x: auto;
  white-space: nowrap;
  flex-wrap: nowrap;
}

/* Buttons share a consistent look.  Active buttons are filled with
   primary colour while disabled ones are faded.  Toolbar buttons now
   accommodate both an icon and a small label, so we allow their
   width to grow naturally. */
.toolbar button,
.toolbar select,
.toolbar label {
  font-size: 14px;
}

/* Toolbar buttons layout: horizontal icon and label with a small gap.
   Use flexbox to align items.  The height is kept consistent; width
   grows as needed based on label length. */
.toolbar button {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border: none;
  background-color: #c48a3f;     /* màu đà đậm */
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.15s;
  font-size: 14px;
}
.toolbar button:hover:not(:disabled) {
  background-color: #a46e2f;     /* khi hover đậm hơn */
}
.toolbar button.active {
  background-color: #8c5e2b;     /* trạng thái active */
}

/* Label inside toolbar buttons: smaller font and slight left margin */
.toolbar button .label {
  margin-left: 4px;
  font-size: 12px;
}

/* Responsive adjustments for mobile devices */
@media (max-width: 768px) {
  .toolbar {
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
  }
  /* Hide labels on small screens to save space; users can rely on
     tooltips (title attribute) for descriptions */
  .toolbar button .label {
    display: none;
  }
  /* Reduce font sizes for select and colour inputs */
  .toolbar select,
  .toolbar input[type="color"] {
    font-size: 12px;
    height: 28px;
  }
  .toolbar button {
    font-size: 16px;
    padding: 4px 8px;
  }
  /* Adjust bottom bar size and spacing on mobile */
  .bottom-bar {
    bottom: 8px;
    gap: 8px;
    padding: 4px 8px;
  }
  .bottom-bar .bar-btn {
    width: 48px;
    height: 48px;
    font-size: 24px;
  }
}

/* Style for colour picker to align with buttons */
#colorInput {
  width: 32px;
  height: 28px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

/* Text colour picker shares the same styling as the node colour picker */
#textColorInput {
  width: 32px;
  height: 28px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

/* Hyperlink appearance inside node */
.node .content a {
  color: #007acc;
  text-decoration: underline;
  pointer-events: auto;
}

/* Hover and active states for toolbar buttons are defined separately
   so they apply to the unified button definition above. */
.toolbar button:hover:not(:disabled) {
  background-color: #0063aa;
}

/* Active state for formatting buttons: darken background to indicate selection */
.toolbar button.active {
  background-color: #005a96;
}

.toolbar button:disabled {
  background-color: #a0a0a0;
  cursor: default;
}

.toolbar select {
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  color: #333;
}

/* The mind map container occupies the full viewport below the toolbar. */
.mindmap-container {
  position: absolute;
  top: 48px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  background-color: #fafafa;
  cursor: grab;
}

/* The wrapper is the movable/zoomable layer that contains both the
   node layer (HTML elements) and link layer (SVG lines).  We set its
   origin to the center of the screen so that zooming around the centre
   behaves naturally. */
.map-wrapper {
  position: absolute;
  transform-origin: 0 0;
  cursor: inherit;
  /* Ensure the wrapper occupies the full container so that the
     underlying SVG has a non-zero size.  Without explicit width
     and height the wrapper collapses due to absolute positioning,
     causing the connectors to disappear. */
  width: 100%;
  height: 100%;
}

/* The SVG layer for connecting lines sits under nodes and ignores
   pointer events so that clicks fall through to the nodes. */
.link-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

/* The HTML layer holds all node elements.  It shares the same
   coordinate system as the SVG layer. */
.node-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Base styles for nodes.  Each node is absolutely positioned and
   styled with a white background, border and subtle shadow. */
.node {
  position: absolute;
  /* Increase padding so that longer labels have breathing room.  A bit
     of extra horizontal and vertical padding makes nodes feel less
     cramped even when they contain multiple lines of text. */
  padding: 8px 16px;
  background-color: #fff;
  border: 1px solid #bbb;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  /* Allow nodes to grow horizontally and wrap text.  Setting a
     larger minimum and maximum width accommodates multi‑line text
     while preventing nodes from becoming excessively wide. */
  min-width: 120px;
  max-width: 280px;
  text-align: center;
  transition: border-color 0.2s, box-shadow 0.2s;
  /* Enable wrapping of long text inside nodes */
  white-space: normal;
  word-break: break-word;
}

/* Highlight the selected node. */
.node.selected {
  border-color: #007acc;
  box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.4);
}

/* Node content wraps the text and any embedded images. */
.node .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Disable pointer events on the container so that clicks fall through
     to the node, but allow events on specific children (text, links)
     via explicit rules below. */
  pointer-events: none;
}

/* Allow pointer events on the text elements within nodes so that
   double‑click editing works correctly.  Hyperlinks also retain
   pointer events for navigation. */
.node .content span,
.node .content a,
.node .content textarea,
.node .content .img-wrapper {
  pointer-events: auto;
}

/* Inline editor for editing node text.  It inherits the same
   pointer-event behaviour as spans and anchors so that mouse
   interactions work correctly. */
.node .content .inline-editor {
  pointer-events: auto;
  min-height: 1em;
  overflow: hidden;
  outline: none;
}

.node .content img {
  max-width: 80px;
  max-height: 60px;
  margin-top: 4px;
}

/* Node controls: plus/minus buttons for adding or deleting children. */
.node-controls {
  position: absolute;
  top: -8px;
  right: -8px;
  display: flex;
  gap: 2px;
}

.node-controls .control {
  width: 14px;
  height: 14px;
  border: 1px solid #888;
  background-color: #fff;
  border-radius: 2px;
  font-size: 10px;
  line-height: 12px;
  text-align: center;
  cursor: pointer;
  user-select: none;
}

.node-controls .control:hover {
  background-color: #e6f0ff;
}

/* Resizable handle for nodes.  Appears at the bottom-right corner of
   each node and allows the user to drag to adjust the node's width
   and height. */
.resize-handle {
  /* The resize handle is hidden by default and only shown when
     resize mode is enabled and the node is selected.  The
     positioning and styling remain unchanged. */
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 10px;
  height: 10px;
  background-color: #d0d0d0;
  border: 1px solid #888;
  border-radius: 2px;
  cursor: nwse-resize;
  box-sizing: border-box;
  display: none;
}

/* Wrapper for images to support resizing */
.img-wrapper {
  position: relative;
  display: inline-block;
  margin-top: 4px;
}
.img-wrapper img {
  display: block;
  max-width: 160px;
  max-height: 120px;
}

/* Resize handle for images (small square at the bottom-right of the image) */
.img-resize-handle {
  /* Hidden by default; only visible in resize mode on the selected
     node.  See body.resize-mode rules below. */
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  background-color: #bbbbbb;
  border: 1px solid #888;
  border-radius: 2px;
  cursor: nwse-resize;
  display: none;
}

/* When resize mode is active, show resize handles on the selected node. */
body.resize-mode .node.selected .resize-handle {
  display: block;
}
body.resize-mode .node.selected .img-resize-handle {
  display: block;
}

/* Expand/collapse toggle.  It appears below each node when it has
   children and toggles between a plus and minus symbol based on
   expansion state. */
.expand-btn {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 18px;
  background-color: #fff;
  border: 1px solid #888;
  border-radius: 50%;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  cursor: pointer;
  user-select: none;
}

/* Expand/collapse toggle arrow icons */
.expand-btn.collapsed::before {
  content: '▶';
  font-size: 10px;
  line-height: 16px;
  display: block;
  transform: translateX(1px);
}

.expand-btn.expanded::before {
  content: '▼';
  font-size: 10px;
  line-height: 16px;
  display: block;
  transform: translateX(1px);
}

/* Shapes – base rectangle is the default.  Additional shapes are
   applied via CSS classes.  The ellipse has a pill-like shape, the
   circle is fully round and the diamond is rotated. */
.shape-ellipse {
  border-radius: 50% / 40%;
}

.shape-circle {
  border-radius: 50%;
}

.shape-diamond {
  transform: rotate(45deg);
  padding: 0;
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.shape-diamond .content {
  transform: rotate(-45deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* When a diamond is selected, rotate the highlight ring back so the
   outline appears symmetric. */
.shape-diamond.selected {
  box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.4);
  border-color: #007acc;
}

/* Hide shapes when collapsed and no children exist (no toggle). */
.node.no-toggle .expand-btn {
  display: none;
}

/* Cursor changes to grabbing while dragging. */
.dragging {
  cursor: grabbing !important;
}

/* ==========================================================================
   Bottom action bar and multi‑select styling
   --------------------------------------------------------------------------
   The bottom bar appears when a node is selected and contains a set of
   large icons for common actions: adding/grouping nodes, deleting,
   collapsing/expanding, toggling resize mode and locking/unlocking.  When
   multiple nodes are Ctrl‑clicked, the plus button groups them instead of
   adding a child.  Multi‑selected nodes are highlighted with a yellow
   border and glow.  These styles do not impact the top toolbar.  */

/* Highlight multi‑selected nodes distinct from the single selected node. */
.node.multi-selected {
  border-color: #f0c000;
  box-shadow: 0 0 0 2px rgba(240, 192, 0, 0.4);
}

/* Container for the bottom bar.  It is centred horizontally at the
   bottom of the viewport and hidden by default.  A light backdrop
   and slight shadow help separate it from the canvas. */
.bottom-bar {
  position: fixed;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 6px 12px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  z-index: 1002;
}

/* Buttons within the bottom bar are large and colourful for easy
   tapping/clicking.  The look matches the top toolbar to maintain a
   consistent visual language. */
.bottom-bar .bar-btn {
  font-size: 22px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #007acc;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.15s;
}
.bottom-bar .bar-btn:hover:not(:disabled) {
  background-color: #0063aa;
}
.bottom-bar .bar-btn:disabled {
  background-color: #a0a0a0;
  cursor: default;
}
/* === Logo mờ nền mindmap === */
#mapWrapper::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2400px;           /* điều chỉnh kích thước logo */
  height: 2400px;
  background-image: url('LOGO NHNN.png'); /* tên file logo */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.06;           /* độ mờ 0.0 - 1.0 */
  transform: translate(-50%, -50%);
  pointer-events: none;    /* để không bị ảnh hưởng khi thao tác map */
  z-index: 0;
}