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

:root{
    --green-400: #18813F;
    --green-300: #22C55E;
    --green-100: #C7FFE4;
    
    --green-line: #4ADE80;

    --red-300: #CA2B2B;
    --red-200: #D53C3C;
    --red-100: #DB4B4B;

    --yellow-300: #CF8405;
    --yellow-200: #F59E0B;
    --yellow-100: #f5ad30;

    --blue-300: #0B46A9;
    --blue-200: #3B82F6;
    --blue-100: #5c96f3;

    --text-color-500: #111827;
    --text-color-400: #374151;
    --text-color-300: #6B7280;

    --purple-text: #6366F1;
    --purple-effect: #787BFA; 

    --bg-color: #F3F4F6;
    --high-bg-color: #FFFFFF; 

    --size-h1: clamp(3rem, 4.5vw, 4rem);
    --size-h2: clamp(2.4rem, 3.5vw, 3.2rem);
    --size-h3: clamp(1.8rem, 3vw, 2.4rem);

    --size-body: clamp(1.6rem, 2vw, 1.8rem);
    --size-small: clamp(1.4rem, 1.6vw, 1.6rem);
    --size-caption: clamp(1.2rem, 1.2vw, 1.4rem);

    --bold: 700;
    --semibold: 600;
    --normal: 500;
    --regular: 400;
}

/* =========================
   BASE
========================= */

html { font-size: 62.5%; }

body {
    margin: 0;
    background-color: var(--bg-color);
    color: var(--text-color-500);
    font-family: "Inter", system-ui, sans-serif;
}

.container {
    min-height: 100vh; 
    padding: 3.6rem 3.6rem 0;
    display: flex;
    flex-direction: column;
}

main { flex: 1; }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

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

#web-name {
    display: block;
    font-size: var(--size-h3);
    font-weight: var(--semibold);
    color: var(--purple-text);
    margin-bottom: 4.8rem;
    letter-spacing: 0.1rem;
}

.logo {
    margin: 2rem 0 3.2rem;
    text-align: center;
}

.logo h2 {
    font-size: var(--size-h2);
    font-weight: var(--medium);
}

.logo h1 {
    font-size: var(--size-h1);
    font-weight: var(--semibold);
}

.logo h1 span { 
    font-weight: bold; 
    color: var(--purple-text);
}


/* =========================
   TASK FORM
========================= */

.input-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    background-color: var(--high-bg-color);
    border-radius: 1rem;
    border: 1.5px solid var(--text-color-300);
}

.input-wrapper .icon {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    width: 1.6rem;
    height: 1.6rem;
    color: var(--text-color-300);
}

#campo-tarefa {
    width: 95%;
    padding: 0.7rem 1.6rem;
    border-radius: 1rem;
    margin: .1rem;
    border: 0;
    outline: none;
}

#campo-tarefa::placeholder {
    height: 100%;
    font-size: var(--size-small);
    font-weight: var(--regular);
    opacity: 0.8;
}

.input-wrapper:focus-within{ border-color: var(--purple-effect); }
#campo-tarefa:focus ~ .icon{ color: var(--purple-text);}

.texto-de-erro-container{
    display: flex;
    max-height: 0;
    overflow: hidden;
    transition: all .2s ease-in-out;
}

.texto-de-erro-container.ativo { 
    max-height: 5rem; 
    transition: all .2s ease-in-out;
}

#texto-de-erro{ 
    display: block;
    font-size: var(--size-caption);
    padding: .4rem .8rem 0;
    font-weight: var(--normal);
    color: var(--red-100); 
    font-weight: var(--normal);
    width: 100%;
    max-height: 0;
    transform: translateY(-100%);
}

