@charset "UTF-8";

/* --- 1. Farb-Tokens & Variablen (Theme-Weiche via prefers-color-scheme) --- */
:root {
    /* Standard: LIGHT MODE Farben (Deine optimalen VS-Code Farbwerte) */
    --code-bg-panel: var(--color-surface-base, #ffffff);
    --code-bg-gutter: var(--color-bg-main, #f3efe8);
    --code-text-gutter: var(--color-text-muted, #666666);
    --code-border: var(--color-border-base, #dddddd);
    
    --abap-color-comment: #6a9955;      /* .c1 */
    --abap-color-string: #ce9178;       /* .s1 / .s2 */
    --abap-color-parenthesis: #374151;  /* .p  */
    --abap-color-operator: #a855f7;     /* .o  */
    --abap-color-keyword: #2563eb;      /* .k  */
    --abap-color-system: #0f766e;       /* .nc / .kc */
    --abap-color-variable: #0ea5e9;     /* .nv */
    --abap-color-function: #ca8a04;     /* .nf */
    --abap-color-type: #e65100;         /* .abap-type */
    --abap-color-number: #098658;       /* .abap-number */
    --abap-color-plain: var(--color-text-main, #1f1c17);
}

@media (prefers-color-scheme: dark) {
    :root {
        /* AUTOMATISCH: DARK MODE Farben (Augenschonendes Entwickler-Theme) */
        --code-bg-panel: #1e1e1e;
        --code-bg-gutter: #181818;
        --code-text-gutter: #858585;
        --code-border: #3c3c3c;
        
        --abap-color-comment: #6a9955;
        --abap-color-string: #ce9178;
        --abap-color-parenthesis: #d4d4d4;
        --abap-color-operator: #d4d4d4;
        --abap-color-keyword: #569cd6;
        --abap-color-system: #4fc1ff;
        --abap-color-variable: #9cdcfe;
        --abap-color-function: #dcdcaa;
        --abap-color-type: #4ec9b0;
        --abap-color-number: #b5cea8;
        --abap-color-plain: #d4d4d4;
    }
}

/* --- 2. Layout & Shell-Container --- */
.novaropro-code-wrapper {
    margin: 1.5rem 0;
    border: 1px solid var(--code-border);
    border-radius: 8px;
    background-color: var(--code-bg-panel);
    overflow: hidden;
}

.novaropro-code-disclosure {
    width: 100%;
}

.novaropro-code-disclosure__summary {
    padding: 1rem 1.5rem;
    font-weight: 600;
    background-color: var(--code-bg-gutter);
    cursor: pointer;
    user-select: none;
    outline: none;
}

.novaropro-code-disclosure__summary:hover {
    background-color: var(--code-border);
}

.novaropro-code-disclosure__panel {
    position: relative;
    border-top: 1px solid var(--code-border);
    background-color: var(--code-bg-panel);
}

/* Toolbar & Interaktiver Kopierbutton */
.novaropro-code-toolbar {
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    z-index: 10;
}

.novaropro-code-copy-button {
    background-color: var(--code-bg-panel);
    border: 1px solid var(--code-border);
    border-radius: 4px;
    padding: 0.4rem 0.8rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--abap-color-plain);
}

.novaropro-code-copy-button:hover {
    border-color: var(--color-brand, #0E6B68);
    color: var(--color-brand, #0E6B68);
}

.novaropro-code-copy-button.is-copied {
    background-color: var(--color-brand, #0E6B68);
    border-color: var(--color-brand, #0E6B68);
    color: #ffffff !important;
}

/* Code-Anzeige & Gutter (Zeilennummern) */
.novaropro-code-scroll {
    overflow-x: auto !important; /* WICHTIG: Ermöglicht das horizontale Scrollen bei langen Zeilen */
}

.novaropro-code-scroll--limited {
    max-height: calc(var(--max-visible-lines, 30) * 1.5 * 1.02em); /* Dynamische Höhenbegrenzung basierend auf em */
    overflow-y: auto;
}

.novaropro-code-frame {
  display: flex;
  align-items: flex-start;
  font-family: Consolas, Monaco, "Lucida Console", "Liberation Mono",
    "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace;
  background-color: var(--code-bg-panel);
  padding: 0 !important;
}

.novaropro-code-gutter,
.novaropro-runtime-code-block,
.novaropro-code-lines {
  font-size: 1.02em !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

.novaropro-runtime-code-block,
.novaropro-code-lines,
.novaropro-code-lines span {
  vertical-align: top;
}

.novaropro-code-gutter {
  background-color: var(--code-bg-gutter);
  border-right: 1px solid var(--code-border);
  padding: 1rem 0.75rem !important;
  text-align: right;
  color: var(--code-text-gutter);
  user-select: none;
  min-width: calc(var(--line-number-digits, 2) * 1ch + 1.5rem);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

.novaropro-code-gutter-line {
  display: block !important;
  width: 100%;
  line-height: 1.5 !important;
  min-height: 1.5em;
}

.novaropro-runtime-code-block > .novaropro-code-lines {
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  background-color: var(--color-bg-main);
  padding: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

.novaropro-runtime-code-block {
  flex: 1 1 auto;
  margin: 0 !important;
  padding: 1rem 1.25rem !important;
  background-color: var(--code-bg-panel);
  overflow: visible;
}

.novaropro-code-lines {
  display: block !important;
  white-space: pre !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  color: var(--abap-color-plain);
}

/* --- 3. Dynamische ABAP Syntax Highlighting Klassen --- */
.novaropro-code-lines .c1             { color: var(--abap-color-comment); font-style: italic; }
.novaropro-code-lines .s1, 
.novaropro-code-lines .s2             { color: var(--abap-color-string); }
.novaropro-code-lines .p              { color: var(--abap-color-parenthesis); }
.novaropro-code-lines .o              { color: var(--abap-color-operator); }
.novaropro-code-lines .k              { color: var(--abap-color-keyword); font-weight: 600; }
.novaropro-code-lines .kc             { color: var(--abap-color-system); }
.novaropro-code-lines .nv             { color: var(--abap-color-variable); }
.novaropro-code-lines .nc             { color: var(--abap-color-system); font-weight: 600; }
.novaropro-code-lines .nf             { color: var(--abap-color-function); }
.novaropro-code-lines .abap-type      { color: var(--abap-color-type); }
.novaropro-code-lines .abap-number    { color: var(--abap-color-number); }
.novaropro-code-lines .abap-comment   { color: var(--abap-color-comment); font-style: italic; }
.novaropro-code-lines .abap-keyword   { color: var(--abap-color-keyword); font-weight: 600; }