/* ═══════════════════════════════════════════
   НОТАТКИ — сторінка в каркасі
   Кольори лише з токенів: сторінка живе у світлій і темній темі, а сирий
   колір підходить тільки одній з них.
   ═══════════════════════════════════════════ */

/* Типи й пріоритети. Підкладки — через color-mix від токена, як у задачах:
   rgba з числами світлої теми в темній зливався з фоном. */
:root {
  --nt-note-bg:      color-mix(in srgb, var(--color-tertiary) 12%, transparent);
  --nt-note-fg:      var(--color-tertiary);
  --nt-task-bg:      color-mix(in srgb, var(--color-primary) 11%, transparent);
  --nt-task-fg:      var(--color-primary);
  --nt-reminder-bg:  color-mix(in srgb, var(--color-secondary-700) 13%, transparent);
  --nt-reminder-fg:  var(--color-secondary-700);
  --nt-warning-bg:   color-mix(in srgb, var(--color-error) 11%, transparent);
  --nt-warning-fg:   var(--color-error);

  --nt-bar-low:      var(--color-outline);
  --nt-bar-medium:   var(--color-primary-400);
  --nt-bar-high:     var(--color-progress-warning);
  --nt-bar-urgent:   var(--color-error);
}

/* ─── Сторінка ───
   Ширину, відступи, смугу лічильників і панель дає css/list-shell.css —
   спільні для всіх сторінок-списків (#262) */
.nt-head { margin-bottom: var(--space-5); align-items: center; }
.nt-head .page-title { font-family: var(--font-display); }

/* ─── Фільтри й пошук ─── */
.nt-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
/* Вкладки — окремим рядком: поруч із ними пошук стискався до «Пошук: текст, те…» */
.nt-tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; flex: 1 1 100%; }
.nt-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-outline);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
}
.nt-tab:hover  { border-color: var(--color-primary-400); color: var(--color-primary); }
.nt-tab.active {
  background: var(--color-primary-100);
  border-color: var(--color-primary-400);
  color: var(--color-primary);
  font-weight: var(--font-semibold);
}
.nt-tab-n {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.nt-tab.active .nt-tab-n { color: inherit; }
/* Порожня вкладка лишається видимою (людина бачить, що типів чотири), але
   притихлою — клік по ній нічого не знайде */
.nt-tab.is-empty:not(.active) { opacity: .55; }

.nt-search {
  position: relative;
  flex: 1 1 220px;
  min-width: 180px;
}
.nt-search .material-icons-round {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  font-size: 18px; color: var(--color-text-muted); pointer-events: none;
}
.nt-search input { padding-left: 34px; }

.nt-done-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

/* Звуження до однієї ділянки (прийшли з реєстру) */
.nt-scope {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--nt-task-bg);
  color: var(--color-text);
  font-size: var(--text-sm);
}
.nt-scope .material-icons-round { font-size: 18px; color: var(--nt-task-fg); }
.nt-scope code { font-family: var(--font-mono); color: var(--nt-task-fg); background: none; }
.nt-scope button { margin-left: auto; }

/* ─── Картки ───
   Сіткою, а не стовпчиком: на всю ширину одна картка розтягнулась би в рядок
   на два метри. Колонок стільки, скільки влазить, — тож коли праворуч
   відкривається панель, їх просто стає менше. */
.nt-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-3);
}
.nt-list > .nt-empty, .nt-list > .nt-more { grid-column: 1 / -1; }

.nt-card {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  padding: var(--space-4) var(--space-4) var(--space-3) calc(var(--space-4) + 4px);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow var(--transition-fast);
}
.nt-card:hover { box-shadow: var(--shadow-2); }
.nt-card:focus-visible { outline: none; box-shadow: var(--focus-ring), var(--shadow-2); }
/* Смуга пріоритету зліва — той самий знак, що в задачах */
.nt-card::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--nt-bar-medium);
}
.nt-card.prio-low::before    { background: var(--nt-bar-low); }
.nt-card.prio-high::before   { background: var(--nt-bar-high); }
.nt-card.prio-urgent::before { background: var(--nt-bar-urgent); }
.nt-card.is-done { opacity: .62; }
.nt-card.is-done .nt-title { text-decoration: line-through; }

.nt-top {
  display: flex; align-items: center; gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}
.nt-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  line-height: 1.6;
}
.nt-chip .material-icons-round { font-size: 14px; }
.nt-chip.type-note     { background: var(--nt-note-bg);     color: var(--nt-note-fg); }
.nt-chip.type-task     { background: var(--nt-task-bg);     color: var(--nt-task-fg); }
.nt-chip.type-reminder { background: var(--nt-reminder-bg); color: var(--nt-reminder-fg); }
.nt-chip.type-warning  { background: var(--nt-warning-bg);  color: var(--nt-warning-fg); }
.nt-chip.prio-high     { color: var(--nt-bar-high); background: color-mix(in srgb, var(--nt-bar-high) 12%, transparent); }
.nt-chip.prio-urgent   { color: var(--nt-bar-urgent); background: var(--nt-warning-bg); }
.nt-chip.status-done   { color: var(--color-text-muted); background: var(--color-surface-container); }

