body{background-color:#86aa7d;font-family:Arial,Helvetica,sans-serif}html{font-size:16px}.container{display:flex;flex-direction:column;min-height:100vh;width:100%;align-items:center;padding:1rem;box-sizing:border-box}.main-content{flex:1;width:100%;display:flex;flex-direction:column;align-items:center}#task-form{display:flex;flex-direction:column;align-items:center;gap:.5rem;background-color:#466d9e;padding:1.25rem 1.5rem;border-radius:.75rem;border:.075rem solid black;width:100%;max-width:500px;box-sizing:border-box}.input-row{display:flex;align-items:center;width:100%;gap:.5rem}.input-row label{font-size:1.25rem;font-weight:600;color:#000;min-width:55px}.input-row input{flex:1;padding:.5rem .75rem;font-size:1rem;border-radius:.375rem;border:1px solid #d1d5db}#task-form button{width:40%;padding:.5rem 0;font-size:1.2rem;font-weight:600;background-color:#26b2a4;color:#000;border:1px solid rgb(11,87,86);border-radius:.375rem;cursor:pointer;transition:all .2s ease;margin-top:.2rem;margin-bottom:-.3rem}#task-form button:hover{background-color:#0f7876;box-shadow:0 2px 6px #0003}.error-message{font-size:.875rem;color:#fff;background-color:#c92323;padding:.25rem .5rem;border-radius:.25rem;text-align:center;width:100%;margin-bottom:0}@media(max-width:550px){#task-form{max-width:90%;padding:1rem}.input-row label{font-size:1rem;min-width:50px}.input-row input{font-size:.875rem}#task-form button{font-size:.8rem;padding:.45rem 0;width:100%}.error-message{font-size:.7rem}}#edit-form{display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;gap:.625rem;align-items:flex-start}.edit-input{flex:1;padding:.5rem .75rem;font-size:1.3rem;border:1px solid #ccc;border-radius:.375rem;outline:none;transition:border-color .2s,box-shadow .2s;width:90%}.edit-input:focus{border-color:#007bff;box-shadow:0 0 0 .15rem #007bff40}.buttons{display:flex;gap:.5rem;align-self:flex-start}.done-button,.cancel-button{background:transparent;border:none;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-size:1rem;font-weight:600;cursor:pointer;transition:color .2s,text-decoration .2s;padding:.25rem .5rem}.done-button{color:#007bff}.done-button:hover{color:#0056b3;text-decoration:underline}.cancel-button{color:#dc3545}.cancel-button:hover{color:#a71d2a;text-decoration:underline}#errorMessageEdit{margin-bottom:.5rem}#input-container{flex:1;min-width:0}@media(max-width:550px){#edit-form{flex-direction:column;align-items:stretch;gap:.5rem}.edit-input{font-size:1rem;width:100%;padding:.4rem .6rem}.buttons{flex-direction:row;justify-content:flex-start;gap:.5rem;flex-wrap:wrap}.done-button,.cancel-button{font-size:.9rem;padding:.35rem .5rem}#errorMessageEdit{font-size:.875rem}}ul{font-size:1.5rem;list-style:none;padding:0;margin:0}li{border-bottom:.0375rem solid #000;padding:.5625rem .375rem;display:flex;justify-content:space-between;align-items:center;white-space:normal;word-break:break-word}li:last-child{border-bottom:none}.dateMessage{color:#7e7e7e;font-size:1rem;margin-top:.375rem}.errorMessage{font-size:1.125rem;color:#111;background-color:#c92323;padding:.15rem 1.125rem;margin-bottom:-.375rem;text-align:center;border-radius:.2rem}#listContainer{margin-top:1.875rem;background-color:#f0f8ff;border-radius:.75rem;min-width:37.5rem;width:80%;max-width:52.5rem;padding:.75rem;box-sizing:border-box;overflow-wrap:break-word;border:.075rem solid black;margin-bottom:1rem}.completedTask{text-decoration:line-through;color:gray}.checkBox,.deleteButton,.editButton{background-color:transparent;border:none;padding:.1875rem .375rem;font-size:1.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center;margin-left:.375rem}.checkBox:hover,.deleteButton:hover,.editButton:hover{color:#4c9681}.buttonGroup{display:flex;gap:.375rem}.checkBox.disabled:hover,.deleteButton.disabled:hover,.editButton.disabled:hover{color:gray;cursor:not-allowed;pointer-events:none}.checkBox.disabled,.deleteButton.disabled,.editButton.disabled{cursor:not-allowed;color:gray;pointer-events:none}.div-task-item{flex:1;min-width:0}@media(max-width:550px){#listContainer{width:90%;min-width:unset;padding:.5rem}li{font-size:.875rem;padding:.35rem .25rem}.dateMessage{font-size:.75rem}.checkBox,.deleteButton,.editButton{font-size:1rem;padding:.125rem .25rem;margin-left:.25rem}}.filter-sort-container{display:flex;gap:1rem;padding:.5rem .75rem;background-color:#f8fafc;border-radius:.75rem;border:.075rem solid rgba(0,0,0,.784);justify-content:center;flex-wrap:wrap;margin-top:1.5rem}.filter-row{display:flex;align-items:center;gap:.4rem}.filter-sort-container label{font-size:.85rem;font-weight:600;color:#374151;white-space:nowrap}.filter-sort-container select{appearance:none;padding:.35rem 1.75rem .35rem .5rem;font-size:.85rem;border-radius:.4rem;border:1px solid #d1d5db;background-color:#fff;color:#111827;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7' /%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .5rem center;background-size:.9rem}.filter-sort-container select:hover{border-color:#6366f1}.filter-sort-container select:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 2px #6366f133}@media(max-width:550px){.filter-sort-container{flex-direction:column;align-items:stretch;gap:.4rem;margin-bottom:-.85rem;margin-top:1rem}.filter-row{justify-content:space-between}.filter-sort-container label{font-size:.75rem}.filter-sort-container select{font-size:.8rem}}.app-footer{width:100%;text-align:center;padding:1rem 0;background-color:#3a5f8a;color:#fff;font-size:.9rem;margin-top:auto}.app-footer a{color:inherit;text-decoration:underline}.app-footer a:hover{color:#cef}@media(max-width:550px){.app-footer{font-size:.8rem;padding:.5rem 0}}
