/*	CSS BY MIKE@CROSSWAY.NL 2022  */
/* ================ SCSS VARIABELEN ================ */
@font-face {
  font-family: "Jura";
  src: url("Jura-Regular.ttf");
  font-display: swap;
}
@font-face {
  font-family: 'SourceCodePro';
  src: url('/sql/css/SourceCodePro-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}


/* ================================================ MAIN STYLES  */
::selection {
  color: red;
  background: yellow;
}

body {
  background: #262628 !important;
  color: #dddddd !important;
  margin: 0;
  padding: 0;
  font-family: "Jura" !important;
}

a {
  color: #dddddd !important;
}

header {
  width: 100%;
  height: auto;
}

header > h1, header > h2 {
  font-size: 2em;
  text-align: center;
  padding: 1vh;
}

span {
  text-decoration: underline;
}

span > mark {
  text-decoration: underline;
  text-decoration-color: #ef7587;
  text-underline-offset: 5px;
  color: #fcfdc6;
}

span.streep {
  text-decoration: underline;
  text-decoration-color: #dddddd;
  text-underline-offset: 5px;
  text-decoration-color: #ef7587;
}

/* ======== ChatGPT page =========  */
div#center-box {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2em;
  font-size: 1.3em;
}

div#center-box textarea {
  width: 50%;
  color: #dddddd;
  background: #262628;
  margin-top: 1em;
  overflow: hidden;
  border-radius: 15px;
  padding-left: 8px;
  padding-right: 8px;
}

div#chat_knoppen > button {
  margin-top: 1.3em;
  height: 30px;
}

#preloader {
  text-decoration: none;
  color: #afe4af;
}

#chat_uitleg {
  font-family: system-ui, sans-serif;
  font-size: 1.5rem;
  line-height: 1.6;
  background: #262628;
  padding: 5rem;
  border-radius: 8px;
  white-space: pre-wrap;
  margin-top: 20px;
}

#chat_uitleg code {
  background: #262628;
  color: #dddddd;
  font-weight: 800;
  font-family: monospace;
  padding: 2px 4px;
  border-radius: 4px;
}

#chat_uitleg pre {
  background: #262628;
  color: #dddddd;
  font-family: monospace;
  font-size: 0.95rem;
  padding: 10px;
  border-radius: 6px;
  overflow-x: auto;
  margin-top: 0.5em;
  margin-bottom: 1em;
}

#chat_uitleg strong,
#chat_uitleg b {
  font-weight: 600;
}

#chat_uitleg ul, #chat_uitleg ol {
  padding-left: 1.5em;
}

/* ======== Einde ChatGPT page =========  */
footer {
  height: 75vh;
}

/* ================================================ MAIN MENU */
#menuToggle {
  display: block;
  position: relative;
  top: 50px;
  margin-left: 50px;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle input {
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  cursor: pointer;
  opacity: 0; /* Verberg de input */
  z-index: 2; /* plaats hem over de hamburger */
  -webkit-touch-callout: none;
}

/* Maak van de 3 span's een hamburger */
#menuToggle span {
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background: #585858; /* Hamburger-kleur menu-dicht */
  border-radius: 3px;
  z-index: 1;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
}

#menuToggle span:first-child {
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2) {
  transform-origin: 0% 100%;
}

/* Verander de hamburger in een kruis */
#menuToggle input:checked ~ span {
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #262628; /* Kruis-kleur menu-open */
}

/* Maar verberg de middelste streep van de hamburger */
#menuToggle input:checked ~ span:nth-last-child(3) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/* Roteer de laatste de andere kant op */
#menuToggle input:checked ~ span:nth-last-child(2) {
  transform: rotate(-45deg) translate(0, -1px);
}

/* Plaats het menu links bovenin */
#menu {
  position: absolute;
  width: 360px;
  margin: -100px 0 0 -56px;
  padding: 0 0 0 10px;
  padding-top: 125px;
  background: #585858; /* Achtergrond-kleur menu */
  -webkit-font-smoothing: antialiased;
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  border-bottom-right-radius: 45px;
}

#menu li {
  padding: 5px 0 0px 15px;
  font-size: 1.2em !important;
  font-weight: 900;
}

