:root{
  --bg:#f5f7fa;
  --bg2:#eef2ff;
  --card:#ffffff;
  --border:#e4e7ee;
  --text:#0f172a;
  --muted:#64748b;

  --radius: 16px;
  --shadow: 0 10px 28px rgba(15,23,42,.10);

  --placeholder:#94a3b8;

  --gap: 18px;

  --editorBg:#ffffff;
  --editorBorder:#d6dbe6;

  --fioriBlue:#0b5fff;

  --gutterBg:#f1f5f9;
  --gutterText:#64748b;
  --gutterBorder:#d6dbe6;
  --gutterW: 52px;
}

/* Immer hell – unabhängig vom OS */
html{
  height: 100%;
  color-scheme: light;
}
body{
  height: 100%;
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  background:
    radial-gradient(1200px 600px at 20% -10%, var(--bg2), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(11,95,255,.12), transparent 55%),
    var(--bg);
  color: var(--text);
  overflow-x: hidden;
}

/* Dark Mode Overrides neutralisieren */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#f5f7fa;
    --bg2:#eef2ff;
    --card:#ffffff;
    --border:#e4e7ee;
    --text:#0f172a;
    --muted:#64748b;

    --shadow: 0 10px 28px rgba(15,23,42,.10);

    --editorBg:#ffffff;
    --editorBorder:#d6dbe6;

    --gutterBg:#f1f5f9;
    --gutterText:#64748b;
    --gutterBorder:#d6dbe6;
  }
}

*{ box-sizing:border-box; }

/* =========================================================
   Layout: Desktop ohne Page-Scroll (nur Editoren scrollen)
   ========================================================= */
.wrap{
  max-width: 1540px;
  margin: 0 auto;
  padding: clamp(12px, 2.4vw, 28px) 16px 16px;

  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;

  display:flex;
  flex-direction:column;
  gap: var(--gap);
}

@media (min-width: 900px){
  body{ overflow: hidden; } /* keine Page-Scrollbars */
  .wrap{ height: 100dvh; }
}

/* =========================================================
   Header
   ========================================================= */
.header{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: var(--gap);
  align-items:end;
}

.title .sub{ margin: 10px 0 0; color: var(--muted); }

.brand{
  margin:0;
  font-family: "Space Grotesk", Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  font-weight: 700;
  font-size: clamp(26px, 3.2vw, 40px);
  letter-spacing: -0.02em;
  line-height: 1.08;
}
.brand-sub{
  font-weight: 600;
  color: var(--muted);
  margin-left: .25ch;
}
.brand-sep{
  color: var(--muted);
  margin: 0 .35ch;
}
.brand-accent{
  color: var(--fioriBlue);
  position: relative;
}
.brand-accent::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: -0.10em;
  height: 0.22em;
  background: rgba(11,95,255,.18);
  border-radius: 999px;
  z-index: -1;
}

/* Controls */
.controls{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap: wrap;
}

/* segmented */
.segmented{
  display:inline-grid;
  grid-auto-flow: column;
  border:1px solid var(--border);
  border-radius: 12px;
  overflow:hidden;
  background: var(--card);
  box-shadow: 0 1px 0 rgba(15,23,42,.04);
}
.segmented input{ display:none; }
.segmented label{
  padding: 10px 12px;
  font-size: 13px;
  color: var(--muted);
  cursor:pointer;
  user-select:none;
  background: transparent;
}
.segmented input:checked + label{
  background: rgba(11,95,255,.10);
  color: var(--fioriBlue);
  font-weight: 800;
}

/* buttons */
.btn{
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 12px;
  cursor:pointer;
  box-shadow: 0 1px 0 rgba(15,23,42,.04);
  font-weight: 700;
  transition: transform .06s ease, background .12s ease, border-color .12s ease;
}
.btn:hover{ background: rgba(255,255,255,.75); }
.btn:active{ transform: translateY(1px); }
.btn:disabled{ opacity:.55; cursor:not-allowed; }

.primary{
  background: var(--fioriBlue);
  border-color: var(--fioriBlue);
  color: #fff;
}
.primary:hover{
  background:#084cc8;
  border-color:#084cc8;
}

.small{ padding: 9px 12px; font-size: 13px; }
.ghost{ background: rgba(255,255,255,.70); }

/* =========================================================
   Grid + Panels
   ========================================================= */
.grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);

  flex: 1 1 auto;
  min-height: 0;
}

.panel{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;

  display:flex;
  flex-direction:column;
  min-height: 0;
}

.panel-head{
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(rgba(255,255,255,.90), rgba(255,255,255,.70));
}
.panel-head h2{
  margin:0;
  font-size: 13px;
  letter-spacing:.3px;
  color: var(--muted);
  font-weight: 800;
}

@media (max-width: 1040px){
  .grid{ grid-template-columns: 1fr; }
}

/* =========================================================
   Beispiele: Toolbar sitzt in ABAP-Spalte (perfekte Bündigkeit)
   ========================================================= */
.examples-row{
  width: 100%;
  margin: 2px 0 0;

  /* exakt wie .grid -> ABAP-Spalte sitzt identisch */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: center;
}

/* Toolbar nur in Spalte 2 */
.examples-toolbar{
  grid-column: 2;

  display: grid;
  grid-template-columns: auto minmax(280px, 520px) auto auto;
  gap: 10px;
  align-items: center;
}

