/*!*****************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/style.css ***!
  \*****************************************************************/
:root { 
   --bg:#0b1020;
   --text:#e6ecff; 
   --accent:#6aa3ff;
   --fav:#ff6b6b; 
   --ok:#4fd1a1; 
   --header:#e0e0e0;
    --header-dark:#464646;
  }

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  font-family: sans-serif;
  background-color: rgb(37, 37, 37);
  font-family:  "Josefin Sans",roboto;
}

body{
    display: grid;
  grid-template-rows: 1fr 6fr;
  grid-template-columns:1fr 5fr;
}

.heading{
  padding: 1rem;
  padding-right: 3rem;
  font-size: 2rem;
  background-color: rgb(56, 56, 56);
  color: #dadada;
  min-height: 4dvh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  grid-column: 1/3;
  border-bottom: solid 2px black;
  
}
.heading>.title:hover{
  transform: scale(1.05);
  color: rgb(233, 233, 233);
  text-shadow: 0 0 2px rgba(255,255,255,0.3);

    grid-row: 2/3;
}
.side-nav{
  display: flex;
  gap: 3rem;
}
.heading button{
  padding: 0;
  outline: none;
  border: none;
  margin: 0;
  background: none;
  transition: all 0.2s ease-in-out;

}
.heading svg{
  height: 2.7rem;
  width: auto;
  background-color: rgb(56, 56, 56);
  color: #fff;
}

.heading button:hover{
  transform: scale(1.1);
}
.heading .home:hover svg{
  background-color: rgb(56, 56, 58);
  fill: var(--text);
}
.heading svg:hover{
  transform: scale(1.05);
  opacity: 80%;
  fill: var(--text);
  cursor: pointer;
}
.sidebar{
  background-color: rgb(89, 89, 89);
  border-right: 1px solid black;
  color: var(--text);
  height: 100%;
}

.sidebar-header{
  padding: 0.5rem ;
  background-color: rgb(116, 116, 116);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}
.sidebar-title:hover{
  transform: scale(1.05);
  text-shadow: 0 0 4px rgba(255,255,255,0.3);
}
.sidebar-header svg{
 height: 1rem;
 width: auto;
 border-radius:3px;
 border: 2px solid black;
 fill: var(--bg);
}
.sidebar-header svg:hover{
  transform: scale(1.1);
  background-color: rgb(90, 90, 90);
  fill: var(--text);
  border-color: #212121;
}

.todo-list{
  background-color: #adadad;
      grid-column: 2/3;
  

}

.todo-header{
  min-height:50px;
  height: 10%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.3rem;
  background-color:var(--header);
  border-bottom: solid 1px purple;
  max-height:200px;
}
.todo-header > *{
  padding:0 1rem;
}

.add-todo-btn{
    margin: 0;  all: unset;  
     padding: 0.1rem;

  cursor: pointer;         
  display: inline-flex;    
  align-items: center;
  justify-content: center;
  border: 2px solid black;
  line-height: 0;
    border-radius: 8px;
        margin-right: 1rem;

}

.add-todo-btn.active{
  background-color: var(--fav);
}
.add-todo-btn svg{
  border-radius: 4px;
  fill: var(--bg);
  transition: transform 0.3s ease;
  transform-origin: 50% 50%; 
}
.add-todo-btn:hover{
  background-color: rgb(0, 179, 255);
}

.add-todo-btn svg:hover{
  transform: scale(1.1);

}
.add-todo-btn.active svg {
  transform: rotate(45deg); 

}
.add-todo-btn.active svg:hover{
  transform: scale(1.1) rotate(45deg);

}
.add-todo-btn.active:hover{
  background-color: var(--fav);
}
.hidden{
  display: none;
}
#form-container{
    opacity: 80%;
      border-bottom: solid 1px beige;

}

#form-container form{
  background-color: var(--header);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem;
  background-color: var(--header-dark);
  color: var(--text);
  
}
#form-container form textarea{
  max-height: 150px;
}
#form-container form :first-child{
  display: flex;
  gap: 2rem;
  
}

#form-container .form-actions{
  display: flex;
  gap: 6rem;

}

#form-container .submit{
  all: unset;
  background-color: var(--header-dark);
  color: var(--text);
  border: solid 2px black;
  padding: 0.3rem 0.5rem ;
  border-radius: 0.5rem;
}

#form-container .submit:hover{
  background-color: var(--accent);
  color: var(--bg);
  transform: scale(1.1);
}
.check-priority {
  display: flex;
  align-items: center; 
  gap: 0rem;     }

