:root {
  --pico-spacing: 0.75rem;
  --pico-border-radius: 0.5rem;
  --pico-form-element-spacing-vertical: 0.3rem;
  --pico-form-element-spacing-horizontal: 0.5rem;
  --compact-gap: calc(var(--pico-spacing) * 0.6);
}

button i[class^='icon-'],
h1 i[class^='icon-'],
h3 i[class^='icon-'],
th i[class^='icon-'] {
  vertical-align: middle;
}

.icon-only {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.3rem;
  padding-inline: 0.55rem;
}

.icon-only i[class^='icon-']:before {
  margin-left: 0;
  margin-right: 0;
}

.app-shell {
  padding-block: 0.9rem 1.4rem;
}

.notify-stack {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  width: min(28rem, calc(100vw - 2rem));
  display: grid;
  gap: 0.45rem;
  z-index: 1300;
}

.notify-item {
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  background: var(--pico-card-background-color);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  padding: 0.55rem 0.65rem;
  position: relative;
  padding-right: 2rem;
}

.notify-item.is-error {
  border-color: rgba(190, 50, 50, 0.45);
  background: rgba(220, 70, 70, 0.12);
}

.notify-item header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.3rem;
}

.notify-text {
  white-space: pre-wrap;
  font-size: 0.84rem;
}

.notify-close {
  position: absolute;
  top: 0.35rem;
  right: 0.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: 0.35rem;
  background: var(--pico-card-background-color);
  color: var(--pico-color);
  cursor: pointer;
  width: 1.4rem;
  height: 1.4rem;
  line-height: 1;
  font-size: 1rem;
  padding: 0;
  font-weight: 700;
}

.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#login-card,
#todos-card {
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  padding: var(--pico-spacing);
  background: var(--pico-card-background-color);
}

.view-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--compact-gap);
  margin-bottom: var(--compact-gap);
}

.view-nav button[aria-current='true'] {
  border-color: var(--pico-primary);
}

.toolbar,
.todo-create,
.admin-form {
  display: grid;
  gap: var(--compact-gap);
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

#reload {
  margin-left: auto;
}

#filter-reset {
  border-color: rgba(190, 50, 50, 0.5);
  color: #b31212;
}

#filter-reset:hover,
#filter-reset:focus-visible {
  background: rgba(220, 70, 70, 0.16);
  border-color: rgba(190, 50, 50, 0.7);
}

.toolbar > * {
  flex: 0 0 auto;
}

.toolbar input,
.toolbar select,
.toolbar button,
.todo-create input,
.todo-create select,
.todo-create button,
.admin-form input,
.admin-form select,
.admin-form button,
table {
  font-size: 0.875rem;
}

.toolbar input,
.toolbar select,
.toolbar button {
  margin-bottom: 0;
  width: auto;
}

.toolbar label {
  margin-bottom: 0;
  white-space: nowrap;
}

.toolbar button[aria-current='true'] {
  border-color: var(--pico-primary);
}

.todo-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--compact-gap);
  margin-top: var(--compact-gap);
  flex-wrap: wrap;
}

.todo-action-buttons {
  display: flex;
  gap: var(--compact-gap);
}

#todo-create-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  white-space: nowrap;
  transform-origin: center center;
  animation: todo-create-open-invite 5s infinite ease-in-out;
}

#todo-create-open i[class^='icon-']:before {
  margin-left: 0;
  margin-right: 0;
}

@keyframes todo-create-open-invite {
  0%,
  96%,
  100% {
    transform: rotate(0deg);
  }

  96.8% {
    transform: rotate(-1deg);
  }

  97.6% {
    transform: rotate(0deg);
  }

  98.4% {
    transform: rotate(-1deg);
  }

  99.2% {
    transform: rotate(1deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  #todo-create-open {
    animation: none;
  }
}

.filter-mode-row {
  display: flex;
  gap: var(--compact-gap);
  align-items: center;
}

.filter-mode-row button {
  min-height: 2.3rem;
  margin-bottom: 0;
}

.filter-mode-row button[aria-current='true'] {
  background: var(--pico-primary);
  border-color: var(--pico-primary);
  color: var(--pico-primary-inverse);
}

.kanban-board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(210px, 1fr);
  gap: var(--compact-gap);
  overflow-x: auto;
  padding-bottom: var(--compact-gap);
}

.kanban-column {
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  padding: var(--compact-gap);
  min-height: 230px;
  background: var(--pico-card-sectioning-background-color);
}