#menu li a {
  font-weight: 700 !important;
}

/* Laat het van links in glijden */
#menuToggle input:checked ~ ul {
  transform: none;
}

@media screen and (max-width: 400px) {
  #menuToggle {
    top: 50px;
    margin-left: 30px;
  }
}
/* ================================================ THEMA Switcher  */
div#theme-switcher {
  display: flex;
  justify-content: flex-end;
}

div#theme-switcher form {
  margin-right: 50px;
}

div#theme-switcher form button {
  width: 50px;
  margin-right: 5px;
}

/* ================================================ ACCORDEON STYLES BOOTSTRAP  */
.panel-default {
  border-color: #585858; /* Randkleur van panel-toaal */
}

.panel-default > .panel-heading {
  background: #585858; /* Background van uitklap-items */
  border-radius: 20px;
}

.panel-default .panel-default > .panel-heading {
  background: none; /* Background van de Tip headings */
}

.panel-group .panel-heading + .panel-collapse > .list-group, .panel-group .panel-heading + .panel-collapse > .panel-body {
  border-top: 1px solid RGBA(0, 0, 0, 0); /* Top randkleur van uitklap-items */
}

.panel {
  background: #262628; /* Background van uitklap-panel */
}

.panel-body {
  font-size: 1.2em;
}

.panel-collapse {
  border: 1px solid RGBA(0, 0, 0, 0); /* Rand van uitklap-panel */
}

div.panel-body {
  text-align: left;
}

.panel {
  border-radius: 20px !important; /* Omlijning van tip en antwoord */
}

ol[start] ~ .panel {
  border-radius: 20px; /* Omlijning van tip & antwoorden bij oefenigen*/
  border: 1px solid #afe4af !important;
}

div.panel-body > .panel {
  border: 1px solid #afe4af !important;
}

/* ================================================ TABEL STYLES  */
table {
  border: 2px solid #585858; /* Rand van Tabel */
  width: 100%;
}

th {
  background: #585858; /* Tabel header kleur */
}

table tr:nth-child(2n+2) {
  background: #1b1b1d; /* Tabel patroon kleur */
}

th:first-child, td:first-child {
  padding-left: 10px;
}

/* Index page - tabel in accordeon */
table.tabel2 {
  width: 102%;
  margin-left: -1%;
  border: none;
}

table.tabel2 th {
  font-style: normal !important;
  font-weight: normal !important;
}

table.tabel2 th:first-child {
  width: 18%;
}

table.tabel2 th:last-child {
  width: 65%;
}

table.tabel2 td {
  padding: 10px;
}

/* Index page - tabel in accordeon */
table.tabel2-2 td {
  padding: 10px;
}

/* ================================================ TABEL 8.5 (functies)  */
table.tabel3 {
  width: 102%;
  margin-left: -1%;
  border: none;
}

table.tabel3 th {
  font-style: normal !important;
  font-weight: normal !important;
}

table.tabel3 td {
  padding: 10px;
}

/* ================================================ TABEL ANTWOORDEN  */
table.resultaat {
  width: 50% !important;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.5rem;
}

table.resultaat tr:first-child {
  background: #585858;
}

table.resultaat.groot {
  width: 90% !important;
}

/* SQL Playground editor-resultaten */
body.sql-playground .result-scroller {
  overflow: auto;
  border: 1px solid #585858;
  border-radius: 14px;
  padding: .5rem;
  margin-top: 1rem;
}

body.sql-playground .result-scroller table.resultaat {
  width: 100% !important;
  border-collapse: collapse;
  font-size: 1rem;
}

body.sql-playground .result-scroller table.resultaat th,
body.sql-playground .result-scroller table.resultaat td {
  padding: .45rem .6rem;
}

body.sql-playground .result-scroller table.resultaat thead tr {
  background: #585858;
}

body.sql-playground .result-scroller table.resultaat tbody tr {
  background: transparent;
}

body.sql-playground .result-scroller table.resultaat tbody tr:nth-child(even) {
  background: #1b1b1d;
}

