:root {
  --accent: #1E90FF;
  --accent-hover: #187bcd;
  --bg-light: #f9f9f9;
  --bg-dark: #1e1e1e;
  --text-light: #222;
  --text-dark: #fff;
  --tab-bg: #eee;
  --tab-active: var(--accent);
  --tab-color: #333;
  --tab-color-active: #fff;
  --border-radius: 6px;
  --shadow: 0 2px 6px rgba(0,0,0,0.15);
  --gap: 0.5rem;
}

html, body {
  margin:0;
  padding:0;
  height:100%;
  width:100%;
  font-family: 'Segoe UI', Tahoma, sans-serif;
  background: var(--bg-light);
  color: var(--text-light);
}

[data-theme="dark"] {
  background: var(--bg-dark);
  color: var(--text-dark);
}

/* ================= LAYOUT ================= */
.layout {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* ================= SIDEBAR ================= */
#sidebar {
  width: 250px;
  min-width: 250px;
  background: #2c2c2c;
  color: #eee;
  display: flex;
  flex-direction: column;
  transition: all 0.3s;
  overflow-y: auto;
  padding-bottom: 0.5rem;
}

#sidebar.collapsed { width: 50px; } 
#sidebar.open { left:0; }          

.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .5rem 1rem;
  background: #1f1f1f;
  border-bottom: 1px solid #444;
}

.sidebar-header h2 { margin: 0; font-size: 1rem; }


/* ================= FILE TREE ================= */
.file-tree {
  flex: 1;
  padding: .5rem 1rem;
  font-size: 0.9rem;
}

.file-tree ul { padding-left: 1rem; margin:0; list-style:none; }
.file-tree li { padding: 2px 0; line-height:1.4; cursor:pointer; user-select:none; }

/* Ordner-Icons */
.file-tree li.folder::before { content: "📁 "; width:1.2em; display:inline-block; }
.file-tree li.folder > ul { display: none; margin-left:1rem; }
.file-tree li.folder.open::before { content: "📂 "; }
.file-tree li.folder.open > ul { display: block; }

/* Datei-Icons */
.file-tree li.file::before { content: "📄 "; width:1.2em; display:inline-block; }

/* Hover & aktive Datei */
.file-tree li:hover { background: rgba(255,255,255,0.05); border-radius: 4px; }
.file-tree li.active { background: rgba(30,144,255,0.3); border-radius:4px; color:#fff; font-weight:500; }

/* ================= MAIN AREA ================= */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-light);
  color: var(--text-light);
}

[data-theme="dark"] .main {
  background: var(--bg-dark);
  color: var(--text-dark);
}

/* ================= TOOLBAR ================= */
.toolbar {
  display: flex;
  flex-direction: column; /* <— das ist der Trick: alles untereinander */
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--tab-bg);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
}

/* Titelzeile (Editor + Menübutton) */
.toolbar-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  justify-content: space-between; /* Titel links, Menü ggf. rechts */
}

/* Buttonzeile unterhalb des Titels */
.toolbar-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: 100%;
  border-top: 1px solid rgba(0,0,0,0.1);
  padding-top: 0.4rem;
  justify-content: flex-start;
}

.toolbar-left h1 { margin:0; font-size:1.2rem; }

/* SVG Icons in Buttons */
.toolbar-buttons .btn .icon {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    vertical-align: middle;
}

/* Hover Effekt */
.toolbar-buttons .btn:hover {
    background: var(--accent-hover);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* Abstand zwischen Icons */
.toolbar-buttons .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0.4rem 0.6rem;
}

/* ================= TABS ================= */
.tab-list {
  display:flex;
  gap:0.25rem;
  overflow-x:auto;
  flex-wrap:wrap;
  width:100%;
}

.tab {
  padding: 0.25rem 0.6rem;
  background: var(--tab-bg);
  border-radius: var(--border-radius);
  cursor:pointer;
  white-space:nowrap;
  flex-shrink:0;
  box-shadow: var(--shadow);
  transition: all 0.15s;
  display:flex;
  align-items:center;
}

.tab span { display:inline-block; }
.tab:hover { background: var(--accent-hover); color:#fff; }
.tab.active {
  background: var(--tab-active);
  color: var(--tab-color-active);
  box-shadow: 0 3px 8px rgba(0,0,0,0.25);
}

.tab span:last-child {
  margin-left:0.5rem;
  cursor:pointer;
  font-weight:bold;
}

/* ================= EDITOR ================= */
#editor {
  flex: 1;
  width: 100%;
  border-top: 1px solid #ccc;
}
#editor {
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
}
/* ================= BUTTONS ================= */
.btn {
  background: var(--accent);
  color:white;
  border:none;
  border-radius: var(--border-radius);
  padding:0.5rem 1rem;
  font-weight:500;
  box-shadow: var(--shadow);
  transition: all 0.2s;
  cursor:pointer;
}

.btn:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}


.material-symbols-outlined {
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
  font-size: 22px;
  vertical-align: middle;
}

.toolbar-buttons .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--border-radius);
  padding: 0.45rem 0.6rem;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}

.toolbar-buttons .btn:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

.toolbar-buttons {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

/* ================= MOBILE ================= */
.mobile-only { display: none; }


/* Touch-Auswahl aktivieren */
body.touch-select .ace_editor,
body.touch-select .ace_text-input,
body.touch-select .ace_content,
body.touch-select .ace_text-layer {
  user-select: text !important;
  -webkit-user-select: text !important;
  touch-action: auto !important;
}

/* Wenn aktiv, Icon farblich hervorheben */
#toggle-touch-select.active {
  background: var(--accent-hover);
  color: #fff;
}

@media (max-width: 768px) {
  #sidebar { position: absolute; z-index: 10; height: 100vh; left: -250px; }
  #sidebar.open { left:0; }
  .mobile-only { display: inline-block; }
  .desktop-only { display: none; }
}