/*
  صانع الخرائط الذهنية - ملف الأنماط الرئيسي
  تطبيق ويب تفاعلي لإنشاء الخرائط الذهنية باللغة العربية
*/

:root {
  --bg:#1c1f26;
  --panel:#242a33;
  --panel-alt:#2f3742;
  --text:#e9eef5;
  --accent:#4e91f9;
  --danger:#ff4d61;
  --grid:#2a313b;
  --edge:#5a6472;
  font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); height:100vh; display:flex; flex-direction:column; }
header.toolbar { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.75rem; padding:.5rem .75rem; background:linear-gradient(90deg,#222a33,#1e2430); border-bottom:1px solid #111; position:sticky; top:0; z-index:10; }
.toolbar .group { display:flex; align-items:center; gap:.5rem; background:var(--panel); padding:.4rem .6rem; border-radius:8px; box-shadow:0 1px 2px #0008,0 0 0 1px #ffffff08 inset; }
.toolbar button, .toolbar select, .toolbar input[type=color] { background:var(--panel-alt); border:1px solid #3a434f; color:var(--text); padding:.35rem .7rem; border-radius:6px; cursor:pointer; font-size:.8rem; min-height:32px; }
.toolbar label { display:flex; align-items:center; gap:.3em; }
.toolbar button:hover { background:#3a4552; }
.toolbar button:active { background:#33414f; }
#deleteBtn {
  background: #e53935 !important;
  color: #fff !important;
  border-color: #b71c1c !important;
}
#resetBtn {
  background: #a8e6a3 !important;
  color: #2e4a2d !important;
  border-color: #7fc97a !important;
}
#resetBtn:hover {
  background: #96e190 !important;
}
#resetBtn:active {
  background: #85dd7f !important;
}
.toolbar input[type=color]{ padding:0; width:42px; height:32px; }
.toolbar select { min-height:32px; }
.hint { font-size:.7rem; opacity:.7; }
main { flex:1; position:relative; overflow:hidden; }
#canvasWrapper { width:100%; height:100%; position:relative; overflow:hidden; }
#canvasWrapper.panning { cursor:grabbing !important; }
#canvasWrapper::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.35; }
/* Themes */
#canvasWrapper[data-bg="dark"] { background:radial-gradient(circle at 40% 40%,#222b35,#1b232b 60%); }
#canvasWrapper[data-bg="dark"]::before { background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg,var(--grid) 1px, transparent 1px); background-size: 64px 64px,64px 64px; }
#canvasWrapper[data-bg="light"] { background:linear-gradient(135deg,#f1f4f8,#d7e0ea); color:#222; }
#canvasWrapper[data-bg="light"]::before { background-image: linear-gradient(#ffffff55 1px, transparent 1px), linear-gradient(90deg,#ffffff55 1px, transparent 1px); background-size:72px 72px,72px 72px; }
#canvasWrapper[data-bg="sunset"] { background:radial-gradient(circle at 30% 30%,#ffcf71,#fe6d8e); }
#canvasWrapper[data-bg="sunset"]::before { background-image: linear-gradient(#ffffff40 1px, transparent 1px), linear-gradient(90deg,#ffffff40 1px, transparent 1px); background-size:70px 70px; }
#canvasWrapper[data-bg="forest"] { background:linear-gradient(160deg,#1e3c27,#16261b 60%); }
#canvasWrapper[data-bg="forest"]::before { background-image: linear-gradient(#1f4d3366 1px, transparent 1px), linear-gradient(90deg,#1f4d3366 1px, transparent 1px); background-size:70px 70px; }
#canvasWrapper[data-bg="ocean"] { background:radial-gradient(circle at 50% 40%,#1b4b6f,#081e30 70%); }
#canvasWrapper[data-bg="ocean"]::before { background-image: linear-gradient(#1c5d8a55 1px, transparent 1px), linear-gradient(90deg,#1c5d8a55 1px, transparent 1px); background-size:74px 74px; }
#canvasWrapper[data-bg="paper"] { background:#f5f2e9; }
#canvasWrapper[data-bg="paper"]::before { background-image: repeating-linear-gradient(#00000010 0 1px, transparent 1px 40px), repeating-linear-gradient(90deg,#00000010 0 1px, transparent 1px 40px); opacity:.25; }
#mapScale { position:absolute; inset:0; transform-origin:0 0; }
#edgesLayer { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
#nodesLayer { position:absolute; inset:0; }
.node { position:absolute; min-width:110px; padding:.55rem .7rem; cursor:grab; user-select:none; font-size:.85rem; line-height:1.35; background:var(--panel-alt); border:2px solid var(--accent); color:var(--text); border-radius:12px; box-shadow:0 4px 10px -2px #0009,0 0 0 1px #ffffff10 inset; transition:border-color .25s, box-shadow .25s, transform .2s; max-width:none; }
body.wrap-enabled .node { max-width:320px; }
.node[data-shape="round"] { border-radius:18px; }
.node[data-shape="circle"] { border-radius:50%; min-width:110px; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; }
.node[data-shape="pill"] { border-radius:100px; }
.node:focus { outline:none; box-shadow:0 0 0 3px #ffffff10,0 0 0 6px var(--accent)55; border-color:var(--accent); }
.node.selected { outline:none; box-shadow:0 0 0 2px var(--accent),0 0 0 6px #ffffff15,0 4px 10px -2px #000c; }
.node.editing { cursor:text; }
.node .text { white-space:pre-wrap; display:block; width:100%; word-break:break-word; text-align:center; }
.node[data-align="left"] .text { text-align:left; }
.node[data-align="center"] .text { text-align:center; }
.node[data-align="right"] .text { text-align:right; }
.node.empty .text { opacity:.55; font-style:italic; }
.connector { stroke:var(--edge); stroke-width:2.2; fill:none; filter:drop-shadow(0 1px 2px #000a); }
.connector.highlight { stroke:var(--accent); stroke-width:3; }
.statusBar { background:#12171e; padding:.4rem .75rem; font-size:.7rem; letter-spacing:.5px; border-top:1px solid #0c1015; display:flex; align-items:center; gap:1rem; }
.statusBar::after { content: attr(data-zoom); margin-inline-start:auto; opacity:.6; }
::-webkit-scrollbar { width:11px; height:11px; }
::-webkit-scrollbar-track { background:#1b222b; }
::-webkit-scrollbar-thumb { background:#38424d; border-radius:6px; }
::-webkit-scrollbar-thumb:hover { background:#46525e; }
.fadeIn { animation: fade .4s ease; }
@keyframes fade { from { opacity:0; transform:scale(.9);} to { opacity:1; transform:scale(1);} }
.dragging { opacity:.75; }
.selectionOutline { position:absolute; border:2px dashed #4e91f9aa; pointer-events:none; z-index:5; }