.entries-info {
  font-size: 2.2rem;
  font-weight: 500;
  margin: 0;
}

.audit-date, .user__role {
  color: var(--audit);
  font-size: 1.4rem;
}

.date {
  color: var(--audit);
  font-size: 1.4rem;
}

.list-container {
  padding-top: 0em;
  margin-top: 2em;
}

.list-ctrls {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.list {
  padding: 2em 0;
}

.list-small {
  padding: 0;
  & .list-header, & .row, & .audit-date {
    font-size: 1.2rem;
  }

  & .icon {
    font-size: 1.8rem;
  }
}

.list-header,
.row {
  display: flex;
  justify-content: stretch;
  align-items: center;
}

.list-header {
  font-size: 1.4rem;
  line-height: 1.2;
  color: var(--black);
  min-height: 38px;
  border-bottom: 1px solid var(--border);

  
}

.sort_link {
  font-size: 1.4rem;
  text-decoration: none;
  color: var(--black);
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  border-radius: 999px;
  padding: 0.4em 1em;
  margin-left: -1em;

  &:hover {
    background-color: var(--clr-grey-200);
  }

  &.current {
    position: relative;
    color: #000;

    &::after {
      content: "arrow_downward";
      font: 1.6rem var(--font-icons);
      font-variation-settings: 'opsz' 24, 'wght' 300, 'FILL' 1, 'GRAD' 0;
      color: var(--black);
    }

    &.desc::after {
      content: "arrow_upward";
    }
  }
}

.popup-menu .sort_link {
  border-radius: 0px;  
  margin-left: 0;
}

.row {
  border-bottom: 1px solid var(--border);
  min-height: 48px;
  box-sizing: border-box;
  padding: 4px 0;
  font-size: 1.6rem;

  & .actions {

    & a,
    button {
      display: none;
    }
  }

  &.sortable-drag {
    border-bottom: none;
    background-color: var(--bg);

    & .handle {
      display: inline-flex;      
    }
  }

}

.handle {
  font-family: var(--font-icons);
  font-variation-settings: 'opsz' 24, 'wght' 300, 'FILL' 1, 'GRAD' 0;
  display: none;
  font-size: 20px;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: move;

  &:hover {
    background-color: var(--clr-grey-200);
  }
}

.list:not(:has(.row.sortable-chosen)) {
  & .row:hover {
    background-color: var(--hover);

    & .actions {
      & a,
      button,
      .handle {
        display: inline-flex;
        flex-shrink: 0;
      }
    }
  }
}

.cell {
  padding: 0 8px;
  flex: 1 1 0px;

  & ul {
    margin: 8px 0;
    padding: 0;
    list-style: none;

    & li {
      display: flex;
      align-items: center;
      gap: 0.4em;
    }
  }

  &.flags {
    flex: 0 0 auto;
    width: 40px;
  }

  &.with-cb {
    width: 40px;
    flex: 0 0 auto;
  }

  &.mono {
    font-size: 1.2rem;
    font-family: var(--font-mono);
  }

  &.actions {
    flex: 0 0 auto;
    text-align: right;
    width: 72px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  &.actions-one {
    width: 40px;
  }
  
}

.node__flags {
  font-size: 20px;
  color: var(--clr-grey-400);
  font-variation-settings: 'FILL' 0;
  display: flex;
  gap: 0;
}



.back-link {
  color: var(--secondary);
  text-decoration: none;
  font-size: 1.6rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;

  &::before {
    content: "arrow_back";
    font: 1.6rem/1 var(--font-icons);
    color: var(--secondary);
    margin-right: 0.4em;
  }
}

.pagination-container {
  color: var(--inactive);
  padding: 20px 0;
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 20px;
  font-size: 1.4rem;
}

.pagination {
  font: normal 3.2rem/40px var(--font-icons);
  font-variation-settings: 'opsz' 24, 'wght' 300, 'FILL' 1, 'GRAD' 0;
  display: flex;
  height: 40px;
  margin-right: 8px;
  align-items: center;

  & span {
    color: var(--border);
    width: 40px;
    height: 40px;
  }

  & a {
    display: block;
    width: 40px;
    height: 40px;
    text-align: center;
    color: var(--secondary);
    text-decoration: none;

    &:hover {
      color: var(--black);
    }
  }
}



.category-selector {
  font-size: 1.5rem;
  line-height: 1.6;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;

  & a {
    color: var(--black, #000);
    text-decoration: none;
    padding: 0.4em 0.8em;
    border-radius: 999px;
    background-color: var(--clr-grey-200);

    &.current {
      background-color: var(--clr-grey-750, #000);
      color: var(--white, #FFF);

      & span::before {
        content: 'done';
        font-family: var(--font-icons);
        font-variation-settings: 'opsz' 24, 'wght' 300, 'FILL' 1, 'GRAD' 0;
        font-size: 2.4rem;
        line-height: 1;
        margin-right: 2px;
        vertical-align: bottom;
      }
    }
  }

}

.list-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-left: -0.6em;
}


.node-path {
  display: flex;
  flex-wrap: wrap;

  gap: 0.2em;

  &>* {
    height: 48px;
  }

  & .list-title-link[data-icon] {
    display: inline-flex;
    gap: 6px;
    align-items: center;

    &::before {
      color: var(--data-icon-color, #717274);
      font-family: var(--font-icons);
      font-variation-settings: 'opsz' 24, 'wght' 300, 'FILL' 1, 'GRAD' 0;
      font-size: 3.2rem;
      line-height: 1;
      content: attr(data-icon);
    }
  }

  & .has-popup-menu {
    &::after {
      color: var(--black);
      font-family: var(--font-icons);
      font-variation-settings: 'opsz' 24, 'wght' 300, 'FILL' 1, 'GRAD' 0;
      font-size: 2.8rem;
      line-height: 32px;
      width: 20px;
      overflow: visible;
      content: 'expand_more';
    }
  }
}




.list-title .flex {
  display: flex;
  gap: 1em;

  & form {
    padding: 0;
    display: flex;

    align-items: center;
    gap: 4px;

    &>div {
      display: flex;
      flex-shrink: 0;
      flex-grow: 1;
      height: 48px;
      background-color: var(--clr-grey-200);
      border-radius: 999px;
      padding: 0 4px 0 1em;
      justify-content: start;
      align-items: center;
      gap: 8px;
      max-width: 300px;

      &:focus-within {
        outline: 2px solid var(--action);
      }
    }

    & input[type="text"] {
      background-color: transparent;
      border: none;
      flex-grow: 1;

      font-size: 1.6rem;
      line-height: 36px;
      height: 36px;
      padding: 0 0.4em;
      outline: none;
    }

    & button,
    a {
      font-size: 28px;
      line-height: 40px;
      text-align: center;
      width: 40px;
      height: 40px;
      padding: 0;
      border: none;
      background: none;
      color: var(--inactive);
      outline: none;
      border-radius: 50%;

      &:focus {
        background-color: var(--clr-grey-300);
        color: var(--black);
      }

      &:hover {
        background-color: var(--clr-grey-300);
        color: var(--black);
      }
    }
  }
}

.search__collection:has(input:placeholder-shown) {
  & .reset__search {
    display: none;
  }
}


#load-more {
  height: 1em;  
}

.utm {
  margin-top: 8px;
  font-size: 1.2rem;
  font-family: var(--font-mono);
  & .tag {
    font-size: 1.2rem;   
  }
}