/* Dark Explorer Style */
:root {
  --bg: #141423;
  --panel: #1f1f2f;
  --muted: #9aa0b4;
  --accent: #00bcd4;
  --card: #242438;
  --panel-2: #2b2b3d;
}

html,body { height:100%; margin:0; background:var(--bg); color:#e6e6e6; font-family: "Segoe UI", Roboto, Arial; }
#toolbar { display:flex; align-items:center; gap:8px; padding:10px; background:var(--panel); border-bottom:1px solid #2f2f4f; }
#toolbar button, #toolbar select { background:var(--accent); color:#022; border:none; padding:6px 10px; border-radius:6px; cursor:pointer; }
#toolbar .status { margin-left:8px; color:var(--muted); font-weight:600; }

#main { display:flex; height: calc(100vh - 52px); gap:10px; padding:12px; box-sizing:border-box; }
aside#explorerPanel { width:320px; background:var(--panel-2); border-radius:8px; padding:10px; overflow:auto; box-shadow: 0 6px 18px rgba(0,0,0,0.6); }
#fileTree { font-family: monospace; font-size:13px; }

#detailsPanel { flex:1; display:flex; flex-direction:column; gap:12px; overflow:auto; }
.card { background:var(--card); padding:12px; border-radius:8px; box-shadow: 0 6px 18px rgba(0,0,0,0.6); }
input, select { background:#222231; color:#e6e6e6; border:1px solid #3a3a5a; padding:6px; border-radius:6px; width:100%; box-sizing:border-box; }

/* FIX: Styling für Checkboxen, damit sie nicht die volle Breite einnehmen */
input[type="checkbox"] {
  width: auto;
  margin-right: 8px;
  vertical-align: middle;
  cursor: pointer;
}

.file-node { padding:6px 8px; border-radius:6px; margin:2px 0; }
.file-node:hover { background: rgba(255,255,255,0.02); cursor:pointer; }
.file-node.folder { font-weight:700; color:#cfefff; }
.file-node.file { color:#dfe7ff; }

.preview-content { background:#0f1020; color:#dcecff; padding:10px; border-radius:6px; height:260px; overflow:auto; white-space:pre-wrap; font-family: Consolas, Monaco, monospace; }

#logs { max-height:220px; overflow:auto; font-family:monospace; font-size:13px; background:#0b0b12; padding:8px; border-radius:6px; }
#logs div { padding:6px; border-bottom:1px solid #1b1b2a; }

.modal { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.6); }
.modalContent { width:420px; padding:16px; }
.modal.hidden { display:none; }

.context-menu {
  font-family: sans-serif;
  font-size: 13px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.context-menu div:hover {
  background-color: #555;
}