/* ================================================ SOME LAYOUT STYLES  */
/* index-pagina */
main, div.midden {
  display: flex;
  justify-content: center;
}

h4#onderwerpen {
  text-align: center;
}

div.center {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

div.center_svg {
  width: 95%;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 1080px) {
  div#erd img {
    width: 100%;
  }
}
/* ================================================ CONTENT BLOKKEN & CODE KLEUREN  */
/* Kleuen van problemen in tabel H1 */
.fout1 {
  border: 3px solid #ef7587;
}

.fout2 {
  border: 3px solid #72cefd;
}

.fout3 {
  border: 3px solid #e9be6f;
}

.fout4 {
  border: 3px solid #fcfdc6;
}

.fout5 {
  border: 3px solid #afe4af;
}

.fout6 {
  border: 3px solid #4c8cfc;
}

mark {
  background: RGBA(0, 0, 0, 0);
  color: #dddddd;
  font-style: oblique !important;
}

pre > span {
  text-decoration: none;
}

.clause {
  color: #afe4af;
}

.kolom {
  color: #4c8cfc;
}

.tabel {
  color: #fcfdc6;
}

.interger {
  color: #e9be6f;
}

.string {
  color: #ef7587;
}

.functie {
  color: #72cefd;
}

.comment {
  color: #929da3;
}

.alias {
  color: #b44cd8;
}

pre.pseudo-code {
  background: none;
  border-color: RGBA(0, 0, 0, 0); /* Randen/achtegrond -kleur pseudo code */
  font-style: italic;
  color: #dddddd;
}

.code-kleur {
  background: linear-gradient(#585858, #1b1b1d) !important; /* Achtergrond van antwoord-knop */
  border-radius: 20px;
}

p.vraag + div.panel-default {
  background: linear-gradient(#1b1b1d, #262628) !important; /* Achtergrond van antwoord-paneel */
  border-radius: 20px;
  border: 1px solid #afe4af !important;
}

pre {
  background: RGBA(0, 0, 0, 0); /* Achtergrond queries */
  border: none;
  color: #dddddd;
}

.vraag {
  color: #dddddd; /* Kleur van de vragen */
}

.antwoord {
  border: none;
}

.tip {
  font-size: 0.7em;
  margin-top: 10px;
  text-align: center;
}

.tip-kleur {
  padding: 0 20px;
}

figure {
  display: flex;
  justify-content: center;
}

img {
  margin-top: 5px;
  border: 1px solid RGBA(0, 0, 0, 0);
}

.link {
  text-decoration: underline;
}

.tip-txt {
  font-size: 0.7em;
  opacity: 0.8;
  margin-top: 10px;
  text-align: center;
}

ul.horizontaal li {
  display: inline;
}

/* ================================================ SCHEIDINGS-STREEP IN EEN ITEM */
.separator {
  display: flex;
  align-items: center;
  text-align: center;
}

.separator::before,
.separator::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid #000;
}

.separator:not(:empty)::before {
  margin-right: 0.25em;
}

.separator:not(:empty)::after {
  margin-left: 0.25em;
}

/* ================================================ NUMMERING VAN ITEMS */
div.nummer {
  display: inline-block;
  width: 30px;
  text-align: right;
}

@media screen and (max-width: 400px) {
  div.container {
    padding: 0;
    margin: 0;
  }
  div.panel-body {
    padding: 0;
    margin: 0;
  }
  main {
    flex-direction: column;
  }
  img {
    max-width: 100%;
  }
}
/* ================================================ JOIN STYLES  H13 ================ */
div.center svg.svg {
  width: 250px;
  height: 176px;
}

/* Item - 4 - InnerJoin */
.st0-10 {
  fill: none;
  stroke: #585858;
  stroke-width: 2;
  stroke-miterlimit: 10;
}

.st1-10 {
  fill: #585858;
} /* joinkleur */
.st2-10 {
  fill: #dddddd;
} /* textkleur */
.st3-10 {
  font-family: "Jura-Bold";
}

.st4-10 {
  font-size: 60px;
}

/* Item - 5 - LeftJoin */
.st0-20 {
  fill: #585858;
  stroke: #585858;
  stroke-width: 2;
  stroke-miterlimit: 10;
}

.st1-20 {
  fill: #585858;
  stroke: #FFFFFF;
  stroke-miterlimit: 10;
}

.st2-20 {
  fill: none;
  stroke: #585858;
  stroke-width: 2;
  stroke-miterlimit: 10;
}

.st3-20 {
  fill: #dddddd;
}

.st4-20 {
  font-family: "Jura-Bold";
}

.st5-20 {
  font-size: 60px;
}

/* Item - 5 - RightJoin */
.st0-30 {
  fill: #585858;
  stroke: #585858;
  stroke-width: 2;
  stroke-miterlimit: 10;
}

.st1-30 {
  fill: #585858;
  stroke: #FFFFFF;
  stroke-miterlimit: 10;
}

.st2-30 {
  fill: none;
  stroke: #585858;
  stroke-width: 2;
  stroke-miterlimit: 10;
}

.st3-30 {
  fill: #dddddd;
}

.st4-30 {
  font-family: "Jura-Bold";
}

.st5-30 {
  font-size: 60px;
}

/* Item - 5 - FullJoin */
.st0-40 {
  fill: #585858;
  stroke: #585858;
  stroke-width: 2;
  stroke-miterlimit: 10;
}

.st1-40 {
  fill: #585858;
  stroke: #FFFFFF;
  stroke-miterlimit: 10;
}

.st2-40 {
  fill: #dddddd;
}

.st3-40 {
  font-family: "Jura-Bold";
}

.st4-40 {
  font-size: 60px;
}

div#joins-buttons {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

div#btnWrapper {
  width: 100%;
  display: flex;
  justify-content: space-around;
}

