/* Seitenrahmen im Capacities-Aufbau: gruppierte Seitenleiste, Suchknopf,
 * Befehlspalette (Strg/Cmd+K) und Tab-Leiste.
 *
 * Nur Tokens aus tokens.css, kein Roh-Hex, kein Inline-Style (CSP). Modul
 * wie chat.css, damit app.css nicht weiter waechst. */

/* --- Seitenleiste ------------------------------------------------------ */
.sidebar-search {
  display: flex; align-items: center; justify-content: space-between;
  width: calc(100% - var(--s-4)); margin: 0 var(--s-2) var(--s-2);
  padding: var(--s-1) var(--s-2); border: 1px solid var(--line-strong);
  border-radius: var(--r-2); background: var(--surface-2);
  color: var(--fg-subtle); font-size: var(--fs-sm); text-align: left; cursor: pointer;
}
.sidebar-search:hover { color: var(--fg); border-color: var(--accent-border); }
.sidebar-search kbd, .palette-hint kbd {
  padding: 0 var(--s-1); border: 1px solid var(--line-strong); border-radius: var(--r-1);
  background: var(--surface-1); color: var(--fg-muted);
  font-family: var(--font-ui); font-size: var(--fs-micro);
}

.sidebar-group-body { display: grid; gap: 2px; }
.sidebar-group > summary.sidebar-label {
  display: flex; align-items: center; gap: var(--s-1); cursor: pointer; list-style: none;
  user-select: none;
}
.sidebar-group > summary.sidebar-label::-webkit-details-marker { display: none; }
.sidebar-group > summary.sidebar-label::before {
  content: "›"; display: inline-block; width: 1em; color: var(--fg-subtle);
  transition: transform var(--dur) var(--ease);
}
.sidebar-group[open] > summary.sidebar-label::before { transform: rotate(90deg); }
.sidebar-group > summary.sidebar-label:hover { color: var(--fg-muted); }
.sidebar-group > summary:focus-visible, .sidebar-search:focus-visible,
.tab:focus-visible, .tab-close:focus-visible, .palette-row:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}

.sidebar-collapsed .app-sidebar .sidebar-search { display: none; }
@media (max-width: 1500px) and (min-width: 769px) {
  .app-sidebar .sidebar-search { display: none; }
  .sidebar-expanded .app-sidebar .sidebar-search { display: flex; }
}

/* --- Tab-Leiste ---------------------------------------------------------- */
.tab-leiste {
  position: sticky; top: 0; z-index: 12; display: flex; gap: 2px;
  padding: var(--s-1) var(--s-2) 0; overflow-x: auto;
  background: var(--surface-1); border-bottom: 1px solid var(--line);
  scrollbar-width: thin;
}
.tab-leiste[hidden] { display: none; }
.tab {
  display: flex; align-items: center; gap: var(--s-1); flex: 0 1 190px; min-width: 90px;
  padding: var(--s-1) var(--s-1) var(--s-1) var(--s-3);
  border: 1px solid transparent; border-bottom: 0; border-radius: var(--r-2) var(--r-2) 0 0;
  color: var(--fg-muted); font-size: var(--fs-sm); cursor: pointer;
}
.tab:hover { background: var(--surface-2); color: var(--fg); }
.tab.active { background: var(--bg); border-color: var(--line); color: var(--fg-strong); }
.tab-titel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab-close {
  width: 20px; height: 20px; padding: 0; border: 0; border-radius: var(--r-1);
  background: transparent; color: var(--fg-subtle); line-height: 1; cursor: pointer;
}
.tab-close:hover { background: var(--surface-4); color: var(--fg-strong); }

