@import url("https://fonts.googleapis.com/css2?family=Nunito&family=Jost&family=Bebas+Neue&family=Pacifico&family=Anton&display=swap");

:root {
    --red: #f5002f;
    --blue: #0085ca;
    --green: #b0fc38;
    --yellow: #ffdc00;
    --very-light-grey: #f1f1f1;
    --fa-font-solid: normal 400 9px/1 "Font Awesome 6 Free";
    --heading-font: "Jost", serif;
    --brand-font: "Bebas Neue";
    --list-name-font: "Jost";
    --accent-bg: #ccedf5;
    --text: var(--carbon);
    --text-light: var(--darkGrey);
    --border: var(--gray);
    --primary-hover: var(--blue);
}

main {
    margin: 0;
    padding: 1rem 0 0 0;
}

main .list,
main .home,
main .dashboard {
    grid-column: 2;
}

main .list_info {
    grid-column: 1;
    padding: 0 4rem 0 1rem;

    h2 {
        font-size: 1.8rem;
        text-align: left;
    }

    .button {
        color: white;
        background: var(--blue);
        border-color: var(--blue);
        font-size: 0.9rem;
        padding: 8px;
        display: inline-block;
        margin-left: 2rem;
    }
}

#banner {
    margin: 0;
    padding: 0.2rem 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
}

.logo {
    margin: 10px 0;
    text-align: left;
}

.logo a,
.logo a:hover,
.logo a:visited {
    text-decoration: none;
    color: var(--text);
    font-family: var(--brand-font);
}

.logo.small {
    font-size: 29px;
}

.logo.medium {
    font-size: 56px;
}

.logo.big {
    font-size: 128px;
}

h1.list_name {
    margin: 0 0 1rem;
    font-size: 3rem;
    font-family: var(--list-name-font);
}

#banner .user_info p {
    margin: 0;
}

#banner .user_info a,
#banner .user_info form {
    display: inline-block;
    margin-right: 0.5rem;
}
.flash {
    color: var(--text);
    border: var(--border-width-l) var(--green) solid;
    text-align: center;
    padding: var(--padding-s);
    margin: var(--margin-s);
}

#lists {
    list-style: none;
    padding: 0;
}

#lists a {
    text-decoration: none;
    color: var(--text);
    width: 100%;
    display: block;
    padding: 0.5rem 0;

    :hover {
        color: blue;
    }
}

#lists li {
    display: flex;
    justify-content: left;
    gap: 1rem;
    align-items: center;
    padding: 0 1rem;
    margin-bottom: 0.3rem;
    border-radius: 8px;
}

#lists li:hover {
    background: var(--very-light-grey);
}

#new_list_button {
    display: block;
    margin: 0 auto;
    text-align: center;
    text-transform: uppercase;
}

#tasks,
#tasks ul.tasks {
    padding: 4px;
    list-style: none;
}

#tasks p {
    color: var(--grey);
    padding: 0 1em;
}

.task {
    font-size: 18px;
    vertical-align: middle;
    margin-left: 4px;
    line-height: 2.6;
}

.completed.task {
    text-decoration: line-through;
}

#tasks li.task_container input[type="checkbox"] {
    width: 40px;
    height: 40px;
    vertical-align: middle;
    border: none;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23949494%22%20stroke-width%3D%223%22/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center left;
    flex-shrink: 0;
    margin-right: 8px;
}

#tasks li.task_container input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%2359A193%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20fill%3D%22%233EA390%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: center left;
}
#tasks li.task_container,
#tasks li.task_container turbo-frame {
    padding: 0;
    margin: 0;
}

#tasks li.task_container {
    border-bottom: 1px dotted #ededed;
}

#tasks li.task_container:hover {
}

#tasks li.task_container turbo-frame div[data-controller="task"] {
    display: flex;
    align-items: center;
    width: 100%;
    cursor: move;
}

#tasks div.completed {
    opacity: 0.5;
}

#tasks li input[type="checkbox"] {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    margin-right: 8px;
}

