/* FONT */
@import url('https://fonts.googleapis.com/css2?family=KoHo:wght@500;600&display=swap');

/* VARIABLES */
:root {
   --color-light: #fff;
   --color-dark: #0f0500;
   --color-primary: #bb4444;
   --color-secondary: #c3a38a;
   --color-text: #654532;
   --color-hover: #913535;

   --color-bg-toggle: var(--color-light);
   --color-text-toggle: var(--color-dark);

   --size-xs: 0.5rem;
   --size-xs-sm: 0.9rem;
   --size-sm: 1rem;
   --size-sm-md: 1.3rem;
   --size-md: 1.5rem;
   --size-md-lg: 1.8rem;
   --size-lg: 2rem;
   --size-xl: 2.5rem;
}

/* RESET */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'KoHo', sans-serif;
   font-weight: normal;
   letter-spacing: -1px;
   word-break: break-word;
   text-decoration: none;
   list-style: none;
   border: none;
   outline: none;
}

/* SCROLLBAR */
body::-webkit-scrollbar,
body::-webkit-scrollbar-button {
   width: 20px;
   height: 10px;
}
body::-webkit-scrollbar-thumb {
   background-color: var(--color-primary);
   border: 5px solid var(--color-dark);
   border-radius: 20px;
}
body::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:active {
   background-color: var(--color-hover);
}

/* GLOBAL */
body {
   background-color: var(--color-dark);
   background-image: url('../images/bg-lista-tarefas.jpg');
   background-position: center;
   background-size: cover;
   background-attachment: fixed;
   color: var(--color-text);
   padding: var(--size-lg) var(--size-md);
}
header {
   padding-bottom: var(--size-md-lg);
   border-bottom: 1px dashed var(--color-text);
}
header h1 img {
   width: 90%;
   max-width: calc(var(--size-lg) * 10);
}
main {
   display: flex;
   flex-direction: column;
   margin: var(--size-sm) 0;
}
h2 {
   color: var(--color-text);
   font-size: var(--size-lg);
   font-weight: bold;
}
h2 i {
   font-size: var(--size-md-lg);
   color: var(--color-primary);
   margin-right: calc(var(--size-md) / 2);
}
h3 {
   color: var(--color-text-toggle);
   font-size: var(--size-sm-md);
   font-weight: bold;
}
h3 i {
   font-size: var(--size-sm-md);
   color: var(--color-primary);
   margin-right: calc(var(--size-sm-md) / 2);
}
footer p {
   color: var(--color-secondary);
   font-size: var(--size-xs-sm);
   letter-spacing: 0;
}

/* LINK */
a {
   color: var(--color-primary);
   transition: color 0.3s;
}
a:focus,
a:hover,
a:active {
   color: var(--color-hover);
   text-decoration: underline;
}
a[target='_blank'] i {
   font-size: var(--size-xs-sm);
   padding-left: calc(var(--size-xs) / 2);
}

/* FORM */
label,
.label {
   display: inline-block;
   font-size: var(--size-sm-md);
   margin: var(--size-xs) 0;
}
input::placeholder {
   color: var(--color-secondary);
}
input[type='file'] {
   display: none;
}
input,
select {
   width: 100%;
   border-bottom: 2px solid var(--color-primary);
   background-color: transparent;
   font-size: var(--size-sm);
   letter-spacing: 0;
   color: var(--color-primary);
   padding: var(--size-xs);
   transition: 0.3s;
}
input:hover,
input:focus,
input:active,
select:hover,
select:focus,
select:active {
   border-color: var(--color-hover);
}
label,
select,
button,
a {
   cursor: pointer;
}
button,
.btn-label-file {
   min-width: var(--size-lg);
   min-height: var(--size-lg);
   background-color: var(--color-primary);
   font-family: 'KoHo', sans-serif;
   font-size: var(--size-xs-sm);
   font-weight: bold;
   letter-spacing: 0;
   color: var(--color-light);
   border-radius: var(--size-xs);
   transition: all 0.5s;
}
button:hover,
button:focus {
   background-color: var(--color-hover);
   transform: translateY(-2px);
}
button i {
   pointer-events: none;
}
button:hover i {
   transform: scale(1.1);
   transition: 0.2s;
}

