/* =====================================================================
   CodeShuttle – App-Ansichten als HTML/CSS
   Originalgetreue Nachbildung der CodeShuttle-Oberfläche (Arbeitsbereich,
   Vergleichsansicht, Verlauf, Instanzauswahl). Vektor statt Bitmap: auf jedem
   Display und in jeder Größe scharf. Alles skaliert mit der Containerbreite
   (Container-Query-Einheiten); unter 460 px Breite fallen Nebenspalten weg.
   ===================================================================== */

.app {
  container-type: inline-size;
  border-radius: 12px; overflow: hidden; background: #fff;
  border: 1px solid #d5dce6;
  color: #1f2937; text-align: left;
  font-family: "Segoe UI", system-ui, -apple-system, "IBM Plex Sans", sans-serif;
}
.app * { box-sizing: border-box; }
.app .ai { font-size: min(calc(100cqw / 62), 15px); line-height: 1.35; }
.showcase .app .ai, .app.big .ai { font-size: min(calc(100cqw / 50), 15px); }
@container (max-width: 460px) { .app .ai, .showcase .app .ai, .app.big .ai { font-size: calc(100cqw / 29); } }
.app svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.app .mono { font-family: "Cascadia Mono", Consolas, "IBM Plex Mono", monospace; }

/* Titelleiste */
.a-title { display: flex; align-items: center; gap: .6em; padding: .55em .9em; font-size: .86em; color: #111827; border-bottom: 1px solid #eef1f5; }
.a-title .logo { width: 1.35em; height: 1.35em; border-radius: .25em; background: #102a47; display: grid; place-items: center; }
.a-title .logo svg { width: 1em; height: 1em; stroke-width: 3.2; }
.a-title .wc { margin-left: auto; display: flex; gap: 1.6em; color: #6b7280; }
.a-body { padding: .8em .9em .2em; }

/* Kopf */
.a-head { display: flex; align-items: center; gap: .7em; border: 1px solid #e5e7eb; border-radius: .5em; padding: .55em .7em; }
.a-ver { background: #e8efff; color: #1d4ed8; font-weight: 700; border-radius: .3em; padding: .15em .45em; font-size: .92em; }
.a-proj { font-weight: 600; font-size: 1.08em; color: #111827; }
.a-ok { display: inline-flex; align-items: center; gap: .35em; background: #e8f7ee; color: #15803d; border-radius: 999px; padding: .15em .65em; font-size: .82em; font-weight: 600; }
.a-ok::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: #16a34a; }
.a-sp { margin-left: auto; }
.a-btn { display: inline-flex; align-items: center; gap: .4em; border: 1px solid #d1d5db; border-radius: .35em; padding: .3em .65em; font-size: .82em; font-weight: 600; color: #111827; background: #fff; white-space: nowrap; }
.a-btn.pri { background: #2563eb; border-color: #1d4ed8; color: #fff; }
.a-btn.off { color: #9ca3af; background: #f3f4f6; border-color: #e5e7eb; }
.a-gear { color: #4b5563; }

/* Ordnerzeile & Zusammenfassung */
.a-tool { display: flex; align-items: center; gap: .6em; margin-top: .75em; font-size: .82em; flex-wrap: nowrap; }
.a-tool .lbl { color: #6b7280; }
.a-tool .path { display: inline-flex; align-items: center; gap: .35em; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-tool .ico { color: #2563eb; }
.a-sum { display: flex; align-items: center; gap: .5em; margin-top: .6em; font-size: .8em; color: #374151; flex-wrap: wrap; }
.a-sum b { color: #111827; }
.a-chip { display: inline-flex; align-items: center; gap: .25em; border-radius: 999px; padding: .1em .55em; font-weight: 600; }
.a-chip.t { background: #e8efff; color: #1d4ed8; }
.a-chip.f { background: #e8f7ee; color: #15803d; }
.a-chip.c { background: #fff4e0; color: #b45309; }

/* Gerätekarte */
.a-card { border: 1px solid #e5e7eb; border-radius: .5em; background: #f7f8fa; margin-top: .65em; }
.a-chead { display: flex; align-items: center; gap: .55em; padding: .55em .7em; font-size: .86em; }
.a-chead b { color: #111827; font-size: 1.05em; }
.a-dev { color: #fff; font-weight: 700; font-size: .72em; border-radius: .25em; padding: .1em .4em; }
.a-dev.plc { background: #15803d; } .a-dev.hmi { background: #1d4ed8; }
.a-meta { color: #6b7280; font-size: .9em; white-space: nowrap; }
.a-bulk { display: inline-flex; gap: .25em; margin-left: auto; margin-right: auto; }
.a-toggle { display: inline-flex; align-items: center; gap: .45em; color: #374151; white-space: nowrap; }
.a-sw { width: 2.1em; height: 1.15em; border-radius: 999px; background: #1f2937; position: relative; }
.a-sw::after { content: ""; position: absolute; top: .17em; left: .18em; width: .8em; height: .8em; border-radius: 50%; background: #fff; }
.a-sw.on { background: #2563eb; } .a-sw.on::after { left: auto; right: .18em; }

/* Zeilen */
.a-cols, .a-row { display: grid; grid-template-columns: 2.3fr 1.9fr 1.25fr 1.7fr 1.25fr 1.3fr; align-items: center; gap: .5em; padding: 0 .7em; }
.a-cols { font-size: .66em; letter-spacing: .06em; color: #6b7280; font-weight: 600; padding-top: .3em; padding-bottom: .5em; }
.a-cols .tia, .a-cols .fld { color: #2563eb; }
.a-group { font-size: .8em; font-weight: 600; color: #111827; padding: .2em .7em .35em; display: flex; gap: .4em; align-items: center; }
.a-group span { color: #6b7280; font-weight: 400; }
.a-row { font-size: .82em; padding-top: .32em; padding-bottom: .32em; }
.a-row.sel { background: #eef4ff; }
.a-el { display: flex; align-items: center; gap: .45em; font-weight: 600; color: #111827; white-space: nowrap; overflow: hidden; }
.a-el i { font-style: italic; font-family: Georgia, serif; color: #4b5563; font-weight: 400; }
.a-el .k { font-size: .72em; color: #6b7280; font-weight: 600; letter-spacing: .03em; }
.a-path { display: flex; align-items: center; gap: .35em; color: #1f2937; white-space: nowrap; overflow: hidden; }
.a-path .db { color: #4b5563; }
.a-path.miss { color: #6b7280; font-style: italic; }
.a-dir { display: inline-flex; gap: .2em; }
.a-d { width: 1.75em; height: 1.55em; border: 1px solid #d1d5db; border-radius: .25em; display: grid; place-items: center; background: #fff; color: #111827; }
.a-d svg { width: .95em; height: .95em; stroke-width: 2.6; }
.a-d.to { background: #2563eb; border-color: #2563eb; color: #fff; }
.a-d.from { background: #16a34a; border-color: #16a34a; color: #fff; }
.a-d.skip { background: #4b5563; border-color: #4b5563; color: #fff; }
.a-st { justify-self: start; display: inline-flex; align-items: center; gap: .3em; border-radius: 999px; border: 1px solid; padding: .08em .6em; font-size: .86em; font-weight: 600; white-space: nowrap; }
.a-st.ready { color: #1d4ed8; border-color: #93b4f5; background: #f5f8ff; }
.a-st.done { color: #15803d; border-color: #86d5a5; background: #f0fbf4; }
.a-st.same { color: #6b7280; border-color: #d1d5db; background: #fff; font-weight: 500; }
.a-st.conf { color: #b45309; border-color: #f2c272; background: #fff8eb; }
.a-link { color: #2563eb; font-weight: 600; font-size: .92em; white-space: nowrap; justify-self: end; }
.a-link.dim { color: #c4c9d2; }
.a-seg { display: inline-flex; border-radius: .25em; overflow: hidden; font-size: .86em; font-weight: 600; }
.a-seg > span { padding: .1em .45em; background: #fff; border: 1px solid #d1d5db; }
.a-seg > span.on { background: #2563eb; border-color: #2563eb; color: #fff; }

/* Konsole */
.a-console { display: flex; align-items: center; gap: .6em; margin-top: .8em; padding: .55em .9em; border-top: 1px solid #e5e7eb; font-size: .78em; color: #374151; }
.a-console b { color: #111827; }
.a-cnt { background: #f3f4f6; border-radius: .3em; padding: 0 .4em; color: #4b5563; font-size: .9em; }
.a-lvl { background: #e8efff; color: #1d4ed8; border-radius: .25em; padding: .05em .4em; font-weight: 700; font-size: .85em; }
.a-filters { margin-left: auto; display: flex; gap: .3em; }
.a-filters > span { border: 1px solid; border-radius: 999px; padding: 0 .55em; font-size: .9em; }
.a-filters .i1 { color: #2563eb; border-color: #93b4f5; } .a-filters .i2 { color: #b45309; border-color: #f2c272; } .a-filters .i3 { color: #dc2626; border-color: #f3a5a5; }

/* Vergleichsansicht */
.a-dtool { display: flex; align-items: center; gap: .6em; padding: .6em .9em; font-size: .8em; border-bottom: 1px solid #eef1f5; flex-wrap: wrap; }
.a-dtool .a-note { color: #4b5563; }
.a-num { display: inline-flex; align-items: center; gap: .35em; border: 1px solid #d1d5db; border-radius: .25em; padding: 0 .45em; }
.a-diff { display: grid; grid-template-columns: 1fr 1fr; }
.a-pane + .a-pane { border-left: 1px solid #e5e7eb; }
.a-phead { display: flex; align-items: center; gap: .4em; padding: .45em .8em; font-size: .78em; color: #4b5563; border-bottom: 1px solid #eef1f5; }
.a-phead svg { color: #2563eb; }
.a-code { font-family: "Cascadia Mono", Consolas, "IBM Plex Mono", monospace; font-size: .8em; line-height: 1.65; padding: .3em 0 .6em; }
.a-ln { display: grid; grid-template-columns: 2.6em 1.3em 1fr; white-space: pre; overflow: hidden; }
.a-ln .n { color: #9ca3af; text-align: right; padding-right: .5em; background: #fafafa; }
.a-ln .m { text-align: center; font-weight: 700; }
.a-ln .c { overflow: hidden; text-overflow: ellipsis; padding-right: .5em; }
.a-ln.chg { background: #fff7cc; } .a-ln.chg .m { color: #a16207; }
.a-ln.del { background: #fde8e8; } .a-ln.del .m { color: #dc2626; }
.a-ln.add { background: #e3f8eb; } .a-ln.add .m { color: #15803d; }
.a-ln.gap .c { color: #9ca3af; }
.a-ln.empty { background: #f6f7f9; }
.a-ln .w-del { background: #f8c4c4; border-radius: 2px; } .a-ln .w-add { background: #b6ecc9; border-radius: 2px; }
.a-ln .kw { color: #1d4ed8; font-weight: 600; } .a-ln .cm { color: #6b7280; } .a-ln .vr { color: #7c2d92; }

/* Verlauf */
.a-hist { border-top: 1px solid #e5e7eb; }
.a-hhead { display: flex; align-items: center; gap: .45em; padding: .55em .9em; font-size: .86em; font-weight: 600; color: #111827; }
.a-hhead svg { color: #2563eb; }
.a-hhead .r { margin-left: auto; display: flex; gap: .9em; color: #4b5563; }
.a-hgrid { display: grid; grid-template-columns: 1fr 1.45fr; border-top: 1px solid #eef1f5; }
.a-commits { border-right: 1px solid #e5e7eb; }
.a-commit { padding: .5em .9em; border-bottom: 1px solid #f0f2f5; }
.a-commit.sel { background: #eef2f7; }
.a-commit .t { font-size: .72em; color: #6b7280; }
.a-commit .msg { font-size: .84em; font-weight: 600; color: #111827; }
.a-commit .au { font-size: .72em; color: #6b7280; }
.a-files { padding: .55em .8em; }
.a-file { display: flex; align-items: center; gap: .45em; font-size: .8em; color: #111827; }
.a-file .bt { margin-left: auto; display: flex; gap: .35em; }
.a-restore { margin-top: .6em; display: flex; align-items: center; gap: .7em; background: #fff8e6; border: 1px solid #f5dfa6; border-radius: .35em; padding: .55em .7em; font-size: .78em; color: #92400e; }
.a-restore p { margin: 0; flex: 1; }
.a-restore .bt { display: flex; gap: .35em; }

/* Instanzauswahl */
.a-ihead { display: flex; align-items: center; justify-content: space-between; border: 1px solid #e5e7eb; border-radius: .5em; padding: .6em .8em; font-weight: 600; font-size: 1em; color: #111827; }
.a-icols { display: grid; grid-template-columns: 4.2em 1fr auto; padding: .7em .8em .3em; font-size: .74em; color: #6b7280; }
.a-inst { display: grid; grid-template-columns: 3.6em 1fr auto; align-items: center; gap: .4em; border: 1px solid #e5e7eb; border-radius: .5em; padding: .55em .8em; margin-bottom: .45em; }
.a-inst b { display: block; color: #111827; font-size: .92em; }
.a-inst small { display: block; color: #6b7280; font-size: .72em; }
.a-ifoot { text-align: right; font-size: .72em; color: #6b7280; padding: .4em .1em .8em; }

/* schmale Container (Smartphone) */
@container (max-width: 460px) {
  .a-cols, .a-row { grid-template-columns: 2.4fr 1.4fr 1.6fr; }
  .a-cols .tia, .a-cols .fld, .a-cols .lnk, .a-row .a-path, .a-row .a-link { display: none; }
  .a-tool .a-btn:not(.pri), .a-head .a-btn, .a-sum > span:first-child, .a-group, .a-cols, .a-dtool .a-seg + .a-seg,
  .a-title .wc, .a-tool .lbl, .a-tool .path, .a-head .a-btn .txt, .a-chead .a-toggle .txt, .a-chead .a-meta, .a-bulk, .a-filters, .a-console .msg, .a-dtool .a-note, .a-dtool .xt { display: none; }
  .a-diff { grid-template-columns: 1fr; }
  .a-pane + .a-pane { border-left: 0; border-top: 1px solid #e5e7eb; }
  .a-hgrid { grid-template-columns: 1fr; }
  .a-commits { border-right: 0; border-bottom: 1px solid #e5e7eb; }
  .a-restore { flex-wrap: wrap; }
  .a-inst small { display: none; }
  .a-row .a-el .k { display: none; }
  .a-code { font-size: .74em; }
  .a-restore p { flex-basis: 100%; }
  .a-file { flex-wrap: wrap; word-break: break-all; }
  .a-file .bt { margin-left: 0; width: 100%; margin-top: .3em; }
  .a-files { min-width: 0; }
}