/* ---------------------------------------------------------------------------
   Code::Blocks for the web - chrome styling.

   Colours are the Windows 10 system colours that wxWidgets/wxAUI resolve to
   when Code::Blocks runs on MSW, so the result matches the desktop build:

     3DFACE / BTNFACE ............ #F0F0F0    ACTIVECAPTION ........ #99B4D1
     ACTIVEBORDER ................ #B4B4B4    GRADIENTACTIVE ....... #B9D1EA
     INACTIVECAPTION ............. #BFCDDB    GRADIENTINACTIVE ..... #D7E4F2
     INACTIVECAPTIONTEXT ......... #434E54    CAPTIONTEXT .......... #000000
--------------------------------------------------------------------------- */

:root {
    --face:            #f0f0f0;
    --face-light:      #ffffff;
    --btn-shadow:      #a0a0a0;
    --btn-hilight:     #ffffff;
    --border:          #919191;
    --caption-a1:      #99b4d1;
    --caption-a2:      #b9d1ea;
    --caption-i1:      #bfcddb;
    --caption-i2:      #d7e4f2;
    --caption-text:    #000000;
    --caption-itext:   #434e54;
    --menu-hi:         #91c9f7;
    --menu-hi-border:  #91c9f7;
    --sash:            #f0f0f0;
    --ui-font: "Segoe UI", "MS Shell Dlg 2", Tahoma, sans-serif;
    --ui-size: 12px;
    --mono-font: "Courier New", Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    height: 100%; width: 100%;
    overflow: hidden;
    font-family: var(--ui-font);
    font-size: var(--ui-size);
    background: var(--face);
    color: #000;
    -webkit-user-select: none;
    user-select: none;
    cursor: default;
}

#frame { display: flex; flex-direction: column; height: 100%; width: 100%; }

/* ---------------------------------------------------------------- menu bar */