.texto-de-erro-container.ativo #texto-de-erro{ 
    transform: translateY(0);
    max-height: 2rem;
}

 
#campo-tarefa.erro-form ~ .icon{ color: var(--red-100);}
.input-wrapper:has(#campo-tarefa.erro-form) { border-color: var(--red-200);}

.input-wrapper:has(#campo-tarefa.erro-form){ animation: animacao-erro 0.35s ease-in-out; }

@keyframes animacao-erro {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-6px); }
  40%  { transform: translateX(6px); }
  60%  { transform: translateX(-6px); }
  80%  { transform: translateX(6px); }
  100% { transform: translateX(0); }
}

/* =========================
   FILTROS E AÇÕES
========================= */

.S-formulario{
    overflow: hidden;
    max-height: 3.5rem;
    transition: all .2s ease-in-out;
}

.filtros-e-acao {
    display: flex;
    flex-direction: column-reverse;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    width: 100%;
    margin-top: 0.8rem;
    position: relative;
    overflow: hidden;
    transform: translateY(-120%);
    opacity: 0;
    position: relative;
    z-index: -1;
    transition: all .2s ease-in-out;
}

.S-formulario.ativo{ max-height: 20rem; }

.S-formulario.ativo .filtros-e-acao{
    transform: translateY(0);
    opacity: 1;
    z-index: 1;
}

/* FILTROS */

.filtros {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    width: 100%;
    padding: 0.6rem;
    border: 1.5px solid var(--text-color-300); 
    border-radius: 1rem; 
    background-color: var(--high-bg-color);
    transform: translateY(100%) scale(0);
    opacity: 0;
    transition: all 0.1s ease-in-out;
}

.item-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    outline: none;
    font-size: var(--size-caption);
    font-weight: var(--medium);
    text-align: center;
    color: var(--text-color-400);
    opacity: 0.8;
    cursor: pointer;
    appearance: none; 
    -webkit-appearance: none;
}

.divider {
    margin: 0 0.4rem;
    color: var(--text-color-300);
}

/* AÇÔES */

.acoes {
    display: flex;
    align-items: end;
    justify-content: space-between;
    width: 100%;
    gap: 0;
    position: relative;
    min-height: 3.6rem;
    transition: min-height 0.2s ease-in-out;
}

#add-filtros-input{ display: none; }

label[for="add-filtros-input"] {
    display: block;
    padding: 0.9rem 1rem;
    font-size: var(--size-caption);
    font-weight: var(--semibold);
    color: var(--purple-text);
    background-color: transparent;
    border: none;
    border-radius: 2.4rem;
    transition: all 0.2s ease-in-out;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);    
    cursor: pointer;
}

/* =========================
   EXIBIR FILTROS (CHECKED)
========================= */

#add-filtros-input:checked ~ .acoes { min-height: 7.2rem; }

#add-filtros-input:checked ~ .acoes label[for="add-filtros-input"]{
    background-color: var(--purple-effect);
    color: var(--bg-color);
    text-shadow: none;
}

#add-filtros-input:checked ~ .filtros { 
    transform: translateY(0) scale(1);
    opacity: 1;
}


/* =========================
   BOTÕES FORMULÁRIO
========================= */

.acoes-btns button,
#criar-tarefa-btn {
    padding: 0.8rem 1rem;
    margin: 0 0.2rem;
    font-size: var(--size-caption);
    font-weight: var(--semibold);
    border-radius: 0.8rem;
    border: 1.5px solid var(--purple-effect);
    cursor: pointer;
    transition: all 0.2s ease;
}

.acoes-btns button:hover,
#criar-tarefa-btn:hover,
label[for="add-filtros-input"]:hover,
label[for="mostrar-todas-btn"]:hover,
label[for="filtrar-demais-tarefas"]:hover,
#reverter-filtros-btn:hover{ 
    opacity: .8; 
    transform: scale(1.01);
}

#enviar-tarefa-btn,
#criar-tarefa-btn {
    background-color: var(--purple-effect);
    color: var(--bg-color);
}

#cancelar{
    background-color: var(--high-bg-color);
    color: var(--purple-effect);
}

.acoes button:active,
#criar-tarefa-btn:active { transform: scale(0.96); }


