/* Keep every override out of the React interface. Light mode retains Gogs' CSS. */
html.xturtle-legacy {
  --xt-bg: #ffffff;
  --xt-panel: #ffffff;
  --xt-raised: #f5f5f5;
  --xt-fg: #222222;
  --xt-muted: #626262;
  --xt-border: #c9c9c9;
  --xt-focus: #0069b6;
  --xt-control-border: #767676;
}

html.xturtle-legacy .xturtle-theme-control {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-right: 1em;
  color: var(--xt-fg);
  font-size: 12px;
  white-space: nowrap;
  vertical-align: middle;
}

html.xturtle-legacy .xturtle-theme-control select {
  min-height: 32px;
  max-width: 180px;
  padding: 0.35em 0.5em;
  border: 1px solid var(--xt-control-border);
  border-radius: 4px;
  background: var(--xt-panel);
  color: var(--xt-fg);
  font: inherit;
  cursor: pointer;
}

html.xturtle-legacy .xturtle-theme-control select:focus-visible {
  outline: 2px solid var(--xt-focus);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  /* The old layout has a 1020px minimum width; keep this control reachable. */
  html.xturtle-legacy .xturtle-theme-control {
    position: fixed;
    bottom: 12px;
    left: 12px;
    z-index: 950;
    margin: 0;
    padding: 8px;
    border: 1px solid var(--xt-border);
    border-radius: 6px;
    background: var(--xt-panel);
    box-shadow: 0 2px 10px rgb(0 0 0 / 18%);
  }
}

html.xturtle-legacy.dark {
  --xt-bg: #0a0a0a;
  --xt-panel: #171717;
  --xt-raised: #242424;
  --xt-hover: #303030;
  --xt-fg: #ededed;
  --xt-muted: #aaaaaa;
  --xt-border: #454545;
  --xt-link: #79b8ff;
  --xt-focus: #9bcbff;
  --xt-control-border: #777777;
  --xt-add: #153523;
  --xt-del: #482027;
  --xt-mark: #49401c;
  background: var(--xt-bg);
  color: var(--xt-fg);
  scrollbar-color: #606060 var(--xt-bg);
}

html.xturtle-legacy.dark body,
html.xturtle-legacy.dark body:not(.full-width),
html.xturtle-legacy.dark .full.height {
  background-color: var(--xt-bg) !important;
  color: var(--xt-fg);
}

html.xturtle-legacy.dark a {
  color: var(--xt-link);
}

html.xturtle-legacy.dark a:hover {
  color: #b3d7ff;
}

html.xturtle-legacy.dark :is(h1, h2, h3, h4, h5, h6, .ui.header, .ui.list > .item > .content > .header) {
  color: var(--xt-fg);
}

html.xturtle-legacy.dark :is(.following.bar.light, footer, .repository .header-wrapper) {
  border-color: var(--xt-border) !important;
  background: var(--xt-bg) !important;
  color: var(--xt-fg);
  box-shadow: none;
}

html.xturtle-legacy.dark :is(.ui.menu, .ui.segment, .ui.segments, .ui.card, .ui.cards > .card, .ui.modal, .ui.popup) {
  border-color: var(--xt-border) !important;
  background-color: var(--xt-panel) !important;
  color: var(--xt-fg);
}

html.xturtle-legacy.dark :is(.ui.secondary.menu, .ui.text.menu) {
  background: transparent !important;
}

html.xturtle-legacy.dark :is(.ui.menu .item, .ui.secondary.menu .item, .ui.dropdown .text, .ui.checkbox label, .ui.form .field > label, .ui.form .inline.fields > label, .ui.form .inline.field > label, .ui.list .item, .ui.list .list > .item) {
  color: var(--xt-fg) !important;
}

html.xturtle-legacy.dark :is(.ui.menu .item, .ui.vertical.menu .item, .ui.vertical.menu .menu .item)::before {
  background: var(--xt-border);
}

html.xturtle-legacy.dark .ui.menu .header.item,
html.xturtle-legacy.dark .ui.attached.header,
html.xturtle-legacy.dark .ui.block.header {
  border-color: var(--xt-border) !important;
  background: var(--xt-raised) !important;
  color: var(--xt-fg) !important;
}

html.xturtle-legacy.dark :is(.ui.menu .active.item, .ui.menu .item:hover, .ui.secondary.menu .active.item, .ui.dropdown .menu > .item:hover, .ui.dropdown .menu > .active.item, .ui.dropdown .menu > .selected.item, .overflow.menu .items .item:hover) {
  background-color: var(--xt-hover) !important;
  color: var(--xt-fg) !important;
}