#menubar {
    display: flex;
    align-items: stretch;
    height: 20px;
    background: var(--face);
    flex: none;
    position: relative;
    z-index: 400;
}
.mb-item {
    padding: 0 8px;
    line-height: 20px;
    white-space: nowrap;
}
.mb-item:hover  { background: #cce8ff; }
.mb-item.open   { background: var(--menu-hi); }
.mnem { text-decoration: none; }
body.show-mnemonics .mnem { text-decoration: underline; }

/* Pop-up menus ------------------------------------------------------------ */

.cb-popup {
    position: absolute;
    background: #ffffff;
    border: 1px solid #959595;
    padding: 2px 0;
    min-width: 120px;
    box-shadow: 2px 2px 3px rgba(0,0,0,.25);
    z-index: 500;
}
.cb-popup .row {
    display: flex;
    align-items: center;
    height: 22px;
    padding: 0 24px 0 0;
    white-space: nowrap;
}
.cb-popup .row.disabled { color: #6d6d6d; }
.cb-popup .row:not(.disabled):hover { background: var(--menu-hi); }
.cb-popup .row .gutter {
    width: 26px; min-width: 26px; height: 22px;
    display: flex; align-items: center; justify-content: center;
}
.cb-popup .row .gutter img { width: 16px; height: 16px; }
.cb-popup .row .check {
    width: 14px; height: 14px; line-height: 12px; text-align: center;
    font-size: 12px;
}
.cb-popup .row.checked .check {
    border: 1px solid #b0b0b0; background: #e6f0fa;
}
.cb-popup .row .label { flex: 1; padding-right: 20px; }
.cb-popup .row .accel { color: #000; opacity: .85; }
.cb-popup .row .arrow { position: absolute; right: 6px; }
.cb-popup .row { position: relative; }
.cb-popup .sep {
    height: 1px; background: #d7d7d7;
    margin: 3px 2px 3px 28px;
}

/* --------------------------------------------------------------- tool bars */

/* Two docked rows of wxAuiToolBars with 16x16 bitmaps, as Code::Blocks shows
   them on Windows with the default 16px toolbar size. */
#toolbar-dock {
    flex: none;
    background: var(--face);
    border-bottom: 1px solid #dcdcdc;
}
.tb-row {
    display: flex;
    align-items: stretch;
    height: 26px;
    background: linear-gradient(to bottom, #fbfbfb 0%, var(--face) 100%);
}
.cb-toolbar {
    display: flex;
    align-items: center;
    height: 26px;
    padding: 0;
}
.tb-grip {
    width: 7px; height: 22px;
    margin: 0 1px;
    align-self: center;
    background-image:
        linear-gradient(to bottom, #ffffff 50%, transparent 50%),
        linear-gradient(to bottom, #a8a8a8 50%, transparent 50%);
    background-size: 2px 4px, 2px 4px;
    background-position: 3px 3px, 2px 2px;
    background-repeat: repeat-y, repeat-y;
    cursor: move;
}
.tb-btn {
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    margin: 1px 0;
    border: 1px solid transparent;
}
.tb-btn img { width: 16px; height: 16px; }
.tb-btn:hover:not(.disabled) { background: #e5f1fb; border-color: #70c0e7; }
.tb-btn:active:not(.disabled) { background: #cce4f7; border-color: #569de5; }
.tb-btn.disabled img { filter: grayscale(1) opacity(.35); }
.tb-sep {
    width: 1px; height: 18px; margin: 0 3px;
    align-self: center;
    background: #cfcfcf;
    border-right: 1px solid #ffffff;
}
.tb-choice {
    height: 20px;
    width: 136px;
    margin: 0 2px;
    font-family: var(--ui-font);
    font-size: var(--ui-size);
    border: 1px solid #7a7a7a;
    background: #fff;
}
.tb-text {
    height: 20px;
    margin: 0 2px;
    font-family: var(--ui-font);
    font-size: var(--ui-size);
    border: 1px solid #7a7a7a;
    background: #fff;
    padding: 0 3px;
}

/* ---------------------------------------------------------- AUI dock frame */

#main-area { flex: 1; display: flex; min-height: 0; background: var(--face); }
#center-col { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.cb-pane {
    display: flex;
    flex-direction: column;
    background: var(--face);
    min-width: 0; min-height: 0;
}
.pane-caption {
    height: 20px;
    flex: none;
    display: flex;
    align-items: center;
    padding-left: 4px;
    background: linear-gradient(to right, var(--caption-a1), var(--caption-a2));
    color: var(--caption-text);
    cursor: move;
}
.cb-pane.inactive .pane-caption {
    background: linear-gradient(to right, var(--caption-i1), var(--caption-i2));
    color: var(--caption-itext);
}
.pane-caption .title { flex: 1; }
.pane-btn {
    width: 17px; height: 15px;
    display: flex; align-items: center; justify-content: center;
    margin-right: 1px;
}
.pane-btn:hover { background: rgba(255,255,255,.55); }
.pane-btn svg { display: block; }
.pane-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.sash-v { width: 4px; cursor: ew-resize; background: var(--sash); flex: none; }
.sash-h { height: 4px; cursor: ns-resize; background: var(--sash); flex: none; }

/* ------------------------------------------------ wxAuiNotebook tab strips */

.cb-notebook { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.nb-tabs {
    height: 21px;
    flex: none;
    display: flex;
    align-items: flex-end;
    background: var(--face);
    border-bottom: 1px solid #8b8b8b;
    overflow: hidden;
    position: relative;
}
.nb-scroll {
    width: 12px; height: 20px; flex: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; color: #444;
}
.nb-scroll:hover { background: #e5f1fb; }
.nb-tab {
    height: 20px;
    display: flex;
    align-items: center;
    padding: 0 3px 0 5px;
    margin-right: -1px;
    max-width: 240px;
    white-space: nowrap;
    border: 1px solid transparent;
    border-bottom: none;
    position: relative;
}
.nb-tab .tab-icon { width: 16px; height: 16px; margin-right: 3px; flex: none; }
.nb-tab .tab-text { overflow: hidden; text-overflow: ellipsis; }
.nb-tab.active {
    background: linear-gradient(to bottom, var(--face) 0%, #ffffff 100%);
    border-color: #8b8b8b;
    font-weight: bold;
    z-index: 2;
}
.nb-tab:not(.active):hover { background: rgba(255,255,255,.6); }
.nb-tab .tab-close {
    width: 14px; height: 14px; margin-left: 4px; flex: none;
    display: flex; align-items: center; justify-content: center;
    opacity: .75;
}
.nb-tab .tab-close:hover { background: #d0d0d0; border-radius: 2px; opacity: 1; }
.nb-tab .tab-close.pressed { background: #b8b8b8; border-radius: 2px; opacity: 1; }
.cb-tab-btn {
    padding: 2px 8px; border: 1px solid #8b8b8b; border-bottom: none;
    background: linear-gradient(to bottom, var(--face) 0%, #ffffff 100%);
}
.cb-tab-btn:hover { background: #ffffff; }
.nb-tab .tab-close svg { pointer-events: none; }
.nb-pages { flex: 1; min-height: 0; position: relative; background: #fff; }
.nb-page { position: absolute; inset: 0; display: none; overflow: auto; }
.nb-page.active { display: block; }

/* ----------------------------------------------------------- project trees */

.cb-tree {
    font-family: var(--ui-font);
    font-size: var(--ui-size);
    background: #fff;
    height: 100%;
    overflow: auto;
    padding: 2px 0;
}
.tree-row {
    display: flex;
    align-items: center;
    height: 18px;
    padding-right: 4px;
    white-space: nowrap;
}
.tree-row:hover { background: #e5f3ff; }
.tree-row.selected { background: #cce8ff; border: 1px solid #99d1ff; height: 18px; }
.tree-row .twisty {
    width: 16px; height: 16px; flex: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; color: #6d6d6d;
}
.tree-row .twisty svg { display: block; }
.tree-row img { width: 16px; height: 16px; margin-right: 3px; flex: none; }
.tree-row.bold { font-weight: bold; }

/* -------------------------------------------------------------- log panels */

.log-text {
    font-family: var(--mono-font);
    font-size: 12px;
    white-space: pre-wrap;
    padding: 2px 4px;
    background: #fff;
    height: 100%;
    overflow: auto;
    -webkit-user-select: text;
    user-select: text;
}
.log-text .err  { color: #ff0000; }
.log-text .warn { color: #0000ff; }
.log-text .ok   { color: #008000; }

table.log-grid {
    border-collapse: collapse;
    width: 100%;
    background: #fff;
    font-size: var(--ui-size);
}
table.log-grid th {
    background: var(--face);
    border-right: 1px solid #d0d0d0;
    border-bottom: 1px solid #d0d0d0;
    font-weight: normal;
    text-align: left;
    padding: 2px 4px;
    position: sticky; top: 0;
}
table.log-grid td { padding: 1px 4px; white-space: nowrap; }
table.log-grid tr.error td   { color: #ff0000; }
table.log-grid tr.warning td { color: #0000c0; }
table.log-grid tr.selected td { background: #cce8ff; }

/* --------------------------------------------------------------- statusbar */

#statusbar {
    height: 22px;
    flex: none;
    display: flex;
    align-items: stretch;
    background: var(--face);
    font-size: var(--ui-size);
}
#statusbar .field {
    padding: 0 5px;
    height: 22px;
    line-height: 21px;
    border-left: 1px solid #ffffff;
    border-right: 1px solid #cfcfcf;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: none;
}
#statusbar .field:first-child { border-left: none; }
#statusbar .field.grow { flex: 1; min-width: 0; }
/* the highlight-language field is a real (flat) button in the desktop IDE */
#statusbar .field.button {
    background: linear-gradient(to bottom, #fdfdfd, #f0f0f0);
    border: 1px solid #b8b8b8;
    margin: 1px 0;
    line-height: 18px;
}
#statusbar .field.button:hover { background: #e5f1fb; border-color: #70c0e7; }
#statusbar .flag { display: flex; align-items: center; padding: 0 6px; }

/* --------------------------------------------------- Scintilla-ish editor  */

.cb-editor { position: absolute; inset: 0; }
/* Everything in the editor is sized in em off .CodeMirror's font-size, so
   zooming (Ctrl+wheel) scales the text, the line spacing, the line numbers and
   all three margins together - the way Scintilla zooms on the desktop. */
.CodeMirror {
    height: 100%;
    font-family: var(--mono-font);
    font-size: 13px;
    line-height: 1.16;
    background: #ffffff;
    color: #000000;
}
.CodeMirror-gutters {
    background: var(--face);
    border-right: none;
}
.CodeMirror-linenumber {
    color: #000000;
    padding: 0 0.25em 0 0.4em;
}
.cb-margin-marker { width: 1.25em; background: var(--face); }
.cb-margin-change { width: 0.32em; background: var(--face); }
.CodeMirror-foldgutter { width: 1.25em; background: var(--face); }

/* Scintilla draws the fold points as SC_MARK_BOXMINUS / BOXPLUS: a small
   bordered square with a minus or a plus in it, not a triangle. */
.CodeMirror-foldgutter-open,
.CodeMirror-foldgutter-folded {
    display: flex; align-items: center; justify-content: center;
    height: 100%; cursor: default;
}
.CodeMirror-foldgutter-open:after,
.CodeMirror-foldgutter-folded:after {
    content: '';
    width: 0.75em; height: 0.75em;
    border: 1px solid #808080;
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-position: center;
}
.CodeMirror-foldgutter-open:after {
    background-image: linear-gradient(#404040, #404040);
    background-size: 0.45em 1px;
}
.CodeMirror-foldgutter-folded:after {
    background-image: linear-gradient(#404040, #404040), linear-gradient(#404040, #404040);
    background-size: 0.45em 1px, 1px 0.45em;
}
.CodeMirror-selected        { background: #c0c0c0 !important; }
.CodeMirror-focused .CodeMirror-selected { background: #c0c0c0 !important; }
.CodeMirror-cursor { border-left: 1px solid #000000; }
.cm-matchhighlight { background: #e6e6e6; }
.CodeMirror-matchingbracket { color: #000 !important; background: #ccffcc; font-weight: bold; }

/* Colours taken 1:1 from sdk/resources/lexers/lexer_cpp.xml */
.cm-s-cb .cm-comment      { color: #9898d9; }
.cm-s-cb .cm-cb-docblock  { color: #8080ff; font-weight: bold; }
.cm-s-cb .cm-number       { color: #f000f0; }
.cm-s-cb .cm-keyword      { color: #0000a0; font-weight: bold; }
.cm-s-cb .cm-builtin      { color: #0000a0; font-weight: bold; }
.cm-s-cb .cm-type         { color: #0000a0; font-weight: bold; }
.cm-s-cb .cm-atom         { color: #0000a0; font-weight: bold; }
.cm-s-cb .cm-variable-3   { color: #be00be; font-weight: bold; }
.cm-s-cb .cm-string       { color: #0000ff; }
.cm-s-cb .cm-string-2     { color: #e0a000; }
.cm-s-cb .cm-meta         { color: #00a000; }
.cm-s-cb .cm-operator     { color: #ff0000; }
.cm-s-cb .cm-punctuation  { color: #ff0000; }
.cm-s-cb .cm-variable,
.cm-s-cb .cm-def,
.cm-s-cb .cm-property     { color: #000000; }
.cm-s-cb .cm-bracket      { color: #ff0000; }
.cm-s-cb .cm-error        { color: #000; }

.cb-line-breakpoint  { background: #ffa0a0; }
.cb-line-debug       { background: #a0a0ff; }
.cb-line-error       { background: #ffd0d0; }
.cb-line-warning     { background: #fff0c0; }

/* the compiler's markers in the margin, as Scintilla draws them */
.cb-marker-err, .cb-marker-warn {
    width: 0.85em; height: 0.85em; margin-left: 0.2em;
    display: inline-block; vertical-align: middle;
    border: 1px solid #7d0000;
    background: linear-gradient(to bottom right, #ff5a5a, #c00000);
}
.cb-marker-warn { border-color: #7d6a00; background: linear-gradient(to bottom right, #ffe066, #c0a000); }
.cb-marker-bp        { width: 1.25em; height: 1.25em; }

/* ----------------------------------------------------- start-here HTML page */

/* CB_BODY_BGCOLOUR resolves to the window colour, which is white - the title
   bitmap has a white background and has to blend into it seamlessly. */
.start-here {
    background: #ffffff;
    height: 100%;
    overflow: auto;
    text-align: center;
    font-family: "Times New Roman", serif;
    font-size: 16px;
    -webkit-user-select: text;
    user-select: text;
}
.start-here a { color: #0000ff; text-decoration: underline; }
.start-here img { border: 0; }
.start-here table { margin: 0 auto; border-spacing: 5px; }
.start-here hr { width: 90%; }

/* ------------------------------------------- code completion / call tips */

.cb-complete {
    position: absolute;
    z-index: 980;
    max-height: 220px;
    min-width: 160px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #7a7a7a;
    box-shadow: 2px 2px 4px rgba(0,0,0,.25);
    font-family: var(--mono-font);
    font-size: 12px;
}
.cb-complete .row { padding: 1px 8px 1px 4px; white-space: nowrap; }
.cb-complete .row.selected { background: #cce8ff; }
.cb-complete .row:hover { background: #e5f3ff; }

.cb-calltip {
    position: absolute;
    z-index: 980;
    background: #ffffe1;
    border: 1px solid #7a7a7a;
    padding: 2px 5px;
    font-family: var(--mono-font);
    font-size: 12px;
    white-space: pre;
    box-shadow: 1px 1px 3px rgba(0,0,0,.25);
}

/* the Occurrences highlighting plugin */
.cb-occurrence { background: #d4e7c5; }

/* Settings -> Editor: whitespace display and indentation guides */
.cb-show-ws .CodeMirror-line { background-image: none; }
.cb-show-ws .cm-tab {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='15'><path d='M2 8 H12 M9 5 L12 8 L9 11' stroke='%23c3c3c3' fill='none'/></svg>");
    background-position: left center;
    background-repeat: no-repeat;
}
.cb-indent-guides .CodeMirror-line {
    background-image: repeating-linear-gradient(to right,
        #e6e6e6 0, #e6e6e6 1px, transparent 1px, transparent calc(4ch));
    background-position-x: 0;
}
.CodeMirror-ruler { border-left: 1px solid #c0c0c0; }
.CodeMirror-activeline-background { background: #f4f4ff; }

/* ---------------------------------------------------------- dialog windows */

.cb-dialog-veil {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.06);
    z-index: 900;
    display: flex; align-items: center; justify-content: center;
}
/* corner hint (non-modal, never steals focus) */
.cb-hint {
    position: fixed; right: 14px; bottom: 34px; width: 340px; z-index: 940;
    background: var(--face); border: 1px solid #4d4d4d;
    box-shadow: 3px 3px 12px rgba(0,0,0,.35);
}
.cb-hint-title {
    display: flex; align-items: center; height: 22px; padding: 0 4px 0 6px;
    font-weight: bold;
    background: linear-gradient(to bottom, #ffffff, #f0f0f0);
    border-bottom: 1px solid #d5d5d5;
}
.cb-hint-title span:first-child { flex: 1; }
.cb-hint-x { width: 18px; text-align: center; }
.cb-hint-x:hover { background: #e81123; color: #fff; }
.cb-hint-body { padding: 8px; }
.cb-hint-body kbd {
    font-family: inherit; border: 1px solid #8b8b8b; border-radius: 2px;
    padding: 0 3px; background: #fff;
}
.cb-hint-buttons { padding: 0 8px 8px; text-align: right; }

/* the way out of full screen, where F11 and Escape belong to the IDE */
#fs-exit {
    position: fixed; top: 0; right: 0; z-index: 990;
    display: flex; align-items: center; height: 22px;
    background: var(--face); border: 1px solid #4d4d4d; border-top: none; border-right: none;
    box-shadow: 0 1px 6px rgba(0,0,0,.3);
    opacity: .55;
}
#fs-exit:hover { opacity: 1; }
#fs-exit .fs-exit-text { padding: 0 8px; }
#fs-exit .fs-exit-x {
    width: 30px; height: 100%;
    display: flex; align-items: center; justify-content: center;
}
#fs-exit .fs-exit-x:hover { background: #e81123; color: #fff; }

.cb-window {
    position: absolute;
    background: var(--face);
    border: 1px solid #4d4d4d;
    box-shadow: 3px 3px 12px rgba(0,0,0,.35);
    display: flex; flex-direction: column;
    z-index: 950;
}
.cb-window > .title {
    height: 26px; flex: none;
    display: flex; align-items: center;
    padding-left: 6px;
    background: linear-gradient(to bottom, #ffffff, #f0f0f0);
    border-bottom: 1px solid #d5d5d5;
    cursor: move;
}
.cb-window > .title .t-icon { width: 16px; height: 16px; margin-right: 5px; }
.cb-window > .title .t-text { flex: 1; }
.cb-window > .title .t-btn {
    width: 30px; height: 24px;
    display: flex; align-items: center; justify-content: center;
}
.cb-window > .title .t-btn:hover { background: #d8d8d8; }
.cb-window > .title .t-btn.close:hover { background: #e81123; color: #fff; }
.cb-window > .body { flex: 1; min-height: 0; overflow: auto; padding: 10px; }
.cb-window > .buttons {
    flex: none; padding: 8px; text-align: right;
    border-top: 1px solid #dcdcdc;
}

button.cb {
    font-family: var(--ui-font); font-size: var(--ui-size);
    min-width: 75px; height: 23px;
    margin-left: 6px;
    background: linear-gradient(to bottom, #f2f2f2, #e6e6e6);
    border: 1px solid #adadad;
}
button.cb:hover  { background: linear-gradient(to bottom, #eaf6fd, #d9f0fc); border-color: #3c7fb1; }
button.cb:active { background: #c4e5f6; }
input.cb, select.cb, textarea.cb {
    font-family: var(--ui-font); font-size: var(--ui-size);
    border: 1px solid #7a7a7a; background: #fff; padding: 2px 3px;
}

/* ------------------------------------------------------- program console    */

#console-window { width: 640px; height: 400px; }
#console-window .body { padding: 0; background: #000; overflow: hidden; }
.console-screen {
    width: 100%; height: 100%;
    background: #000000;
    color: #c0c0c0;
    font-family: "Consolas", "Lucida Console", var(--mono-font);
    font-size: 14px;
    line-height: 16px;
    padding: 2px 4px;
    white-space: pre-wrap;
    word-break: break-all;
    overflow-y: auto;
    -webkit-user-select: text;
    user-select: text;
    outline: none;
}
.console-screen .caret {
    display: inline-block;
    width: 8px; height: 14px;
    background: #c0c0c0;
    vertical-align: text-bottom;
    animation: blink 1s steps(2, start) infinite;
}
@keyframes blink { to { visibility: hidden; } }

/* --------------------------------------------------------------- utilities */

.hidden { display: none !important; }
.grow { flex: 1; }

/* ================================================================ dark mode

   Not something the desktop IDE has - it is a web edition extra - so it is
   built as an overlay: every rule below is scoped to body.cb-dark, and the
   light theme above is untouched.  The structure, metrics and behaviour stay
   identical; only the palette changes.

   The switch animates: .theme-anim is on the body for the length of the
   crossfade, and it is the only time colour transitions are enabled, so
   nothing else in the IDE pays for them. */

body.cb-dark {
    --face:            #2d2d30;
    --face-light:      #3f3f46;
    --btn-shadow:      #1b1b1c;
    --btn-hilight:     #4a4a51;
    --border:          #3f3f46;
    --caption-a1:      #37506b;
    --caption-a2:      #2b3d51;
    --caption-i1:      #33333a;
    --caption-i2:      #2b2b30;
    --caption-text:    #e8e8e8;
    --caption-itext:   #9a9aa4;
    --menu-hi:         #094771;
    --menu-hi-border:  #0a5c92;
    --sash:            #2d2d30;
    color-scheme: dark;
}

body.cb-dark { color: #dcdcdc; }
body.cb-dark #statusbar,
body.cb-dark .cb-popup .row .accel { color: #dcdcdc; }

/* white surfaces: editors, lists, logs, panels */
body.cb-dark .cb-popup,
body.cb-dark .nb-pages,
body.cb-dark .cb-tree,
body.cb-dark .log-text,
body.cb-dark table.log-grid,
body.cb-dark .CodeMirror,
body.cb-dark .start-here,
body.cb-dark .cb-complete,
body.cb-dark input.cb,
body.cb-dark select.cb,
body.cb-dark textarea.cb { background: #1e1e1e; color: #dcdcdc; }

body.cb-dark input.cb,
body.cb-dark select.cb,
body.cb-dark textarea.cb { border-color: #3f3f46; }
body.cb-dark .cb-calltip { background: #2b2b1e; color: #dcdcdc; border-color: #5a5a3a; }

body.cb-dark .cb-popup { border-color: #3f3f46; }
body.cb-dark .cb-popup .row .sep { background: #3f3f46; }
body.cb-dark .menubar .item:hover,
body.cb-dark .cb-popup .row.hover { background: var(--menu-hi); color: #ffffff; }

/* notebook tabs */
body.cb-dark .nb-tabs { border-bottom-color: #3f3f46; }
body.cb-dark .nb-tab.active {
    background: linear-gradient(to bottom, #3f3f46 0%, #1e1e1e 100%);
    border-color: #55555d;
}
body.cb-dark .nb-tab:not(.active):hover { background: rgba(255,255,255,.06); }
body.cb-dark .nb-tab .tab-close:hover { background: #4a4a51; }
body.cb-dark .nb-tab .tab-close svg path { stroke: #dcdcdc; }
body.cb-dark .cb-tab-btn {
    border-color: #55555d;
    background: linear-gradient(to bottom, #3f3f46 0%, #2d2d30 100%);
}
body.cb-dark .cb-tab-btn:hover { background: #4a4a51; }

/* trees and grids */
body.cb-dark .tree-row:hover { background: #2a2d2e; }
body.cb-dark .tree-row.selected { background: #094771; color: #ffffff; }
body.cb-dark table.log-grid th {
    background: #2d2d30; color: #dcdcdc;
    border-right-color: #3f3f46; border-bottom-color: #3f3f46;
}
body.cb-dark table.log-grid tr:hover td { background: #2a2d2e; }
body.cb-dark table.log-grid tr.selected td { background: #094771; color: #ffffff; }
body.cb-dark table.log-grid tr.error td { color: #f48771; }
body.cb-dark table.log-grid tr.warning td { color: #cca700; }
body.cb-dark .log-text .err { color: #f48771; }
body.cb-dark .log-text .warn { color: #569cd6; }

/* windows, dialogs, hints */
body.cb-dark .cb-window { border-color: #101010; }
body.cb-dark .cb-window > .title,
body.cb-dark .cb-hint-title {
    background: linear-gradient(to bottom, #3f3f46, #2d2d30);
    border-bottom-color: #4a4a51;
    color: #e8e8e8;
}
body.cb-dark .cb-window > .buttons { border-top-color: #3f3f46; }
body.cb-dark .cb-hint { border-color: #101010; }
body.cb-dark .cb-hint-body kbd { background: #1e1e1e; border-color: #55555d; }
body.cb-dark .cb-dialog-veil { background: rgba(0,0,0,.35); }

/* toolbars and panes */
body.cb-dark .toolbar { border-bottom-color: #3f3f46; }
body.cb-dark .tb-btn:hover { background: #3f3f46; border-color: #55555d; }
body.cb-dark .tb-sep { background: #3f3f46; }
body.cb-dark .pane-caption {
    background: linear-gradient(to bottom, #37506b, #2b3d51);
    color: #e8e8e8;
}

/* the editor */
body.cb-dark .CodeMirror-gutters { background: #252526; border-right-color: #333; }
body.cb-dark .CodeMirror-linenumber { color: #858585; }
body.cb-dark .cb-margin-marker,
body.cb-dark .cb-margin-change,
body.cb-dark .CodeMirror-foldgutter { background: #252526; }
body.cb-dark .CodeMirror-cursor { border-left-color: #dcdcdc; }
body.cb-dark .CodeMirror-selected,
body.cb-dark .CodeMirror-focused .CodeMirror-selected { background: #264f78 !important; }
body.cb-dark .CodeMirror-matchingbracket { color: #ffffff !important; background: #0b5f2b; }
body.cb-dark .cm-matchhighlight { background: #33383d; }
body.cb-dark .cb-occurrence { background: #365038; }
body.cb-dark .CodeMirror-activeline-background { background: #232333; }
body.cb-dark .CodeMirror-ruler { border-left-color: #404040; }
body.cb-dark .CodeMirror-foldgutter-open:after,
body.cb-dark .CodeMirror-foldgutter-folded:after {
    border-color: #6e6e6e; background-color: #252526;
}
body.cb-dark .CodeMirror-foldgutter-open:after {
    background-image: linear-gradient(#d0d0d0, #d0d0d0);
}
body.cb-dark .CodeMirror-foldgutter-folded:after {
    background-image: linear-gradient(#d0d0d0, #d0d0d0), linear-gradient(#d0d0d0, #d0d0d0);
}

/* the same syntax roles as lexer_cpp.xml, lifted for a dark background */
body.cb-dark .cm-s-cb .cm-comment      { color: #7f9fd4; }
body.cb-dark .cm-s-cb .cm-cb-docblock  { color: #93a9ff; }
body.cb-dark .cm-s-cb .cm-number       { color: #ff79e1; }
body.cb-dark .cm-s-cb .cm-keyword,
body.cb-dark .cm-s-cb .cm-builtin,
body.cb-dark .cm-s-cb .cm-type,
body.cb-dark .cm-s-cb .cm-atom         { color: #6aa9ff; }
body.cb-dark .cm-s-cb .cm-variable-3   { color: #e77ce7; }
body.cb-dark .cm-s-cb .cm-string       { color: #7ec4ff; }
body.cb-dark .cm-s-cb .cm-string-2     { color: #e0a000; }
body.cb-dark .cm-s-cb .cm-meta         { color: #4ec94e; }
body.cb-dark .cm-s-cb .cm-operator,
body.cb-dark .cm-s-cb .cm-punctuation,
body.cb-dark .cm-s-cb .cm-bracket      { color: #ff6b6b; }
body.cb-dark .cm-s-cb .cm-variable,
body.cb-dark .cm-s-cb .cm-def,
body.cb-dark .cm-s-cb .cm-property,
body.cb-dark .cm-s-cb .cm-error        { color: #dcdcdc; }

body.cb-dark .cb-line-error   { background: #4a2222; }
body.cb-dark .cb-line-warning { background: #4a4022; }
body.cb-dark .cb-line-debug   { background: #2b2b6b; }
body.cb-dark .cb-line-breakpoint { background: #5a2626; }

/* the start page is an HTML page of its own */
body.cb-dark .start-here a { color: #6aa9ff; }
body.cb-dark .start-here hr { border-color: #3f3f46; }

/* the toolbar's own toggle */
.tb-theme { position: relative; }
.tb-theme svg { display: block; }
.tb-theme .sun, .tb-theme .moon {
    position: absolute; inset: 3px;
    transition: transform .45s cubic-bezier(.4,0,.2,1), opacity .35s ease;
}
.tb-theme .moon { opacity: 0; transform: rotate(-90deg) scale(.4); }
body.cb-dark .tb-theme .sun { opacity: 0; transform: rotate(90deg) scale(.4); }
body.cb-dark .tb-theme .moon { opacity: 1; transform: rotate(0) scale(1); }

/* only while switching, so nothing else in the IDE pays for transitions */
body.theme-anim,
body.theme-anim * {
    transition: background-color .32s ease, color .32s ease,
                border-color .32s ease, fill .32s ease !important;
}

/* the sweep that runs across the IDE as the theme flips */
#theme-sweep {
    position: fixed; inset: 0; z-index: 9999; pointer-events: none;
    background: radial-gradient(circle at var(--sweep-x, 50%) var(--sweep-y, 0%),
                rgba(120,170,255,.28), rgba(120,170,255,0) 60%);
    opacity: 0;
    animation: theme-sweep .55s ease-out;
}
@keyframes theme-sweep {
    0%   { opacity: 0; transform: scale(.2); }
    35%  { opacity: 1; }
    100% { opacity: 0; transform: scale(1.6); }
}

/* --- dark mode, the remaining light surfaces ------------------------------ */

/* toolbar fields and the target dropdown */
body.cb-dark .tb-text,
body.cb-dark .tb-choice {
    background: #1e1e1e; color: #dcdcdc; border-color: #3f3f46;
}
body.cb-dark .tb-btn:hover:not(.disabled) { background: #3e4d5c; border-color: #4a7ba7; }
body.cb-dark .tb-btn:active:not(.disabled) { background: #2f4356; border-color: #4a7ba7; }
body.cb-dark .tb-btn.disabled img { opacity: .3; }
body.cb-dark .tb-sep { background: #3f3f46; border-right-color: #4a4a51; }
/* the icon art is drawn for a light background: lift it slightly so it does
   not sink into the dark toolbar */
body.cb-dark .tb-btn img,
body.cb-dark .nb-tab .tab-icon,
body.cb-dark .cb-tree img,
body.cb-dark .cb-popup .row .gutter img { filter: brightness(1.12) saturate(1.05); }

/* status bar */
body.cb-dark #statusbar .field {
    border-left-color: #3f3f46; border-right-color: #232326;
}
body.cb-dark #statusbar .field.button {
    background: linear-gradient(to bottom, #3f3f46, #2d2d30);
    border-color: #4a4a51;
}
body.cb-dark #statusbar .field.button:hover { background: #3e4d5c; border-color: #4a7ba7; }

/* dialog buttons */
body.cb-dark button.cb,
body.cb-dark .cb-window > .buttons button {
    background: linear-gradient(to bottom, #3f3f46, #33333a);
    border: 1px solid #55555d; color: #e8e8e8;
}
body.cb-dark button.cb:hover { background: #45566a; border-color: #4a7ba7; }
body.cb-dark button.cb:disabled { color: #77777f; background: #313136; }

/* start page: the title bitmap has a white background baked into it, so in
   dark mode it sits on a plaque instead of clashing with the page */
body.cb-dark .start-here img[src*="title_"] {
    background: #ffffff;
    padding: 10px 14px;
    border-radius: 6px;
    box-shadow: 0 2px 14px rgba(0,0,0,.5);
}
body.cb-dark .start-here hr,
body.cb-dark .start-here table td { border-color: #3f3f46; }

/* scrollbars follow the theme */
body.cb-dark ::-webkit-scrollbar { width: 14px; height: 14px; }
body.cb-dark ::-webkit-scrollbar-track { background: #1e1e1e; }
body.cb-dark ::-webkit-scrollbar-thumb { background: #424248; border: 3px solid #1e1e1e; border-radius: 7px; }
body.cb-dark ::-webkit-scrollbar-thumb:hover { background: #5a5a62; }

/* the console window keeps its black screen, but the frame follows */
body.cb-dark #console-window .cb-window { border-color: #101010; }

/* the start page is the real Code::Blocks HTML, which colours its links with
   <font color="#0000ff"> - unreadable on a dark page */
body.cb-dark .start-here font[color] { color: #6aa9ff !important; }
body.cb-dark .start-here b { color: #e8e8e8; }

/* ================================================== VNOI pane (dev branch) */

.vnoi-header {
    display: flex; align-items: center; gap: 6px;
    padding: 3px 5px; flex: none;
    border-bottom: 1px solid var(--border);
    background: var(--face);
}
.vnoi-who { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vnoi-dim { color: #6d6d6d; }
body.cb-dark .vnoi-dim { color: #9a9aa4; }
.vnoi-btn { padding: 1px 6px; }

.vnoi-tab { height: 100%; display: flex; flex-direction: column; }
.vnoi-row { display: flex; align-items: center; gap: 4px; padding: 4px; flex: none; }
.vnoi-list { flex: 1; min-height: 0; overflow: auto; background: #ffffff; }
body.cb-dark .vnoi-list { background: #1e1e1e; }

.vnoi-section {
    padding: 3px 5px; font-weight: bold;
    background: var(--face); border-bottom: 1px solid var(--border);
    position: sticky; top: 0;
}
.vnoi-item { padding: 3px 6px; border-bottom: 1px solid #ececec; }
body.cb-dark .vnoi-item { border-bottom-color: #2d2d30; }
.vnoi-item:hover { background: #e5f3ff; }
body.cb-dark .vnoi-item:hover { background: #2a2d2e; }
.vnoi-item-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vnoi-ac { color: #1f8a3d; font-weight: bold; }
.vnoi-wa { color: #c00000; font-weight: bold; }
body.cb-dark .vnoi-ac { color: #4ec94e; }
body.cb-dark .vnoi-wa { color: #f48771; }

/* a problem statement, shown as an editor page */
.vnoi-statement { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; }
body.cb-dark .vnoi-statement { background: #1e1e1e; }
.vnoi-statement-head {
    flex: none; padding: 8px 12px; border-bottom: 1px solid var(--border);
    background: var(--face);
}
.vnoi-statement-head h2 { margin: 0 0 2px; font-size: 16px; }
.vnoi-statement-body {
    flex: 1; min-height: 0; overflow: auto; padding: 12px 16px;
    font-family: var(--ui-font); font-size: 13px; line-height: 1.5;
}
.vnoi-statement-body pre {
    background: #f4f4f4; border: 1px solid #ddd; padding: 6px 8px; overflow-x: auto;
    font-family: var(--mono-font);
}
body.cb-dark .vnoi-statement-body pre { background: #252526; border-color: #3f3f46; }
.vnoi-statement-body img { max-width: 100%; }
.vnoi-statement-body table { border-collapse: collapse; }
.vnoi-statement-body table td, .vnoi-statement-body table th {
    border: 1px solid #c8c8c8; padding: 3px 6px;
}
body.cb-dark .vnoi-statement-body table td,
body.cb-dark .vnoi-statement-body table th { border-color: #3f3f46; }

/* the contest this account is inside: green, and pinned to the top */
.vnoi-item.vnoi-current {
    background: #e8f7ea;
    border-left: 3px solid #1f8a3d;
}
.vnoi-item.vnoi-current .vnoi-item-title { color: #1f6b32; font-weight: bold; }
.vnoi-item.vnoi-current:hover { background: #dcf2e0; }
body.cb-dark .vnoi-item.vnoi-current { background: #16301c; border-left-color: #4ec94e; }
body.cb-dark .vnoi-item.vnoi-current .vnoi-item-title { color: #7fe08a; }
body.cb-dark .vnoi-item.vnoi-current:hover { background: #1c3d23; }