div#item-7-sql {
  width: 100%;
  display: flex;
  justify-content: center;
}

div#item-001, div#item-002, div#item-003, div#item-004 {
  width: 95%;
  height: 400px;
}

div.query {
  width: 70%;
  height: 100px;
  margin-top: 30px;
  margin-left: auto;
  margin-right: auto;
}

div.query-resultaat {
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  display: flex;
  justify-content: center;
}

div.tabel-item-7 {
  width: 100%;
  margin: 0 50px;
}

div.tabel-item-7 table.resultaat tbody tr > td {
  padding: 0 10px;
}

div.query-resultaat div.tabel-item-7:nth-child(2) table.resultaat {
  width: 200px !important;
}

table.resultaat {
  width: 100%;
}

div.tabel-item-7 h2 {
  text-align: center;
}

td.out {
  text-decoration: line-through;
  opacity: 0.5;
}

td.out-half {
  opacity: 0.5;
}

button#btnInnerJoin, button#btnLeftJoin, button#btnRightJoin, button#btnFullJoin {
  width: 200px;
  border: none;
}

/* Button Mouse-over  */
button#btnInnerJoin:hover .st1-10, .active .st1-10 {
  fill: #4c8cfc;
}

button#btnLeftJoin:hover .st0-20, .active .st0-20 {
  fill: #4c8cfc;
}
button#btnLeftJoin:hover .st1-20, .active .st1-20 {
  fill: #4c8cfc;
}

button#btnRightJoin:hover .st0-30, .active .st0-30 {
  fill: #4c8cfc;
}
button#btnRightJoin:hover .st1-30, .active .st1-30 {
  fill: #4c8cfc;
}

button#btnFullJoin:hover .st0-40, .active .st0-40 {
  fill: #4c8cfc;
}
button#btnFullJoin:hover .st1-40, .active .st1-40 {
  fill: #4c8cfc;
}

text {
  font-family: "Jura" !important;
}

button#btnInnerJoin:after {
  content: "Join";
}

button#btnLeftJoin:after {
  content: "Left Join";
}

button#btnRightJoin:after {
  content: "Right Join";
}

button#btnFullJoin:after {
  content: "Full Join";
}

/* ================================================ EASTER EGG Styles H6 ================ */
form#easter-egg2 > button {
  width: auto;
  cursor: default;
}

/* ================================================ EASTER EGG Styles H14 ================ */
div#egg-txt {
  display: none;
}

form#easter-egg:hover + div#egg-txt {
  display: block;
  margin: 50px 20% 50px 20%;
}

