/* --------------------------------------------------
   Thebe / CodeMirror – Monokai-inspiriert (Dark Mode)
   -------------------------------------------------- */
/*
  Note: In the static HTML build, code highlighting is done via Pygments.
  When a live kernel is launched (e.g., via Binder/Thebe), the editable cells use CodeMirror instead,
  which can change the perceived color scheme in dark mode. This stylesheet aligns CodeMirror's
  dark-mode appearance with the rest of the theme.
*/

/* NOTE:
   Jupyter Book config uses `thebe_selector = ".thebe,.cell"`.
   In the generated HTML, live-code cells typically look like:
   - `.cell ...` (outer container)
   - `.thebelab-cell` (inner container created by Thebe)
   There is often *no* `.thebe` wrapper, so we must style `.cell`/`.thebelab-cell` too. */

:root:is([data-theme="dark"], [data-mode="dark"]) .thebe .CodeMirror,
:root:is([data-theme="dark"], [data-mode="dark"]) .cell .CodeMirror,
:root:is([data-theme="dark"], [data-mode="dark"]) .thebelab-cell .CodeMirror {
  background: #272822 !important;   /* Monokai background */
  color: #f8f8f2 !important;        /* default text */
  border-radius: 4px;
  font-family: "Fira Code", "JetBrains Mono", monospace;
  font-size: 0.9em;
}

/* Fallback, falls Theme-Klasse gesetzt ist */
:root:is([data-theme="dark"], [data-mode="dark"]) .thebe .cm-s-default,
:root:is([data-theme="dark"], [data-mode="dark"]) .cell .cm-s-default,
:root:is([data-theme="dark"], [data-mode="dark"]) .thebelab-cell .cm-s-default {
  background: #272822 !important;
  color: #f8f8f2 !important;
}

/* --- Tokenfarben (Monokai-like) --- */