html.xturtle-legacy.dark :is(.ui.dropdown .menu, .ui.selection.dropdown, .overflow.menu .items, .ui.search > .results, .ui.search > .results .result) {
  border-color: var(--xt-border) !important;
  background: var(--xt-panel) !important;
  color: var(--xt-fg) !important;
}

html.xturtle-legacy.dark :is(.ui.dropdown .menu > .item, .ui.dropdown .menu > .header, .ui.search > .results .result .title, .overflow.menu .items .item) {
  border-color: var(--xt-border) !important;
  color: var(--xt-fg) !important;
}

html.xturtle-legacy.dark :is(.ui.divider, .ui.menu, .ui.segment, .ui.header, .ui.list .item, .ui.repository.list .item, .ui.user.list .item, footer, .markdown h1, .markdown h2, .markdown hr) {
  border-color: var(--xt-border) !important;
}

html.xturtle-legacy.dark :is(.ui.header .sub.header, .ui.list .item .description, .ui.items > .item .meta, .ui.items > .item .description, .ui.repository.list .metas, .ui.repository.list .time, .time-since, .text.grey, .text.light.grey, .ui .text.grey, .ui .text.grey a, .ui .text.light.grey, .repository .metas, .repository .metas a, .ui.comments .comment .metadata) {
  color: var(--xt-muted) !important;
}

html.xturtle-legacy.dark :is(.ui .text.black, .ui.user.list .description a, .repository .repo-header .repo-title, .repository .repo-description, .ui.comments .comment .author, .ui.comments .comment .text) {
  color: var(--xt-fg) !important;
}

html.xturtle-legacy.dark :is(.ui.input input, .ui.form textarea, .ui.form select, textarea, input:where(:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="color"])), select, .following.bar .searchbox) {
  border-color: var(--xt-control-border) !important;
  background-color: var(--xt-panel) !important;
  color: var(--xt-fg) !important;
  caret-color: var(--xt-fg);
}

html.xturtle-legacy.dark :is(input, textarea)::placeholder {
  color: var(--xt-muted) !important;
  opacity: 1;
}

html.xturtle-legacy.dark :is(.ui.form input, .ui.form textarea, .ui.selection.dropdown):focus {
  border-color: var(--xt-focus) !important;
}

html.xturtle-legacy.dark :is(.ui.checkbox label::before, .ui.checkbox input:checked ~ label::before) {
  border-color: var(--xt-muted) !important;
  background: var(--xt-panel) !important;
}

html.xturtle-legacy.dark .ui.form .field.error :is(input, textarea, select) {
  border-color: #b86979 !important;
  background-color: #3d2028 !important;
  color: #ffe0e6 !important;
}

html.xturtle-legacy.dark .ui.form .field.error > label {
  color: #ffb4c0 !important;
}

html.xturtle-legacy.dark .ui.checkbox input:checked ~ label::after {
  color: var(--xt-fg) !important;
}

html.xturtle-legacy.dark .ui.button:not(.primary):not(.secondary):not(.positive):not(.negative):not(.red):not(.orange):not(.yellow):not(.olive):not(.green):not(.teal):not(.blue):not(.violet):not(.purple):not(.pink):not(.brown):not(.black) {
  border-color: var(--xt-border) !important;
  background: var(--xt-raised) !important;
  color: var(--xt-fg) !important;
  box-shadow: 0 0 0 1px var(--xt-border) inset !important;
}

html.xturtle-legacy.dark :is(.ui.primary.button, .ui.blue.button, .ui.blue.label) {
  background: #1b639e !important;
  color: #ffffff !important;
}

html.xturtle-legacy.dark :is(.ui.positive.button, .ui.green.button, .ui.green.label) {
  background: #246b3c !important;
  color: #ffffff !important;
}

html.xturtle-legacy.dark :is(.ui.negative.button, .ui.red.button, .ui.red.label) {
  background: #a13446 !important;
  color: #ffffff !important;
}

html.xturtle-legacy.dark :is(.ui.yellow.button, .ui.yellow.label, .ui.orange.button, .ui.orange.label, .ui.olive.button, .ui.olive.label) {
  background: #5b4d20 !important;
  color: #fff2bf !important;
}

html.xturtle-legacy.dark .ui.basic.button {
  color: var(--xt-fg) !important;
  box-shadow: 0 0 0 1px var(--xt-border) inset !important;
}

html.xturtle-legacy.dark .ui.label:not(.red):not(.orange):not(.yellow):not(.olive):not(.green):not(.teal):not(.blue):not(.violet):not(.purple):not(.pink):not(.brown):not(.black) {
  border-color: var(--xt-border) !important;
  background-color: var(--xt-raised) !important;
  color: var(--xt-fg) !important;
}

