/* ===========================
   Общие настройки
=========================== */

* {
    box-sizing: border-box;
}

body {

    margin: 0;

    background: #181a1f;

    color: #f5f5f5;

    font-family: Arial, Helvetica, sans-serif;

}

/* ===========================
   Header
=========================== */

header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 20px 30px;

    background: #22252b;

    border-bottom: 1px solid #333;

}

h1 {

    margin: 0;

    font-size: 32px;

}

/* ===========================
   Кнопки
=========================== */

button {

    cursor: pointer;

    border: none;

    border-radius: 8px;

    padding: 10px 16px;

    font-size: 15px;

    transition: .2s;

}

button:hover {

    transform: translateY(-2px);

}

#newTaskButton,
#createTask,
#confirmTake,
.commentButton {

    background: #4caf50;

    color: white;

}

#cancelCreate,
#cancelTake {

    background: #666;

    color: white;

}

.takeButton {

    background: #2196f3;

    color: white;

}

.releaseButton {

    background: orange;

    color: black;

}

.doneButton {

    background: seagreen;

    color: white;

}

.reopenButton {

    background: #607d8b;

    color: white;

}

.danger {

    background: crimson;

    color: white;

}

/* ===========================
   Создание задачи
=========================== */

#newTaskPanel {

    max-width: 900px;

    margin: 25px auto;

    background: #252830;

    padding: 20px;

    border-radius: 12px;

}

.hidden {

    display: none;

}

label {

    display: block;

    margin-top: 18px;

}

input,
textarea {

    width: 100%;

    margin-top: 8px;

    padding: 10px;

    border-radius: 8px;

    border: 1px solid #444;

    background: #1c1f25;

    color: white;

    font-size: 15px;

}

textarea {

    resize: vertical;

}

.buttons {

    display: flex;

    gap: 10px;

    margin-top: 20px;

}

/* ===========================
   Доска
=========================== */

#board {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;

    padding: 25px;

}

.column {

    background: #22252b;

    border-radius: 14px;

    padding: 15px;

    min-height: 600px;

}

.columnTitle {

    font-size: 22px;

    text-align: center;

    margin-bottom: 20px;

    font-weight: bold;

}

/* ===========================
   Карточка
=========================== */

.task {

    background: #2d313a;

    border-radius: 12px;

    padding: 16px;

    margin-bottom: 18px;

    box-shadow: 0 4px 12px rgba(0,0,0,.3);

    animation: fadeIn .25s;

}

.taskHeader {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 10px;

}

.taskTitle {

    font-size: 20px;

    font-weight: bold;

}

.taskAuthor {

    color: #bbb;

    font-size: 13px;

}

.taskDescription {

    white-space: pre-wrap;

    margin-top: 10px;

    margin-bottom: 15px;

    line-height: 1.45;

}

.taskAssigned {

    margin-bottom: 15px;

    color: #7dd3fc;

    font-weight: bold;

}

/* ===========================
   Кнопки карточки
=========================== */

.taskButtons {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 18px;

}

/* ===========================
   Комментарии
=========================== */

.comments {

    border-top: 1px solid #444;

    padding-top: 15px;

}

.comments h3 {

    margin-top: 0;

    margin-bottom: 15px;

}

.comment {

    background: #1d2026;

    padding: 10px;

    border-radius: 8px;

    margin-bottom: 10px;

}

.commentAuthor {

    font-weight: bold;

    margin-bottom: 5px;

}

.commentDate {

    color: #888;

    font-size: 12px;

    margin-bottom: 6px;

}

.commentText {

    white-space: pre-wrap;

}

.newComment {

    margin-top: 18px;

}

/* ===========================
   Диалог
=========================== */

.dialog {

    position: fixed;

    inset: 0;

    background: rgba(0,0,0,.55);

    display: flex;

    align-items: center;

    justify-content: center;

}

.dialogWindow {

    width: 420px;

    background: #2b2f38;

    border-radius: 14px;

    padding: 25px;

}

/* ===========================
   Анимации
=========================== */

@keyframes fadeIn {

    from {

        opacity: 0;

        transform: translateY(10px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

/* ===========================
   Адаптивность
=========================== */

@media (max-width:1100px) {

    #board {

        grid-template-columns: 1fr;

    }

}

/*приоритеты*/

.priority {

    display: inline-block;

    padding: 4px 10px;

    border-radius: 8px;

    font-size: 12px;

    font-weight: bold;

    margin: 8px 0;

}

.priority-high {

    background: rgba(255,0,0,.15);

    border: 2px solid #d22;

    color: #ff7777;

}

.priority-medium {

    background: rgba(255,220,0,.15);

    border: 2px solid #d9a300;

    color: #ffd84d;

}

.priority-medium {

    background: rgba(255,220,0,.15);

    border: 2px solid #d9a300;

    color: #ffd84d;

}

/*коллапс*/

.taskHeader {

    cursor: pointer;

    user-select: none;

}

.task.collapsed .taskDescription,
.task.collapsed .taskAssigned,
.task.collapsed .taskButtons,
.task.collapsed .comments {

    display: none;

}