/* =========================
   TAREFAS CONCLUÍDAS
========================= */

.S-tarefas-concluidas { margin: 2.4rem 0 1.6rem; }

#TC-text {
    font-size: var(--size-caption);
    font-weight: var(--regular);
    color: var(--text-color-400);
}

#TC-text span {
    font-weight: var(--semibold); 
    color: var(--green-300);
}

#T-concluidas-linha {
    display: flex;
    justify-content: start;
    align-items: center;
    width: 100%;
    height: 1.6rem;
    margin-top: 0.8rem;
    border: 0.2rem solid var(--green-line);
    border-radius: 3.2rem;
    overflow: hidden;
    padding: .2rem;
    position: relative;
}

#T-concluidas-barra{
    height: 100%;
    border-radius: 3.2rem;
    background-color: var(--green-line);
    transition: width .3s ease-in-out;
}

#T-concluidas-text{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 10;
    color: var(--text-color-400);
    font-weight: var(--regular);
    font-size: var(--size-caption);
}

/* =========================
   TAREFA DESTAQUE
========================= */

.tarefa-destaque-container{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

li.tarefa-destaque{
    position: relative;
    margin: 1.2rem auto;
    min-height: 17.5rem;
    position: relative;
}

li.tarefa-destaque .tarefa-titulo {
    font-size: var(--size-body); 
    font-weight: var(--normal);
}


#T-destaque-title{
    font-size: var(--size-h3);
    font-weight: var(--semibold);
    color: var(--text-color-400);
    margin-top: 1.6rem;
}

.nenhuma-tarefa-container{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.6rem;
    flex-direction: column;
    margin: auto 0;
    min-height: 19.9rem;
    width: 100%;

}

#nenhuma-tarefa-text{
    text-align: center;
    font-size: var(--size-caption);
    font-weight: var(--regular);
    color: var(--text-color-300);
}


li.tarefa-destaque .info-principais{ margin-top: .8rem;}
li.tarefa-destaque .info-filtros{ padding-bottom: 2.4rem; }

li.tarefa-destaque .tarefa-titulo{ 
    font-size: var(--size-h2);
    font-weight: var(--semibold);
}

.acoes-t-destaque { 
    display: none; 
    align-items: center;
    justify-content: space-between;
    padding: 2rem 2.4rem 1.6rem;
}

.checkbox.destaque .check-legenda,
.editar-tarefa-btn{ 
    font-size: var(--size-small); 
    font-weight: var(--regular);
}

.editar-tarefa-btn.destaque svg{
    width: 1.6rem;
    height: 1.6rem;
    pointer-events: none;
}

.checkbox{
    display: flex;
    align-items: center;
    gap: .8rem;
    cursor: pointer;
}

.checkbox input{
    position: absolute;
    opacity: 0;
}

.box{
    display: inline-block;
    width: 1.6rem;
    height: 1.6rem;
    border: .2rem solid;
    border-radius: .5rem;
    position: relative;
    transition: all .2s ease;
}

.checkbox input:checked + .box{ border-color: var(--green-300);}


.checkbox input:checked + .box::after{
    content: '';
    position: absolute;
    left: .39rem;
    top: 0;
    width: .3rem;
    height: .8rem;
    border: solid var(--green-300);   
    border-width: 0 .2rem .2rem 0; 
    transform: rotate(45deg);
}

.check-d,
.editar-tarefa-btn.destaque{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .8rem;
    cursor: pointer;
    border: none;
    background-color: transparent;
}

li.tarefa-destaque .checkbox.normal,
li.tarefa-destaque .editar-tarefa-btn{ display: none; }

/* Estados da tarefa destaque */

li.tarefa-destaque .acoes-t-destaque,
li.tarefa-destaque .check-tarefa-input.destaque,
li.tarefa-destaque .editar-tarefa-btn.destaque { display: flex; }

li.tarefa-destaque .tarefa-titulo {
    transform: translateX(0);
    text-align: left;
    color: var(--red-200);
}