:root:is([data-theme="dark"], [data-mode="dark"]) .thebe .cm-keyword,
:root:is([data-theme="dark"], [data-mode="dark"]) .cell .cm-keyword,
:root:is([data-theme="dark"], [data-mode="dark"]) .thebelab-cell .cm-keyword   { color: #f92672 !important; } /* pink */

:root:is([data-theme="dark"], [data-mode="dark"]) .thebe .cm-operator,
:root:is([data-theme="dark"], [data-mode="dark"]) .cell .cm-operator,
:root:is([data-theme="dark"], [data-mode="dark"]) .thebelab-cell .cm-operator  { color: #f92672 !important; }

:root:is([data-theme="dark"], [data-mode="dark"]) .thebe .cm-string,
:root:is([data-theme="dark"], [data-mode="dark"]) .cell .cm-string,
:root:is([data-theme="dark"], [data-mode="dark"]) .thebelab-cell .cm-string    { color: #e6db74 !important; } /* yellow */

:root:is([data-theme="dark"], [data-mode="dark"]) .thebe .cm-number,
:root:is([data-theme="dark"], [data-mode="dark"]) .cell .cm-number,
:root:is([data-theme="dark"], [data-mode="dark"]) .thebelab-cell .cm-number    { color: #ae81ff !important; } /* purple */

:root:is([data-theme="dark"], [data-mode="dark"]) .thebe .cm-comment,
:root:is([data-theme="dark"], [data-mode="dark"]) .cell .cm-comment,
:root:is([data-theme="dark"], [data-mode="dark"]) .thebelab-cell .cm-comment   { color: #75715e !important; font-style: italic; }

:root:is([data-theme="dark"], [data-mode="dark"]) .thebe .cm-def,
:root:is([data-theme="dark"], [data-mode="dark"]) .cell .cm-def,
:root:is([data-theme="dark"], [data-mode="dark"]) .thebelab-cell .cm-def       { color: #a6e22e !important; } /* green */

:root:is([data-theme="dark"], [data-mode="dark"]) .thebe .cm-variable,
:root:is([data-theme="dark"], [data-mode="dark"]) .cell .cm-variable,
:root:is([data-theme="dark"], [data-mode="dark"]) .thebelab-cell .cm-variable  { color: #f8f8f2 !important; }

:root:is([data-theme="dark"], [data-mode="dark"]) .thebe .cm-builtin,
:root:is([data-theme="dark"], [data-mode="dark"]) .cell .cm-builtin,
:root:is([data-theme="dark"], [data-mode="dark"]) .thebelab-cell .cm-builtin   { color: #66d9ef !important; } /* cyan */

:root:is([data-theme="dark"], [data-mode="dark"]) .thebe .cm-atom,
:root:is([data-theme="dark"], [data-mode="dark"]) .cell .cm-atom,
:root:is([data-theme="dark"], [data-mode="dark"]) .thebelab-cell .cm-atom      { color: #ae81ff !important; }

:root:is([data-theme="dark"], [data-mode="dark"]) .thebe .cm-meta,
:root:is([data-theme="dark"], [data-mode="dark"]) .cell .cm-meta,
:root:is([data-theme="dark"], [data-mode="dark"]) .thebelab-cell .cm-meta      { color: #fd971f !important; }

:root:is([data-theme="dark"], [data-mode="dark"]) .thebe .cm-tag,
:root:is([data-theme="dark"], [data-mode="dark"]) .cell .cm-tag,
:root:is([data-theme="dark"], [data-mode="dark"]) .thebelab-cell .cm-tag       { color: #f92672 !important; }

/* Cursor & selection */
:root:is([data-theme="dark"], [data-mode="dark"]) .thebe .CodeMirror-cursor,
:root:is([data-theme="dark"], [data-mode="dark"]) .cell .CodeMirror-cursor,
:root:is([data-theme="dark"], [data-mode="dark"]) .thebelab-cell .CodeMirror-cursor {
  border-left: 2px solid #f8f8f2 !important;
}

:root:is([data-theme="dark"], [data-mode="dark"]) .thebe .CodeMirror-selected,
:root:is([data-theme="dark"], [data-mode="dark"]) .cell .CodeMirror-selected,
:root:is([data-theme="dark"], [data-mode="dark"]) .thebelab-cell .CodeMirror-selected {
  background: rgba(73, 72, 62, 0.9) !important;
}

/* Line numbers */
:root:is([data-theme="dark"], [data-mode="dark"]) .thebe .CodeMirror-gutters,
:root:is([data-theme="dark"], [data-mode="dark"]) .cell .CodeMirror-gutters,
:root:is([data-theme="dark"], [data-mode="dark"]) .thebelab-cell .CodeMirror-gutters {
  background: #272822 !important;
  border-right: 1px solid #3e3d32;
}

:root:is([data-theme="dark"], [data-mode="dark"]) .thebe .CodeMirror-linenumber,
:root:is([data-theme="dark"], [data-mode="dark"]) .cell .CodeMirror-linenumber,
:root:is([data-theme="dark"], [data-mode="dark"]) .thebelab-cell .CodeMirror-linenumber {
  color: #75715e !important;
}

/* --------------------------------------------------
   Thebe / Jupyter-Ausgabe (stdout, rich output)
   -------------------------------------------------- */

/* Default text color inside live output area */
:root:is([data-theme="dark"], [data-mode="dark"]) .cell .jp-OutputArea,
:root:is([data-theme="dark"], [data-mode="dark"]) .thebelab-cell .jp-OutputArea,
:root:is([data-theme="dark"], [data-mode="dark"]) .cell .jp-OutputArea-output,
:root:is([data-theme="dark"], [data-mode="dark"]) .thebelab-cell .jp-OutputArea-output,
:root:is([data-theme="dark"], [data-mode="dark"]) .cell .jp-RenderedText,
:root:is([data-theme="dark"], [data-mode="dark"]) .thebelab-cell .jp-RenderedText {
  color: #f8f8f2 !important;
}

/* Printed stdout/stderr usually ends up in pre tags */
:root:is([data-theme="dark"], [data-mode="dark"]) .cell .jp-OutputArea pre,
:root:is([data-theme="dark"], [data-mode="dark"]) .thebelab-cell .jp-OutputArea pre,
:root:is([data-theme="dark"], [data-mode="dark"]) .cell .jp-OutputArea-output pre,
:root:is([data-theme="dark"], [data-mode="dark"]) .thebelab-cell .jp-OutputArea-output pre {
  color: #f8f8f2 !important;
  background: #272822 !important;
  padding: 0.4rem 0.6rem !important;
  border-radius: 4px !important;
  font-family: "Fira Code", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
}

/* Extra-specific selectors for plain stdout/stderr (matches your pasted HTML) */
:root:is([data-theme="dark"], [data-mode="dark"])
  .jp-RenderedText.jp-OutputArea-output[data-mime-type="application/vnd.jupyter.stdout"]
  > pre,
:root:is([data-theme="dark"], [data-mode="dark"])
  .jp-RenderedText.jp-OutputArea-output[data-mime-type="application/vnd.jupyter.stderr"]
  > pre {
  color: #f8f8f2 !important;
  background: #272822 !important;
}

/* Prompts (e.g. "Out[1]:") */
:root:is([data-theme="dark"], [data-mode="dark"]) .cell .jp-OutputPrompt,
:root:is([data-theme="dark"], [data-mode="dark"]) .thebelab-cell .jp-OutputPrompt {
  color: #a6e22e !important;
}

/* Make errors readable too (if present) */
:root:is([data-theme="dark"], [data-mode="dark"]) .cell .jp-RenderedText.jp-mod-error,
:root:is([data-theme="dark"], [data-mode="dark"]) .thebelab-cell .jp-RenderedText.jp-mod-error,
:root:is([data-theme="dark"], [data-mode="dark"]) .cell .jp-Error,
:root:is([data-theme="dark"], [data-mode="dark"]) .thebelab-cell .jp-Error {
  color: #ff6b6b !important;
}

/* --------------------------------------------------
   Brute-force fallback: stdout still dark?
   (The `.jp-*` widgets are effectively unique to Thebe/Jupyter output on the page,
   so it is safe to target them directly.)
   -------------------------------------------------- */

:root:is([data-theme="dark"], [data-mode="dark"]) body .jp-OutputArea-output,
:root:is([data-theme="dark"], [data-mode="dark"]) body .jp-RenderedText.jp-OutputArea-output {
  color: #f8f8f2 !important;
}

:root:is([data-theme="dark"], [data-mode="dark"]) body .jp-OutputArea-output pre,
:root:is([data-theme="dark"], [data-mode="dark"]) body .jp-RenderedText.jp-OutputArea-output pre,
:root:is([data-theme="dark"], [data-mode="dark"]) body .jp-RenderedText.jp-OutputArea-output[data-mime-type="application/vnd.jupyter.stdout"] > pre,
:root:is([data-theme="dark"], [data-mode="dark"]) body .jp-RenderedText.jp-OutputArea-output[data-mime-type="application/vnd.jupyter.stderr"] > pre {
  color: #f8f8f2 !important;
  background: #272822 !important;
  opacity: 1 !important;
}

/* --------------------------------------------------
   User settings / launch controls
   -------------------------------------------------- */

.ii-hidden-launch-ui {
  display: none !important;
}

.ii-user-controls {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1100;
  display: flex;
  gap: 0.45rem;
  align-items: center;
  flex-wrap: wrap;
}

.ii-btn {
  border: 1px solid var(--pst-color-border, #bfc6d1);
  background: var(--pst-color-surface, #fff);
  color: var(--pst-color-text-base, #222);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  font-size: 0.82rem;
  line-height: 1.2;
  cursor: pointer;
}

.ii-btn:disabled {
  opacity: 0.95;
  cursor: not-allowed;
}

.ii-btn-primary:disabled,
.ii-btn-secondary:disabled {
  background: #c7ced8;
  border-color: #c7ced8;
  color: #6b7280;
}

.ii-btn-primary {
  background: #2e8b57;
  color: #fff;
  border-color: #2e8b57;
}

.ii-btn-launch-icon {
  width: 2.7rem;
  height: 2.7rem;
  padding: 0;
  border-radius: 50%;
  font-size: 1.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ii-btn-secondary {
  background: #2e8b57;
  color: #fff;
  border-color: #2e8b57;
}

.ii-btn-live-icon {
  width: 2.7rem;
  height: 2.7rem;
  padding: 0;
  border-radius: 50%;
  font-size: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ii-btn-ghost {
  background: transparent;
}

.ii-btn-gear {
  width: 2.7rem;
  height: 2.7rem;
  padding: 0;
  border-radius: 50%;
  font-size: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ii-settings-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.55rem);
  width: min(18.5rem, 92vw);
  border: 1px solid var(--pst-color-border, #bfc6d1);
  border-radius: 0.6rem;
  background: var(--pst-color-surface, #fff);
  color: var(--pst-color-text-base, #222);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  padding: 0.7rem 0.75rem 0.55rem;
  display: none;
}

.ii-settings-open .ii-settings-panel {
  display: block;
}

.ii-settings-title {
  font-weight: 600;
  margin-bottom: 0.55rem;
}

.ii-settings-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.25rem;
  margin-bottom: 0.45rem;
  font-size: 0.84rem;
}

.ii-settings-row select {
  width: 100%;
  border: 1px solid var(--pst-color-border, #bfc6d1);
  border-radius: 0.35rem;
  background: var(--pst-color-surface, #fff);
  color: var(--pst-color-text-base, #222);
  padding: 0.25rem 0.4rem;
}

.ii-settings-note {
  margin: 0.2rem 0 0;
  font-size: 0.72rem;
  opacity: 0.8;
}

/* --------------------------------------------------
   Overlay Safe Zone for fixed FABs
   -------------------------------------------------- */

:root {
  --ii-fab-overlay-safezone-desktop: 5rem;
  --ii-fab-overlay-safezone-mobile: 7rem;
  --ii-fab-overlay-safezone: var(--ii-fab-overlay-safezone-desktop);
}

/* Keep footer content (logo/text) above the FAB overlay zone across theme variants. */
.bd-footer,
.bd-footer-article,
.bd-footer-content,
footer,
.footer {
  border-top: 0 !important;
  box-shadow: none !important;
}

.bd-footer::before,
.bd-footer-article::before,
.bd-footer-content::before,
footer::before,
.footer::before {
  content: none !important;
}

.bd-footer,
footer,
.footer {
  padding-top: 1.2rem !important;
  padding-bottom: calc(var(--ii-fab-overlay-safezone) + env(safe-area-inset-bottom, 0px));
  border-bottom: 1px solid var(--pst-color-border, #d9dde4) !important;
}

@media (max-width: 768px) {
  :root {
    --ii-fab-overlay-safezone: var(--ii-fab-overlay-safezone-mobile);
  }
}