/* SW tools -- Kleid fuer CyberChef (GCHQ, Apache-2.0).
   Aenderung im Sinne von Apache-2.0 Abschnitt 4(b): diese Datei aendert das
   Aussehen, nicht den Code (README.md in diesem Ordner).

   CyberChef fuehrt alle Farben als Variablen je Theme (:root.classic,
   :root.dark, ...; src/web/stylesheets/themes/). Die Werte hier stehen mit
   !important auf :root und gelten damit fuer jedes Theme -- die Auswahl in
   den Optionen aendert am Aussehen nichts mehr, CyberChef ist immer dunkel. */

:root {
  --primary-font-family: var(--swk-font) !important;
  --primary-font-colour: var(--swk-text) !important;
  --primary-font-size: 14px !important;
  --fixed-width-font-family: var(--swk-font-mono) !important;
  --subtext-font-colour: var(--swk-text-faint) !important;

  --primary-background-colour: var(--swk-bg) !important;
  --secondary-background-colour: var(--swk-surface) !important;
  --primary-border-colour: var(--swk-border) !important;
  --secondary-border-colour: var(--swk-border-dim) !important;

  --title-colour: var(--swk-text) !important;
  --title-background-colour: var(--swk-surface) !important;

  --banner-font-colour: var(--swk-text-muted) !important;
  --banner-bg-colour: var(--swk-surface) !important;
  --banner-url-colour: var(--swk-text) !important;

  --category-list-font-colour: var(--swk-text) !important;

  --loader-background-colour: var(--swk-border) !important;
  --loader-outer-colour: var(--swk-accent) !important;
  --loader-middle-colour: var(--swk-text-muted) !important;
  --loader-inner-colour: var(--swk-accent-bright) !important;

  --op-list-operation-font-colour: var(--swk-text-muted) !important;
  --op-list-operation-bg-colour: var(--swk-card) !important;
  --op-list-operation-border-colour: var(--swk-border) !important;

  --rec-list-operation-font-colour: var(--swk-text) !important;
  --rec-list-operation-bg-colour: var(--swk-card) !important;
  --rec-list-operation-border-colour: var(--swk-border) !important;

  --selected-operation-font-color: var(--swk-text) !important;
  --selected-operation-bg-colour: var(--swk-card-hover) !important;
  --selected-operation-border-colour: var(--swk-border) !important;

  --breakpoint-font-colour: var(--swk-text) !important;
  --breakpoint-bg-colour: var(--swk-accent-dim) !important;
  --breakpoint-border-colour: var(--swk-accent) !important;

  --disabled-font-colour: var(--swk-text-faint) !important;
  --disabled-bg-colour: var(--swk-surface) !important;
  --disabled-border-colour: var(--swk-border) !important;

  --fc-operation-font-colour: var(--swk-text) !important;
  --fc-operation-bg-colour: var(--swk-card-hover) !important;
  --fc-operation-border-colour: var(--swk-border) !important;
  --fc-breakpoint-operation-font-colour: var(--swk-text) !important;
  --fc-breakpoint-operation-bg-colour: var(--swk-accent-dim) !important;
  --fc-breakpoint-operation-border-colour: var(--swk-accent) !important;

  --arg-font-colour: var(--swk-text) !important;
  --arg-background: var(--swk-field) !important;
  --arg-border-colour: var(--swk-border) !important;
  --arg-disabled-background: var(--swk-surface) !important;
  --arg-label-colour: var(--swk-text-muted) !important;

  --disable-icon-colour: var(--swk-text-faint) !important;
  --disable-icon-selected-colour: var(--swk-error) !important;
  --breakpoint-icon-colour: var(--swk-text-faint) !important;
  --breakpoint-icon-selected-colour: var(--swk-accent) !important;

  --btn-default-font-colour: var(--swk-text) !important;
  --btn-default-bg-colour: var(--swk-card) !important;
  --btn-default-border-colour: var(--swk-btn-secondary-border) !important;
  --btn-default-hover-font-colour: var(--swk-text) !important;
  --btn-default-hover-bg-colour: var(--swk-card-hover) !important;
  --btn-default-hover-border-colour: var(--swk-btn-secondary-border-hover) !important;

  /* "Bake" ist die Handlung der Seite: Amber. */
  --btn-success-font-colour: var(--swk-btn-primary-text) !important;
  --btn-success-bg-colour: var(--swk-btn-primary-flat) !important;
  --btn-success-border-colour: var(--swk-btn-primary-border) !important;
  --btn-success-hover-font-colour: var(--swk-btn-primary-text) !important;
  --btn-success-hover-bg-colour: var(--swk-accent-bright) !important;
  --btn-success-hover-border-colour: var(--swk-btn-primary-border) !important;

  --hl1: rgba(245, 158, 11, 0.28) !important;
  --hl2: #4a3f3d !important;
  --hl3: #b42318 !important;
  --hl4: #3b3523 !important;
  --hl5: #2f6b1f !important;

  --scrollbar-track: var(--swk-bg) !important;
  --scrollbar-thumb: var(--swk-scrollbar) !important;
  --scrollbar-hover: var(--swk-scrollbar-hover) !important;

  --drop-file-border-colour: var(--swk-accent) !important;
  --table-border-colour: var(--swk-border) !important;
  --popover-background: var(--swk-card-hover) !important;
  --popover-border-colour: var(--swk-border) !important;
  --code-background: var(--swk-card-hover) !important;
  --code-font-colour: var(--swk-text) !important;
  --input-highlight-colour: var(--swk-accent) !important;
  --input-border-colour: var(--swk-border) !important;
  color-scheme: dark;
}

