body { font-family: system-ui, sans-serif; background: #0b0c10; color: #e8e8e8; }
.wrap { max-width: 820px; margin: 24px auto; padding: 0 12px; }
h1 { margin: 0 0 16px; font-size: 24px; }

/* ===== Create form (2 columns) ===== */
.new-task { margin-bottom: 14px; }

.new-task.new-task-grid{
  display: grid;
  grid-template-columns: 1fr 200px; /* справа узкая колонка */
  gap: 10px;
  align-items: stretch;
}

/* левое поле - описание */
.new-task.new-task-grid textarea#title{
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid #2a2f3a;
  background: #12141a;
  color: #e8e8e8;
  resize: none;
  min-height: 110px;
  max-height: 240px;
  line-height: 1.3;
}

/* правая колонка */
.new-task.new-task-grid .new-task-side{
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 10px;
  align-content: start;
}

/* светофор компактный */
.new-task.new-task-grid .new-task-side .priority-traffic{
  width: 100%;
  justify-content: center;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid #2a2f3a;
  background: #12141a;
}

/* календарь компактный (в форме создания) */
.new-task.new-task-grid .new-task-side input#due{
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #2a2f3a;
  background: #12141a;
  color: #e8e8e8;
}

/* кнопка во всю ширину, внизу */
.new-task.new-task-grid .new-task-side #add{
  width: 100%;
  align-self: end;
  height: 42px;
  border-radius: 12px;
  cursor: pointer;
}

/* адаптив: на узких экранах в одну колонку */
@media (max-width: 720px){
  .new-task.new-task-grid{
    grid-template-columns: 1fr;
  }
  .new-task.new-task-grid .new-task-side{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }
  .new-task.new-task-grid .new-task-side #add{
    grid-column: 1 / -1;
  }
}

/* ===== List ===== */
.list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.item {
  display: flex; justify-content: space-between; align-items: center;
  border: 1px solid #2a2f3a; border-radius: 14px; padding: 12px 12px;
  background: #12141a;
}
.item.inwork { outline: 2px solid #3b82f6; }
.left .title { font-size: 16px; }
.left .meta { font-size: 12px; opacity: 0.7; margin-top: 2px; }

.right { display: flex; gap: 8px; }
button.icon {
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid #2a2f3a;
  background: #0f1117; color: #e8e8e8; cursor: pointer;
}
.dragging { opacity: 0.6; }

/* светофор приоритета */
.priority-traffic{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid #2a2f3a;
  background: #12141a;
}

.priority-traffic .dot{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.20);
  cursor: pointer;
  padding: 0;
  outline: none;
  box-shadow: none;
}

.priority-traffic .dot-low   { background: #b9f27c; }  /* салатовый */
.priority-traffic .dot-medium { background: #ffe58a; }  /* светло-желтый */
.priority-traffic .dot-high    { background: #ff9fb7; }  /* розовый */

.priority-traffic .dot:hover{
  filter: brightness(1.05);
}

.priority-traffic .dot.active{
  outline: 2px solid rgba(59,130,246,.9);
  outline-offset: 2px;
}

/* подсветка задачи "в работе" */
.item.doing {
  outline: 2px solid #3b82f6;
}

/* точка приоритета в списке */
.prio-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex: 0 0 auto;
  margin-top: 3px;
  border: 1px solid rgba(255,255,255,.20);
}

/* цвета приоритета */
.prio-dot.low    { background: #b9f27c; } /* салатовый */
.prio-dot.medium { background: #ffe58a; } /* желтый */
.prio-dot.high   { background: #ff9fb7; } /* розовый */

/* чтобы точка и текст были в одну линию */
.left-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.left-text {
  display: flex;
  flex-direction: column;
}

/* modal */
.modal.hidden { display: none; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
}

.modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}

.modal-card{
  position: relative;
  width: min(680px, calc(100% - 24px));
  margin: 10vh auto 0;
  border: 1px solid #2a2f3a;
  border-radius: 16px;
  background: #12141a;
  box-shadow: 0 20px 80px rgba(0,0,0,.55);
  padding: 14px;
}

.modal-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #2a2f3a;
}

.modal-title{ font-size: 16px; font-weight: 600; }
.modal-x{ width: 38px; height: 38px; }

.modal-body{
  display: grid;
  gap: 10px;
  padding: 12px 0;
}

.modal-body input{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #2a2f3a;
  background: #0f1117;
  color: #e8e8e8;
}

.modal-row{
  display:flex;
  gap: 10px;
  align-items: center;
}

.modal-actions{
  display:flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid #2a2f3a;
}

.btn{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #2a2f3a;
  background: #0f1117;
  color: #e8e8e8;
  cursor: pointer;
}

.btn.primary{
  border-color: rgba(59,130,246,.6);
}

.btn.ghost{
  opacity: .9;
}

/* компактный календарь (в модалке) */
#editDue{
  width: 150px;
  min-width: 150px;
  flex: 0 0 auto;
}

/* textarea в модалке */
.modal-body textarea{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #2a2f3a;
  background: #0f1117;
  color: #e8e8e8;
  resize: none;
  min-height: 90px;
  max-height: 240px;
  line-height: 1.3;
}

/* переносы строк в задачах */
.title{
  white-space: pre-wrap;
}

/* ==== FIX: create form layout overlap ==== */
.new-task.new-task-grid{
  grid-template-columns: minmax(0, 1fr) 150px; /* ключевое: minmax(0,1fr) */
  gap: 16px;
  align-items: start;
}

/* слева: textarea не раздувает сетку */
.new-task.new-task-grid textarea#title{
  min-width: 0;
  box-sizing: border-box;
}

/* правая колонка: никаких наложений */
.new-task.new-task-grid .new-task-side{
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  display: flex;              /* вместо grid — проще и стабильнее */
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}

/* все контролы справа — строго по ширине колонки */
.new-task.new-task-grid .new-task-side .priority-traffic,
.new-task.new-task-grid .new-task-side input#due,
.new-task.new-task-grid .new-task-side #add{
  width: 100%;
  box-sizing: border-box;
}

