/*
  Base Resolutions:
  - Mobile: 375px
  - Desktop: 1440px
*/

/* 
  css-variables-structure
  static-variables
  --type-name-special-details

  Theme components (switchable properties)
  --prop-about-component_type-special--state 
*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* -- Static styles */

  --clr-white: hsl(0, 0%, 100%);
  /* --clr-black: hsl(0, 0%, 0%); */
  --clr-blue-S98-L61: hsl(220, 98%, 61%);
  --clr-blue-grd-r: linear-gradient(to right, hsl(192, 100%, 67%) 0%, hsl(280, 87%, 65%) 100%);
  
  --clr-gray-L98: hsl(0, 0%, 98%);
  --clr-blue-S33-L92: hsl(236, 33%, 92%);
  --clr-blue-S11-L84: hsl(233, 11%, 84%);
  --clr-blue-S10-L66: hsl(235, 10%, 66%);
  --clr-blue-S09-L61: hsl(236, 9%, 61%);
  --clr-blue-S19-L35: hsl(235, 19%, 35%);

  --clr-blue-S21-L11: hsl(235, 21%, 11%);
  --clr-blue-S24-L21: hsl(235, 24%, 21%);
  --clr-blue-S24-L19: hsl(235, 24%, 19%);
  --clr-blue-S39-L85: hsl(234, 39%, 85%);
  --clr-blue-S11-L52: hsl(234, 11%, 52%);
  --clr-blue-S14-L42: hsl(238, 14%, 42%);

  --shdw-light: 0 0 30px 0px hsla(0, 0%, 40%, 0.200);
  --shdw-dark: 0 0 30px 0px hsla(0, 0%,  0%, 0.300);


  /* -- Static General */

    --w-gnrl: clamp(290px, 100%, 550px);

    --fmly-fnt: 'Josefin Sans', Helvetica, sans-serif, serif;
    --sz-fnt: 18px;
    --sz-fnt-btns: 14px;
    --sz-fnt-dragdrop: 13px;

    --spc-header: 75px;
    --spc-mid: 40px;
    --spc-basic: 25px;


  /* -- Static components */
  
    --m-h-task-chckbx: 25px;
    --m-v-task-chckbx: 20px;
    --w-task-chckbx: 25px;
    --w-task-chckbx-container: calc(var(--w-task-chckbx) + var(--m-h-task-chckbx)*2);

    --clr-fnt-header-title: var(--clr-gray-L98);
    --clr-fnt-dragdrop: var(--clr-blue-S09-L61);
    

  /* -- Theme components */
  
    --clr-bg-body: var(--clr-gray-L98);
    --clr-bg-task-block: var(--clr-white);
    --clr-bg-task-delete: var(--clr-gray-L98);

    --clr-fnt-text: var(--clr-blue-S19-L35);
    --clr-fnt-text--disabled: var(--clr-blue-S09-L61);

    --clr-fnt-inpt: var(--clr-blue-S19-L35);
    --clr-fnt-inpt-holder: var(--clr-blue-S10-L66);

    --clr-fnt-btn: var(--clr-blue-S09-L61);
    --clr-fnt-btn--hover: var(--clr-blue-S19-L35);
    --clr-fnt-btn--active: var(--clr-blue-S98-L61);

    --clr-fnt-chckbx: var(--clr-white);
    --clr-brd-chckbx: var(--clr-blue-S11-L84);
    --clr-brd-chckbx--hover: var(--clr-blue-S98-L61);
    --clr-bg-chckbx--checked: var(--clr-blue-grd-r);

    --shdw-task-block: var(--shdw-light);

    --url-body-img: url(./images/bg-desktop-light.jpg);

  /* -- */

}

body {
  font-family: var(--fmly-fnt);
  font-size: var(--sz-fnt);

  width: 100%;
  height: 100vh;

  background-color: var(--clr-bg-body);
  background-image: var(--url-body-img);
  background-repeat: no-repeat;
  background-size: 100% 300px;

  display: flex;
  /* grid-template-columns: var(--w-gnrl); */
  flex-direction: column;
  /* justify-content: center; */
  align-items: center;
  padding: 0px 30px;
}
body.dark-theme {
  --clr-bg-body: var(--clr-blue-S21-L11);
  --clr-bg-task-block: var(--clr-blue-S24-L19);
  --clr-bg-task-delete: var(--clr-blue-S24-L21);

  --clr-fnt-text: var(--clr-blue-S39-L85);
  --clr-fnt-text--disabled: var(--clr-blue-S11-L52);

  --clr-fnt-inpt: var(--clr-blue-S39-L85);
  --clr-fnt-inpt-holder: var(--clr-blue-S14-L42);

  --clr-fnt-btn: var(--clr-blue-S14-L42);
  --clr-fnt-btn--hover: var(--clr-blue-S33-L92);

  --clr-brd-chckbx: var(--clr-blue-S14-L42);

  --shdw-task-block: var(--shdw-dark);

  --url-body-img: url(./images/bg-desktop-dark.jpg);
}