/* --- Befehlspalette ------------------------------------------------------- */
.palette {
  width: min(640px, calc(100vw - var(--s-5))); max-height: 70vh; margin: 12vh auto 0;
  padding: 0; border: 1px solid var(--line-strong); border-radius: var(--r-3);
  background: var(--surface-2); color: var(--fg); box-shadow: var(--shadow-pop);
}
.palette::backdrop { background: rgba(10, 12, 15, 0.6); }
.palette-box { display: flex; flex-direction: column; max-height: 70vh; }
.palette-input {
  width: 100%; padding: var(--s-3) var(--s-4); border: 0; border-bottom: 1px solid var(--line);
  border-radius: var(--r-3) var(--r-3) 0 0; background: transparent; color: var(--fg-strong);
  font-size: var(--fs-md);
}
.palette-input:focus { outline: none; }
.palette-list { margin: 0; padding: var(--s-1); overflow-y: auto; list-style: none; }
.palette-gruppe {
  padding: var(--s-2) var(--s-3) var(--s-1); color: var(--fg-subtle);
  font-size: var(--fs-micro); letter-spacing: var(--tracking-label); text-transform: uppercase;
}
.palette-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-2) var(--s-3); border-radius: var(--r-2); color: var(--fg-muted);
  cursor: pointer;
}
.palette-row[aria-selected="true"] { background: var(--accent-soft); color: var(--fg-strong); }
.palette-titel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-typ {
  flex: none; padding: 0 var(--s-2); border: 1px solid var(--tag-border); border-radius: var(--r-full);
  background: var(--tag-soft); color: var(--tag); font-size: var(--fs-micro);
}
.palette-leer { padding: var(--s-4); color: var(--fg-subtle); font-size: var(--fs-sm); }
.palette-hint {
  display: flex; gap: var(--s-2); margin: 0; padding: var(--s-2) var(--s-4);
  border-top: 1px solid var(--line); color: var(--fg-subtle); font-size: var(--fs-micro);
}

@media (max-width: 768px) {
  .palette { margin-top: var(--s-4); }
  .tab { flex-basis: 140px; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar-group > summary.sidebar-label::before { transition: none; }
}

/* --- Seitenende-Tabs der Notizseite (Backlinks, Verwandtes, Kommentare) ---
 * Der Text steht links oben, die Tabs direkt darunter in derselben Spalte;
 * Kontext und Eigenschaften laufen rechts ueber beide Zeilen. */
.note-workspace { grid-template-rows: auto 1fr; }
.note-content { grid-column: 1; grid-row: 1; }
.note-unten { grid-column: 1; grid-row: 2; min-width: 0; }
.note-linked { grid-column: 2; grid-row: 1 / span 2; }
.note-properties { grid-column: 3; grid-row: 1 / span 2; }
@media (max-width: 1024px) {
  .note-linked { grid-column: 1 / -1; grid-row: 3; }
  .note-properties { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 900px) {
  .note-content, .note-unten, .note-linked, .note-properties { grid-column: auto; grid-row: auto; }
}

.unten-leiste {
  display: flex; gap: var(--s-1); margin: calc(-1 * var(--s-1)) 0 var(--s-3);
  border-bottom: 1px solid var(--line); overflow-x: auto;
}
.unten-leiste[hidden] { display: none; }
.unten-tab {
  display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3);
  border: 0; border-bottom: 2px solid transparent; border-radius: var(--r-2) var(--r-2) 0 0;
  background: transparent; color: var(--fg-muted); font-size: var(--fs-base); cursor: pointer;
  white-space: nowrap;
}
.unten-tab:hover { color: var(--fg); background: var(--surface-3); }
.unten-tab[aria-selected="true"] { color: var(--fg-strong); border-bottom-color: var(--accent); }
.unten-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.unten-zahl {
  min-width: 1.6em; padding: 0 var(--s-1); border-radius: var(--r-full);
  background: var(--surface-4); color: var(--fg-muted); font-size: var(--fs-micro);
  text-align: center;
}
.unten-panel[hidden] { display: none; }
/* Mit Tabs traegt der Reiter die Ueberschrift; ohne JS bleibt sie stehen. */
.note-unten.unten-aktiv .unten-panel > .side-section > h3:first-child { display: none; }
.note-unten .unten-panel > .side-section + .side-section { margin-top: 0; padding-top: 0; border-top: 0; }