/* календарь: убрать min-width, чтобы не распирал */
.new-task.new-task-grid .new-task-side input#due{
  min-width: 0 !important;
}

/* кнопка: одинаковая высота */
.new-task.new-task-grid .new-task-side #add{
  height: 44px;
}

/* ===== Flatpickr dark theme (custom) ===== */

.flatpickr-calendar{
  background: #12141a;
  border: 1px solid #2a2f3a;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  color: #e8e8e8;
}

/* месяц и навигация */
.flatpickr-months{
  background: #12141a;
  border-bottom: 1px solid #2a2f3a;
}

.flatpickr-current-month{
  color: #e8e8e8;
}

.flatpickr-monthDropdown-months{
  background: #12141a;
  color: #e8e8e8;
}

.flatpickr-prev-month,
.flatpickr-next-month{
  fill: #e8e8e8;
}

/* дни недели */
.flatpickr-weekdays{
  background: #12141a;
}

.flatpickr-weekday{
  color: #9aa0a6;
  font-weight: 500;
}

/* сетка дней */
.flatpickr-day{
  color: #e8e8e8;
  border-radius: 6px;
}

.flatpickr-day:hover{
  background: #1c2028;
}

/* выбранный день */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange{
  background: #3b82f6;
  border-color: #3b82f6;
  color: white;
}

/* сегодня */
.flatpickr-day.today{
  border: 1px solid #3b82f6;
}

/* дни соседних месяцев */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay{
  color: #555;
}

/* кнопки Today / Clear */
.flatpickr-footer{
  border-top: 1px solid #2a2f3a;
}

/* hover стрелок */
.flatpickr-prev-month:hover,
.flatpickr-next-month:hover{
  color: #3b82f6;
}

/* dropdown года */
.numInputWrapper input{
  background: #12141a;
  color: #e8e8e8;
}

/* popup стрелка */
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after{
  border-bottom-color: #12141a;
}

.show-all{
  display:flex;
  align-items:center;
  gap:10px;
  margin: 8px 0 12px;
  opacity: .9;
}
.show-all input{ transform: scale(1.1); }

button.icon.danger{
  border-color: #5a1f1f;
  background: #1a0f0f;
}

button.icon.danger:hover{
  background: #2a1414;
}

/* ===== deadline highlighting ===== */

.item.due-overdue{
  border-color: #7f1d1d;
  background: #1a1010;
}

.item.due-overdue .meta{
  color: #f87171;
}

.item.due-today{
  border-color: #c2410c;
  background: #1a1410;
}

.item.due-today .meta{
  color: #fb923c;
}

.item.due-soon{
  border-color: #854d0e;
}

.item.due-soon .meta{
  color: #fbbf24;
}

/* закрытые задачи */
.item.closed .title{
  text-decoration: line-through;
  opacity: 0.65;
}

.item.closed .meta{
  opacity: 0.5;
}

.item.closed{
  background: #0f1117;
}

/* плавная анимация элементов списка */
.item{
  transition:
    transform .25s ease,
    opacity .25s ease,
    background .25s ease;
}

/* анимация закрытия задачи */
.item.closing{
  opacity: 0;
  transform: translateY(20px);
}