/* ADDED GLOBALS */
.flex-col-center {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}
.hide {
   display: none;
}
.shadow {
   box-shadow: 0 0 5px var(--color-dark);
}
.header-for-print {
   display: grid;
   grid-template-columns: 1fr 52px;
}
.dark-theme {
   --color-bg-toggle: var(--color-dark);
   --color-text-toggle: var(--color-secondary);
}
#task-container {
   max-width: calc(var(--size-lg) * 23);
   margin: 0 auto;
   position: relative;
   background-color: var(--color-bg-toggle);
   padding: var(--size-md-lg) var(--size-lg);
}
#task-container::before,
#task-container::after {
   content: '';
   width: 100%;
   height: var(--size-md);
   position: absolute;
   transform: rotate(180deg);
}
#task-container::before {
   top: -1rem;
   right: 0;
   background: linear-gradient(
         135deg,
         var(--color-bg-toggle) calc(var(--size-md) / 2),
         transparent 0%
      ),
      linear-gradient(
         -135deg,
         var(--color-bg-toggle) calc(var(--size-md) / 2),
         transparent 0%
      );
   background-size: var(--size-sm);
}
#task-container::after {
   bottom: -1rem;
   right: 0;
   background: linear-gradient(
         45deg,
         var(--color-bg-toggle) calc(var(--size-md) / 2),
         transparent 0%
      ),
      linear-gradient(
         -45deg,
         var(--color-bg-toggle) calc(var(--size-md) / 2),
         transparent 0%
      );
   background-size: var(--size-sm);
}
.form-control {
   display: flex;
   align-items: end;
   justify-content: center;
   gap: var(--size-xs);
   position: relative;
}
#form-theme label {
   width: 52px;
   height: 28px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   border: 1px solid var(--color-primary);
   border-radius: 50px;
   padding: 6px 9px 6px 5px;
   position: relative;
   transform: scale(0.8);
}
#form-theme label i {
   color: var(--color-dark);
   font-size: var(--size-sm);
}
#form-theme label i.fa-sun {
   color: var(--color-secondary);
}
.theme-ball {
   width: 22px;
   height: 22px;
   background-color: var(--color-primary);
   border-radius: 50%;
   position: absolute;
   top: 2px;
   left: 2px;
   transition: transform 0.3s;
}
.theme-ball:focus,
.theme-ball:hover {
   background-color: var(--color-hover);
}
#form-edit,
#form-import {
   padding-bottom: var(--size-lg);
   margin-bottom: var(--size-sm);
   border-bottom: 1px dashed var(--color-secondary);
}
#form-edit button,
#form-import button {
   margin-top: var(--size-sm);
}
#form-import h3 {
   color: var(--color-primary);
   font-size: calc(var(--size-xl) / 2);
   font-weight: normal;
   margin: var(--size-xs-sm) 0;
}
#form-import ol {
   margin-bottom: var(--size-xs-sm);
}
#form-import ol li::before {
   content: '→';
   color: var(--color-primary);
   font-size: var(--size-sm-md);
   margin-right: calc(var(--size-sm) / 3);
}
#alert-add,
#alert-edit,
#alert-search,
#filename-import,
#alert-import {
   line-height: var(--size-lg);
   color: var(--color-primary);
}
#alert-add i,
#alert-edit i,
#alert-search i,
#filename-import i,
#alert-import i {
   font-size: var(--size-sm);
   color: var(--color-primary);
   margin-right: calc(var(--size-sm) / 2);
}
#toolbar {
   display: flex;
   gap: var(--size-lg);
   margin: var(--size-sm) 0;
}
#form-search,
#form-filter {
   flex: 1;
}
#form-search .form-control {
   padding-right: var(--size-md-lg);
   border-right: 1px dashed var(--color-secondary);
}
#task-list-container {
   margin: var(--size-sm) 0;
}
#task-list-info {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   padding-bottom: var(--size-sm);
   border-bottom: 1px dashed var(--color-secondary);
   gap: var(--size-xs);
}
#task-list-container h2,
#task-list-info p {
   animation: fade-in 700ms ease-in;
}
#task-list-info p {
   flex: 1;
   padding-top: var(--size-sm);
   font-weight: bold;
}
#task-list-info p span {
   font-weight: normal;
}
#task-list-info p i {
   margin-right: calc(var(--size-xs) / 2);
}
.task-list-btns {
   display: flex;
   gap: var(--size-xs);
}
.task {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: var(--size-xs-sm) 0;
   border-bottom: 1px dashed var(--color-secondary);
   gap: var(--size-md);
   animation: render-task 700ms ease-in;

   position: relative;
   overflow: hidden;
   max-height: calc(var(--size-sm) * 5.5);
}
.task.close-task {
   max-height: 0;
   padding: 0;
   transition: all 500ms cubic-bezier(0.35, 0.1, 0.4, 1);
}
.task span.task-date-time {
   cursor: default;
}
.message-in-out-task {
   display: flex;
   align-items: center;
   justify-content: center;
   position: absolute;
   top: 0;

   left: calc(50% - var(--size-md-lg));

   padding: 2px var(--size-xs);
   border-radius: 0 0 5px 5px;
   background-color: var(--color-primary);
   color: var(--color-light);
   font-size: calc(var(--size-sm-md) / 2);
   text-transform: uppercase;
   letter-spacing: 0.5px;
   animation: slide-down-up 5s ease;
}
.task-date-time {
   font-size: calc(var(--size-xs) * 1.6);
   text-align: center;
}
.task h3 {
   flex: 1;
}
.message-for-no-task {
   padding: var(--size-sm-md) 0;
   color: var(--color-primary);
}
#message-for-no-task {
   animation: render-task 700ms ease-in;
}
#message-for-no-task strong {
   font-size: var(--size-md-lg);
   font-weight: bold;
}
.task-buttons {
   display: flex;
   gap: var(--size-xs);
}
.done .task-date-time {
   text-decoration: line-through;
}
.done h3 {
   font-weight: normal;
   text-decoration: line-through;
   opacity: 0.5;
}
.done button,
button.btn-primary,
.btn-label-file {
   background-color: transparent;
   color: var(--color-primary);
   border: 1px solid var(--color-primary);
}
button.btn-primary,
button.btn-secondary,
.btn-label-file {
   padding: calc(var(--size-xs) / 2) calc(var(--size-md) / 2);
}
.btn-label-file {
   cursor: pointer;
   margin-right: var(--size-xs);
}
.btn-label-file:hover,
.btn-label-file:focus {
   transform: translateY(-2px);
}
#exit-print-mode {
   position: absolute;
   z-index: 500;
   top: 10px;
}
#exit-print-mode i {
   margin-right: calc(var(--size-sm-md) / 2);
}

