/* --- Board header --- */
.folder-board__actions { display: flex; gap: var(--toddyi-size-0-6rem); align-items: center; flex-wrap: wrap; }
.new-folder-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--toddyi-size-0-4rem);
  padding: var(--toddyi-size-0-6rem) var(--toddyi-size-1-1rem); border-radius: var(--toddyi-size-2rem);
  white-space: nowrap; font-weight: 700; background: transparent; color: var(--pico-primary);
  border: var(--toddyi-size-1px) solid var(--pico-primary); transition: transform 0.15s ease, background 0.15s ease;
}
.new-folder-btn::before { content: "+"; font-size: var(--toddyi-size-1-2rem); font-weight: 700; line-height: 0.8; }
.new-folder-btn:hover { background: color-mix(in srgb, var(--pico-primary) 12%, transparent); color: var(--pico-primary); }
.new-folder-btn:active { transform: scale(0.96); }

.board-search-row { display: flex; gap: var(--toddyi-size-0-75rem); align-items: stretch; margin-bottom: var(--toddyi-size-1-5rem); }
.board-search {
  position: relative; flex: 1; display: flex; align-items: center;
  background: var(--pico-card-background-color);
  border: var(--toddyi-size-1px) solid var(--pico-muted-border-color);
  border-radius: var(--toddyi-size-2rem); box-shadow: var(--toddyi-card-shadow);
  padding-inline-start: var(--toddyi-size-1rem);
}
.board-search__icon { width: var(--toddyi-size-1-2rem); height: var(--toddyi-size-1-2rem); stroke-width: var(--toddyi-size-2px); color: var(--pico-muted-color); flex-shrink: 0; }
.board-search input[type="search"] {
  margin: 0; border: none; background: transparent; box-shadow: none;
  padding: var(--toddyi-size-0-85rem) var(--toddyi-size-1rem); font-size: var(--toddyi-size-1rem); width: var(--toddyi-size-100pct);
}
.board-search input[type="search"]:focus { box-shadow: none; }
/* color: uses --toddyi-text-body, not --pico-color: this is a <button>, and
   Pico redefines --pico-color to the primary inverse on the element. (#203) */
.board-filter-btn {
  display: inline-flex; align-items: center; gap: var(--toddyi-size-0-4rem); white-space: nowrap;
  padding: var(--toddyi-size-0-6rem) var(--toddyi-size-1-1rem); margin: 0; width: auto;
  border-radius: var(--toddyi-size-12px); border: var(--toddyi-size-1px) solid var(--pico-muted-border-color);
  background: var(--pico-card-background-color); color: var(--toddyi-text-body); font-weight: 600; box-shadow: var(--toddyi-card-shadow);
}
.board-filter-btn svg { width: var(--toddyi-size-1-1rem); height: var(--toddyi-size-1-1rem); stroke-width: var(--toddyi-size-2px); }
.board-filter-btn:hover { background: color-mix(in srgb, var(--pico-primary) 8%, transparent); }
.board-filters-tray { margin-bottom: var(--toddyi-size-1-25rem); }
.board-filters-tray .grid { margin: 0; }
.board-filters-tray label span { display: block; font-size: var(--toddyi-size-0-85rem); font-weight: 600; margin-bottom: var(--toddyi-size-0-2rem); }
.board-filters-tray select { margin: 0; }

