/* Grundlegende Variablen für Light-Modus */
@media (prefers-color-scheme: dark) {
:root {
    /* Set scheme colors (Scheme: Azure Harmony) */
    --blue1: #213E58;
    --blue2: #327D9E;
    --blue3: #79C4C1;


    /* Map colors to ojects */
    --background-color: #ffffff;
    --text-color: #333333;
    --primary-color: #6200ea;

    --waveform-v1-color: var(--blue2);
    --waveform-v2-color: var(--blue3);
    --waveform-v3-color: var(--blue1);

    --waveform-v1-progress-color: hsl(200, 80%, 20%);
    --waveform-v2-progress-color: hsl(220, 70%, 20%);
    --waveform-v3-progress-color: hsl(240, 60%, 20%);

    --waveform-v1-background-color: var(--blue1);
    --waveform-v2-background-color: var(--blue2);
    --waveform-v3-background-color: var(--blue3);

    --dump-v1-color: hsl(200, 80%, 60%);
    --dump-v2-color: hsl(220, 70%, 50%);
    --dump-v3-color: hsl(240, 60%, 55%);

    --container-background-color: hsl(140, 1%, 56%);
    --container-color: hsl(120, 3%, 7%);
    --container-cursor-color: hsl(234, 95%, 60%);

    --header-background-color: hsl(221, 95%, 16%); /* TODO */
    --header-color: hsl(139, 44%, 93%);
  }
  }

  /* Dark-Modus */
  /* https://icolorpalette.com/0a1323_128092_596b8d_052aa1_045434 */
  :root.dark-mode {
    
    --green1: #09cc7e;
    --green2: #0636cf;
    --green3: #17a7be;

    --blue1: #04663f;
    --blue2: #031b67;
    --blue3: #0b535f;

    --dark-color1: #0a1323;
    --dark-color2: #0a1323;
    --dark-color3: #0a1323;

    --header-footer-backgrund-color: #1b212b;

    --container-wrapper-text-color: #ebebeb;

    --control-buttons-color: #ebebeb;
    --control-buttons-background-color: var(--header-footer-backgrund-color);
    --control-muteButton1-color: var(--green1);
    --control-muteButton2-color: var(--green2);
    --control-muteButton3-color: var(--green3);


    --background-color: #101010;
    --text-color: #ccc;
    --primary-color: #bb86fc;

    --activeline-color: #01220d;

    --waveform-v1-color: var(--green1);
    --waveform-v2-color: var(--green2);
    --waveform-v3-color: var(--green3);
    
    --waveform-v1-progress-color: var(--blue1);
    --waveform-v2-progress-color: var(--blue2);
    --waveform-v3-progress-color: var(--blue3);

    --waveform-v1-background-color: var(--dark-color1);
    --waveform-v2-background-color: var(--dark-color2);
    --waveform-v3-background-color: var(--dark-color3);

    --oscilloscope1-background-color: var(--dark-color1);
    --oscilloscope2-background-color: var(--dark-color2);
    --oscilloscope3-background-color: var(--dark-color2);

    --dump-v1-color: var(--green1);
    --dump-v2-color: var(--green2);
    --dump-v3-color: var(--green3);

    --container-background-color: var(--header-footer-backgrund-color);
    --container-color: var( --text-color);
    --container-cursor-color: #57d5ea;

    --header-background-color: var(--header-footer-backgrund-color);
    --header-color: var( --text-color);
    --scroll-box-bg: var(--dark-color3);
  }
  
  /* Blue-Modus */
  :root.blue-mode {
    --background-color: #e3f2fd;
    --text-color: #0d47a1;
    --primary-color: #1976d2;

    --waveform-v1-background-color: #00f;
    --waveform-v2-background-color: #00f;
    --waveform-v3-background-color: #00f;
  }

body {
    font-family: Arial, sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);    
}

#headermenu {
    float: left;
    /*
    font-family: 'Press Start 2P', monospace;
    color: var(--green1);
    text-shadow: 0 0 2px var(--green1), 0 0 5px var(--green1);
    */
}

#headertext {
    float: left;
}

#headerlogo {
    float: right;
    width: 450px;
    height: 120px;
    background: url('../images/ch8os_mu5ic_logo_005a.svg');
    background-size: cover;
}

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

.clear {
    clear: both;
}

#waves{
    width: 100%;
}
#container {
    float: right;
    margin-left: 20px;
    width: 1500px;
    background: var(--container-background-color);
    color: var(--container-color);
}

#oscilloscope {
    float: left;
}

#oscilloscope1 {
    /*margin-left: 1em;*/
    background: var(--waveform-v1-background-color);
    width: 350px;
    height: 126px;
}
#oscilloscope2 {
    /*margin-left: 1em;*/
    background: var(--waveform-v2-background-color);
    width: 350px;
    height: 126px;
}
#oscilloscope3 {
    /*margin-left: 1em;*/
    background: var(--waveform-v3-background-color);
    width: 350px;
    height: 126px;
}