/* ANIMATION */
@keyframes slide-down-up {
   0% {
      transform: translateY(-100%);
   }
   10%,
   90% {
      transform: translateY(0);
   }
   100% {
      transform: translateY(-100%);
   }
}

@keyframes fade-in {
   0% {
      opacity: 0;
   }
   100% {
      opacity: 1;
   }
}

@keyframes fade-out {
   0% {
      opacity: 1;
   }
   100% {
      opacity: 0;
   }
}
.fade-out {
   animation: fade-out 400ms cubic-bezier(0.35, 0.1, 0.4, 1);
}

@keyframes render-task {
   0% {
      opacity: 0.2;
      transform: translateX(4%);
   }
   75% {
      opacity: 1;
      transform: translateX(-1%);
   }
   100% {
      transform: translateX(0);
   }
}

/* MEDIA QUERY */
@media screen and (max-width: 400px) {
   .task-list-btns {
      flex-wrap: wrap;
   }
}
@media screen and (max-width: 480px) {
   h2 {
      font-size: var(--size-md);
   }
   h2 i {
      font-size: var(--size-sm-md);
   }
   h3 {
      font-size: calc(var(--size-xl) / 2);
   }
}

@media screen and (min-width: 481px) and (max-width: 689px) {
   h2 {
      font-size: var(--size-md-lg);
   }
   h2 i {
      font-size: var(--size-md);
   }
}

@media screen and (max-width: 689px) {
   body {
      padding: calc(var(--size-md) / 2) var(--size-xs);
   }
   button,
   .btn-label-file {
      min-width: var(--size-md-lg);
      min-height: var(--size-md-lg);
   }
   #exit-print-mode {
      top: 2px;
   }
   #task-container {
      padding: var(--size-md) var(--size-sm-md);
   }
   #toolbar {
      flex-direction: column;
      gap: var(--size-sm);
   }
   #form-search .form-control {
      padding-right: 0;
      border-right: none;
   }
   #task-list-info {
      flex-direction: column;
      align-items: flex-start;
   }
   #task-list-info p {
      padding-top: var(--size-xs);
   }
   .task-list-btns {
      margin: var(--size-xs) 0;
   }
   .task {
      flex-direction: column;
      align-items: flex-start;
      padding: var(--size-xs-sm) 0;
      gap: var(--size-xs);
      max-height: 100%;
   }
   .task-buttons {
      position: absolute;
      top: calc(var(--size-sm-md) / 2);
      right: 0;
   }
   .task-buttons button {
      min-width: var(--size-md);
      min-height: var(--size-md);
      border-radius: calc(var(--size-xs-sm) / 2);
   }
   .task-buttons button i {
      font-size: calc(var(--size-md) / 2);
   }
}