body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: #f0f4f8;
margin: 0;
transition: background 0.3s;
}

body.dark {
background: #181f35;
color: #f8fafc;
transition: background 0.3s, color 0.3s;
}
body.dark h1 {
color: #fff;
}
body.dark .main-task-list,
body.dark .column {
background: #232b46;
color: #e3e6f0;
}

body.dark .task-item {
background: #232b46;
color: #e3e6f0;
}

body.dark .task-item:hover {
background: #2e385b;
}

.site-header {
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
padding: 10px 0;
background: #333;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
position: sticky;
top: 0;
z-index: 1000;
}

.logo {
display: flex;
align-items: center;
gap: 10px;
font-weight: 700;
font-size: 22px;
color: #4a90e2;
cursor: pointer;
}

.logo img {
height: 40px;
width: 40px;
}

.todo-container {
max-width: 1200px;
margin: 20px auto;
padding: 0 20px;
background: none;
}

h1 {
text-align: center;
color: #222;
margin-bottom: 25px;
}

.input-wrapper {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 20px;
}

#toggleTheme {
background: linear-gradient(120deg, #f4f7fa 60%, #b3c7ff 100%);
color: #ffd166;
border: none;
font-size: 22px;
font-weight: 700;
width: 48px;
height: 48px;
border-radius: 50%;
box-shadow: 0 4px 15px rgba(51, 127, 255, 0.07), 0 2px 5px rgba(255, 209, 102, 0.08);
cursor: pointer;
transition:
background 0.28s,
transform 0.18s,
box-shadow 0.28s,
color 0.28s;
display: flex;
align-items: center;
justify-content: center;
outline: none;
position: relative;
margin-left: 16px;
}

#toggleTheme:focus {
outline: 3px solid #ffd16660;
}

#toggleTheme:hover {
background: linear-gradient(105deg, #ffd166 45%, #4a90e2 120%);
color: #fff;
box-shadow: 0 10px 24px rgba(74, 144, 226, 0.22);
transform: scale(1.13) rotate(-10deg);
}

#taskInput,
#deadlineInput,
#prioritySelect {
    padding: 12px;
    border-radius: 10px;
    border: 1.5px solid #e3eaf3;
    font-size: 16px;
    transition: border-color 0.3s, box-shadow 0.3s;
    background: #fafdff;
}

/* 🔥 Добавляем поддержку textarea */
#taskInput {
    flex: 1 1 auto;
    resize: vertical;
    min-height: 60px;
}

/* Dark mode */
body.dark #taskInput,
body.dark #deadlineInput,
body.dark #prioritySelect {
    background: #232b46;
    color: #e3e6f0;
    border: 1.5px solid #28324e;
}

/* Focus */
#taskInput:focus,
#deadlineInput:focus,
#prioritySelect:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 8px rgba(74, 144, 226, 0.22);
}

/* ===================== */
/* Поиск */
/* ===================== */

#searchInput {
    padding: 12px;
    border-radius: 10px;
    border: 1.5px solid #e3eaf3;
    font-size: 16px;
    background: #fafdff;
    transition: all 0.3s ease;
    min-width: 220px;
}

/* Фокус */
#searchInput:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 8px rgba(74, 144, 226, 0.25);
}

/* Dark mode */
body.dark #searchInput {
    background: #232b46;
    color: #e3e6f0;
    border: 1.5px solid #28324e;
}
.task-content {
    display: flex;
    flex-direction: column;
    gap: 6px;

    /* 🔥 Главное — ограничиваем ширину */
    max-width: 100%;
}

.task-text {
    white-space: pre-wrap;     /* сохраняет переносы */
    word-break: break-word;    /* переносит длинные слова */
    overflow-wrap: break-word; /* дополнительная защита */
}

.task-item {
    overflow: hidden; /* 🔥 не даёт тексту вылезать за карточку */
}

#addBtn {
background: linear-gradient(90deg, #51affa, #4a90e2 80%);
color: #fff;
font-size: 18px;
font-weight: 600;
border: none;
border-radius: 40px;
padding: 0 36px;
min-height: 48px;
box-shadow: 0 8px 18px rgba(74, 144, 226, 0.16), 0 2px 4px rgba(51, 127, 255, 0.08);
cursor: pointer;
transition:
background 0.3s,
box-shadow 0.3s,
transform 0.18s;
letter-spacing: 1px;
position: relative;
overflow: hidden;
}

#addBtn:after {
content: "";
display: block;
position: absolute;
left: 50%;
top: 50%;
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.17);
border-radius: 60px;
transition: width 0.22s, height 0.22s, opacity 0.18s;
opacity: 0;
z-index: 1;
}

#addBtn:active:after {
width: 120%;
height: 180%;
top: 0;
left: 0;
opacity: 0.14;
transition: width 0.22s, height 0.22s, opacity 0.18s;
}