.task,
.task:visited {
    font-size: 1rem;
    flex-grow: 1;
    overflow: hidden;
    text-decoration: none;
    color: var(--text);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-touch-callout: none; /* disables callout, like preview */
    -webkit-user-select: none; /* prevents text selection on hold */
    user-select: none;
}

div[data-controller="task"]:hover {
}

#tasks .actions {
    width: 70px;
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
}

.task_button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 4px 6px;
    cursor: pointer;
    border-radius: 4px;
    text-decoration: none;
    text-align: center;
    height: 32px;
    width: 32px;
    margin: 0;
}

#tasks li .actions select {
    appearance: none;
    font-size: 9px;
    padding: 10px 4px;
    border-radius: var(--radius-s);
    background-image: none;
    text-transform: uppercase;
    text-align: center;
    text-indent: -100em;
    margin: 0;
    width: 32px;
    height: 32px;
}

#tasks li .actions select:hover {
    background: #f1f1f1;
}

.snooze-select-wrapper {
    position: relative;
    width: 32px;
    height: 32px;
}

.snooze-select-wrapper::before {
    font: var(--fa-font-solid);
    color: var(--grey);
    content: "\f017";
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.fa-solid {
    font-size: 16px;
}

#tasks li turbo-frame {
}

.sortable-ghost {
    background: rgba(216, 242, 249, 1);
    background-image: linear-gradient(var(--accent-bg), var(--bg));
}

.sortable-drag {
    opacity: 0.6;
}

#tasks .actions .task_button {
    font-size: 9px;
    background: white;
    border: var(--border-width-s) var(--grey) solid;
    padding: var(--padding-xs);
    display: inline;
    color: var(--grey);
    text-transform: uppercase;
}

#tasks .actions .task_button:hover {
    background: #f1f1f1;
}

#tasks li .actions {
    opacity: 0;
    transition: opacity 0.3s ease; /* Add a transition for smooth fading */
}

#tasks li:hover .actions {
    opacity: 1;
}

.exclamation,
.position {
    font-size: 2em;
    font-family: var(--heading-font);
    font-weight: bold;
    vertical-align: middle;
}

#tasks li:first-child .exclamation {
    color: var(--blue) !important;
}

#tasks li:nth-child(2) .exclamation {
    color: var(--green) !important;
}

#tasks li:nth-child(3) .exclamation {
    color: var(--red) !important;
}

#new_task_form {
    display: flex;
    width: 80%;
    min-width: 400px;
    margin: 0 auto;
}

#task_description {
    flex: 1;
    padding: var(--padding-s);
    border: var(--border-width-s) solid #ccc;
    border-right: none;
    border-radius: var(--radius-l) 0 0 var(--radius-l);
    outline: none;
}

#new_task_form input[type="submit"] {
    width: 80px;
    padding: var(--padding-s);
    border: var(--border-width-s) solid var(--blue);
    border-left: none;
    border-radius: 0 var(--radius-l) var(--radius-l) 0;
    background-color: var(--blue);
    color: white;
    cursor: pointer;
    transition: background 0.3s ease;
}

#new_task_form input[type="submit"]:hover {
    background-color: #0056b3;
}

#list_actions {
    text-align: center;
}

#edit_task_form {
    display: flex;
    align-items: center;
    width: 100%;
}

#edit_task_form input[type="text"] {
    margin-left: 8px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#edit_task_form .actions {
    width: 70px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 8px;
}

#edit_task_form .actions .task_button {
    margin-bottom: 6px;
}

#tasks .actions .button,
#tasks .actions input[type="submit"] {
    font-size: 9px;
    background: transparent;
    border: var(--border-width-s) var(--grey) solid;
    padding: var(--padding-xs);
    display: inline;
    color: var(--grey);
    text-transform: uppercase;
}

.filter_tab.active {
    background: var(--green);
    border-color: var(--green);
    color: var(--text);
    opacity: 1;
}