.header {
  color: var(--clr-fnt-header-title);
  letter-spacing: 20px;
  font-size: 40px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--spc-header);
  padding: 0px 10px;
  width: var(--w-gnrl);
}
.header > img {
  height: 35px;
  cursor: pointer;
  transition: opacity 0.2s;
}
.header > img:hover { opacity: 0.9; }

body.light-theme > .header > #light { display: none; }
body.dark-theme > .header > #dark { display: none; }


.task_manager {
  margin-top: var(--spc-mid);
  width: var(--w-gnrl);
}
.task_manager > div:nth-child(n+2) {
  position: relative;
}
.task_manager > div:nth-child(n+2)::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: transparent;
  border-radius: 6px;
  box-shadow: var(--shdw-task-block);
  z-index: -1;
}

.task {
  display: grid;
  align-items: center;
  grid-template-columns: var(--w-task-chckbx-container) 1fr var(--w-task-chckbx-container);
  background-color: var(--clr-bg-task-block);
  color: var(--clr-fnt-text);
}
.task[data-completed="true"] {
  color: var(--clr-fnt-text--disabled);
  text-decoration: line-through;
}

#new_task {
  border-radius: 6px;
}
#new_task > input {
  outline: none;
  border: none;
  height: 100%;
  background-color: transparent;
  font-family: var(--fmly-fnt);
  font-size: var(--sz-fnt);
  margin-bottom: -4px;
  color: var(--clr-fnt-inpt);
}
#new_task.task[data-completed="true"] { text-decoration: none; }
#new_task > input::placeholder { color: var(--clr-fnt-inpt-holder); }

.task_list, #task_footer_alt.task_footer {
  margin-top: var(--spc-basic);
}

.task_list > div:first-child { border-radius: 6px 6px 0px 0px; }
.task_list > div:nth-child(n+2), #task_footer {
  box-shadow: inset 0 1px 0 0 hsla(0, 0%, 35%, 0.2);
}

.task_check {
  border-radius: 50%;
  border: 0.5px solid var(--clr-brd-chckbx);
  width: var(--w-task-chckbx);
  height: 25px;
  margin: var(--m-v-task-chckbx) var(--m-h-task-chckbx);
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  cursor: pointer;
}
.task_check:hover {
  border: 0.5px solid var(--clr-brd-chckbx--hover);
}
.task[data-completed="true"] > .task_check {
  background: var(--clr-bg-chckbx--checked);
}

.task_check > svg { pointer-events: none; }
.task_check > svg > path { stroke: transparent; }
.task[data-completed="true"] > .task_check > svg > path { stroke: var(--clr-fnt-chckbx); }

.task_text {
  margin-bottom: -4px;
  padding: 15px 0px;
}

.task_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  height: 100%;
  position: relative;
}
.task_btn:hover {
  box-shadow: inset 0 1px 0 0 hsla(0, 0%, 35%, 0.2);
  background-color: var(--clr-bg-task-delete);
}
.task_btn > svg { pointer-events: none; }

.task_add > svg { transform: rotateZ(45deg); }

.task_footer {
  display: grid;
  /* justify-content: space-between; */
  background-color: var(--clr-bg-task-block);
  grid-auto-flow: column;
  height: 55px;
  align-items: center;
  padding: 0px var(--m-h-task-chckbx);

  font-size: var(--sz-fnt-btns);
  color: var(--clr-fnt-btn);
}
#task_footer { grid-template-columns: 120px 1fr 120px; }

.principal_btns {
  display: grid;
  grid-auto-flow: column;
  justify-content: center;
  grid-gap: 20px;
}

.btn {
  font-weight: 700;
  user-select: none;
  cursor: pointer;
}
.btn:hover { color: var(--clr-fnt-btn--hover); }
.btn.active { color: var(--clr-fnt-btn--active); }

.btn-scnd { font-weight: 400; }


#task_footer { border-radius: 0px 0px 6px 6px; }
#task_footer_alt { 
  display: none;
  border-radius: 6px;
  justify-content: center;
}

.dragdrop_info {
  color: var(--clr-fnt-dragdrop);
  margin-top: 50px;
  font-size: var(--sz-fnt-dragdrop);
  padding-bottom: 20px;
}


@media screen and (max-width: 580px) {
  #task_footer { grid-template-columns: auto; justify-content: space-between;}
  #task_footer > .principal_btns { display: none; }
  #task_footer_alt { display: grid; }
}