*,
*::before,
*::after {
  box-sizing: border-box;
}

:root,
[data-theme="light"] {
  --cor-base-header: hsl(231, 29%, 13%);
  --cor-base-main: hsl(49, 37%, 88%);
  --cor-destaque: hsl(0, 100%, 50%);
}

[data-theme="dark"] {
  --cor-base-header: hsl(0, 0%, 0%);
  --cor-base-main: hsl(225, 17%, 9%);
  --cor-destaque: hsl(189, 77%, 63%);
}

:root {
  --cor-texto-header: hsl(from var(--cor-base-header) calc(h*0) calc(s*0) clamp(0, (60 - l) * 1000, 100));
  --cor-texto-main: hsl(from var(--cor-base-main) calc(h*0) calc(s*0) clamp(0, (60 - l) * 1000, 100));
  --cor-link: hsl(from var(--cor-base-header) clamp(180, (l - 60) * 1000, 235) 100 50);
}

/* ===== HTML & BODY ===== */

html {
  font-size: 20px;
  font-family: "Plus Jakarta Sans", sans-serif;
}

html[data-theme="light"] .btn-sun { display: none !important; }
html[data-theme="light"] .btn-moon { display: grid; }
html[data-theme="dark"] .btn-moon { display: none !important; }
html[data-theme="dark"] .btn-sun { display: grid; }

button,
input {
  font-family: inherit;
  text-align: center;
}

