/* ═══════════════════════════════════════════════════════════
   MINDMAP PAGE v2 — خريطة الأفكار
   Responsive: Mobile · Tablet · Desktop
═══════════════════════════════════════════════════════════ */

/* ── Page container ── */
.mindmap-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  height: calc(100dvh - 60px);   /* topbar height */
  padding-bottom: var(--space-2);
  overflow: hidden;
}

/* ── Toolbar ── */
.mindmap-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-2) var(--space-3);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.mindmap-maps-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  flex: 1;
  min-width: 0;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.mindmap-maps-tabs::-webkit-scrollbar { display: none; }

.mindmap-tab {
  white-space: nowrap;
  padding: 5px var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semi);
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .14s, color .14s, border-color .14s;
  flex-shrink: 0;
}
.mindmap-tab:hover        { background: var(--color-surface-2); color: var(--color-text); }
.mindmap-tab.active       { background: var(--color-primary-bg); color: var(--color-primary); border-color: var(--color-primary-muted); }
.mindmap-tab-add          { color: var(--color-primary); opacity:.85; }
.mindmap-tab-add:hover    { opacity: 1; }

.mindmap-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.mindmap-actions .btn {
  padding: 5px 8px;
  font-size: var(--text-sm);
  min-width: 32px;
  min-height: 32px;
}

/* ── Hint bar ── */
.mindmap-hint {
  font-size: 11px;
  color: var(--color-text-subtle);
  padding: 0 var(--space-2);
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ── Canvas Area + Editor (flex row on wide, column on mobile) ── */
.mindmap-main {
  display: flex;
  gap: var(--space-3);
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ── Canvas Wrapper ── */
.mindmap-canvas-wrap {
  flex: 1;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  position: relative;
  min-height: 240px;
  cursor: grab;
}
.mindmap-canvas-wrap:active { cursor: grabbing; }

#mm-canvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  outline: none;
}

/* ── Node Editor — sidebar on desktop, bottom sheet on mobile ── */
.mindmap-node-editor {
  width: 240px;
  flex-shrink: 0;
  background: var(--card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  overflow-y: auto;
  animation: fadeInUp 180ms ease both;
}
.mindmap-node-editor.hidden { display: none; }

.mindmap-editor-label {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semi);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.mindmap-node-input {
  font-size: var(--text-sm);
  min-height: 72px;
  resize: none;
}

/* ── Color Palette ── */
.mindmap-color-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: var(--space-1) 0;
}
.mindmap-color-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  transition: transform .12s, border-color .14s, box-shadow .14s;
  flex-shrink: 0;
}
.mindmap-color-btn:hover {
  transform: scale(1.18);
  box-shadow: 0 0 0 2px var(--color-border);
}
.mindmap-color-btn.active {
  border-color: var(--color-text);
  transform: scale(1.18);
  box-shadow: 0 0 0 3px var(--color-primary-bg);
}

/* ── Editor action buttons ── */
.mindmap-editor-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: auto;
}
.mindmap-editor-actions .btn {
  width: 100%;
  justify-content: center;
}

/* ── Inline Modals ── */
.mm-modal {
  position: absolute;
  inset: 0;
  z-index: 50;
  background: rgba(0,0,0,.42);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xl);
  animation: fadeIn 150ms ease both;
}
.mm-modal.hidden { display: none; }

.mm-modal-box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  width: min(300px, 88%);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  box-shadow: var(--shadow-xl);
  animation: cardIn 220ms cubic-bezier(0.34,1.56,0.64,1) both;
}
.mm-modal-title {
  font-size: var(--text-base);
  font-weight: var(--font-weight-semi);
  color: var(--color-text);
}
.mm-modal-btns {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */

/* Tablet ≥ 768px: hint visible */
@media (max-width: 767px) {
  .mindmap-hint { display: none; }

  /* Mobile: editor becomes bottom strip */
  .mindmap-main {
    flex-direction: column;
  }

  .mindmap-canvas-wrap {
    flex: 1;
    min-height: 200px;
  }

  .mindmap-node-editor {
    width: 100%;
    flex-shrink: 0;
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    /* max height so it doesn't eat canvas */
    max-height: 220px;
  }

  .mindmap-node-input { min-height: 50px; }

  .mindmap-editor-actions {
    flex-direction: row;
    margin-top: 0;
  }

  .mindmap-color-btn {
    width: 26px;
    height: 26px;
  }
}

/* Very small screens */
@media (max-width: 380px) {
  .mindmap-toolbar { padding: var(--space-2); }
  .mindmap-actions .btn { padding: 4px 6px; min-width: 28px; }
}

/* Large screens: wider editor panel */
@media (min-width: 1200px) {
  .mindmap-node-editor { width: 280px; }
}

/* ═══════════════════════════════════════
   DARK MODE
═══════════════════════════════════════ */
[data-theme="dark"] .mindmap-canvas-wrap { background: #080F1E; }
[data-theme="dark"] .mindmap-node-editor { background: var(--color-surface); }
[data-theme="dark"] .mindmap-node-input  { background: var(--input-bg); color: var(--color-text); border-color: var(--input-border); }
[data-theme="dark"] .mm-modal-box        { background: var(--color-surface-2); }
[data-theme="dark"] .mm-modal-box .input { background: var(--input-bg); color: var(--color-text); border-color: var(--input-border); }