html.xturtle-legacy.dark :is(.ui.message, .ui.modal > .header, .ui.modal > .content, .ui.modal > .actions),
html.xturtle-legacy.dark .ui.popup::before,
html.xturtle-legacy.dark .ui.pointing.menu .active.item::after {
  border-color: var(--xt-border) !important;
  background: var(--xt-panel) !important;
  color: var(--xt-fg) !important;
}

html.xturtle-legacy.dark .ui.message .header { color: inherit !important; }

html.xturtle-legacy.dark .ui.message {
  box-shadow: 0 0 0 1px var(--xt-border) inset;
}

html.xturtle-legacy.dark :is(.ui.warning.message, .ui.warning.segment, .ui.warning.header) {
  border-color: #9b7c30 !important;
  background: #352b17 !important;
  color: #ffe2a3 !important;
}

html.xturtle-legacy.dark :is(.ui.negative.message, .ui.error.message, .ui.error.header) {
  border-color: #a4525e !important;
  background: #3d2028 !important;
  color: #ffc0c8 !important;
}

html.xturtle-legacy.dark :is(.ui.positive.message, .ui.success.message) {
  border-color: #417b50 !important;
  background: #183320 !important;
  color: #ace7b9 !important;
}

html.xturtle-legacy.dark :is(.ui.info.message, .ui.info.segment.top) {
  border-color: #426b94 !important;
  background: #192d42 !important;
  color: #b9dcff !important;
}

html.xturtle-legacy.dark .ui.table,
html.xturtle-legacy.dark .markdown table {
  border-color: var(--xt-border) !important;
  background: var(--xt-panel) !important;
  color: var(--xt-fg) !important;
}

html.xturtle-legacy.dark :is(.ui.table thead th, .ui.table tfoot th, .ui.table tfoot td, .markdown table th) {
  border-color: var(--xt-border) !important;
  background-color: var(--xt-raised) !important;
  color: var(--xt-fg) !important;
}

html.xturtle-legacy.dark :is(.ui.table tbody td, .markdown table td, .markdown table th) {
  border-color: var(--xt-border) !important;
  color: var(--xt-fg);
}

html.xturtle-legacy.dark :is(.ui.striped.table > tr:nth-child(2n), .ui.striped.table tbody tr:nth-child(2n), .markdown table tr:nth-child(2n)) {
  background-color: var(--xt-raised) !important;
}

html.xturtle-legacy.dark :is(.ui.selectable.table tbody tr:hover, .ui.table tbody tr.active) {
  background-color: var(--xt-hover) !important;
  color: var(--xt-fg) !important;
}

html.xturtle-legacy.dark .ui.table :is(td.positive, tr.positive > td) {
  background: var(--xt-add) !important;
  color: #d9f5df !important;
}

html.xturtle-legacy.dark .ui.table :is(td.negative, td.error, tr.negative > td, tr.error > td) {
  background: var(--xt-del) !important;
  color: #ffe0e6 !important;
}

html.xturtle-legacy.dark .ui.table :is(td.warning, tr.warning > td) {
  background: var(--xt-mark) !important;
  color: #fff0b7 !important;
}

html.xturtle-legacy.dark :is(.dashboard .list li.private, .repository .file-header, .repository .diff-file-box .header, .repository .comment .content > .header, .repository .comment .content > .bottom.segment, .repository .ui .info.segment.top, .admin.config pre, .repository .metas .menu, .dashboard .list .header) {
  border-color: var(--xt-border) !important;
  background-color: var(--xt-raised) !important;
  color: var(--xt-fg) !important;
}

html.xturtle-legacy.dark :is(.dashboard .list li, .dashboard .news, .repository .comment .content, .repository .file-view, .repository .file-content, .repository .file-code, .repository .code-view, .repository .plain-text, .repository .diff-detail-box, .repository .repo-header, .repository .commits .commit-list) {
  border-color: var(--xt-border) !important;
  background-color: var(--xt-panel);
  color: var(--xt-fg);
}

html.xturtle-legacy.dark .repository .comment .content > .header::after,
html.xturtle-legacy.dark .repository .comment .content > .header::before {
  border-right-color: var(--xt-raised) !important;
}

html.xturtle-legacy.dark .markdown {
  background-color: var(--xt-panel) !important;
  color: var(--xt-fg) !important;
}