li.tarefa-destaque::before { display: none; }

/* Barra dos filtros*/
li.tarefa-destaque .info-filtros::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-53%);
    width: 64%;
    height: 0.2rem;
    opacity: 0;
    transition: opacity 0.1s ease-in-out;
}

/* =========================
   FILTRAGEM DAS TAREFAS
========================= */

.filtragem{
    display: flex;
    justify-content: center;
    margin: 0 auto;
    margin-top: .8rem;
    width: 90%;
    max-height: 0;
    overflow: hidden;
    transition: all .2s ease-in-out;
}

.filtragem-card{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .8rem;
    flex-direction: column;
    background-color: var(--high-bg-color);
    border-radius: 1.6rem;
    width: 100%;
    border: 1.5px solid var(--purple-effect);
    padding: 1.6rem 2rem;
    transform: translateY(-100%);
    opacity: 0;
    transition: all .2s ease-in-out;
}

.filtragem-card div{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    gap: .8rem;
}

.filtragem-card div label{
    font-size: var(--size-small);
    font-weight: var(--regular);
    color: var(--text-color-400);
}

.filtragem-card select{
    background-color: var(--high-bg-color);
    border: 1.5px solid var(--text-color-300);
    border-radius: 1rem;
    color: var(--text-color-400);
    font-size: var(--size-caption);
    outline: none;
    padding: .4rem .8rem;
    appearance: none;
    text-align: center;
    -webkit-appearance: none;
    cursor: pointer;
}

#reverter-filtros-btn{
    font-size: var(--size-small);
    font-weight: var(--semibold);
    color: var(--purple-text);
    background-color: var(--high-bg-color);
    border: 1.5px solid var(--purple-effect);
    border-radius: .8rem;
    padding: .8rem 1.2rem;
    margin-top: .8rem;
    width: 100%;
    transition: transform .2s ease;
    cursor: pointer;
}

#reverter-filtros-btn:active{ transform: scale(0.96); }

.checkboxes-tarefas{
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 1.6rem;
    padding: 0 .8rem;
}

.checkboxes-tarefas label{
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .8rem 1.2rem;
    border-radius: 2.4rem;
    font-weight: var(--semibold);
    font-size: var(--size-caption);
    color: var(--purple-text);
    transition: all .2s ease-in-out;
    cursor: pointer;
}

label[for="filtrar-demais-tarefas"]{ border: 1.5px solid var(--purple-effect); }
label[for="mostrar-todas-btn"]{ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }


#filtrar-demais-tarefas:checked ~ .checkboxes-tarefas label[for="filtrar-demais-tarefas"],
#mostrar-todas-btn:checked ~ .checkboxes-tarefas label[for="mostrar-todas-btn"]{
    background-color: var(--purple-effect);
    color: var(--bg-color);
    text-shadow: none;
}

#mostrar-todas-btn:checked ~ .exibicao-todas-tarefas .lista-container{ overflow-y: auto;}

.checkboxes-tarefas label svg{
    width: 1.2rem;
    height: 1.2rem;
}

#mostrar-todas-btn:checked ~ .checkboxes-tarefas label[for="mostrar-todas-btn"] svg{ transform: rotate(180deg); }


#mostrar-todas-btn:checked ~ .exibicao-todas-tarefas ul{
    opacity: 1; 
    visibility: visible;
    transform: translateY(0);
}

#mostrar-todas-btn:checked ~ .checkboxes-tarefas label[for="filtrar-demais-tarefas"]{ display: flex; }

#mostrar-todas-btn,
#filtrar-demais-tarefas,
label[for="filtrar-demais-tarefas"]{ display: none; }

#filtrar-demais-tarefas:checked ~ .exibicao-todas-tarefas .filtragem{ max-height: 40rem;}

#filtrar-demais-tarefas:checked ~ .exibicao-todas-tarefas .filtragem .filtragem-card{ 
    transform: translateY(0);
    opacity: 1;
}

