/* TODO */
/* ============================================
   BASE CONTAINERS       tk-block-reservation
   ============================================ */
.ter-kal-block-todo {
    container-type: inline-size;
    width: 100%;
    display: flex; /* ter-kal: enable flexbox */
    justify-content: center; /* ter-kal: center horizontally */
}

/* ============================================
   CONTENT LAYOUTS
   ============================================ */

/* Full width blocks (reservation, todo, kalender) */
.ter-kal-block-todo .ter-kal-block-todo-content {
    width: 100%;
    /*    display: flex;
    flex-direction: column;
    gap: 1rem;*/
}

/* ============================================
   ============================================ */

/* --------------------------------------------------------------- */
/* TODO Frontend */

.ter-kal-block-todo-content .todo-list-table {
    position: relative;
    border-radius: 0.4rem;
    background-color: #ededed;
    border: 1px solid #777777;
    padding: 0.2rem;
    width: 100%;
    max-width: 1200px;
    /*    font-size: 1rem; */
}

.ter-kal-block-todo.todo_frontend,
.ter-kal-block-todo.todo_frontend .todo-list-table tr {
        font-size: 0.7rem;
    }

.ter-kal-block-todo.todo_frontend .todo-list-table {
        box-shadow: 0 1rem 1.5rem rgba(0, 0, 0, 0.7);
        font-size: 0.7rem;
    }


.ter-kal-block-todo-content .todo-list-table td {
    border-radius: 0.4rem;
    text-align: center;
    margin: 0.1rem;
    border: 1px solid #cfcfcf;
    padding: 0.1rem;
}

.ter-kal-block-todo-content .todo-list-table h3 {
    padding-top: 0.1rem;
    color: #ffffff;
}

.ter-kal-block-todo-content .todo-list-table input,
.ter-kal-block-todo-content .todo-list-table textarea,
.ter-kal-block-todo-content .todo-list-table select {
    font-size: 0.7rem;
    height: 2rem;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ededed;
    border-radius: 0.5rem;
    transition:
        border-color 0.15s ease-in-out,
        box-shadow 0.15s ease-in-out;
}

.ter-kal-block-todo-content .todo-list-table input:focus,
.ter-kal-block-todo-content .todo-list-table select:focus,
.ter-kal-block-todo-content .todo-list-table textarea:focus {
    outline: none; /* Remove default browser outline */
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}


/* ----------------------------------------------------------------- */
.ter-kal-block-todo-content .todo-list-table .todo-delete-task {
    /*max-width: 100%;
    width: 100%;*/
/*    height: 2rem; */
/*    width: 1rem;
    height: 1rem;*/
/*    box-sizing: border-box;  */


    border-radius: 0.5rem;
    background-color: #dc3232;
    color: #fff;
    border: 1px solid #a31919;

}

.ter-kal-block-todo-content .todo-list-table .todo-delete-task:hover {
    background-color: #a31919;
    color: #fff;
    border-color: #dc3232;
}
/* ----------------------------------------------------------------- */




/* Default: show normal headers */
.ter-kal-block-todo-content .todo-list-table thead .original-headers {
    display: table-row;
}

.ter-kal-block-todo-content .todo-list-table thead .mobile-header {
    display: none;
}

.ter-kal-block-todo-content .todo-list-table .low {
    background-color: #ededed;
}
.ter-kal-block-todo-content .todo-list-table .normal {
    background-color: #f5f5ff;
}
.ter-kal-block-todo-content .todo-list-table .high {
    background-color: #ffd3cc;
}
.ter-kal-block-todo-content .todo-list-table .done {
    background-color: #d6e3bf;
    font-size: 0.5rem;
    opacity: 0.3;
}
.ter-kal-block-todo-content .todo-list-table .new {
    background-color: #fffee1;
}

/* --- */
.ter-kal-block-todo-content .todo-list-table textarea,
.ter-kal-block-todo-content .todo-task-input {
    width: 100%;
}

/* --- */
.ter-kal-block-todo-content .todo-list-table .responsive-table thead {
    display: none;
}

.ter-kal-block-todo-content .todo-list-table .responsive-table tbody {
    display: block;
    width: 100%;
}

.ter-kal-block-todo-content .todo-list-table .responsive-table tr {
    display: block;
    padding: 0.1rem;
    border-bottom: 1px solid #ccc;
}

.ter-kal-block-todo-content .todo-list-table .responsive-table td {
    display: block;
    text-align: left;
    margin-bottom: 0.2rem;
}