div#collapse204.egg div.panel-body {
  display: flex;
  justify-content: center;
  align-self: center;
}

form#easter-egg2 {
  width: 250px;
  border: none;
}

form#easter-egg2 button#easter-egg2-btn {
  width: 250px;
  border: none;
}

/* ================================================ Expert Krans ================ */
div#collapse007.krans div.panel-body {
  display: flex;
  justify-content: center;
  align-self: center;
}

#Krans_Main {
  width: 400px;
}

/* ================================================ Terminal svg H15 ================ */
.st0-h15 {
  fill: none;
}

.st1-h15 {
  fill: #2afa15;
}

.st2-h15 {
  font-family: "AndaleMono";
}

.st3-h15 {
  font-size: 12px;
}

/* ================================================ COPY BUTTONS VOOR VRAGEN ================ */
button {
  color: #dddddd; /* Textkleur knop */
  background: #262628;
  border-color: #dddddd;
  font-size: 0.8em;
  width: 4em;
  border-radius: 20px;
}

pre#vragen {
  display: none;
}

a.button {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
  text-decoration: none;
  color: rgba(0, 80, 120, 0.9) !important; /* Textkleur knop */
  font-size: 0.8em;
  padding: 3px;
  padding-top: 2px;
  width: 4em;
  text-align: center;
}


/* --------------------------------------------------------------------------------------------------- */



/* ================================
   SQL Playground – CodeMirror (donker)
   ================================ */

/* Basis editor */
.CodeMirror {
  background: transparent !important;
  color: #dddddd !important;
  border-radius: 12px;
  border: 1px solid #585858;
  font-family: "SourceCodePro", monospace;
  font-size: 16px;
  line-height: 1.4;
  /* ongeveer 10 regels hoog als start */
  min-height: calc(16px * 1.4 * 10);
}

/* Lijnnummers & goot */
.CodeMirror-gutters {
  background: transparent !important;
  border-right: 1px solid #585858;
}

.CodeMirror-linenumber {
  color: #888 !important;
}

/* Geen eigen achtergrond van het default-thema */
.cm-s-default {
  background: transparent !important;
}

/* === Token-kleuren === */
.cm-s-default .cm-keyword   { color: #afe4af !important; }  /* keywords */
.cm-s-default .cm-atom      { color: #33cccc !important; }  /* NULL, TRUE, FALSE */
.cm-s-default .cm-builtin   { color: #72cefd !important; }  /* functies */
.cm-s-default .cm-string    { color: #ef7587 !important; }  /* strings */
.cm-s-default .cm-number    { color: #e9be6f !important; }  /* getallen */
.cm-s-default .cm-comment   { color: #929da3 !important; }  /* commentaar */

.cm-s-default .cm-variable,
.cm-s-default .cm-property  { color: #4c8cfc !important; }  /* kolommen */
.cm-s-default .cm-variable-2,
.cm-s-default .cm-def       { color: #fcfdc6 !important; }  /* tabellen */
.cm-s-default .cm-variable-3,
.cm-s-default .cm-qualifier { color: #b44cd8 !important; }  /* aliassen */

/* overlays uit je JS */
.cm-kolomnaam  { color: #4c8cfc !important; }
.cm-tabelnaam  { color: #fcfdc6 !important; }
.cm-aliasnaam  { color: #b44cd8 !important; }

/* Cursor helder */
.CodeMirror-cursor {
  border-left: 2px solid #dddddd !important;
}

/* Geen onderstrepingen in de editor */
.CodeMirror * {
  text-decoration: none !important;
}


/* CodeMirror selectie (dark mode) */
.CodeMirror .CodeMirror-selected {
    background: rgba(255, 255, 255, 0.15) !important;
}

.CodeMirror-focused .CodeMirror-selected {
    background: rgba(255, 255, 255, 0.20) !important;
}



/* Algemene kleur voor functies (ook in light theme oké) */
.cm-builtin {
  color: #0070ff;
}

/* In dark theme iets zachter/lichter blauw */
html[data-theme="dark"] .cm-builtin {
  color: #7ec8ff;
}