:root {
  color-scheme: light dark;
  --color-scheme--content: "LIGHT";

  --bg-color: #313338;
  --text-color: #efefef;
  --text-link-dark: #392472;
  --text-link-light: #b4a7d6;


  --table--border-size: 2px;
  --table--text-color: black;
  --table--border-color: var(--table--text-color);
  --table--col-header-color: #b7b7b7;
  --table--row-header-color: #efefef;
  --table--cell-color: #646569;
  --table--background-color: #d9d9d9;

  --spark--color: #d9d9d9;

  --crest-color--weathered: #6fa8dc;
  --crest-color--carved: #ffd966;
  --crest-color--runed: #e06666;
  --crest-color--gilded: #8e7cc3;

  --track-color--adventurer: #b6d7a8;
  --track-color--veteran: #9fc5e8;
  --track-color--champion: #ffe599;  
  --track-color--hero: #ea9999;  
  --track-color--myth: #b4a7d6;

  body:has(#color-scheme--toggle:checked) {
    --color-scheme--content: "DARK";

    --bg-color: #ffffff;
    --text-color: #000000;
    --text-link-dark: #392472;
    --text-link-light: #392472;
  
    --table--text-color: var(--text-color);
    --table--border-color: var(--table--text-color);
    --table--col-header-color: #d9d9d9;
    --table--row-header-color: #f3f3f3;
    --table--cell-color: #ffffff;
    --table--background-color: var(--table--cell-color);
  
    --spark--color: #d9d9d9;
  
    --crest-color--weathered: #9fc5e8;
    --crest-color--carved: #ffe599;
    --crest-color--runed: #ea9999;
    --crest-color--gilded: #b4a7d6;
  
    --track-color--adventurer: #d9ead3;
    --track-color--veteran: #cfe2f3;
    --track-color--champion: #fff2cc;  
    --track-color--hero: #f4cccc;  
    --track-color--myth: #d9d2e9;
  }
}



body {
  background-color: var(--bg-color);
  color: var(--text-color);
  margin: 20px;

  #color-scheme--toggle {
    display: none;
  }

  label[for="color-scheme--toggle"] {
    text-decoration: underline;
    color: var(--text-link-light);
    cursor: pointer;

    &::after {
      content: var(--color-scheme--content);
    }
  }

  > header {
    padding-left: 4px;
    padding-bottom: 25px;


  }

  a, a:link, a:visited, a:hover, a:active {
    color: var(--text-link-light);
  }

  table {
    a, a:link, a:visited, a:hover, a:active {
      color: var(--text-link-dark);
    }
  }

  font-family: sans-serif;
}

#charts {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 28px;
}

#left, #right {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

#bottom {
  display: flex;
  flex-direction: row;
  gap: 28px;
}

#left {
  gap: 9px;
}

#dungeons, #delves {
  table {
    width: 200px;
  }
}

#tracks {
  table {
    width: 750px;
  }
  colgroup {
    .ilvl {
      width: 40px;
    }
    .needs {
      width: 68px;
    }
  }

  td {
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
    min-width: 0;

    &.veteran, &.champion, &.hero, &.myth {
      &.rank {
        width: 26px;
      }
      &:not(.rank) {
        width: 60px;
      }
    }


  }
}

#raid {
  table {
    width: 500px;
  }
  th,td {
    width: 90px;

    &:first-child {
      width: 98px;
    }
  }
}

#info {
  font-size: 120%;
  display: flex;
  flex-direction: column;
  padding-top: 1rem;
  gap: 2rem;
}

table {
  border-collapse: collapse;
  background-color: var(--table--border-color);
  color: var(--table--text-color);
  border-spacing: 0;
  border: var(--table--border-color) solid var(--table--border-size);

  tr {
    border: none;
  }

  th, td {
    vertical-align: middle;
    text-align: center;
    padding: 3px 2px;
    margin: 0px;

    border-bottom: var(--table--border-color) solid var(--table--border-size);

    white-space: nowrap; 
    overflow: hidden;
  }


  colgroup {
    border-left: var(--table--border-color) solid var(--table--border-size);
    col {
      border-right: var(--table--border-color) solid var(--table--border-size);
      background-color: var(--table--cell-color);

      &:last-child {
        border-right: none;
      }
    }
  }

  thead {
    th {
      background-color: var(--table--col-header-color);
      border-left: var(--table--border-color) solid var(--table--border-size);
    }
  }

  tbody {
    th {
      background-color: var(--table--row-header-color);
    }


    th, td {
      border-bottom: var(--table--border-color) solid var(--table--border-size);

      @-moz-document url-prefix() {
        border-bottom: var(--table--border-color) dotted var(--table--border-size);
      }

      &.first {
        border-top: var(--table--border-color) solid var(--table--border-size);
      }
      &.last {
        border-bottom: var(--table--border-color) solid var(--table--border-size);
      }
    }

    tr:last-child {
      th, td {
        border-bottom-style: none;
      }
    }
  }
}

section {
  footer {
    padding: 0px 4px;
    font-size: 90%;
    font-style: italic;
  }
}

.track {
  border-right: none;

  &.crafting:first-of-type {
    border-left: var(--table--border-color) solid var(--table--border-size);
  }
}

.spark, .weathered, .carved, .runed, .gilded, .adventurer, .veteran, .champion, .hero, .myth {
  border-right: var(--table--border-color) solid var(--table--border-size);
  border-left: var(--table--border-color) solid var(--table--border-size);
}


.weathered {
  background-color: var(--crest-color--weathered);
}

.carved {
  background-color: var(--crest-color--carved);
}

.runed {
  background-color: var(--crest-color--runed);
}

.gilded {
  background-color: var(--crest-color--gilded);
}

.spark {
  background-color: var(--spark--color);
}

.adventurer {
  background-color: var(--track-color--adventurer);
}

.veteran {
  background-color: var(--track-color--veteran);
}

.champion {
  background-color: var(--track-color--champion);
}

.hero {
  background-color: var(--track-color--hero);
}

.myth {
  background-color: var(--track-color--myth);
}

.important {
  font-weight: bold;
  font-style: italic;
}

#changes {
  background-color: var(--table--background-color);

  tr {
    td,th {
      vertical-align: top;
      text-align: left;

      &:first-child {
        text-align: right;
        border-right: var(--table--border-color) solid var(--table--border-size);
      }
    }
  }
}