.kanban-column h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.kanban-dropzone {
  min-height: 100px;
  display: grid;
  gap: var(--compact-gap);
}

.todo-card {
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  padding: var(--compact-gap);
  background: var(--pico-card-background-color);
  cursor: grab;
}

.todo-card:active {
  cursor: grabbing;
}

.todo-card strong {
  display: block;
}

.linklike {
  border: 0;
  background: transparent;
  color: var(--pico-primary);
  padding: 0;
  margin: 0;
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
}

.todo-meta {
  display: flex;
  justify-content: space-between;
  gap: var(--compact-gap);
  color: var(--pico-muted-color);
  font-size: 0.8rem;
}

input.todo-due-soon,
.todo-meta .todo-due-soon {
  color: #b86d00;
}

input.todo-due-soon {
  border-color: color-mix(in srgb, #f3a533 62%, var(--pico-muted-border-color) 38%);
  background: color-mix(in srgb, #f3a533 14%, var(--pico-card-background-color) 86%);
}

input.todo-due-overdue,
.todo-meta .todo-due-overdue {
  color: #b53a3a;
}

input.todo-due-overdue {
  border-color: color-mix(in srgb, #d65050 66%, var(--pico-muted-border-color) 34%);
  background: color-mix(in srgb, #d65050 16%, var(--pico-card-background-color) 84%);
}

.todo-meta .todo-due-soon,
.todo-meta .todo-due-overdue {
  font-weight: 700;
}

.todo-foreign-row td {
  background: rgba(140, 148, 166, 0.16);
}

.todo-private-row td {
  background: rgba(220, 70, 70, 0.1);
}

.todo-updated-row td {
  background: rgba(95, 182, 120, 0.2);
}

.todo-card.todo-updated-card {
  background: rgba(95, 182, 120, 0.18);
  border-color: rgba(58, 140, 84, 0.45);
}

.todo-card.todo-due-soon-card {
  background: color-mix(in srgb, #f3a533 12%, var(--pico-card-background-color) 88%);
  border-color: color-mix(in srgb, #f3a533 54%, var(--pico-muted-border-color) 46%);
}

.todo-card.todo-due-overdue-card {
  background: color-mix(in srgb, #d65050 12%, var(--pico-card-background-color) 88%);
  border-color: color-mix(in srgb, #d65050 58%, var(--pico-muted-border-color) 42%);
}

.todo-new-badge {
  display: inline-block;
  margin-left: 0.3rem;
  color: #c73535;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
}

.todo-note-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.12rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--pico-muted-color);
  line-height: 1;
}

.todo-note-trigger:hover {
  color: var(--pico-color);
  border-color: var(--pico-primary);
}

.todo-note-popover {
  position: fixed;
  z-index: 2100;
  max-width: min(380px, calc(100vw - 1rem));
  border: 1px solid color-mix(in srgb, var(--pico-muted-border-color) 88%, #000 12%);
  border-radius: 0.55rem;
  background: var(--pico-card-background-color);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.2);
}

.todo-note-popover-content {
  padding: 0.6rem 0.7rem;
  color: var(--pico-color);
  font-size: 0.86rem;
  line-height: 1.35;
  white-space: normal;
}

.todo-card.todo-private-card {
  background: rgba(220, 70, 70, 0.12);
  border-color: rgba(190, 50, 50, 0.35);
}

.todo-legend {
  margin-top: 0.5rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--compact-gap);
}

.todo-legend-left {
  display: flex;
  flex-wrap: wrap;
  gap: var(--compact-gap);
}

.todo-legend-left small {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid color-mix(in srgb, var(--pico-muted-border-color) 90%, #000 8%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--pico-card-background-color) 96%, var(--pico-primary) 4%);
}

#online-users {
  justify-self: end;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.35rem;
}

.online-users-label {
  color: var(--pico-muted-color);
  font-weight: 600;
}

.online-user-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border: 1px solid color-mix(in srgb, var(--pico-muted-border-color) 90%, #000 8%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--pico-card-background-color) 96%, var(--pico-primary) 4%);
}

#help-open {
  justify-self: center;
}

.help-content {
  max-height: 60vh;
  overflow: auto;
}

.help-content h2,
.help-content h3,
.help-content h4 {
  margin-top: 0.7rem;
  margin-bottom: 0.35rem;
}

.help-content p,
.help-content ul {
  margin-bottom: 0.45rem;
}

.help-content strong {
  color: var(--pico-primary);
  font-weight: 700;
}

.help-content ul {
  padding-left: 1.1rem;
}

.legend-chip {
  display: inline-block;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 0.25rem;
  margin-right: 0.35rem;
  vertical-align: text-bottom;
  border: 1px solid transparent;
}

.legend-chip.legend-private {
  background: rgba(220, 70, 70, 0.12);
  border-color: rgba(190, 50, 50, 0.35);
}

.legend-chip.legend-foreign {
  background: rgba(140, 148, 166, 0.16);
  border-color: rgba(120, 128, 145, 0.35);
}

.kanban-board.kanban-hide-meta .todo-meta {
  display: none;
}

.kanban-dropzone.is-over {
  outline: 2px dashed var(--pico-primary-border);
  outline-offset: 3px;
}

.admin-grid {
  display: grid;
  gap: var(--compact-gap);
  grid-template-columns: minmax(0, 1fr);
  max-width: 100%;
}

#admin-subtabs {
  margin-bottom: 0;
}

.admin-pane {
  display: block;
}

.compact-card {
  padding: var(--compact-gap);
}

table th,
table td {
  padding: calc(var(--compact-gap) * 0.8) var(--compact-gap);
  vertical-align: middle;
}

.sortable-header {
  user-select: none;
  white-space: nowrap;
}

.sortable-header::after {
  content: '↕';
  display: inline-block;
  margin-left: 0.25rem;
  vertical-align: middle;
  color: var(--pico-muted-color);
  font-size: 0.78em;
}

.sortable-header > i[class^='icon-'] {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.sortable-header.is-sorted[data-sort-dir='asc']::after {
  content: '↑';
  color: var(--pico-primary);
}

.sortable-header.is-sorted[data-sort-dir='desc']::after {
  content: '↓';
  color: var(--pico-primary);
}

.table-wrap {
  overflow-x: auto;
  max-width: 100%;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  background: var(--pico-card-background-color);
  scrollbar-gutter: stable both-edges;
}

.table-wrap table select,
.table-wrap table input[type='date'],
.table-wrap table input[type='datetime-local'] {
  min-width: 100px;
}

.admin-users-table,
.admin-teams-table {
  min-width: 860px;
  table-layout: auto;
}

.admin-users-table th,
.admin-users-table td,
.admin-teams-table th,
.admin-teams-table td {
  white-space: nowrap;
}

.admin-users-table input,
.admin-users-table select,
.admin-teams-table input {
  width: 100%;
  min-width: 130px;
  margin-bottom: 0;
}

.admin-users-table input[type='checkbox'] {
  width: auto;
  min-width: 0;
}

.admin-users-table td:last-child {
  min-width: 150px;
}

.admin-users-table td:nth-child(4) {
  min-width: 260px;
  white-space: normal;
}

.admin-users-table td:nth-child(3) {
  min-width: 140px;
}

.role-toggle {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--compact-gap) * 0.6);
  white-space: nowrap;
}

.team-multi {
  min-height: 5.8rem;
}

.admin-users-table td:nth-child(4) small {
  display: block;
  margin-top: calc(var(--compact-gap) * 0.4);
  color: var(--pico-muted-color);
  white-space: normal;
  line-height: 1.2;
}

.admin-users-table td:last-child button {
  margin-right: 0;
}

.action-menu summary {
  margin-bottom: 0;
}

.action-menu ul {
  min-width: 11rem;
}

.action-menu ul li {
  margin-bottom: 0;
}

.action-menu ul button {
  width: 100%;
  margin: 0;
}

.action-inline {
  display: grid;
  gap: calc(var(--compact-gap) * 0.5);
}

.member-picks {
  display: grid;
  gap: calc(var(--compact-gap) * 0.4);
  max-height: 8rem;
  overflow: auto;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  padding: calc(var(--compact-gap) * 0.6);
  background: var(--pico-background-color);
}

.member-picks label {
  margin-bottom: 0;
  white-space: nowrap;
}

.todo-done {
  text-decoration: line-through;
  opacity: 0.7;
}

.list-select-updated {
  animation: list-select-pulse 0.9s ease;
}

.list-overview {
  display: grid;
  gap: calc(var(--compact-gap) * 0.8);
  margin-top: calc(var(--compact-gap) * 0.9);
  margin-bottom: calc(var(--compact-gap) * 0.9);
}

.list-overview-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--compact-gap) * 0.7);
}