.filter_tab {
    border: 1px solid #f1f1f1;
    font-size: 0.8rem;
    padding: 4px 6px;
    border-radius: 4px;
    text-decoration: none;
    margin: 0 1px 1rem 0;
    opacity: 0.6;
}

.filter_tab:hover {
    opacity: 0.8;
    background: #f1f1f1;
    border-color: var(--green);
}

.filter_tab.active:hover {
    background: var(--green);
}

#list_actions {
    margin-bottom: 0.6em;
}

.list_name a,
.list_name a:visited {
    text-decoration: none;
    color: var(--text);
}

.list_name a:hover {
    color: var(--blue);
}

.list_name a.priority,
.list_name a.priority:visited {
    color: var(--green);
}

#tasks.priority {
    border: solid var(--blue) 5px;
    border-radius: 8px;
}

#tasks .info {
    font-size: 0.8rem;
    color: var(--grey);
    padding: 0 0 4px 56px;
    margin-top: -12px;
}

.custom-select {
    position: relative;
    display: inline-block;
}

#tasks .dropdown-menu {
    position: absolute;
    font-size: 11px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid #ccc;
    list-style: none;
    padding: 0;
    margin: 0;
    z-index: 10;
}

#tasks .dropdown-menu li {
    padding: 0.2rem 1rem;
    border: none;
    cursor: pointer;
}

#tasks .dropdown-menu li:hover {
    background-color: var(--accent-bg);
}

.user-info {
    display: flex;
    justify-content: center;
    gap: 29px;
}

header {
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

header .logo {
    padding: 10px;
    margin: 0;
}

@media screen and (max-width: 600px) {
    main .list_info {
        display: none;
    }
}

@media screen and (min-width: 600px) {
    header .list-picker,
    header .dropdown-menu {
        display: none;
    }
}

header button.list-picker {
    font-size: 24px;
    background: transparent;
    border: var(--border-width-s) var(--grey) solid;
    padding: 0 8px 4px;
    color: var(--grey);
    border-radius: 4px;
    margin: 10px;
}

header button.list-picker:hover {
    background: #f1f1f1;
}

header .custom-select {
    position: relative;
    display: inline-block;
    width: 30em;
}

header .dropdown-menu {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: white;
    border: 1px solid #f1f1f1;
    list-style: none;
    padding: 0;
    margin: 0;
    z-index: 10;
    width: 100%;
}

@media screen and (max-width: 600px) {
    header .custom-select {
        width: 100%;
    }
    header .dropdown-menu {
        top: 0;
        left: 0;
    }
}

header .dropdown-menu li {
    padding: 0.2rem 1rem;
    border-bottom: 1px solid #f1f1f1;
    font-size: 16px;
}

header .dropdown-menu li.list {
    font-family: var(--heading-font);
    font-size: 24px;
    text-transform: uppercase;
    cursor: pointer;
}

header .dropdown-menu li:hover {
    background-colistsor: var(--accent-bg);
}

@keyframes highlight {
    0% {
        background: var(--green);
    }
    100% {
        background: none;
    }
}

.highlight {
    animation: highlight 1s;
}

.note_actions {
    font-size: 0.8rem;
}

.note_content .trix-content {
    padding: 1rem;
    border: 5px solid #f1f1f1;
}

#tasks h3.completed_heading {
    font-size: 1.4em;
    font-family: var(--heading-font);
    text-align: left;
    text-indent: 1rem;
    margin: 0;
}

#tasks p {
    margin: var(--margin-s) 0;
    font-size: 0.9rem;
}

.badge {
    background: var(--blue);
    border-radius: 50%;
    color: white;
    padding: 2px 0.5rem;
    min-width: 2rem;
    text-align: center;
    font-size: 0.8rem;
    margin: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

::placeholder {
    color: #ccc;
}

.note .buttons {
    display: flex;
    gap: 1rem;
    font-size: 0.9em;
    align-items: center;
    justify-items: right;
}

.note .buttons .button {
    width: 7rem;
    padding: 6px;
}