/* ================================================================
   Business Daily Tools – Shell-Design
   Fiori-Horizon-inspiriert, Brandeis-Akzentfarbe anpassbar (--brandeis)
   ================================================================ */
:root {
  --shell:        #1d2d3e;   /* Fiori Horizon Shellbar */
  --shell-text:   #ffffff;
  --bg:           #eef0f2;
  --card:         #ffffff;
  --line:         #d5dadf;
  --blue:         #0070f2;   /* Fiori Horizon Blau */
  --blue-dark:    #0057c8;
  --text:         #1a2733;
  --muted:        #5b738b;
  --brandeis:     #e87722;   /* TODO: exakte Brandeis-CI-Farbe eintragen */
  --ok:           #188918;
  --danger:       #d20a0a;
  --subtle:       #f6f8fa;   /* dezenter Flächenton (Code-Vorschau, Chips, …) */
  --radius:       .75rem;
  --shadow:       0 .125rem .5rem rgba(29,45,62,.10);
  --shadow-hover: 0 .375rem 1rem rgba(29,45,62,.18);
  --font: "72", "72full", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", "Consolas", "SF Mono", monospace;
}

/* Dark Mode: umgeschaltet über den Icon-Button in der Kopfzeile
   (Ui5Util.initShellbar/applyThemeMode, Zustand in Store.getThemeMode).
   Setzt zusätzlich das UI5-Theme auf sap_horizon_dark um (siehe
   scripts/vendor-ui5.mjs) – Akzentfarben (--blue/--brandeis) bleiben
   gleich, nur Hintergrund/Text/Rahmen wechseln. */