#addBtn:hover,
#addBtn:focus {
background: linear-gradient(90deg, #2296f3, #4a90e2 90%);
box-shadow: 0 16px 34px rgba(74, 144, 226, 0.24), 0 2px 4px rgba(51, 127, 255, 0.10);
transform: scale(1.07);
outline: none;
}

body.dark #addBtn {
background: linear-gradient(90deg, #2642a3, #1479b9 80%);
color: #e3e6f0;
box-shadow: 0 8px 20px rgba(30, 52, 107, 0.19), 0 2px 4px rgba(61, 127, 255, 0.10);
}

#addBtn:disabled {
opacity: 0.5;
pointer-events: none;
}


.filter-buttons {
display: flex;
justify-content: center;
gap: 15px;
margin-bottom: 20px;
}

.filter-buttons button {
background: transparent;
border: 2px solid #4a90e2;
color: #4a90e2;
padding: 8px 18px;
font-weight: 600;
border-radius: 30px;
cursor: pointer;
transition: all 0.3s;
}

.filter-buttons button.active,
.filter-buttons button:hover {
background: #4a90e2;
color: white;
transform: scale(1.05);
box-shadow: 0 4px 15px rgba(74, 144, 226, 0.20);
}

.todo-content {
display: flex;
gap: 30px;
margin-top: 20px;
transition: gap 0.3s;
}

.main-task-list {
flex: 2;
max-width: 600px;
list-style: none;
padding-left: 0;
margin: 0;
background: #fff;
border-radius: 14px;
box-shadow: 0 0 5px rgba(74, 144, 226, 0.10);
transition: box-shadow 0.3s;
}

body.dark .main-task-list {
background: #232b46;
}

.main-task-list:hover {
box-shadow: 0 0 14px rgba(74, 144, 226, 0.18);
}

.columns-container {
flex: 1;
display: flex;
flex-direction: column;
gap: 20px;
}

.column {
background-color: #fff;
border-radius: 13px;
box-shadow: 0 6px 18px rgba(74, 144, 226, 0.13);
padding: 18px;
transition: box-shadow 0.3s;
min-height: 150px;
width: 100%;
margin-bottom: 6px;
}

body.dark .column {
background: #232b46;
}

.column:hover {
box-shadow: 0 10px 30px rgba(74, 144, 226, 0.20);
}

.column h2 {
color: #333;
font-weight: 700;
font-size: 18px;
text-align: center;
margin-bottom: 15px;
}

body.dark .column h2 {
color: #e3e6f0;
}

.column .task-list {
list-style: none;
padding-left: 0;
margin: 0;
}

.task-item {
background: #fff;
border-radius: 16px;
padding: 18px 22px;
margin-bottom: 16px;
box-shadow: 0 3px 16px rgba(36, 112, 255, 0.06);
display: flex;
align-items: center;
opacity: 0;
transform: translateY(26px);
animation: fadeInUp 0.6s forwards;
transition: box-shadow 0.25s, background 0.22s, color 0.2s;
}

@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}

body.dark .task-item {
background: #232b46;
color: #e3e6f0;
}

.task-item:hover {
box-shadow: 0 8px 24px rgba(51, 127, 255, 0.18);
background: #eaf3ff;
}

body.dark .task-item:hover {
background: #2e385b;
}

.task-item.completed {
text-decoration: line-through;
color: #999;
background: #e2e2e2;
}

body.dark .task-item.completed {
background: #232b46;
color: #999;
}

.task-main {
display: flex;
flex-direction: column;
gap: 6px;
flex-grow: 1;
cursor: pointer;
}

.task-text {
font-size: 18px;
user-select: none;
position: relative;
transition: color 0.3s;
}

.task-item.completed .task-text {
color: #a3adba;
}

.task-text::after {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 2px;
background: transparent;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s;
}

.task-item.completed .task-text::after {
background: #b5b5b5;
transform: scaleX(1);
}

.priority-low {
color: #4caf50;
}

.priority-medium {
color: #ffa500;
}

.priority-high {
color: #e74c3c;
font-weight: 700;
}

button {
transition: transform 0.3s, box-shadow 0.3s;
}

button:hover {
transform: scale(1.05);
box-shadow: 0 4px 15px rgba(74, 144, 226, 0.20);
}

.delete-btn {
background: transparent;
border: none;
color: #e04e4e;
font-weight: 700;
cursor: pointer;
font-size: 22px;
transition: color 0.3s;
}

.delete-btn:hover {
color: #a63c3c;
}

/* --- Медиа Запросы --- */

@media (max-width: 600px) {
.todo-content {
flex-direction: column;
gap: 0;
}

.main-task-list,
.columns-container {
max-width: 100%;
margin-bottom: 18px;
}

.column {
width: 100%;
min-width: unset;
margin-bottom: 14px;
}
}