/* optional */
/*
https://wavesurfer.xyz/examples/?styling.js
*/
#container ::part(wrapper) {
    --box-size: 10px;
    background-image: 
      linear-gradient(transparent calc(var(--box-size) - 1px), rgb(4, 8, 5) var(--box-size), transparent var(--box-size)), 
      linear-gradient(90deg, transparent calc(var(--box-size) - 1px), rgb(4, 8, 5) var(--box-size), transparent var(--box-size));
    background-size: 100% var(--box-size), var(--box-size) 100%;
    color: var(--container-wrapper-text-color);
}

#bottom {
    margin-top: 20px;
}
#scroll-container {
    
    float: left;
    margin-left: 45px;
    width: 1140px;
    /*border: 1px solid #ccc;*/
    overflow: hidden;
    font-size: smaller;
}

#header {
    background-color: var(--header-background-color);
    color: var(--header-color);
    padding: 5px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
}


#scroll-box {
    background-color: var(--scroll-box-bg);
    width: 100%;
    height: 270px;
    overflow: hidden;
    overflow-x: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

#scroll-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; 
}

.line {
    display: flex;
    justify-content: space-between;
    padding: 5px 10px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Optional: Zeigt bei zu langem Text "..." an */
}

.active-line {
    background-color: var(--activeline-color); /* Scroll line */
}

.cell {
    flex: 1;
    text-align: center;
}

/* v1-Zellen */
.line .cell:nth-child(2), /* v1Freq */
.line .cell:nth-child(3), /* v1Note/Abs */
.line .cell:nth-child(4), /* v1WF */
.line .cell:nth-child(5), /* v1ADSR */
.line .cell:nth-child(6) { /* v1Pul */
color: var(--dump-v1-color); 
}

/* v2-Zellen */
.line .cell:nth-child(7), /* v2Freq */
.line .cell:nth-child(8), /* v2Note/Abs */
.line .cell:nth-child(9), /* v2WF */
.line .cell:nth-child(10), /* v2ADSR */
.line .cell:nth-child(11) { /* v2Pul */
color: var(--dump-v2-color);
}

/* v3-Zellen */
.line .cell:nth-child(12), /* v2Freq */
.line .cell:nth-child(13), /* v2Note/Abs */
.line .cell:nth-child(14), /* v2WF */
.line .cell:nth-child(15), /* v2ADSR */
.line .cell:nth-child(16) { /* v2Pul */
color: var(--dump-v3-color);
}

/* Media control elements */
#control {
    margin-top: 5px;
}

#play {
    fill: var(--control-buttons-color);
    background-color: var(--control-buttons-background-color);
}

#backward1s {
    fill: var(--control-buttons-color);
    background-color: var(--control-buttons-background-color);
}

#forward {
    fill: var(--control-buttons-color);
    background-color: var(--control-buttons-background-color);
}

#backward {
    fill: var(--control-buttons-color);
    background-color: var(--control-buttons-background-color);
}

#forward1s {
    fill: var(--control-buttons-color);
    background-color: var(--control-buttons-background-color);
}

#muteButton1 {
    fill: var(--control-muteButton1-color);
    background-color: var(--control-buttons-background-color);
}

#muteButton2 {
    fill: var(--control-muteButton2-color);
    background-color: var(--control-buttons-background-color);
}

#muteButton3 {
    fill: var(--control-muteButton3-color);
    background-color: var(--control-buttons-background-color);
}

#options {
    float: left;
    width: 350px;
    background-color: var(--dark-color3);
    background-size: contain;
}

#trackinfo {
    margin-top: 10px;   
}

/* track display */
/*
body {
    font-family: Arial, sans-serif;
    background: #1e1e1e;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
  }
  */
 
  .track-info {
    margin-top: 10px;
    font-family: 'Press Start 2P', monospace;
    color: var(--green1);
    text-shadow: 0 0 2px var(--green1), 0 0 5px var(--green1);
    margin-bottom: 10px;
  }
  
  .label {
    color: var(--green3);
    text-shadow: 0 0 2px var(--green3), 0 0 5px var(--green3);
  }
  
  .track-info span {
    display: inline-block;
    margin: 0 5px;
  }
  
  #track-info_bottom {
    background: url('../images/6581.png') no-repeat center center;
    background-size: cover;
    width: 200px; /* Breite */
    height: 65px; /* Höhe */
    /*margin-left: 80px;*/
    margin-top: 15px;
    margin-bottom: 15px;
  }


/* Footer */
.footer {
    position: absolute;
    bottom: 0; /* Ganz unten */
    left: 0;
    width: 100%;
    background-color: var(--header-footer-backgrund-color); /* Hintergrundfarbe */
    text-align: center; /* Zentrierter Text */
    padding: 10px 0; /* Innenabstand oben und unten */
    color: var(--text-color); /* Textfarbe */
    border-top: 1px solid var(--dark-color1);
}