:root[data-theme="dark"] {
  --shell:        #0f1824;
  --bg:           #141f2b;
  --card:         #1c2a39;
  --line:         #33465a;
  --text:         #e8eef3;
  --muted:        #99aec2;
  --shadow:       0 .125rem .5rem rgba(0,0,0,.35);
  --shadow-hover: 0 .375rem 1rem rgba(0,0,0,.5);
  --subtle:       #24333f;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---------- Kopf-/Fußzeile fixiert, Inhalt dazwischen scrollt ----------
   Anwenderwunsch (17.07.2026): Kopfzeile bleibt immer sichtbar, der
   bisherige Footer (Ende der Kacheln/Gruppen bzw. Tool-Inhalte) wird durch
   eine schlanke, ebenfalls fixierte Fußzeile ersetzt -- dazwischen scrollt
   NUR der eigentliche Seiteninhalt (.wrap bzw. .lp auf dem Launchpad). Das
   maximiert die nutzbare Höhe für Tool-Inhalte (z. B. den Mermaid-Editor)
   gegenüber der vorherigen Variante, in der Kopf-/Fußzeile mit der ganzen
   Seite mitscrollten. Kein position:fixed nötig (das bräuchte Padding-
   Ausgleich am Content und eigene z-index-Konflikte) -- die Flex-Spalte
   mit zwei "flex:0 0 auto"-Randzeilen und einem "flex:1 1 auto; overflow-y:
   auto"-Mittelteil erreicht dasselbe robuster. ui5-shellbar/.shellbar sind
   IMMER der erste Body-Kind, .wrap/.lp der zweite, .app-footer der dritte
   -- diese Reihenfolge ist auf allen Tool-Seiten identisch (kein Umbau der
   einzelnen Seiten nötig, nur der gemeinsame CSS-Rahmen). */
ui5-shellbar, .shellbar { flex: 0 0 auto; }
.wrap, .lp { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* ---------- Shellbar (klassisch, MDE Studio/Einstellungen) ---------- */
.shellbar {
  background: var(--shell);
  color: var(--shell-text);
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: 0 1.25rem;
  height: 3.25rem;
}
.shellbar .logo {
  width: 1.75rem; height: 1.75rem;
  object-fit: contain;
  flex: 0 0 auto;
  /* Die BDT-Bildmarke (dunkles Zahnrad, transparenter Hintergrund) braucht auf
     der dunklen klassischen Shellbar einen hellen Chip, sonst verschwindet sie. */
  background: #fff;
  border-radius: .375rem;
  padding: .15rem;
  box-sizing: border-box;
}
/* Gleiches Problem im Dark Mode der ui5-shellbar (sap_horizon_dark = dunkle Leiste). */
:root[data-theme="dark"] ui5-shellbar img[slot="logo"] {
  background: #fff;
  border-radius: .375rem;
  padding: .15rem;
  box-sizing: border-box;
}
.shellbar .title { font-size: 1rem; font-weight: 600; white-space: nowrap; }
.shellbar .subtitle { font-size: .8rem; opacity: .7; white-space: nowrap; }
.shellbar .spacer { flex: 1; }
.shellbar a {
  color: var(--shell-text);
  text-decoration: none;
  font-size: .82rem;
  opacity: .85;
  padding: .3rem .6rem;
  border-radius: .375rem;
}
.shellbar a:hover { opacity: 1; background: rgba(255,255,255,.1); }
.shellbar a.cta {
  background: var(--brandeis);
  opacity: 1;
  font-weight: 600;
}
.shellbar a.cta:hover { filter: brightness(1.08); }

/* ---------- Buttons & Inputs ---------- */
.btn {
  font-family: var(--font);
  font-size: .875rem;
  border: 1px solid var(--blue);
  color: var(--blue);
  background: var(--card);
  border-radius: .5rem;
  padding: .45rem .9rem;
  cursor: pointer;
}
.btn:hover { background: #eaf3ff; }
.btn.primary { background: var(--blue); color: #fff; }
.btn.primary:hover { background: var(--blue-dark); }
.btn.ghost { border-color: var(--line); color: var(--muted); }
.btn.ghost:hover { background: #f4f6f8; color: var(--text); }
.btn.small { font-size: .78rem; padding: .25rem .6rem; }
.btn.danger { border-color: var(--danger); color: var(--danger); }
.btn.danger:hover { background: #fdeaea; }

input[type=text], textarea, select {
  font-family: var(--font);
  font-size: .875rem;
  border: 1px solid var(--line);
  border-radius: .5rem;
  padding: .45rem .6rem;
  background: #fff;
  color: var(--text);
}
input[type=text]:focus, textarea:focus, select:focus {
  outline: 2px solid var(--blue);
  outline-offset: 0;
  border-color: transparent;
}
textarea.code { font-family: var(--mono); font-size: .8rem; line-height: 1.5; }

label.field { display: block; font-size: .78rem; color: var(--muted); margin-bottom: .2rem; }

.badge {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--brandeis);
  border: 1px solid currentColor;
  border-radius: 99px;
  padding: .1rem .5rem;
}

/* Fixierte Fußzeile (BDT-Redesign 19.07.2026, PO-Entscheidung): der frühere
   Marken-Disclaimer + Impressum-Link sind entfallen (kommt als Teil des
   künftigen Branding-Konzepts zurück, s. docs/roadmap-strategie.md §3/§4).
   Links steht jetzt der globale Projekt-/Endpunkt-Kontext (rapo-context-bar,
   aus der Kopfzeile hierher umgezogen), rechts nur noch die Version. Die
   Klasse ui5-content-density-compact im Footer-Markup verkleinert die
   UI5-Selects (Compact Density), damit die Fußzeile flach bleibt. */
footer.app-footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .25rem .75rem;
  color: var(--muted);
  font-size: .74rem;
  border-top: 1px solid var(--line);
  background: var(--card);
}
footer.app-footer .app-footer-version { margin-left: auto; white-space: nowrap; }

/* Globaler Projekt-/Endpunkt-Kontext (Ui5Util.initHeaderContext) – seit dem
   BDT-Redesign linksbündig in der Fußzeile statt im content-Slot der Kopfzeile. */
.rapo-context-bar { display: flex; align-items: center; gap: .4rem; }
.rapo-context-bar ui5-select { min-width: 8.5rem; }

/* Fußzeilen-Tunnel-Indikator (Ui5Util.initFooterTunnelIndicator, AP-ST7) --
   nur sichtbar, wenn eine Bridge erkannt wurde UND Aktivität vorliegt. */
.rapo-tunnel-indicator {
  color: var(--muted); text-decoration: none; white-space: nowrap;
  padding: .1rem .5rem; border-radius: 1rem; border: 1px solid var(--line);
}
.rapo-tunnel-indicator:hover { color: var(--text); border-color: var(--blue); }

/* Fußzeilen-RAG-Indexierungs-Indikator (Ui5Util.initFooterRagIndicator) --
   nur sichtbar, wenn im aktuellen Projekt bereits mindestens ein Objekt
   indiziert wurde/wird. */
.rapo-rag-indicator {
  color: var(--muted); text-decoration: none; white-space: nowrap;
  padding: .1rem .5rem; border-radius: 1rem; border: 1px solid var(--line);
}
.rapo-rag-indicator:hover { color: var(--text); border-color: var(--blue); }

/* Fußzeilen-Sync-Indikator (AP-BE4, Ui5Util.initFooterSyncIndicator) --
   nur sichtbar, wenn das aktuelle Projekt mit einem BDT-Hub-Projekt
   verknüpft ist; zeigt bewusst nur den lokal bekannten Stand (kein
   automatischer Server-Poll, s. dortiger Kopfkommentar). */
.rapo-sync-indicator {
  color: var(--muted); text-decoration: none; white-space: nowrap;
  padding: .1rem .5rem; border-radius: 1rem; border: 1px solid var(--line);
}
.rapo-sync-indicator:hover { color: var(--text); border-color: var(--blue); }

/* Experten-Modus (AP-FT1, Ui5Util.applyExpertMode/initFooterExpertToggle):
   Elemente mit .expert-only sind nur sichtbar, wenn der Fußzeilen-Toggle
   "Experte" aktiv ist (documentElement[data-expert="1"]). !important, damit
   die Regel auch gegen seitenlokale display-Angaben gewinnt. */
:root:not([data-expert="1"]) .expert-only { display: none !important; }
#rapo-expert-toggle { margin-left: .4rem; white-space: nowrap; }

/* Tabellen-Spalten-Konfigurator (Ui5Util.buildTableConfig): Leiste über der
   Tabelle + Dialog-Inhalte (Spaltenliste, Profilpflege, Footer). */
.table-config-bar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .2rem 0 .6rem; }
.tc-body { padding: 1rem; min-width: 22rem; display: flex; flex-direction: column; }
.tc-list { display: flex; flex-direction: column; gap: .1rem; }
.tc-row { display: flex; align-items: center; gap: .5rem; }
.tc-profilerow { display: flex; gap: .4rem; align-items: center; margin-top: .9rem; padding-top: .75rem; border-top: 1px solid var(--line); }
.tc-footer { display: flex; align-items: center; gap: .5rem; padding: .5rem 1rem 1rem; width: 100%; box-sizing: border-box; }

/* Envelope-Side-Panel (Ui5Util.buildEnvelopePanel, §2.6 Punkt 4): gemeinsame
   Bearbeitungskomponente für Name/Beschreibung/Hashtags/Klassifizierung/
   Ordner/Taxonomien/Links/Backlinks – von JEDEM Infotyp-Editor nutzbar
   (aktuell Markdown-Editor, AP-S4). */
.env-field { margin-top: .6rem; }
.env-field > ui5-label { display: block; }
.env-field > ui5-input, .env-field > ui5-select { width: 100%; }
/* Quellendatum (AP-IA1, 22.07.2026): natives <input type=datetime-local> statt
   eines UI5-Controls (keine eingebaute UI5-Datum+Zeit-Komponente im Vendor-
   Bundle) -- an die ui5-input-Optik angenaehert. */
.env-field > .env-native-input { width: 100%; box-sizing: border-box; padding: .35rem .55rem; border: 1px solid var(--line); border-radius: .375rem; background: var(--card); color: var(--text); font: inherit; }
.env-taxbox { border: 1px solid var(--line); border-radius: .5rem; padding: .5rem .7rem; max-height: 10rem; overflow: auto; }
.env-taxname { font-weight: 600; font-size: .8rem; margin: .4rem 0 .1rem; }
.env-taxname:first-child { margin-top: 0; }
.env-linkrow { display: flex; gap: .4rem; margin-bottom: .4rem; }
.env-linkrow ui5-select { flex: 1; min-width: 0; }
.env-linklist { display: flex; flex-direction: column; gap: .3rem; }
.env-linkitem { display: flex; justify-content: space-between; align-items: center; gap: .4rem; font-size: .85rem; background: var(--subtle); border-radius: .4rem; padding: .1rem .2rem .1rem .6rem; }
.env-backlinks { font-size: .85rem; color: var(--muted); display: flex; flex-direction: column; gap: .2rem; }
/* "Vorschlag übernehmen"-Zeile (Anwenderwunsch 19.08.2026, s. ui5util.js
   buildEnvelopePanel options.suggestValues) -- nur sichtbar, wenn der
   Aufrufer die Option übergibt (Markdown-Editor als erster Konsument). */
.env-suggest-row { margin-top: .6rem; display: flex; flex-direction: column; gap: .4rem; }
.env-suggest-row ui5-message-strip { font-size: .8rem; }

/* Schloss-Symbol Kopfzeile (Ui5Util.initShellbar, data-action="vault-lock",
   AP-X/Roadmap §2.10): Passphrase-Dialog zum Einrichten/Entsperren des
   Secret-Vaults, auf jeder Tool-Seite identisch (an <body> gehängt). */
.vault-dialog-body { padding: 1rem; min-width: 20rem; display: flex; flex-direction: column; gap: .6rem; }
.vault-dialog-body p { margin: 0; color: var(--muted); font-size: .85rem; }

/* KI-Chat (Ui5Util.initShellbar, data-action="ai-chat" + js/aichat.js,
   AP-KI1-Ausschnitt): Drawer schwebt rechts über der Seite ein (an <body>
   gehängt, wie der Vault-Dialog), dieselbe .ai-chat-Struktur wird auch
   in der Vollbild-Kachel tools/ai-chat.html verwendet. Seit AP-ST2 v2
   größenverstellbar (Ui5Util.initResizableSplitter, "panel" = der Drawer
   selbst) -- flex-direction:row statt column, da der neue Splitter als
   erstes Kind VOR .ai-chat-drawer-body eingefügt wird; die feste
   min(24rem,100vw)-Breite bleibt der Startwert, bis ein gespeicherter Wert
   (rapo.panelwidth.ai-chat-drawer) inline überschreibt. */
.ai-chat-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(24rem, 100vw);
  background: var(--card); border-left: 1px solid var(--line); box-shadow: var(--shadow-hover);
  transform: translateX(100%); transition: transform .2s ease; z-index: 1000;
  display: flex; flex-direction: row;
}
.ai-chat-drawer.open { transform: translateX(0); }
.ai-chat-drawer-splitter { width: .6rem; cursor: col-resize; flex: 0 0 auto; position: relative; }
.ai-chat-drawer-splitter::after { content: ''; position: absolute; left: calc(50% - 1px); top: 0; bottom: 0; width: 2px; background: var(--line); }
.ai-chat-drawer-splitter:hover::after, .ai-chat-drawer-splitter.dragging::after { background: var(--blue); }
.ai-chat-drawer-body { flex: 1; min-height: 0; min-width: 0; display: flex; }

.ai-chat { display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; gap: .6rem; padding: .8rem; }
.ai-chat-header { display: flex; align-items: center; justify-content: space-between; }
.ai-chat-header-left { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.ai-chat-title { font-weight: 600; font-size: 1rem; }
.ai-chat-messages { flex: 1; min-height: 8rem; overflow-y: auto; display: flex; flex-direction: column; gap: .5rem; padding: .2rem; }
.ai-chat-msg { display: flex; }
.ai-chat-msg-user { justify-content: flex-end; }
.ai-chat-msg-assistant, .ai-chat-msg-system, .ai-chat-msg-error, .ai-chat-msg-toolcall { justify-content: flex-start; }
.ai-chat-bubble {
  max-width: 85%; padding: .5rem .7rem; border-radius: .7rem; font-size: .88rem;
  white-space: pre-wrap; word-break: break-word;
}
.ai-chat-msg-user .ai-chat-bubble { background: var(--blue); color: #fff; border-bottom-right-radius: .15rem; }
.ai-chat-msg-assistant .ai-chat-bubble { background: var(--subtle); border-bottom-left-radius: .15rem; }
.ai-chat-msg-system .ai-chat-bubble { background: var(--subtle); color: var(--muted); font-style: italic; }
.ai-chat-msg-error .ai-chat-bubble { background: rgba(210,10,10,.1); color: var(--danger); }
/* AP-KI5 (docs/roadmap-ki.md §11): sichtbare Werkzeugaufruf-Zeile im
   Tool-Ausführungs-Loop -- eigene Rolle statt "system" (das ist kursiv,
   würde die eingebetteten <pre>-Argumente/-Ergebnisse unpassend mitfärben). */
.ai-chat-msg-toolcall .ai-chat-bubble { background: var(--subtle); max-width: 92%; }
.ai-chat-bubble.ai-chat-toolcall-error { background: rgba(210,10,10,.1); color: var(--danger); }
.ai-chat-toolcall-label { display: flex; align-items: center; gap: .45rem; font-size: .85rem; }
.ai-chat-msg-toolcall details { margin-top: .4rem; font-size: .78rem; }
.ai-chat-msg-toolcall summary { cursor: pointer; color: var(--muted); }
.ai-chat-msg-toolcall pre {
  margin: .3rem 0 0; white-space: pre-wrap; word-break: break-word; font-family: var(--mono);
  background: var(--card); padding: .4rem .5rem; border-radius: .3rem;
  max-height: 12rem; overflow: auto;
}
.ai-chat-meta { margin-top: .35rem; font-size: .75rem; color: var(--muted); }
.ai-chat-bubble-actions { display: flex; gap: .1rem; margin-top: .3rem; margin-left: -.4rem; }
.ai-chat-hint { color: var(--muted); font-size: .8rem; margin: 0 0 .6rem; }
.ai-chat-tools-body { padding: 1rem; min-width: 20rem; max-width: 90vw; }
.ai-chat-tools-footer { display: flex; justify-content: flex-end; gap: .5rem; padding: .75rem 1rem; }
.ai-chat-skills { font-size: .8rem; color: var(--muted); }
.ai-chat-skills summary { cursor: pointer; }
.ai-chat-skills p { margin: .3rem 0 0; }
.ai-chat-skills code { font-family: var(--mono); background: var(--subtle); padding: .05rem .3rem; border-radius: .3rem; }
.ai-chat-inputrow { display: flex; gap: .5rem; align-items: flex-end; }
.ai-chat-inputrow ui5-textarea { flex: 1; }
.ai-chat-thinking { display: inline-flex; align-items: center; gap: .5rem; color: var(--muted); font-style: italic; }

/* Markdown-Darstellung fertiger Assistenten-/Skill-Antworten (s.
   js/aichat.js renderAssistantContent) -- höhere Spezifität als die
   .ai-chat-bubble-Grundregel oben (white-space:pre-wrap), damit normale
   HTML-Blockelemente (p/ul/table/…) ihren eigenen Zeilenfluss übernehmen,
   statt zusätzlich durch pre-wrap verdoppelt zu werden. User-/system-/
   error-/Werkzeugaufruf-Blasen bleiben unverändert reiner Klartext. */
.ai-chat-bubble.ai-chat-markdown { white-space: normal; }
.ai-chat-markdown > :first-child { margin-top: 0; }
.ai-chat-markdown > :last-child { margin-bottom: 0; }
.ai-chat-markdown p, .ai-chat-markdown ul, .ai-chat-markdown ol, .ai-chat-markdown blockquote,
.ai-chat-markdown table { margin: .5rem 0; }
.ai-chat-markdown ul, .ai-chat-markdown ol { padding-left: 1.3rem; }
.ai-chat-markdown blockquote {
  margin-left: 0; padding-left: .6rem; border-left: .2rem solid var(--line); color: var(--muted);
}
.ai-chat-markdown h1, .ai-chat-markdown h2, .ai-chat-markdown h3,
.ai-chat-markdown h4, .ai-chat-markdown h5, .ai-chat-markdown h6 {
  margin: .7rem 0 .3rem; line-height: 1.25;
}
.ai-chat-markdown h1 { font-size: 1.15rem; }
.ai-chat-markdown h2 { font-size: 1.08rem; }
.ai-chat-markdown h3, .ai-chat-markdown h4, .ai-chat-markdown h5, .ai-chat-markdown h6 { font-size: 1rem; }
.ai-chat-markdown a { color: inherit; text-decoration: underline; }
.ai-chat-markdown code {
  font-family: var(--mono); background: rgba(0,0,0,.06); padding: .05rem .3rem; border-radius: .3rem;
  font-size: .85em;
}
.ai-chat-markdown table { border-collapse: collapse; font-size: .85em; max-width: 100%; display: block; overflow-x: auto; }
.ai-chat-markdown th, .ai-chat-markdown td { border: 1px solid var(--line); padding: .25rem .5rem; }
.ai-chat-markdown img { max-width: 100%; border-radius: .3rem; }
.ai-chat-markdown hr { border: none; border-top: 1px solid var(--line); margin: .6rem 0; }

/* Codeblöcke: eigene Kopfleiste (Sprach-Label + Kopieren, bei Mermaid
   zusätzlich Diagramm/Code-Umschalter + SVG-/PNG-Export). */
.ai-chat-codeblock {
  margin: .5rem 0; border: 1px solid var(--line); border-radius: .4rem; overflow: hidden; background: var(--card);
}
.ai-chat-codeblock-toolbar {
  display: flex; align-items: center; gap: .2rem; padding: .15rem .15rem .15rem .6rem;
  background: var(--subtle); border-bottom: 1px solid var(--line);
}
.ai-chat-codeblock-lang { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; flex: 1; }
.ai-chat-codeblock-pre {
  margin: 0; padding: .5rem .6rem; font-family: var(--mono); font-size: .82rem;
  white-space: pre-wrap; word-break: break-word; overflow-x: auto; background: transparent;
}
.ai-chat-markdown code { /* s. o. -- innerhalb eines Codeblocks nicht zusätzlich färben */ }
.ai-chat-codeblock-pre code { background: none; padding: 0; }
.ai-chat-mermaid-host { padding: .6rem; overflow: auto; text-align: center; }
.ai-chat-mermaid-host svg { max-width: 100%; height: auto; }
.ai-chat-mermaid-error { padding: .4rem .6rem; font-size: .8rem; color: var(--danger); background: rgba(210,10,10,.08); }

/* AP-CC11: generisches Gegenstück für die Markdown-Editor-Live-Vorschau
   (tools/markdown-editor.js) -- bewusst EIGENE, seitenübergreifend
   nutzbare Klassennamen statt der ai-chat-*-Varianten oben (die bleiben
   dem KI-Chat vorbehalten, s. dortiger Kopfkommentar Diagramm/Code-Toggle
   + SVG/PNG-Download, den die reine Vorschau hier nicht braucht). */
.mermaid-preview-host { padding: .6rem; overflow: auto; text-align: center; }
.mermaid-preview-host svg { max-width: 100%; height: auto; }
.mermaid-preview-error { padding: .4rem .6rem; font-size: .8rem; color: var(--danger); background: rgba(210,10,10,.08); border-radius: .3rem; margin: .4rem 0; }

/* Provider-/Modell-Statuszeile (AP-KI4) -- bewusst ein natives <button>
   statt ui5-button, damit sie tatsächlich "sehr klein" bleibt (UI5-Buttons
   erzwingen eine Mindesthöhe, die hier störend gewirkt hätte). */
.ai-chat-provider-status {
  align-self: flex-start; border: none; background: none; cursor: pointer;
  color: var(--muted); font-size: .72rem; padding: .15rem .3rem; border-radius: .3rem;
  font-family: inherit;
}
.ai-chat-provider-status:hover { background: var(--subtle); color: var(--text); }

/* Kontext-Leiste (AP-KI1, Kontext-Anreicherung aus der Wissensablage) */
.ai-chat-context-bar { border: 1px solid var(--line); border-radius: .5rem; padding: .5rem .6rem; background: var(--subtle); }
.ai-chat-context-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.ai-chat-context-chip {
  display: inline-flex; align-items: center; gap: .3rem; max-width: 14rem;
  background: var(--card); border: 1px solid var(--line); border-radius: 1rem;
  padding: .15rem .3rem .15rem .6rem; font-size: .78rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ai-chat-context-chip-remove {
  border: none; background: none; color: var(--muted); cursor: pointer;
  font-size: .95rem; line-height: 1; padding: 0 .3rem; border-radius: 50%;
}
.ai-chat-context-chip-remove:hover { background: var(--line); color: var(--text); }
.ai-chat-context-meta { margin-top: .35rem; font-size: .72rem; color: var(--muted); }
.ai-chat-context-meta.ai-chat-context-over { color: var(--danger); font-weight: 600; }

/* Kontext-Auswahl-Dialog (ui5-checkbox-Zeilen statt ui5-list Multiple, s.
   js/aichat.js openContextDialog-Kommentar) */
.ai-chat-context-picker-list { max-height: 20rem; overflow-y: auto; margin-top: .5rem; border: 1px solid var(--line); border-radius: .4rem; }
.ai-chat-context-picker-row {
  display: flex; align-items: center; gap: .5rem; padding: .4rem .6rem;
  border-bottom: 1px solid var(--line); cursor: pointer;
}
.ai-chat-context-picker-row:last-child { border-bottom: none; }
.ai-chat-context-picker-row:hover { background: var(--subtle); }
.ai-chat-context-picker-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-chat-context-picker-type { color: var(--muted); font-size: .75rem; flex-shrink: 0; }

/* Sammelkörbe (Ui5Util.initShellbar, data-action="baskets" + js/basketpanel.js,
   AP-P2, docs/roadmap-plattform.md §2): Drawer schwebt rechts über der Seite
   ein, dieselbe Struktur wie der KI-Chat-Drawer, aber breiter (zwei Spalten:
   Körbe links, Slots rechts). */
.basket-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(34rem, 100vw);
  background: var(--card); border-left: 1px solid var(--line); box-shadow: var(--shadow-hover);
  transform: translateX(100%); transition: transform .2s ease; z-index: 1000;
  display: flex; flex-direction: column;
}
.basket-drawer.open { transform: translateX(0); }
.basket-drawer-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: .8rem; gap: .6rem; }
.basket-header { display: flex; align-items: center; justify-content: space-between; }
.basket-columns { flex: 1; min-height: 0; display: flex; gap: .6rem; }
.basket-col-baskets { width: 12rem; flex: 0 0 auto; display: flex; flex-direction: column; gap: .4rem; min-height: 0; }
.basket-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: .25rem; }
.basket-row {
  display: flex; align-items: center; gap: .4rem; padding: .4rem .5rem; border-radius: .4rem;
  cursor: pointer; font-size: .85rem;
}
.basket-row:hover { background: var(--subtle); }
.basket-row.active { background: var(--subtle); font-weight: 600; }
.basket-row-dot { width: .7rem; height: .7rem; border-radius: 50%; flex-shrink: 0; }
.basket-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.basket-row-count { color: var(--muted); font-size: .72rem; flex-shrink: 0; }
.basket-col-slots { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .4rem; min-height: 0; }
.basket-slotlist { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: .35rem; }
.basket-slot-row {
  display: flex; align-items: center; gap: .5rem; padding: .4rem .6rem;
  border: 1px solid var(--line); border-radius: .4rem; font-size: .85rem;
}
.basket-slot-info { flex: 1; min-width: 0; }
.basket-slot-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.basket-slot-meta { color: var(--muted); font-size: .72rem; }

/* Hilfe/Info-Drawer (design-guidelines.md §7, Ui5Util.toggleHelpDrawer,
   data-action="help" + #pageHelp): reiner Text, daher NICHT
   größenverstellbar wie der KI-Chat-Drawer -- sonst identisches Muster. */
.help-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(26rem, 100vw);
  background: var(--card); border-left: 1px solid var(--line); box-shadow: var(--shadow-hover);
  transform: translateX(100%); transition: transform .2s ease; z-index: 1000;
  display: flex; flex-direction: column;
}
.help-drawer.open { transform: translateX(0); }
.help-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: .8rem .8rem 0; }
.help-drawer-body { flex: 1; min-height: 0; overflow-y: auto; padding: .8rem; }
.help-drawer-body :first-child { margin-top: 0; }
.basket-slot-actions { display: flex; gap: .1rem; flex-shrink: 0; }
.basket-hint { color: var(--muted); font-size: .8rem; margin: 0; }
.basket-empty { color: var(--muted); font-size: .85rem; text-align: center; padding: 1rem 0; }