.list-overview-title {
  color: var(--pico-muted-color);
  min-width: 4.2rem;
}

.list-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.26rem 0.55rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: 999px;
  background: var(--pico-card-background-color);
  font-size: 0.78rem;
  color: inherit;
}

.list-pill.is-active {
  border-color: var(--pico-primary);
  color: var(--pico-primary);
}

@keyframes list-select-pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--pico-primary) 30%, transparent);
    border-color: var(--pico-primary);
  }
  100% {
    box-shadow: 0 0 0 10px transparent;
    border-color: var(--pico-muted-border-color);
  }
}

#message {
  min-height: 1.3rem;
}

#todo-modal article {
  width: min(860px, 96vw);
  max-height: 92vh;
  overflow: auto;
}

#todo-create-modal article {
  width: min(860px, 96vw);
  max-height: 92vh;
  overflow: auto;
}

#todo-modal .admin-form {
  margin-bottom: 0;
}

#todo-edit .todo-edit-flags {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

#todo-edit .todo-edit-completed {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0;
  padding: 0.2rem 0.55rem;
  border: 1px solid color-mix(in srgb, #5fb678 55%, var(--pico-muted-border-color) 45%);
  border-radius: 999px;
  background: color-mix(in srgb, #5fb678 16%, var(--pico-card-background-color) 84%);
}

#todo-edit .todo-edit-archived {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0;
  padding: 0.2rem 0.55rem;
  border: 1px solid color-mix(in srgb, #8c94a6 55%, var(--pico-muted-border-color) 45%);
  border-radius: 999px;
  background: color-mix(in srgb, #8c94a6 12%, var(--pico-card-background-color) 88%);
}

.todo-edit-activity-wrap {
  margin-top: 0.25rem;
  overflow: auto;
}

.todo-edit-activity-table-wrap {
  max-height: 12rem;
  overflow-y: auto;
  overflow-x: auto;
}

.todo-edit-activity-table-wrap table {
  font-size: 0.78rem;
  min-width: 600px;
}

.todo-edit-actions {
  display: flex;
  gap: var(--compact-gap);
  position: sticky;
  bottom: 0;
  z-index: 2;
  padding-top: 0.45rem;
  padding-bottom: 0.1rem;
  background: var(--pico-card-background-color);
  border-top: 1px solid var(--pico-muted-border-color);
}

.todo-edit-actions > button {
  flex: 1 1 0;
}

.todo-create-actions {
  display: flex;
  gap: var(--compact-gap);
  position: sticky;
  bottom: 0;
  z-index: 2;
  padding-top: 0.45rem;
  padding-bottom: 0.1rem;
  background: var(--pico-card-background-color);
  border-top: 1px solid var(--pico-muted-border-color);
}

.todo-create-actions > button {
  flex: 1 1 0;
}

.confirm-delete-text {
  margin: 0 0 0.9rem;
}

.confirm-delete-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--compact-gap);
}