html.xturtle-legacy.dark :is(.markdown table tr, .markdown .highlight, .markdown pre, code.raw, pre.raw, .repository .code-view .lines-code pre, .repository .code-view .lines-code ol, .repository .code-view .hljs, .repository .nb-input pre, .repository .nb-raw-cell, .CodeMirror, .editor-toolbar, .editor-preview, .editor-preview-side, .dropzone) {
  border-color: var(--xt-border) !important;
  background: var(--xt-panel) !important;
  color: var(--xt-fg) !important;
}

html.xturtle-legacy.dark :is(.markdown code, .markdown tt, .markdown kbd, .dashboard .news code) {
  border-color: var(--xt-border) !important;
  background-color: var(--xt-raised) !important;
  color: var(--xt-fg);
}

html.xturtle-legacy.dark .markdown pre code,
html.xturtle-legacy.dark .code-view pre code {
  background: transparent !important;
  color: inherit;
}

html.xturtle-legacy.dark :is(.markdown blockquote, .markdown .anchor .octicon, .editor-toolbar a, .CodeMirror-gutters, .CodeMirror-linenumber, .repository .code-view .lines-num, .repository .diff-file-box .file-body.file-code .lines-num) {
  border-color: var(--xt-border) !important;
  background-color: var(--xt-raised) !important;
  color: var(--xt-muted) !important;
}

html.xturtle-legacy.dark :is(.CodeMirror-cursor, .CodeMirror div.CodeMirror-secondarycursor) {
  border-left-color: var(--xt-fg) !important;
}

html.xturtle-legacy.dark :is(.CodeMirror-selected, .CodeMirror-focused .CodeMirror-selected) {
  background: #29456a !important;
}

html.xturtle-legacy.dark :is(.hljs-comment, .hljs-quote, .cm-comment) { color: #a0a9b5 !important; }
html.xturtle-legacy.dark :is(.hljs-keyword, .hljs-selector-tag, .hljs-literal, .cm-keyword, .cm-atom) { color: #ff9ba9 !important; }
html.xturtle-legacy.dark :is(.hljs-string, .hljs-regexp, .cm-string, .cm-string-2) { color: #a8d5ff !important; }
html.xturtle-legacy.dark :is(.hljs-number, .hljs-built_in, .hljs-type, .cm-number, .cm-builtin) { color: #b4b0ff !important; }
html.xturtle-legacy.dark :is(.hljs-title, .hljs-attr, .cm-def, .cm-variable) { color: #dbbdff !important; }
html.xturtle-legacy.dark :is(.hljs-tag, .hljs-name, .cm-tag, .cm-attribute) { color: #a9ddb1 !important; }

html.xturtle-legacy.dark .repository .diff-file-box .code-diff tbody tr.tag-code td {
  border-color: var(--xt-border) !important;
  background-color: var(--xt-raised) !important;
  color: var(--xt-muted) !important;
}

html.xturtle-legacy.dark .repository .diff-file-box .code-diff tbody tr.add-code td,
html.xturtle-legacy.dark .repository .diff-file-box .code-diff tbody tr.del-code td.add-code,
html.xturtle-legacy.dark .repository .diff-file-box .code-diff tbody tr.del-code td.add-code pre {
  border-color: #2e6843 !important;
  background-color: var(--xt-add) !important;
  color: #d9f5df !important;
}

html.xturtle-legacy.dark .repository .diff-file-box .code-diff tbody tr.del-code td {
  border-color: #853b49 !important;
  background-color: var(--xt-del) !important;
  color: #ffe0e6 !important;
}

html.xturtle-legacy.dark .repository .diff-file-box .code-diff tbody tr td.active,
html.xturtle-legacy.dark .repository .code-view .lines-code li.active {
  background-color: var(--xt-mark) !important;
  color: #fff0b7 !important;
}

html.xturtle-legacy.dark .repository .code-diff .removed-code {
  background-color: #82354a !important;
  color: #ffffff !important;
}

html.xturtle-legacy.dark .repository .code-diff .added-code {
  background-color: #28623b !important;
  color: #ffffff !important;
}

html.xturtle-legacy.dark :is(.ui .text.red, .ui .text.red a) { color: #ff9ba9 !important; }
html.xturtle-legacy.dark :is(.ui .text.green, .ui .text.green a) { color: #91d89c !important; }
html.xturtle-legacy.dark :is(.ui .text.blue, .ui .text.blue a) { color: var(--xt-link) !important; }
html.xturtle-legacy.dark :is(.ui .text.purple, .ui .text.purple a) { color: #d1b0ff !important; }

html.xturtle-legacy.dark .ui.dimmer { background-color: rgb(0 0 0 / 72%); }
html.xturtle-legacy.dark :focus-visible { outline-color: var(--xt-focus); }
html.xturtle-legacy.dark ::selection { background: #31547c; color: #ffffff; }