/* =========================
   LISTA DE TAREFAS
========================= */

.lista-container{
    margin-top: 1.6rem;
    max-height: 20.8rem;
    /* padding-bottom: .8rem; */
    overflow-y: hidden;
    opacity: 1;
}

.lista-container::-webkit-scrollbar{ width: .8rem; }
.lista-container::-webkit-scrollbar-track{ background-color: #e8e8e8; }

.lista-container::-webkit-scrollbar-thumb{
    background-color: #bdbdbd;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    border-radius: .5rem;
}

.lista-container::-webkit-scrollbar-thumb:hover{ background-color: var(--purple-effect); }

ul {
    display: flex;
    flex-direction: column;
    padding: 0 0.8rem;
    gap: 0.4rem;
    opacity: 0;
    visibility: hidden;
    transition: all .1s ease;
    transform: translateY(-100%);
}

li { 
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
    list-style: none;
    border-radius: 1rem;
    background-color: var(--high-bg-color);
    box-shadow: 0.2rem 0.3rem 0.2rem rgba(0, 0, 0, 0.2);
    max-height: 4.8rem;
    overflow: hidden;
    transition: max-height 0.1s ease-in-out, box-shadow .2s ease-in-out, transform .2s ease-in-out;
}

li:hover{ 
    box-shadow: 0.2rem 0.3rem 0.2rem rgba(0, 0, 0, 0.3); 
    transform: scale(1.005);
}

li.ativo { max-height: 9.6rem; }

/* Barra lateral */

li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0.8rem;
    height: 100%;
    background-color: var(--text-color-500);
}

/* =========================
   CONTEÚDO INTERNO TASKS
========================= */

.info-principais,
.info-filtros { 
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 2rem;
    height: 4.8rem;
    padding: 1.6rem 2.4rem;
}

.tarefa-titulo {
    position: relative;
    width: 100%;
    font-size: var(--size-body);
    font-weight: var(--semibold);
    text-align: center;
    transform: translateX(1em);
    overflow: auto;
    cursor: pointer;
}

.tarefa-acoes {
    display: flex;
    gap: 1.6rem;
}

svg { pointer-events: none; }

/* =========================
   BOTÕES DE AÇÃO TASKS
========================= */

.tarefa-acoes button{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    cursor: pointer;
    border: none;
    background-color: transparent;
}

.tarefa-acoes button,
.checkbox,
.checkbox.destaque,
.editar-tarefa-btn,
.tarefa-titulo{ transition: filter .1s ease-in-out; }

.tarefa-acoes button:hover,
.checkbox:hover,
.checkbox.destaque:hover,
.editar-tarefa-btn:hover,
.tarefa-titulo:hover{ filter: brightness(80%); }

.tarefa-acoes button svg{
    width: 2rem;
    height: 2rem;
}

/* =========================
   FILTROS TASKS
========================= */

.info-filtros { 
    position: relative; 
    font-size: var(--size-caption);
    color: var(--text-color-400);
    white-space: pre-wrap;
    text-align: center;
}

.info-filtros::before {
    content: '';
    position: absolute;
    top: -0.9rem;
    left: 50%;
    transform: translateX(-54%);
    width: 43%;
    height: 0.2rem;
    opacity: 0;
    transition: opacity 0.1s ease-in-out;
}

li.ativo .info-filtros::before { opacity: 1;}

/* =========================
   BOTÃO EDITAR TASK
========================= */

.editar-tarefa-btn { opacity: 0; }
li.ativo .editar-tarefa-btn { opacity: 1; }

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

footer{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    margin-top: 2.4rem;
    padding: 3.2rem 0;
    border-top: .2rem solid var(--purple-effect);
}

footer p{
    font-size: var(--size-caption);
    font-weight: var(--semibold);
    color: var(--text-color-300);
}

footer p span{
    color: var(--purple-text);
    font-weight: var(--semibold);
}