/* Checkbox-Liste mit Suchfilter (Ui5Util.buildChecklist, js/ui5util.js) --
   Follow-up zum Checkbox-Listen-Squeeze-Bugfix vom 22.07.2026: dieselbe
   flex-shrink:0-Absicherung wie die damals gefixten Container
   (.olap-list/#segmentValuesHost u. a.), jetzt einmal zentral statt je
   Aufrufstelle dupliziert. */
.rapo-checklist-search { display: block; width: 100%; margin-bottom: .35rem; }
.rapo-checklist-list {
  display: flex; flex-direction: column; gap: .25rem;
  border: 1px solid var(--line); border-radius: .4rem; padding: .4rem;
  max-height: 14rem; overflow-y: auto;
}
.rapo-checklist-list > * { flex-shrink: 0; }

/* Generisches OData-Filter-Popup (js/odatafilterpopup.js, AP-O2) --
   Bedingungszeile Feld/Operator/Wert + Entfernen-Button; native
   <input type="date"> statt eines eigenen ui5-date-picker-Vendor-Bundles
   (Regel 2/3, Muster XR-Raum "native <input type=color>"). */
.ofp-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ofp-native-date {
  font: inherit; padding: .3rem .5rem; border-radius: .3rem;
  border: 1px solid var(--line); background: var(--card); color: var(--text);
}