/* --- Folder cards --- */
.folder-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--toddyi-size-100pct), var(--toddyi-size-360px)), 1fr));
  gap: var(--toddyi-size-1-25rem);
  align-items: start;
}
.folder-card {
  margin: 0; padding: var(--toddyi-size-1-1rem) var(--toddyi-size-1-25rem);
  border-radius: var(--toddyi-size-16px);
  background: var(--pico-card-background-color);
  box-shadow: var(--toddyi-card-shadow);
  display: flex; flex-direction: column;
}
.folder-card__header {
  display: flex; justify-content: space-between; align-items: center; gap: var(--toddyi-size-0-5rem);
  padding-bottom: var(--toddyi-size-0-75rem);
  border-bottom: var(--toddyi-size-1px) solid var(--pico-muted-border-color);
}
.folder-card__name { display: flex; align-items: center; gap: var(--toddyi-size-0-4rem); font-weight: 700; font-size: var(--toddyi-size-1-1rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-card__count {
  flex-shrink: 0; min-width: var(--toddyi-size-1-6rem); text-align: center;
  font-size: var(--toddyi-size-0-8rem); font-weight: 700; padding: var(--toddyi-size-0-1rem) var(--toddyi-size-0-55rem);
  border-radius: var(--toddyi-size-1rem); background: color-mix(in srgb, var(--pico-primary) 10%, transparent); color: var(--pico-muted-color);
}
.folder-card__tasks { display: flex; flex-direction: column; min-height: var(--toddyi-size-2-5rem); border-radius: var(--toddyi-size-0-6rem); transition: background 0.15s ease, box-shadow 0.15s ease; }
.folder-card__tasks.is-over { background: color-mix(in srgb, var(--pico-primary) 12%, transparent); box-shadow: inset 0 0 0 var(--toddyi-size-2px) var(--pico-primary); }
.folder-nav.is-over { background: color-mix(in srgb, var(--pico-primary) 18%, transparent); box-shadow: inset 0 0 0 var(--toddyi-size-2px) var(--pico-primary); }

/* --- Task inside a card --- */
.folder-task { display: flex; flex-direction: column; gap: var(--toddyi-size-0-5rem); padding: var(--toddyi-size-0-85rem) var(--toddyi-size-0-15rem); cursor: grab; }
.folder-task + .folder-task { border-top: var(--toddyi-size-1px) solid var(--pico-muted-border-color); }
.folder-task.is-dragging { opacity: 0.4; cursor: grabbing; }
.folder-task.is-completed { opacity: 0.55; }
.folder-task__title-row { display: flex; align-items: center; gap: var(--toddyi-size-0-6rem); }
.folder-task__bullet { flex-shrink: 0; width: var(--toddyi-size-0-4rem); height: var(--toddyi-size-0-4rem); border-radius: var(--toddyi-size-2px); background: var(--pico-color); opacity: 0.85; }
.folder-task__title { font-size: var(--toddyi-size-1rem); font-weight: 600; color: var(--pico-color); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-task__title:hover { color: var(--pico-primary); }
.folder-task.is-completed .folder-task__title { text-decoration: line-through; }
.folder-task__footer { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--toddyi-size-0-5rem) var(--toddyi-size-0-5rem); }
.folder-task__footer .task-meta { grid-column: 1; }
.folder-task__actions { grid-column: 2; justify-self: end; display: flex; gap: var(--toddyi-size-0-4rem); align-items: center; margin: 0; }
.folder-task__footer .priority-badge { grid-column: 1; justify-self: start; }
.folder-task__delete { grid-column: 2; justify-self: end; margin: 0; }

.board-hint { margin-top: var(--toddyi-size-1-5rem); text-align: center; color: var(--pico-muted-color); font-size: var(--toddyi-size-0-88rem); }

@media (max-width: 768px) {
  .tasks-board { grid-template-columns: 1fr; }
  .folder-sidebar { position: static; }
}

@media (max-width: 600px) {
  /* Three labelled action buttons leave the date roughly a third of the card,
     which is not enough for "Due: Aug 27, 17:48". The icons carry the same
     meaning in less space, and the labels stay in the accessibility tree
     rather than being display:none. (#204) */
  .folder-task__actions .task-action-btn span,
  .folder-task__delete .task-action-btn span {
    position: absolute;
    width: var(--toddyi-size-1px);
    height: var(--toddyi-size-1px);
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* The heading, its subtitle and the two actions were competing for one row,
     so the subtitle wrapped and the buttons sat against it. */
  .page-header { flex-direction: column; align-items: flex-start; }
  .folder-board__actions { width: var(--toddyi-size-100pct); }
}

/* On the folder board the folder sidebar is the only persistent sidebar; the
   app nav collapses behind the top-bar hamburger (drawer), matching the
   wireframe and avoiding a stacked double sidebar. Desktop only. (#1) */
@media (min-width: 769px) {
  body:has(.tasks-board) .sidebar {
    position: fixed; top: 0; inset-inline-start: 0; height: var(--toddyi-size-100vh); width: var(--sidebar-w);
    transform: translateX(-100%); transition: transform 0.18s ease; z-index: 60;
  }
  html.sidebar-open body:has(.tasks-board) .sidebar { transform: translateX(0); width: var(--sidebar-w); }
  html.sidebar-open body:has(.tasks-board) .sidebar__label,
  html.sidebar-open body:has(.tasks-board) .sidebar .nav-link > span:not(.nav-emoji) { display: inline; }
  html.sidebar-open body:has(.tasks-board) .sidebar-overlay { display: block; }
  body:has(.tasks-board) .topbar__burger { display: inline-flex; }
}