/* Label */
.examples-label{
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

/* Select */
.select{
  height: 36px;
  padding: 0 10px;
  border-radius: 12px;
  border:1px solid var(--border);
  background: var(--card);
  color: var(--text);
  width: 100%;
  min-width: 0;
}

/* Tablet/Mobile: Header wird einspaltig */
@media (max-width: 1040px){
  .header{ grid-template-columns: 1fr; align-items:start; }
  .controls{ justify-content:flex-start; }

  /* Beispiele werden dann auch einspaltig */
  .examples-row{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .examples-toolbar{
    grid-column: 1;
    justify-self: start;
    width: 100%;
    max-width: none;
    grid-template-columns: auto 1fr auto auto;
  }
}

/* Handy Hochformat: Label + Select oben, Buttons nebeneinander unten */
@media (max-width: 520px){
  .examples-toolbar{
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "label select"
      "load  reset";
    gap: 10px;
  }
  .examples-label{ grid-area: label; }
  #examples{ grid-area: select; }
  #loadExample{ grid-area: load; width: 100%; }
  #reset{ grid-area: reset; width: 100%; }
}

/* =========================================================
   Editor: füllt Panel (kein clamp) – Scroll nur innen
   ========================================================= */
.editor{
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  background: var(--editorBg);
}
/* Mobile/Tablet: Editor braucht wieder eine definierte Höhe,
   sonst kann er (wegen auto-height Layout) auf 0 kollabieren */
@media (max-width: 1040px){
  .editor{
    height: clamp(320px, 52vh, 720px);
    min-height: 320px;
  }
}
@media (max-width: 1040px) and (max-height: 720px){
  .editor{
    height: clamp(260px, 48vh, 560px);
    min-height: 260px;
  }
}

/* frame */
.editor::before{
  content:"";
  position:absolute;
  inset:0;
  border: 1px solid var(--editorBorder);
  border-top: none;
  pointer-events:none;
}

/* gutter */
.gutter{
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  width: var(--gutterW);
  background: var(--gutterBg);
  border-right: 1px solid var(--gutterBorder);

  padding: 18px 10px 18px 0;
  text-align: right;

  font-family: Consolas, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px;
  line-height: 1.6;
  color: var(--gutterText);

  overflow: hidden;
  user-select: none;
  white-space: pre;
}

/* wrap long lines */
.editor textarea,
.editor .code code{
  white-space: pre-wrap;
  word-break: break-word;
}

/* textarea overlay */
.editor textarea{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  outline:none;
  resize:none;
  background: transparent;

  color: transparent;
  caret-color: var(--text);

  padding: 18px 18px 18px calc(18px + var(--gutterW));

  font-family: Consolas, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px;
  line-height: 1.6;

  overflow:auto;
  z-index: 2;
}

.editor.readonly textarea{ caret-color: transparent; }
.editor textarea::placeholder{ color: var(--placeholder); }

/* highlight layer */
.editor .code{
  position:absolute;
  inset:0;
  margin:0;
  overflow:auto;
  pointer-events:none;
  z-index: 1;
  background: transparent;
  padding: 18px 18px 18px calc(18px + var(--gutterW));
}

.editor .code code{
  font-family: Consolas, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
}

/* Prism base */
pre[class*="language-"]{ background: transparent !important; }

/* Java */
.editor[data-lang="java"] .token.keyword{ color:#7a3db8; font-weight: 800; }
.editor[data-lang="java"] .token.class-name{ color: var(--text); font-weight: 800; }
.editor[data-lang="java"] .token.function{ color: var(--text); }
.editor[data-lang="java"] .token.string{ color:#2a5db0; }
.editor[data-lang="java"] .token.comment{ color:#2aa84a; font-style: italic; }

/* ABAP */
.editor[data-lang="abap"] .token.keyword{ color:#1f4fd6; font-weight: 900; }
.editor[data-lang="abap"] .token.string{ color:#2e9b3f; }
.editor[data-lang="abap"] .token.comment{ color:#7b8794; font-style: italic; }

/* =========================================================
   Info
   ========================================================= */
.info{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: var(--gap);
  padding: 14px 16px;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--muted);

  flex: 0 0 auto;
}
.info-left{ display:flex; flex-direction:column; gap: 10px; max-width: 980px; }
.info strong{ color: var(--text); }
.info code{
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(15,23,42,.06);
  border:1px solid rgba(15,23,42,.10);
  color: var(--text);
}
.hint{ font-size: 13px; }

kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  border:1px solid rgba(15,23,42,.18);
  border-bottom-color: rgba(15,23,42,.28);
  background: rgba(255,255,255,.90);
  padding: 2px 6px;
  border-radius: 8px;
  color: var(--text);
}

.info-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap: 10px;
  max-width: 560px;
}

.badges{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap: wrap;
  justify-content:flex-end;
}

.badge{
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  border:1px solid var(--border);
  background: var(--card);
  padding: 6px 10px;
  border-radius: 999px;
}

.status{
  white-space:nowrap;
  font-size: 13px;
  color: var(--muted);
}

.led{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.15);
}
.led.idle{ background:#cbd5e1; box-shadow: 0 0 0 4px rgba(203,213,225,.35); }
.led.ok{ background:#22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.25); }
.led.err{ background:#ef4444; box-shadow: 0 0 0 4px rgba(239,68,68,.22); }
.led.warn{ background:#f59e0b; box-shadow: 0 0 0 4px rgba(245,158,11,.22); }

@media (max-width: 1040px){
  .info{ flex-direction:column; }
  .info-right{ align-items:flex-start; max-width: unset; }
}