/* Einklappbare Facetten-Gruppen (AP-O2, SAP OData Katalog Browser) --
   natives <details>/<summary> statt einer eigenen Auf-/Zuklapp-Logik.
   Bugfix (Anwenderfund 12.08.2026, v0.273.0): `display:flex` auf <summary>
   unterdrückt in Chrome die eingebaute ▶/▼-Klapp-Markierung (die hängt an
   `display:list-item`) -- OHNE Ersatz gab es dadurch GAR KEIN sichtbares
   Auf-/Zuklapp-Zeichen, der Anwender fand die Funktion nicht. Jetzt ein
   eigenes `.facet-chevron`-Zeichen ganz rechts im Summary-Kopf (rotiert
   bei `[open]`), die native Markierung bleibt zusätzlich per
   `list-style:none`/`::-webkit-details-marker` ausgeblendet. */
.rapo-facets { display: flex; flex-direction: column; gap: .5rem; }
.rapo-facets details {
  border: 1px solid var(--line); border-radius: .4rem; padding: .4rem .6rem;
}
.rapo-facets summary {
  cursor: pointer; font-weight: 600; font-size: .85rem; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: .4rem;
}
.rapo-facets summary::-webkit-details-marker { display: none; }
.rapo-facets .facet-chevron {
  color: var(--muted); font-size: .75rem; transition: transform .15s ease; flex-shrink: 0;
}
.rapo-facets details[open] > summary .facet-chevron { transform: rotate(90deg); }
.rapo-facets .rapo-checklist-list { max-height: 10rem; margin-top: .4rem; border: none; padding: 0; }