body {
  font-family: var(--swk-font) !important;
}

/* Spaltentitel (Operations, Recipe, Input, Output) */
.title,
#operations .title,
#recipe .title {
  font-family: var(--swk-font-display) !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
}

/* Fremde Bedienelemente in der Kopfleiste:
   - "Download CyberChef": Download der Upstream-Fassung von GitHub, fuer
     Nutzer dieser Seite keine Funktion.
   - "Last build: ..." (#notice): Build-Datum der Upstream-Fassung, irritiert
     unter SW tools; Aktualisierungs-Hinweise erscheinen dort nicht.
   Nicht ausgeblendet: "About / Support" (#support), dort stehen Lizenz
   (Apache-2.0) und Herkunft; "Options". */
#banner > .col:first-of-type > a,
#notice-wrapper {
  visibility: hidden !important;
}

/* Linien zwischen den Spalten */
.gutter {
  background-color: var(--swk-border-dim) !important;
}

/* Bake-Knopf: Amber-Verlauf wie der Primaerknopf von SW labs; Koch-Bild
   weg (Upstream-Maskottchen, steht ohne Kontext neben dem Wort). */
#bake {
  background: var(--swk-btn-primary-bg) !important;
  color: var(--swk-btn-primary-text) !important;
  border: 1px solid var(--swk-btn-primary-border) !important;
  border-radius: var(--swk-radius-md) !important;
  box-shadow: var(--swk-btn-primary-shadow) !important;
  font-family: var(--swk-font) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
}
#bake:hover {
  background: var(--swk-btn-primary-bg-hover) !important;
}
#bake img {
  display: none !important;
}
#step {
  color: var(--swk-text-muted) !important;
  font-family: var(--swk-font) !important;
}

/* Bootstrap-Material: blaue Unterstreichung an Feldern und Checkbox */
.form-control,
.is-focused .form-control {
  background-image: linear-gradient(to top, var(--swk-accent) 2px, rgba(245, 158, 11, 0) 2px),
    linear-gradient(to top, var(--swk-border) 1px, rgba(0, 0, 0, 0) 1px) !important;
  color: var(--swk-text);
}
.checkbox input[type="checkbox"]:checked + .checkbox-decorator .check,
.checkbox input[type="checkbox"]:checked ~ .checkbox-decorator .check {
  color: var(--swk-accent) !important;
  border-color: var(--swk-accent) !important;
}
.checkbox input[type="checkbox"]:checked ~ .checkbox-decorator .check::before {
  color: var(--swk-btn-primary-text) !important;
}
.checkbox .check {
  border-color: var(--swk-text-faint) !important;
}
.checkbox input[type="checkbox"]:checked + .checkbox-decorator .check {
  background: var(--swk-accent) !important;
}
[class^="bmd-label"],
[class*=" bmd-label"],
.bmd-form-group .bmd-label-static {
  color: var(--swk-text-muted) !important;
}

/* Modale und Dropdowns von Bootstrap */
.modal-content,
.dropdown-menu,
.popover {
  background-color: var(--swk-card) !important;
  color: var(--swk-text) !important;
  border: 1px solid var(--swk-border) !important;
  border-radius: var(--swk-radius-lg) !important;
}
.modal-header,
.modal-footer {
  border-color: var(--swk-border) !important;
}
.btn-primary:not(.bmd-btn-icon),
.btn-success {
  background: var(--swk-btn-primary-flat) !important;
  color: var(--swk-btn-primary-text) !important;
}
.btn.btn-primary.bmd-btn-icon,
.bmd-btn-icon {
  color: var(--swk-text-muted) !important;
}
.btn.btn-primary.bmd-btn-icon:hover,
.bmd-btn-icon:hover {
  color: var(--swk-text) !important;
}
a {
  color: var(--swk-text);
}
.modal-body a,
#support-modal a {
  text-decoration: underline;
  text-decoration-color: var(--swk-text-faint);
}
.nav-tabs > li > a.nav-link.active {
  color: var(--swk-text) !important;
  border-bottom: 2px solid var(--swk-accent) !important;
}