#todo-edit-delete,
#todo-delete-confirm-yes {
  background: #c73535;
  border-color: #a92b2b;
  color: #fff;
}

#todo-edit-delete:hover,
#todo-delete-confirm-yes:hover {
  background: #ad2d2d;
  border-color: #922525;
}

.inline-two {
  display: grid;
  gap: var(--compact-gap);
  grid-template-columns: 1fr;
}

#show-completed, #show-done {
  width: 24px;
}

@media (min-width: 768px) {
  .todo-create {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .admin-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 600px) {
  .inline-two {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .todo-edit-actions,
  .todo-create-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}
#search {
  width: min(18rem, 100%);
  min-width: 10rem;
}

#assignee-filter,
#list-filter {
  min-width: 10rem;
}

.asset-version-badge {
  position: fixed;
  right: 0.6rem;
  bottom: 0.6rem;
  z-index: 1000;
  max-width: min(92vw, 760px);
  padding: 0.22rem 0.45rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: 0.35rem;
  background: var(--pico-card-background-color);
  color: var(--pico-muted-color);
  font-size: 0.68rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.site-credit {
  margin-top: 0.9rem;
  text-align: center;
  color: var(--pico-muted-color);
  font-size: 0.78rem;
}

.site-credit a {
  font-weight: 600;
}

@media (max-width: 767px) {
  .asset-version-badge {
    left: 0.6rem;
    right: 0.6rem;
    max-width: none;
  }
}