.check-priority input[type="checkbox"] {
  margin-left: -1.5rem;
  height: 1;
}

.check-priority label{
  display: flex;
align-items: center;
gap: 1rem;
}

.todo-items .empty-state{
  padding: 1.2rem;
  background-color: #8e8e8e;
  margin: 1rem;
  border: solid 1px black;
  font-size: 1.1rem;
  
}

.todo-item{
  background-color: #323232;
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-bottom: solid 1px beige;

  color: var(--text);
}

.todo-item .title{
  font-size: 1.5rem;
}
.todo-item:hover {
  border-left: 3px solid #4fc3f7;
}

.todo-item .p-d{
  display: flex;
  align-items: center;
  gap: 2rem;
}

.todo-item .delete:hover svg{
  cursor: pointer;
  fill: var(--fav);
  transform: scale(1.1);
}

.urgent{
  box-shadow: 0 0 4px rgba(255, 0, 0, 0.4);
  border: 1.5px solid rgba(255, 0, 0, 0.4);
  background-color: #616161;
  color: var(--bg);
}

.moderate{
    box-shadow: 0 0 5px rgba(255, 255, 0, 0.2);
  border: 1px solid rgba(255, 251, 0, 0.4);
  background-color: #585858;
  color: #d69a9a;
}

.priority svg{
  height: 1.5rem;
  width: auto;
}

.priority .moderate-icon svg{
  height: 1.1rem;
  width: auto;
}

.priority .urgent-icon{
  font-size: 1.7rem;
  color: red;
  font-weight: 700;
  display: flex;
  justify-content: start;
  margin-right: 0.4rem;
}
.todo-item.checked{
opacity: 50%;
}
.todo-item.checked .title{
  text-decoration: line-through;
}
.todo-item.checked .due-date{
  text-decoration: line-through;
}

.edit svg:hover{
  transform: scale(1.2);
  fill: var(--ok);
  cursor: pointer;
}

.description:hover{
  opacity: 60%;
  transform: scale(1.15);
  cursor: pointer;
}

.todo-description{
  margin: 2px 0;
  padding: 0.2rem 0.5rem 0.2rem 0.2rem;
  font-size: 0.8rem;
  border: solid 1px black;
  border-radius: 4px;
}

.description.checked{
  opacity: 30%;
}
.description {
  position: relative; 
}

.description.no-desc::after {
  content: "No description";
  position: absolute;
  background: #282828;
  color: #fff;
  font-size: 0.6rem;
  padding: 2px 5px;
  border-radius: 3x;
  white-space: nowrap;
  top: 100%;   
  left: 90%;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out;
}

.description.no-desc:hover::after {
  opacity: 1;
}

.add-project-btn:hover{
  cursor: pointer;
}

.project-item{
  display: flex;
  align-items: center;
  padding-left: 0.5rem;
  justify-content: space-between;
  border-bottom: solid 1px grey;
}
.delete-project-btn{
  all: unset;
  padding: 0.5rem;
}
.delete-project-btn svg{
  fill: white;
}
.delete-project-btn svg:hover{
cursor: pointer;
  fill: var(--fav);
  transform: scale(1.05);}
.active-project{
  opacity: 80%;
  color: var(--text);
  background-color: #323232;
}

.project-name:hover{
  cursor: pointer;
  transform: scale(1.05);
}
#info-container {
  display: none; 
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 800;
}

.info-modal {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  background-color: rgba(32, 32, 32, 0.95);

  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: auto;
  max-height: 80%;
  width: 90%;
  max-width: 600px;
  overflow-y: auto;
  z-index: 900;

  border: solid 1px rgb(57, 56, 58);
  border-radius: 1.2rem;

  font-size: 1.6rem;
  color: white;

  padding: 2rem;
  box-shadow: 0 10px 40px rgba(83, 83, 83, 0.5);
}

.info-close {
    position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 2rem;
  padding: 0.3em 0.6rem;
  background: transparent;
  border: none;
  color: #fff;
}

.info-close:hover{
    cursor: pointer;
  opacity: 80%;
  transform: scale(1.1);
}
.info-text p{
  line-height: 2.5rem;
}
.info-text{
  display: flex;
  flex-direction: column;
  font-family: Roboto;
  font-weight: 400;
  font-size: 1.1rem;
}
html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  font-family: sans-serif;
  background-color: rgb(37, 37, 37);
  font-family:  "Josefin Sans",roboto;
    visibility: visible;
    opacity: 1;
}