.ter-kal-block-todo-content .todo-list-table .responsive-table th,
.ter-kal-block-todo-content .todo-list-table .responsive-table td {
    width: 100%;
}

.ter-kal-block-todo-content .todo-list-table .responsive-table input,
.ter-kal-block-todo-content .todo-list-table .responsive-table textarea {
    width: 96%;
}

.ter-kal-block-todo-content .todo-list-table .todo-description-input {
    min-height: 4em;
    resize: vertical; /* or resize: both; */
    overflow-y: auto;
}

/* --- */

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */
@container (max-width: 500px) {
    .ter-kal-block-todo.todo_frontend .todo-list-table {
        box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.5);
    }
    /* TODO List */
    .ter-kal-block-todo.todo_frontend .todo_header,
    .ter-kal-block-todo.todo_frontend .todo_block_sh_info,
    .ter-kal-block-todo.todo_frontend .todo-list-add-task,
    .ter-kal-block-todo.todo_frontend .pseudo-save-to-generate-click-outside-field,
    .ter-kal-block-todo.todo_frontend .todo-list-print {
        display: none;
    }

    .ter-kal-block-todo.todo_frontend .todo-list-table input,
    .ter-kal-block-todo.todo_frontend .todo-list-table textarea,
    .ter-kal-block-todo.todo_frontend .todo-list-table select,
    .ter-kal-block-todo.todo_frontend .todo-list-table tr,
    .ter-kal-block-todo.todo_frontend .todo-list-table,
    .ter-kal-block-todo.todo_frontend {
        font-size: 0.7rem;
    }

    .ter-kal-block-todo.todo_frontend .todo-list-table a {
        white-space: nowrap;
    }
    .ter-kal-block-todo.todo_frontend .todo-list-table thead .mobile-header {
        display: inline-block;
    }

    .ter-kal-block-todo.todo_frontend .todo-list-table .todo-task-input {
        font-weight: bold;
        white-space: normal;
        /* word-wrap: break-word;*/
    }

    /* TODO List */
    .ter-kal-block-todo.todo_frontend .todo-list-table thead .original-headers {
        display: none;
    }

    /* Hide table structure */
    .ter-kal-block-todo.todo_frontend .todo-list-table,
    .ter-kal-block-todo.todo_frontend .todo-list-table thead,
    .ter-kal-block-todo.todo_frontend .todo-list-table tbody,
    .ter-kal-block-todo.todo_frontend .todo-list-table tr,
    .ter-kal-block-todo.todo_frontend .todo-list-table td {
        display: block;
        width: 100%;
    }

    .ter-kal-block-todo.todo_frontend .todo-list-table td {
        display: inline;
        border: none;
        padding: 0;
    }

    .ter-kal-block-todo.todo_frontend .todo-list-table td::after,
    .ter-kal-block-todo.todo_frontend .todo-list-table td:last-child::after {
        content: '';
    }

    .ter-kal-block-todo.todo_frontend .todo-list-table td::after,
    .ter-kal-block-todo.todo_frontend .todo-list-table td:last-child::after,
    .ter-kal-block-todo.todo_frontend .todo-list-table td:nth-child(4) {
        display: none;
    }

    .ter-kal-block-todo.todo_frontend .todo-list-table tr {
        padding: 0.1rem;
        margin-bottom: 0.1rem;
    }

    .ter-kal-block-todo.todo_frontend .todo-list-table input,
    .ter-kal-block-todo.todo_frontend .todo-list-table textarea,
    .ter-kal-block-todo.todo_frontend .todo-list-table select {
        pointer-events: none;
        border: none;
        background: transparent;
        padding: 0;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }
}

/*  */
@container (min-width: 501px) and (max-width: 800px) {


}

/* ============================================
   BACKEND: Uses Window Width (@media)
   ============================================ */
/* Use @media because the Backend (WP Admin) has no container-type defined */
@media (max-width: 820px) { /* Adjust pixel width as needed for backend menu bar space */
    /*
       Select .todo_backend
       BUT IGNORE if it is inside .todo_frontend
    */
    .todo_backend:not(.todo_frontend *) {
        transform: scale(0.7);
        transform-origin: top left; /* Keeps it aligned to the left while shrinking */
        width: 142%; /* 100% / 0.7 = ~142% to fill the space after scaling */
    }

}


/* ============================================
   ============================================ */