.nt-actions { margin-left: auto; display: flex; gap: 2px; }
.nt-act {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
}
.nt-act .material-icons-round { font-size: 19px; }
.nt-act:hover { background: var(--color-surface-container); color: var(--color-text); }
.nt-act.is-done:hover { color: var(--color-primary); }
.nt-act.is-del:hover  { color: var(--color-error); }

.nt-title {
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin: 0 0 var(--space-1);
  overflow-wrap: anywhere;
}
.nt-desc {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  white-space: pre-line;
  overflow-wrap: anywhere;
  margin-bottom: var(--space-2);
  /* Довгий опис не має розтягувати список: повністю — у панелі */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nt-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: var(--space-2); }
.nt-tag {
  background: var(--color-surface-container);
  color: var(--color-text-secondary);
  padding: 1px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
}

.nt-meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-1) var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.nt-meta > span, .nt-meta > a { display: inline-flex; align-items: center; gap: 4px; }
.nt-meta .material-icons-round { font-size: 15px; }
.nt-meta a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: var(--font-medium);
}
.nt-meta a:hover { text-decoration: underline; }
.nt-meta .nt-cad { font-family: var(--font-mono); }
.nt-due.is-late  { color: var(--color-error); font-weight: var(--font-semibold); }
.nt-due.is-today { color: var(--color-progress-warning); font-weight: var(--font-semibold); }
.nt-due.is-soon  { color: var(--color-secondary-700); font-weight: var(--font-medium); }

.nt-more {
  display: block;
  margin: var(--space-4) auto 0;
}

/* ─── Порожньо / завантаження ─── */
.nt-empty {
  text-align: center;
  padding: var(--space-12) var(--space-6);
}
.nt-empty > .material-icons-round {
  font-size: 3.5rem;
  color: var(--color-text-muted);
  display: block;
  margin-bottom: var(--space-4);
}
.nt-empty h5 { color: var(--color-text-secondary); }
.nt-empty p  { color: var(--color-text-muted); }

.nt-skel {
  height: 108px;
  border-radius: var(--radius-md);
  background: var(--color-surface-container);
  animation: nt-pulse 1.2s ease-in-out infinite;
}
@keyframes nt-pulse { 50% { opacity: .5; } }

/* ─── Форма в панелі ───
   Одним стовпчиком: панель вузька (360 px), як на карті */
.nt-form { display: flex; flex-direction: column; gap: var(--space-3); }
.nt-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.nt-field[hidden] { display: none; }
.nt-form .form-label {
  display: block;
  margin-bottom: var(--space-1);
  font-weight: var(--font-semibold);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}
.nt-form textarea { resize: vertical; min-height: 120px; }
.nt-parcel-link {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-primary);
  text-decoration: none;
}
.nt-parcel-link:hover { text-decoration: underline; }
.nt-form-foot { display: flex; gap: var(--space-2); }

/* ─── Тост ─── */
.nt-toast {
  position: fixed;
  bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: var(--z-toast, 9999);
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--text-sm);
  box-shadow: var(--shadow-3);
  pointer-events: none;
}
.nt-toast.is-error { background: var(--color-error); color: var(--color-on-error, var(--color-on-primary)); }

/* ─── Кругла кнопка на телефоні ─── */
.nt-fab {
  position: fixed;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  right: 1rem;
  z-index: var(--z-overlay);
  width: 52px; height: 52px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: none;
  box-shadow: var(--shadow-4);
  display: none;
  align-items: center; justify-content: center;
  cursor: pointer;
}
.nt-fab .material-icons-round { font-size: 24px; }

@media (max-width: 768px) {
  /* «Нова нотатка» на телефоні — кругла кнопка внизу, дубль у шапці зайвий */
  .nt-head .page-actions { display: none; }
  /* На телефоні шапка стає стовпцем, і align-items: center із ширшого
     екрана ставив заголовок посередині, а не з краю, як на решті сторінок */
  .nt-head { align-items: stretch; }
  .nt-fab { display: flex; }
  .nt-toast { bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }

  .nt-list { grid-template-columns: 1fr; }

  .nt-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 100%;
    scrollbar-width: none;
  }
  .nt-tabs::-webkit-scrollbar { display: none; }
  .nt-tab { flex-shrink: 0; font-size: var(--text-xs); }
}