/* Objekttyp-Auswahl-Dialog (js/objecttypepicker.js, AP-R3a) -- Muster
   .rapo-checklist-* oben, aber mit Gruppen-Untergliederung (Familie/
   RAP-Schicht) statt einer flachen Liste. */
.rapo-typepicker { padding: 1rem; }
.rapo-typepicker-tabs { display: flex; margin-bottom: .6rem; }
.rapo-typepicker-search { display: block; width: 100%; margin-bottom: .6rem; }
.rapo-typepicker-body {
  display: flex; flex-direction: column; gap: .8rem;
  max-height: 22rem; overflow-y: auto;
  border: 1px solid var(--line); border-radius: .4rem; padding: .6rem;
}
.rapo-typepicker-body > * { flex-shrink: 0; }
.rapo-typepicker-group-header {
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 600; font-size: .8rem; color: var(--muted); margin-bottom: .35rem;
}
.rapo-typepicker-row { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.rapo-typepicker-row.rapo-typepicker-unavailable { opacity: .55; }
.rapo-typepicker-set-row {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .4rem .6rem; border: 1px solid var(--line); border-radius: .5rem; margin-bottom: .4rem;
}
.rapo-typepicker-selection { margin-top: .7rem; font-size: .8rem; color: var(--muted); }

/* Objekttyp-Feld (AP-R3a/AP-R3b): Zusammenfassungstext + "Auswählen …"-
   Button, öffnet js/objecttypepicker.js -- ersetzt eine frühere
   ui5-multi-combobox in tools/repo-search.html und tools/clean-core-
   radar.html (Paket-Analyse-Tab). */
.type-picker-field { display: flex; align-items: center; gap: .5rem; min-height: 2.25rem; }
.type-picker-field .hint { margin: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Tabulator-Grundoptik + Dark Mode (AP-P6/Bugfix-Serie ab 10.08.2026,
   docs/design-guidelines.md §2b LR-11) -- zentral statt weiterhin je
   Seite dupliziert (bisherige Kopien in clean-core-cockpit.html/
   data-studio.html/asset-manager.html bleiben unangetastet, identische
   Regeln überschreiben sich gegenseitig ohne Wirkung). Neue Tabulator-
   nutzende Seiten (repo-search.html ff.) brauchen dafür nur noch
   <link rel="stylesheet" href="../vendor/tabulator.css"> + dieses Modul. */
.tabulator { background: var(--card); border: 1px solid var(--line); border-radius: .5rem; font-size: .8rem; }
:root[data-theme="dark"] .tabulator { background: var(--card); color: var(--text); }
:root[data-theme="dark"] .tabulator .tabulator-header,
:root[data-theme="dark"] .tabulator .tabulator-header .tabulator-col { background: var(--subtle); color: var(--text); border-color: var(--line); }
:root[data-theme="dark"] .tabulator .tabulator-tableholder .tabulator-table { background: var(--card); color: var(--text); }
:root[data-theme="dark"] .tabulator .tabulator-row { background: var(--card); border-color: var(--line); }
:root[data-theme="dark"] .tabulator .tabulator-row.tabulator-row-even { background: var(--subtle); }
:root[data-theme="dark"] .tabulator .tabulator-row:hover { background: rgba(255,255,255,.06); }
:root[data-theme="dark"] .tabulator .tabulator-footer { background: var(--subtle); color: var(--text); border-color: var(--line); }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}