body {
  height: 100dvh;
  margin: 0;
  display: grid;
  grid-template-rows: 90px 1fr auto;
  grid-template-columns: 100%;
  background-color: var(--cor-base-main);
  background-image:
    linear-gradient(to right, hsla(from var(--cor-texto-main) h s l / 0.1) 1px, transparent 1px),
    linear-gradient(to bottom, hsla(from var(--cor-texto-main) h s l / 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
  min-height: 100vh;
}

/* ===== HEADER ===== */

header {
  width: 100%;
  display: flex;
  position: sticky;
  z-index: 100;
  top: 0;
  padding: 0 5rem;
  align-content: center;
  align-items: center;
  justify-content: space-between;
  justify-items: center;
  
  background-color: var(--cor-base-header);
  color: var(--cor-texto-header);
  box-shadow: 0px 0px 80px 15px var(--cor-base-header);
  border-bottom: 1px solid hsl(from var(--cor-texto-header) h s l / .7);

  font-size: 2rem;
  font-weight: bold;
  font-style: italic;
}

header a {
  color: var(--cor-texto-header);
  text-decoration: none;
}

.header-btn {
  background-color: transparent;
  border: 0;
  color: hsl(from var(--cor-texto-header));
  transition: transform 0.2s ease;
}

.header-btn:hover {
  cursor: pointer;
  transform: scale(1.3);
}

/* ===== MAIN ===== */
/* ===== página inicial ===== */

main {
  padding: 3rem 5rem;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 90px auto auto;
  grid-template-areas:
    "pos-0 pos-0 pos-0 pos-0 pos-0"
    "pos-1 pos-2 pos-3 pos-4 pos-5"
    "pos-6 pos-6 pos-6 pos-6 pos-6";
}

.escolha {
  display: grid;
  grid-template-rows: 2em 2em 1fr;
  padding: 1rem;
  justify-items: center;
  align-items: center;
  justify-content: center;
  align-content: center;

  font-size: inherit;
  font-family: inherit;
  text-align: justify;
  text-decoration: none;

  border: 1px solid var(--cor-texto-main);
  border-radius: 1rem;
  color: var(--cor-texto-main);
  background-color: hsla(from var(--cor-base-header) h l s / 0.2);
  backdrop-filter: blur(1.5px);
  box-shadow: 0 8px 32px hsla(0, 0%, 0%, 0.5);

  transition: transform 0.2s ease;
}

.escolha.titulo {
  grid-template-rows: 1fr;
}

.preemptivo {
  background-color: hsla(from var(--cor-destaque) h s l / 0.2);
  border: 1px solid var(--cor-destaque);
}

a.escolha:hover {
  background-color: hsla(from var(--cor-destaque) h s l / 0.4);
  box-shadow: 0px 0px 100px 1px hsla(from var(--cor-destaque) h s l / 0.4);
  transform: scale(1.05);
}

/* ===== escalonadores ===== */

main.escalonador {
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-auto-rows: auto;
  grid-template-areas: none;
  gap: 2rem;
}

.conteudo {
  margin: 0;
  padding: 1rem;
  border-radius: 1rem;

  text-align: justify;
  justify-items: center;

  border: 1px solid var(--cor-texto-main);
  color: var(--cor-texto-main);
  background-color: hsla(from var(--cor-base-header) h l s / 0.2);
  backdrop-filter: blur(1.5px);
  box-shadow: 0 8px 32px hsla(0, 0%, 0%, 0.5);
}

.config {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "row-1"
    "row-2"
    "row-3";
  gap: .5rem;
  align-content: space-between;

  div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    justify-items: center;
    padding: 1rem;
    border: 1px solid var(--cor-texto-main);
    ;
    border-radius: 1rem;
  }
}

.num-input {
  border: 0;
  border-radius: 1rem;
  width: 250px;
  padding: 6px 10px;
  color: var(--cor-texto-main);
  background-color: hsla(from var(--cor-base-header) h l s / 0.1);
}

.btn {
  padding: 1rem;
  border-radius: 1rem;
  cursor: pointer;
  color: hsl(from var(--cor-texto-main));
  background-color: hsla(from var(--cor-base-header) h l s / 0);
  transition: transform 0.2s ease;
}

.btn-adicionar {
  border: 2px solid hsl(120, 100%, 25%);
}

.btn-remover {
  border: 2px solid hsl(0, 100%, 50%);
}

.btn-simular {
  padding: 1rem 5rem;
  border: 2px solid hsl(240, 100%, 50%);
}

.btn-adicionar:hover {
  background-color: hsl(120, 100%, 25%, 0.4);
  box-shadow: 0px 0px 100px 1px hsl(120, 100%, 25%, 0.4);
  transform: scale(1.05);
}

.btn-remover:hover {
  background-color: hsl(0, 100%, 50%, 0.4);
  box-shadow: 0px 0px 100px 1px hsl(0, 100%, 50%, 0.4);
  transform: scale(1.05);
}

.btn-simular:hover {
  background-color: hsl(240, 100%, 50%, 0.4);
  box-shadow: 0px 0px 100px 1px hsl(240, 100%, 50%, 0.4);
  transform: scale(1.05);
}

.btn-disable{
  cursor: not-allowed;
  border: 2px solid hsla(from var(--cor-texto-main) h s l / 0.1);
  color: hsla(from var(--cor-texto-main) h s l / 0.1);
}
.btn-disable:hover{
  background-color: transparent;
  box-shadow: none;
  transform: none;
}

.tabela {
  display: grid;
  grid-template-rows: auto auto;
  justify-items: center;

  div {
    display: grid;
    grid-template-columns: auto auto;
  }
}

table {
  color: var(--cor-texto-main);
  border: 1px solid var(--cor-texto-main);
  text-align: center;
  border-collapse: collapse;

  th,
  td {
    background-color: hsla(from var(--cor-base-header) h l s / 0.2);
    border: 1px solid hsl(0, 0%, 0%);
    padding: 1rem;
    font-size: .7rem;
  }

  td {
    background-color: transparent;
  }
}

.tabela-mediasglobais {
  td {
    background-color: transparent;
    width: 50px;
  }
}

.disable {
  color: hsla(from var(--cor-texto-main) h s l / 0.1)
}

.gantt {
  display: grid;
  grid-template-rows: auto auto auto;

  div {
    display: grid;
    grid-auto-flow: column;
    gap: 1rem;
    align-items: center;
  }
}

#context {
  fill: hsl(0, 80%, 30%);
}

#exec {
  fill: hsl(140, 80%, 30%);
}

#wait {
  fill: hsl(60, 80%, 30%);
}

#dead {
  fill: hsl(240, 5%, 30%);
}

#gantt-chart {
  width: 100%;
  display: block;
}

/* ===== FOOTER ===== */

footer {
  width: 100%;
  color: var(--cor-texto-header);
  background-image: linear-gradient(var(--cor-base-header), hsl(from var(--cor-base-header) h s calc(l - 40)));
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "sobre github source"
    "copy copy copy";
  grid-auto-flow: row;
  padding: 1rem 2rem;
  gap: 1rem 5rem;
  box-shadow: 0px 0px 80px 15px var(--cor-base-header);
  border-top: 1px solid hsl(from var(--cor-texto-header) h s l / .7);

  p {
    margin: 0;
  }
}

.footer-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: justify;
  gap: 1rem;
}

.footer-bottom {
  justify-items: center;
  font-size: 0.7rem;
  color: hsla(from var(--cor-texto-header) h s l / 0.3);
}

footer a {
  color: var(--cor-link);
  font-size: 1rem;
}